This may take a few seconds to generate the ~2min music before the animation starts.
- 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.
setInterval(...,13). This approach is not CPU friendly but it compresses better.
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 to Adinpsz @kaneel @frksr TBC Loonies, and everyone pushing the limits with style!
Other recent projects
There are many experiments and projects like BLCK4777 to discover other here.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- CODING⯌ART AT RENDER CODING⯌ART at Render 2017 was part of my series of talks + live coding aiming to inspire new web developer artists.
- CODING⬢ART AT SCRIPT'17 Script'17 was all kinds of awesome: Great organization, line up, venue, catering, diverse and welcoming. It was a pleasure to talk to you all and LIVE code something useless before the party. Looking forward to see useless things from you all.
- 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
- MANDELBROT ROTOZOOM Many people did fractals renderers in Javasript in 256 bytes, but no one ever made one that zooms and rotate... until today.
- URYA A sweet text mode 64kb intro on PC, written in PASCAL and showed at the WIRED'96 demoparty where it ranked 4th.
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.