BLCK4777

Winning 1kb intro at Assembly 2015, BLCK4777 is a JavaScript explosion of light and triangles in 1023 bytes

This may take a few seconds to generate the ~2min music before the animation starts.

Additional links

• Packed version that fits in 1023 bytes
• Full archive submitted at the Assembly 2015
• Video capture of BLCK4777 on YouTube
• BLCK4777 on Pouet.net, the demoscene portal

Technical tid bits

The techniques used in BLCK4777 are pretty basic. There is no webGL, shaders or web Audio API. Instead it uses good old PNG bootstraping, an Audio element and 2D canvas with shawdowBlur to make the triangles glow.

Unfortunately shadowBlur is slow in Firefox.

The ~2mins of music are synthesized on the first call of the script, where it runs the whole simulation to know when the big triangles shine or intersect with the white beam.

As for the compression, I used the now classic PNG bootstraping technique, which consist into making a polyglot file that's both a PNG image and an HTML page. The PNG image is our code, seen as shades of gray. The HTML page loads the PNG image, reads the pixels back to reconstruct the code and run it.

In BLCK4777, the code is a single line of JavaScript code that is run using a setInterval(...,13). This approach is not CPU friendly but it compresses better.

Tooling

The lack of automation remains the biggest pain point in my tool chain for this kind of productions, but things improved significantly with BLCK4777.

For the most part I used a private gist. When things got real I would minify the script with JSmin, make a PNG image out of it, rezop, deflopt, defluff, bootstrap it and finally run gzThermal to get some hindsights about the defalte stream. These steps allowed me to optimize over 150 bytes in less than 2 weeks. Also, this approach seem to give ~10 bytes gain over a regular JSEXE PNGxHTML file.

Thanks

Thanks to Adinpsz @kaneel @frksr TBC Loonies, and everyone pushing the limits with style!

Other recent experiments

There are many experiments and projects like BLCK4777 to discover other here.

• FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
• VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
• BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
• TINY AUDIO-VISUAL DEMOS AT JSCONF ASIA I had the honor to open the second day of JSConf Asia 2015 in Singapore with a talk and LIVE programming session about Tiny Audio-Visual Demos on November 20th, 2015
• IMPOSSIBLE ROAD Back in October 2014, a good friend of mine, showed me IMPOSSIBLE ROAD and half joked that I should do a remake for JS1k the yearly 1kb JavaScript contest happens in Spring. This set my mind on hyperdrive. on March 14th, 2015
• TILT SHIFT A very fast & simple tilt-shift effect in Canvas. on January 10th, 2009
• NEJA My first JavaScript demo, presented at the Assembly 2005 where it ranked #4 on July 30th, 2005
• EQUALIZER A little intro for the famous Equalizer BBS made in 4kb for MSDOS on April 23rd, 1997

Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.