4 ms·
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 see
by endtime 17y ago
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.
- rman666 17y agoAgreed. I'd like to see the code commented, too. It'd be a good learning experience for those of us new to HTML5.
- chrislloyd 17y agoThe article explaining it was posted before -> http://www.p01.org/releases/512b_jspongy/ http://www.p01.org/releases/512b_jspongy/
- gjm11 17y agoExcept that there's no actual explanation in that article, is there?
- flog 17y agoI'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.
- brazzy 17y agoYeah, it's far more a Javascript example than a HTML5 example. Still, it shows what HTML5 and the Canvas element will make possible.
- hackermom 17y agoHere; 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>
- IgorPartola 17y agoI'd replace setInterval( 'sponge();', 20 ); with setInterval( sponge, 20 ); Eliminates the overhead of eval().
- endtime 17y agoThanks!