Go to bottom

JS1k, 1k Javascript demo contest

category: code [glöplog]
PauloFalcao: Very impressive! Would love to read a short making of :)
added on the 2010-09-08 17:01:31 by mrdoob mrdoob
Even I would want to read about it!
added on the 2010-09-08 17:12:27 by __ __
PauloFalcao: excellent!!!
added on the 2010-09-08 17:15:17 by Jcl Jcl


This was possible because i spend my 2 weeks vacations at my mother-in-law house in the middle of nowhere with no Internet! So lots of time left to optimize for size LOL

I have a crap intel video card, so running shaders in the CPU using C++ is something i was doing a long time. Compilling C is incredibly more fast then compiling shading code.

For the shader to run fast i normally use dynamic resolution change to keep a fixed framerate, the resolution on the CPU is much smaller... but... it works! And compile fast ;)

The process was pretty straight forward.

0 - I have a bunch of experiments (more then 100... lol) using raymarching with distance fields stuff in my drive made using RenderMonkey, very cool tool and it works nice with my crap intel card LOL:)
1 - I choose one of the experiments that i liked. At that time i never thought that was possible to convert it to javascript in 1k, the original effect in HLSL was about 3.5k, and in JS i had no vector stuff.
2 - I first reduce the HLSL to 1.6K
3 - Then i converted the code to JS, it was fixed framerate with dynamic resolution change and full browser with a black background like my first entry, it was about 3.5K, and was very slow on Firefox because this initial version was creating a lot of new objects each pixel.
4 - I made another version that did not create new objects each pixel, it was much faster in firefox but it was also was bigger... (4K)
5 - I spend countless hours optimizing the two versions for size.
6 - I created a JS compressor that look strings repeated in the code, and replace that string with a char (i used the first unicode chars for that), this process runs recursively until no more compression is possible.
7 - After removing some features like the dynamic resolution, color range check (necessary in Opera), and the dynamic color in the blob stuff, the compressed code still had 40 bytes missing in the slow version and 70 bytes in the fast one.
8 - I continued to optimize and came up with the first version with 1K, it was the slow version with some features missing.
9 - I continued to optimize, was able to put again the color range check and the color on the blob stuff and use the fast version! Perfect!
10 - Submitted the 1KJS for approval ;)

I was really pleased to be able to put in 1K Javascript the exact same effect that i had done in HLSL :)
Wow, that's amazing!!!
Knowing how slow raymarching can be, especially tried on CPU, this thing looks amazing. And the colour/blob stuff beautiful.
added on the 2010-09-09 02:05:36 by Optimus Optimus
I also submitted something small. I had only 1 day to code and optimize, filled the last bytes with interactivity instead of new effects.

added on the 2010-09-09 12:06:22 by TGGC TGGC

The coolest hack in this program is probably the mechanized abbreviation of the canvas context methods. Method names like quadraticCurveTo, createLinearGradient are nice and explicit, but those two taken together already eat 3.5% of the bytes available---when only referenced once! I needed to use them, but I wanted to avoid spelling them.

Turns out I can get away with that. At the start of the program there is a for/in loop that goes over the properties of the canvas context, and adds a new property, with a shorter name, for each of them. It took some experimenting to find an abbreviation algorithm that doesn't have clashes on any of the methods we use---I ended up using the first letter of the name plus the the 7th letter, if any. So lineTo becomes l, and quadraticCurveTo becomes qt. I can then use these short names to actually access the methods---without ever having written out the full name.

This does, of course, not work for properties like fillStyle. You can copy those, but the copies won't do anything.
added on the 2010-09-09 12:37:42 by ponce ponce
In other words: import by hash :-)
added on the 2010-09-09 12:50:17 by gasman gasman
added on the 2010-09-09 13:59:03 by p01 p01
Although my vote would go to Inopia by default, that's some quality work there, Paulo :)
added on the 2010-09-09 14:18:25 by sagacity sagacity
plainoldsagacity and Optimouse , Thanks! :)

Wow, the mechanized abbreviation of the canvas context methods is a very cool trick! :P In my case i just use getImageData and putImageData methods, but in other cases like his game it can really make a difference.
A possible downside to that trick (particularly with such a simple 'hash function' as taking the 1st+7th letters) is that it's liable to hit collisions in future browser releases if they add new properties - and given the in-flux status of HTML5, and browser makers' habits of throwing in proprietary extensions, I'm not sure that's a risk I'd want to take. Or do people reckon that Canvas2DContext is more or less stable now?
added on the 2010-09-09 15:05:10 by gasman gasman
gasman: maybe it is not something to do for any production status software and/or open source library, but for a compo that ends in few days (tomorrow at the moment of writing this), it seems more than fine... Also, if it doesn't work in 3-4 years in any browser, I don't think anybody is going to miss it...
added on the 2010-09-09 21:32:48 by texel texel
texel: Sure - I'm just seeing parallels with the Windows 4K world, and the way that they all used to use nasty tricks that wound up tying them to a specific point release of DirectX (until Crinkler came along and showed everyone the light).
added on the 2010-09-09 22:29:14 by gasman gasman
I'm with gasman. The less non-future proof hacks the better.
added on the 2010-09-09 23:31:35 by mrdoob mrdoob
Doing a text effect: http://mixtape.be/dirs2.html

Not quite sure what to do with the remaining bytes, and I've managed to squeeze it even further
added on the 2010-09-10 02:26:20 by linde linde

BB Image

Pheeew was quite tough to fit all this into 1k.
added on the 2010-09-10 13:07:17 by p01 p01
p01: You're not right in the head man :)
added on the 2010-09-10 13:10:30 by gloom gloom
Wow... Color me impressed!
added on the 2010-09-10 13:12:17 by linde linde
Awesome stuff, PauloFalcao! You're certainly my favorite.
added on the 2010-09-10 13:38:43 by Inopia Inopia
p01 wins. FINISH HIM!
added on the 2010-09-10 13:51:23 by __ __
Thanks Inopia! :)

Very nice work P01!
Haha cool, I see someone has ported (http://js1k.com/demo/738) my 1k shader (http://www.pouet.net/prod.php?which=55469) too

BTW: p01 ownz
Thanks a lot!
So wish I managed to do more. :\
added on the 2010-09-10 17:11:52 by p01 p01
Weyland Yutani: sorry for skipping your name, found out too late..
p01: right now, wolf1k@js1k has 0 bytes ?? posted by anonymous ??
something obviously wrong there.. go & check!
added on the 2010-09-10 19:42:52 by p4p4 p4p4


Go to top