js1K Entry – Grass

20100807 Updated: now starry heaven moves, and in only 1002 bytes.
20100810 Updated: added more control on grass creation. Stars move in different motion speed. 1007 bytes.
20100816 Updated: added a swarm of fireflies (tried to). I thought black grass looked better than green one. Finally, I decided it did not. 1023 bytes.

Some of the optimizations i’ve used are:

1.- Redefine math functions. Instead of using Math.sin, Math.random, Math.floor, I’ve used the following;
m=Math;
c=m.cos;
s=m.sin;
_=m.floor;
$=m.random
$$=Math.PI
thus, you can use more compact calls, so that something like var x= Math.floor(Math.random()*Math.sin(timer*.00005)) can be expressed as: var x=_($()*s(timer*.00005));. And since I’ve been using these functions extensively, I can obtain big bytes savings.

2.- Use closure compiler to give the source code a big crunch as well as a neat obfuscation. However, closure compiler tries to write numbers in a more human readable manner than needed. In example, it writes 0.5 and 3.0E4, while just .5 and 3E4 are needed. You can save a few more scarce bytes with this trick.

3.- Optimized declaration of function() and removed them at all, by issuing a change from
setInterval( my_function, 30 ) to setInterval(function(){…}, 30);

4.- I’m using a gradient in the background with four components. Color components are:
["#000000","#002f7f","#002850","#001f3f"], so I changed them to ["0000","2f7f","2850","1f3f"] and appended ‘#00′ in the gradient loop setup.

5.- Stars.
5.1 Changed the stars set up loop from:
for(i=0; i<1500; i++ ) {
stars[i*2 ]= Math.random()*width;
stars[i*2+1]= Math.random()*height;
}

to

for(i=3E3;i–;) {
stars[i]= $()*width;
}

in fact, I was not bothered by the fact that some stars got out of the screen.

5.2 Drawing stars:
instead of
for( var i=0; i<1500; i++ ) {
context.fillRect(stars[i*2], stars[i*2+1], 1, 1);
}

I use

for(i=0;i<3E3;) {
context.fillRect(k[i++],k[i++],1,1);
}

6.- Optimize numbers.
change numbers such at 3000 to 3E4, and .0005 to 5E-4, and thus save one more byte by number declaration.

7.- Changed loops with array.length limit to the exact numbers of elements. In stars, changed for( var i=0; i<3E3; i++). Another small saving.

8.- If using colors, you could use color names instead of rgb(r,g,b) or ‘#rrggbb’ declarations. I.E. ‘white’ is two bytes shorter than ‘#ffffff’.

9.- Access context2D functions via the associative feature. I’m using bezierCurveTo as well as fillRect and fillStyle functions in more than one place. So I changed ctx.bezierCurveTo(…) to the following:
B=’bezierCurveTo’; ctx[B](…) which saved some bytes.

10.- I also had to prune some features, like background transition of gradient colors :].

There’re plenty more optimizations which are over my knowledge.

And here it is the obfuscated script itself:

It started to be a 2048 bytes class-based readable javascript file, and after some feature pruning, it turned up into what you see. a pile of unuseful code.