Quite possibly the smallest WebGL demo effect. Micro Nova clocks under 512bytes and shows supernova-like blasting colors.
How did this happen ?
This started as a discussion with Daeken, discoverer of the PNG bootstraping technique, about the feasibility of a 512b WebGL intro. However with ~160 bytes for the bootstraping itself, the PNG approach was not the right one to hit the 512 bytes mark. The only way was some good old sweat, hand minification and hashing of verbose method names.
I started from the setup code of GL1k Cotton Candy, and trimmed down the HTML + CSS as much as possible, gained a couple of bytes on the JavaScript + WebGL setup, then it was time to squeeze a nice and tiny fragment shader in just over 100 bytes. And voila! The first 512 bytes WebGL effect.
Of course there has been many variants of the fragment shader before settling for Micro Nova. Some bringing us as far down as 507 bytes but the visuals were slightly less intereting.
Here is the breakdown of the various parts:
- 52 bytes of HTML + CSS
- 326 bytes of JavaScript
- 134 bytes of GLSL ( 44 and 105 for the vertex and fragment shader respectively. 15 bytes are shared between both shaders. )
Hope you liked Micro Nova
Make sure to leave comments, piggies and thumbs up or down for 512b Micro Nova on Pouet.net.
Other recent experiments
There are many experiments and projects like MICRO NOVA 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
- 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. on March 31th, 2017
- 10 PRINT THEREMIN AT WEB REBELS A lighting talk about labyrinth generation and theremin instrument using the Web Audio API in 219 bytes presented at Web Rebels 2016. on June 2nd, 2016
- MATRAKA DEMOJS 2012's winner 1k intro with 3D graphics and music, written in JavaScript and packaged into a self extracting PNG image. See and hear for yourself! Remember, everything you're about to see and hear fits in 1024 bytes. Watch out, the music is quite loud on June 30th, 2012
- RAYTRACED CHECKBOARD What about an Ascii art raytraced checkboard animation in 128 bytes of HTML + JavaScript ? on April 20th, 2012
- STARFIELD A simple 3D starfield with title and fog in 256 bytes of Javascript on February 25th, 2007
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.