{"id":274,"date":"2015-03-09T03:30:35","date_gmt":"2015-03-09T01:30:35","guid":{"rendered":"http:\/\/blog.teleranek.org\/?p=274"},"modified":"2025-06-29T12:29:13","modified_gmt":"2025-06-29T10:29:13","slug":"flower-fractals-super-squished-edition","status":"publish","type":"post","link":"https:\/\/blog.teleranek.org\/?p=274","title":{"rendered":"Flower fractals super squished edition"},"content":{"rendered":"

Recently I stumbled upon a challenge on challengepost.com – “20 lines of JavaScript”. The goal was to write a 20 line JS\u00a0code that does something that can make the challenge judges vote for you. I thought the best idea would be to\u00a0treat this challenge\u00a0like a good ol’ demoscene compo. I’ve already had a good effect – the flower fractals<\/a>. Unfortunately, after porting it to JavaScript it was\u00a011 KB<\/a>ytes\u00a0:( and 383 lines of code, not always shorter than the required 80 chars (or maybe even more, but I don’t remember where I put the first version).\u00a0I used PIXI<\/a>, great 2D javascript library because it uses several enhancements for JS canvas (it also supports WebGL, but WebGL isn’t really a vector-like\u00a0drawing thing, the lines are aliased and poor quality, to obtain better quality I’d need to use textures and stuff, I thought it would be too complicated for 20 lines of code).<\/p>\n

OK, so I’ve got 383 lines and 11 kilobytes. As we all know, 20 lines of 80 char code is 1600 bytes, so there’s way to go… I checked with google closure compiler, how I could squish that – after compressing, it was about 5 kilos. Still too much. After hours of merging functions, deleting smooth line bezier-based rendering, reusing some vars, it went down to about 3 kilos.<\/p>\n

I started to think that its impossible to do, unless some miracle happens.<\/p>\n

Then I stumbled upon this great method of utilising somehow buggy behaviour of browsers – treating PNG files like HTML, when compressed PNG data resembles HTML data. After changing the JS to one big eval(…) function and compressing it to PNG I went down to 1600 bytes. Well, exactly 1595. Changing some things inside eval and making the code larger allowed PNG to compress it enough. So there’s this curiosity – PNG JavaScript:\u00a01600BYTES<\/a><\/p>\n

This was of course no-go, because it wasn’t really javascript – it was png, and I it would be really really hard to intoduce line breaks inside zipped\u00a0binary data. Also, it’s very ugly, you can see some errors appearing when running this code – some PNG IHDR data is displayed for a short period of time. I had to come up with something else. But how to squish the code better than the zip algorithm itself?<\/p>\n

Then I had a moment of enlightning – it’s 20 lines of 80 characters challenge, not 1600 bytes challenge. How about UTF-16? I could write 2 bytes inside 1 UTF16 character.<\/p>\n

It worked! Excited, I searched on google if anyone else did it – of course someone already came up with that idea ;\/ And the idea was better because the decoder is like:
\neval(unescape(escape('SOME STRING').replace(\/uD.\/g,'')))<\/code><\/p>\n

And mine was\u00a0much longer and 2 lines:
\nfunction(s){A=[];for(i=0;i<s.length;i++){c=s.charCodeAt(i);A.push(c&255);
\nc>>8?A.push(c>>8):c;}return String.fromCharCode.apply(String,A)}(\"SOME STRING\");<\/code><\/p>\n

But my method used a bit different technique, so I could use normal letters and fit some ASCII art inside the code, not only some strange chinese letters.<\/p>\n

OK, so after compiling with google closure, making big eval and changing to UTF-16, the code looks like this:<\/p>\n

\"Zrzut<\/a><\/p>\n

And can be seen on the challengepost’s winners’\u00a0( ?\u00b0 ?? ?\u00b0)\u00a0\u00a0gallery:
\nhttp:\/\/challengepost.com\/software\/20-lines-of-green<\/strong><\/a><\/p>\n

or\u00a0here<\/a>
\nor JSFiddle: http:\/\/jsfiddle.net\/to267224\/tbgad7uz\/<\/a><\/p>\n

ps. I will enhance this post later maybe, to provide some missing info on technical things and add some images, cause there’s too much unformatted text ; )<\/p>\n","protected":false},"excerpt":{"rendered":"

Recently I stumbled upon a challenge on challengepost.com – “20 lines of JavaScript”. The goal was to write a 20 line JS\u00a0code that does something that can make the challenge judges vote for you. I thought the best idea would be to\u00a0treat this challenge\u00a0like a good ol’ demoscene compo. I’ve already had a good effect […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[89,90,50,88,87],"class_list":["post-274","post","type-post","status-publish","format-standard","hentry","category-flash-experiments","tag-challenge","tag-challengepost","tag-experiments","tag-javascript","tag-js"],"_links":{"self":[{"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=\/wp\/v2\/posts\/274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=274"}],"version-history":[{"count":9,"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=\/wp\/v2\/posts\/274\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=\/wp\/v2\/posts\/274\/revisions\/345"}],"wp:attachment":[{"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.teleranek.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}