JS1k is a really nice contest for coding tiny 1 kb Javascript programs and try to do something nice in that few available space. In its second edition, all the entries must be Christmas themed.

My contribution to the contest has been a 3D Christmas tree (note it doesn’t work in IE, and works slow in any current browser except in Chrome). I’m really lazy to write articles explaining how I do my visual effects, but in this case a lot of people are asking me to do it, so let’s try it in a visual way:

Finally, some size optimization tricks

I used several tricks to make the code fit in 1 kb. The most of them are the usual tricks for reducing Javascript code size, like renaming variables to single character names, removing white spaces, unnecesary semi-colons and so on.

It is also very common to assign functions you use more than one time to variables to avoid the repetition. For example, if I do r=Math.random;, I can call r() each time I need a random number.

I used some few math tricks, like using cos(angle+11) to approximate sin(angle) and modular arithmetic.

Finally, I’ve used some other tricks like reusing functions. A function does different things depending on if it received parameters or not. This saves some few bytes from writing again “function”.

Writing code for limited size competitions is mostly like a puzzle or logical game. In the most of the cases there is not a common rule to do it, but just thinking and trying different ways to achieve the same goal in less space. It is usually possible to fit 5 or 6 kb of normal code in 1 kb if you try it and don’t give up.

Excellent work, very impressive demo! Thanks for writing it up as I have been wondering how you pulled off such a neat and tidy effect in 1K. Any chance you write up the snowman demo from the original JS1K demo next? :)

Lon el 16 de Diciembre del 2010:

No doubt that is amazing, and you did a beautiful job! However, I’d love to see you push it over the top and make it interactive… So the user can grab it and spin it with the mouse. :)

Not sure if it’s intentional, but the rotating wireframe image in your article makes for one of those optical illusions where you can make the tree spin in either direction if you stare at it long enough.

Answer: when I was doing that gif animation I was near sure that somebody was going to write a comment about it: “CW or CCW?”. So, yes, I was aware of the effect and its resemblance with the dancer animation, but it was not on purpose to do it that way. It just happens because the original Javascript code doesn’t have perspective, so I wanted the vectors to be shown the same way (in fact, I rendered it with Javascript, using as base the same code), and also the only fast way to do that animation was by using flat gray color points. So, it is the same case as of the dancer: same exact color for all the object, no perspective.

Paul Wilkins el 22 de Diciembre del 2010:

Because B*L is only going to be a very tiny figure, can’t we remove that entirely without affecting the visual appearance of the tree?

From: (R+B*L>>0)
To: R

Then then B assignment part can be moved in to the one-and-only place that it’s used, and we’ve easily chopped off 12 more chars

[…] programs and try to do something nice in that few available space. Román Cortés has created a a 3D Christmas tree. It’s amazing. Here is the demo, check it out. . . Related PostsHead JS: Speed up Your […]

[…] On Script Loaders – the creator of LABjs responds to the newer HeadJS and ControlJS libraries How I did the 1kb Christmas Tree – Román Cortés goes into detail about how he created the 3D canvas Christmas […]

I will repeat what others said earlier, but I compared speed of this code under Chrome and Opera 11 and opera seems even faster (comparison was purely visual, I didn’t make any measurements :)). So I think you can recommend Chrome OR Opera to view this one :)

[…] tutorial explaining how and why the code works. There’s also a great write-up on Cortés’ previous JS1K effort, a 3-D Christmas tree. Also be sure to check out the other submissions to this year’s JS1K […]