Very impressive demo. I'd really like to see a non-obfuscated version though; I feel like the utility of a good HTML5 example is higher than the utility of seeing how small it can be made.
I'd hate to call this "HTML5" - the only HTML 5 feature it utilises is the Canvas element, which is a pretty dumb bitmap rendering surface.
It could have been rendered with other technologies, but not as efficiently perhaps.
Here; I un-obfuscated it and commented the HTML5 parts for you. I leave the hardcore maths for you to unravel, 'coz maths on this level aren't my thing :-)
There isn't really anything "HTML5" about this demo - it only uses the Canvas feature to output the rendered image on the screen, which can also be done in other non-HTML5 ways (although not as fast):
<html>
<head>
<script type="text/javascript">
// we need to output the canvas tag here, in order to make the js engine
// instantly aware of the "R" id so that the canvas can be addressed at once
document.write( '<canvas id="R" width="64" height="64" style="width: 4in; height: 4in; background: #ffffff;">' );
// array N and object K now exposes an API for interacting with the canvas
var N = [ K = R.getContext('2d') ];
// pulls image data from x/y 0,0 w/h 64,q of canvas K into ImageData object I
for( t = B = 127, I = K.getImageData(0, 0, q = 64, q); t--; $ = Math.cos )
{
N[t] = t / 43 & 1;
}
function sponge()
{
t++;
for( i = y = -1; y < 1; y += A )
{
for( x = -1; x < 1; x += A = 1/32, I.data[i += 4] = h + h )
{
for( m = C = $(a = t / 86),
S = $(a + 8),
c = $(b = t / B),
s = $(b + 8),
u = x * C + S,
v = y * c - u * s,
u = u * c + y * s,
w = C - x * S,
X = q + 9 * $(a + b),
Y = q + 9 * $(b - a),
Z = t,
h = B; --h && m < q; X += u, Y += v, Z+= w )
{
for( m = 1; N[X * m & B] + N[Y * m & B] + N[Z * m & B] < 2 && m < q; m *= 3);
}
}
}
// render ImageData object I onto canvas K, at x/y position 0,0
K.putImageData( I, 0, 0);
}
// try to run the frame renderer, sponge(), once every 20 milliseconds
setInterval( 'sponge();', 20 );
</script>
</head>
<body bgcolor="#000000" text="#ffffff">
</body>
</html>
Every computer and browser combination I've ever had slows way down whenever Flash is involved, except for my gaming rig. I shouldn't need a quad-core processor to watch videos.
Well, as it happens, this does indeed run incredibly badly in Flash. I didn't try to optimize it at all (I probably couldn't anyway) and it ran at about 8fps, whereas the JS runs at about 12-15 in Chrome.
