Micro Nova by Ribbon [web]
screenshot added by p01 on 2012-05-30 00:33:04
platform :
type :
release date : may 2012
  • 20
  • 12
  • 0
popularity : 59%
  • 0.62
alltime top: #5731
added on the 2012-05-30 00:33:04 by p01 p01

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter pinterest tumblr


Someone had to bring to life the mythical 512b webGL intros briefly mentionned in the JS global eval() and PNG bootstraping thread.

PNG bootstraping is NOT suitable for 512b, but good ole hand minification + hashing of verbose method names did the job pretty quickly.

added on the 2012-05-30 00:37:34 by p01 p01
great one! webgl in 512b :)
rulez added on the 2012-05-30 02:12:04 by mad mad
rulez added on the 2012-05-30 07:53:15 by sensenstahl sensenstahl
Well done p01! (once again)
ps: with about 200b for header+bootstrap,
sure PNG trick leaves little room to code :)
rulez added on the 2012-05-30 09:28:24 by cb cb
Yay for small size, but damn if it's an ugly one...
added on the 2012-05-30 09:44:27 by Preacher Preacher
rulez added on the 2012-05-30 10:03:20 by BackSpace BackSpace
webgl in low size + a nice effect = thumbs up
rulez added on the 2012-05-30 10:29:20 by Skate Skate
i'm with preacher on this one
added on the 2012-05-30 10:29:50 by v3nom v3nom
Oy! It's super smooth on lower-end machines, but, yes, it does look a bit crazy-bat-shit-fugly-fast on hi-end machines :\

Let's see if I can squeeze a real timer in there
added on the 2012-05-30 10:35:37 by p01 p01
nice proof of concept but ugly indeed
added on the 2012-05-30 10:58:12 by psenough psenough
nice prod
rulez added on the 2012-05-30 11:55:17 by -SP- -SP-
nice effort
added on the 2012-05-30 12:31:15 by las las
For the size and smoothness
rulez added on the 2012-05-30 13:42:10 by Zplex Zplex
for the size and I don't find it ugly
rulez added on the 2012-05-30 14:18:18 by wullon wullon
where is *Nova*?
next 512b should be a black hole, beware :p
rulez added on the 2012-05-30 16:02:34 by Buckethead Buckethead
next 512b should be a black hole, beware :p

i have someone 256b incompleteBB Image
I'm poor, actually my forces do not allow me to create such a thing. I'm tired mentally.
rulez added on the 2012-05-30 19:03:16 by Bartoshe Bartoshe
not bad for size
rulez added on the 2012-05-30 19:58:38 by rudi rudi
ugly and great at same time :D
rulez added on the 2012-05-31 00:11:50 by rez rez
What is it that you guys find ugly ?

The colors, the movement/speed, the horizontal stripe of moiré effect, ... don't let me repeat the same mistakes.
added on the 2012-05-31 00:19:26 by p01 p01
I'm mainly bothered by the saturated bright colors.
added on the 2012-05-31 00:20:33 by noby noby
It's a bit bright, but hey, it's 512b.
rulez added on the 2012-05-31 00:22:53 by ___ ___
Luv it for the proof.
rulez added on the 2012-05-31 00:38:40 by noname noname
p01: colours mainly. And the speed - it kind of 'spasms'. Spasm is generally not a good animation technique :D But it's 512b, and it's webGL, so no way I can thumb it down :)
added on the 2012-05-31 02:07:31 by psonice psonice
rulez added on the 2012-05-31 08:12:26 by frag frag
+1 for the spasm (= ugly), the colors are fine for me
added on the 2012-05-31 08:44:06 by wullon wullon
rulez added on the 2012-05-31 12:29:46 by panic panic
same ugly colors though
You can't have it all :p

cb: Yup. Counting the bootstraping, %PNG header and IHDR chunk that brings us close to 200b.

A usable WebGL setup alone takes a good 300-350 bytes.

