How I did the 1kb Christmas Tree
15 de Diciembre del 2010JS1k 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.
Nicely done! And massive kudos for the write up! I know that writing this kind of explanations can be even harder than creating the actual demo.
Very impressive result for such a small amount of code, congrats !
BTW, the speed is pretty good with Firefox 4 nightly builds ;)
Wonderful! And respect for sharing this knowledge with the rest of us :) cheers!
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? :)
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. :)
Javascript could not believe such a powerful
Thanks for the writeup! I am definitely going to play with this technique in my own stuff. It helps so much when people share how they do great things, it makes everybody greater.
Cheers!
[…] 作者技术解释: http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/ […]
Impresionante!
Incredible work. Again Román shows us a huge talent.
[…] Felices fiestas con Javascript de 1kb http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/ por NormaJean el 23:28 UTC publicado el 23:28 UTC […]
Impressive! I also liked very much your 1kb from the first JS1k.
[…] la nueva obra de arte de Román Cortés, les recomiendo lean los detalles de cómo fue creado este alucinante arbolito […]
[…] 作者原文里有详细的原理解析。 […]
Una obra de arte! imprecionante,siempre me ha imprecionado la forma en que trabaja Javascript y todos los demas lenguajes. Un saludo desde Corona California USA.Keep up the excellent work!!!
Amazing! by the way, it barely works on IE9, barely, but works!
Could you send me the formatted code.thx.
[…] http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/ 你可能还喜欢下面这些:抱歉,我没找到其它的……上Google搜索吧! […]
[…] 作者原文里有详细的原理解析。 […]
[…] http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/ […]
The vectors are 3D, not 2D; the rotation formula doesn’t apply.
Doesn’t work in Chrome
A little slow but very nice.. Good job!
It works perfectly in Safari too, since it, as with Chrome is a webkit browser.
works in IE9
nice job !, btw it works fine on opera too.
[…] by alecdo to programming [link] [80 comments] reddit: the voice of the internet — news before it happens @ […]
Any chance of publishing the original source code? I’d love to hack it a little bit and to be able to understand things a little bit further.
Answer: I’m sorry André, but that was the original source. Well, with some few new lines on it, but mostly the same. Maybe I could try to do a clear version of it…
Umm, where’s the star?
Works smoothly in Firefox. Chrome isn’t the fastest browser any more.
it works on chrome 8.0.522
Are you using x’ to determine the drawn x, and y’ to determine which sprites are closer to the camera?
good job! it’s really nice!
i believe that programming is 10% code and 90% comments/explanation
that being said, I hate doing write ups for my work too!
I can report it works nice and fast in Opera 11 too.
[…] este caso, Román Cortés, nos deleita con su algoritmo, con el que ha concursado en la competición de demos de menos de 1k (segunda edición, motivos […]
Works perfectly in Opera
Opera 11: works fine,
>> works slow in any current browser except in Chrome)
Did you mean Firefox only? :)
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.
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
[…] for all snow-plagued UK folkAsterix and Wikilix are comics about wikileaksA great writeup how the 1K JavaScript Christmas Tree was […]
[…] 在网上瞎逛时,看到1kb大小的圣诞树js代码,看了一下效果,相当地赞,不过需要html5支持(我猜的,看代码要用到canvas),有兴趣地可以看看demo和原理解释。现在暂时没有兴趣研究代码,不过先收藏着也不错。 […]
This is amazing. Thank you! I just can’t believe how slow this is in Firefox… Chrome has no problem with rendering it fast but even Firefox 4 Beta 8 can’t handle it…. I hope they speed it up
[…] programs and try to do something nice in that few available space. Román Cortés has created a a 3D Christmas tree. He used several tricks to make the code fit in 1 […]
[…] 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 […]
It’s amazing, I thought it was Flash.
[…] programs and try to do something nice in that few available space. Román Cortés has created a a 3D Christmas tree. He used several tricks to make the code fit in 1 […]
[…] you all have a merry Xmas, possibly a very geeky one (and if you can’t just try this link, I’m sure this will cheer you up). Stay warm and stay safe. (via) tagged G33kg1rl […]
[…] 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 […]
[…] 「How I did the 1kb Christmas Tree」というエントリーにて、ぐるぐる回るクリスマスツリーを1KB以内のJavaScriptコードで作った人がいるようです。 […]
相当的赞啊
Fantastic work!
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 :)
吃饱撑的!
[…] Román Cortés y su arbolito de navidad en 3D que participó en el JS1k navideño. Impresionó, compartió la forma como lo hizo y todo en inglés para llegar a mercados más […]
Awesome! thx for the explanation. :D
CPU intensive, very slow on iphone.
too bad beacause the rendering is pretty good.
it need more optimisation, or a new phone ^^
Impresionante. A grandes rasgos parece una versión algo mas sofisticada de tu bola de pelo que posteaste un tiempo atrás. Estupendo ejemplo de optimización en cuanto a tamaño :-)
[…] 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 […]
[…] of optimisations have been done for JS1K in the past was also helpful, including blog entries by Román Cortés, Skilldrick, and […]
[…] How I did the 1kb Christmas Tree […]
[…] is one of few who can explore some interesting innovative uses of CSS. His explanation of a 1kb chrismas tree is a whirlwind of frontend […]
[…] is one of few who can explore some interesting innovative uses of CSS. His explanation of a 1kb chrismas tree is a whirlwind of frontend […]
[…] How I did the 1kb Christmas Tree […]
It works fine in IE10, and I’m glad I was able to see it! It is beautiful! You have my praise and respect :)