PNG bootstraping is really not suitable for sub 1k WebGL prods. For 1k WebGL prods, it's most likely a tie with conventional JS packers.
added on the 2012-06-09 10:31:06 by p01 p01
p01> That's funny, I was just looking into your demo !
As you might know already I think you can improve your function name optimizer. More specifically I searched a better pattern for function name replacing. Extracting two characters from the function name instead using a regexp seem to give better results. By using the following initializer I reduced your demo size from 512 bytes to 473 bytes !
Code:for(x in g=d.getContext('experimental-webgl')) g[x[0]+x[6]]=g[x];

Here is a fully functional version of your script :
Code:<canvas id=d width=999 height=470><script>for(x in g=d.getContext('experimental-webgl'))g[x[t=0]+x[6]]=g[x];with(g){for(p=cP(q=' p;void main(){');s=cS(t+35632);ce(s),aS(p,s))sS(s,t++?'attribute vec4'+q+'gl_Position=p;}':'uniform lowp float'+q+'lowp vec4 l=3.-gl_FragCoord/99.;gl_FragColor=cos(l*tan(l-p)+l/l.y*l.x);}');setInterval('g.dr(4,g.uniform1f(g.gf(p,"p"),t+=44),3)',vA(eV(bf(k=34962,cB())),2,5126,lo(p),ug(p),bD(k,new Float32Array([1,1,1,-3,-3,1]),k+82)))}</script>
added on the 2012-06-09 10:51:02 by cb cb
You're not the first one to suggest that hashing. Alas AFAIK it is NOT cross browser. The order the methods and properties are enumerated is not standardized, so it varies from one browser to another. :\

See this jsfiddle in several browsers.
added on the 2012-06-09 11:06:51 by p01 p01
Select the prod "GL1K Cotton Candy sans uniform" and fiddle with the hashing methods. I've not found a hash in the vein of x[0]+x[6] that does not collide in some browser.
added on the 2012-06-09 12:00:26 by p01 p01
You're right but the above script works with latests versions of FF & Chrome, and I'm not sure full cross-browser compatibility is a problem in the demoscene. Nobody complains when IE9 isn't supported :) Also we cannot be sure that the regexp hash will work with next versions of WebGL.

But OK, let's assume that we need uniqueness and cross browser compatibility :)
There is the x[6]+x[1] hash which makes collisions but without using non-unique function names we still have a gain of 4 bytes.
A better one : x[1]+x[7]+x[x.length-1]. No collide and it saves 15 bytes in Micro Nova.
I'm sure we can still find better hashes.
added on the 2012-06-09 12:25:25 by cb cb
yes... small.... but, what else ?
added on the 2012-06-09 15:09:14 by Pandafox Pandafox
Pandafox: It's shiny, and the first WebGL prod to reach the milestone size on 512b. It's not long ago, that doing a WebGL prod in 1k was considered a feat.

cb: Silly me. I overlooked that the 0+6 hash luckily collides with the methods we need last in all browsers supporting WebGL today. Well done sir! Your 473b version works in Firefox Aurora, Chrome Canary and Opera Next. That'll teach me to open my eyes when I write a test.

About compatibility: regardless of the platforms/APIs, hashing methods are not forward compatible. We can't have it all. As for cross browser compatibility, it rarely takes much to get a JS demo working in all browsers ( supporting the standards you use ). For all we know, even IE 10 does not support WebGL so IE 9 and 10 are completely out of this game.
added on the 2012-06-09 21:17:25 by p01 p01
Reminds me something I did with glsl http://glsl.heroku.com/e#2665.1
added on the 2012-06-15 02:04:30 by bzdzb bzdzb
for the size
rulez added on the 2012-06-15 13:50:47 by pingo pingo
rulez added on the 2012-06-29 00:33:14 by orby orby
nice one
rulez added on the 2012-12-31 00:31:14 by T$ T$
Crashed my NVIDIA GeForce 9100M G in Google Chrome 25.0.1337.0.
added on the 2013-01-21 17:36:05 by botjao botjao
rulez added on the 2013-02-27 17:40:43 by Pirx Pirx

submit changes

if this prod is a fake, some info is false or the download link is broken,

do not post about it in the comments, it will get lost.

instead, click here !

[previous edits]

add a comment