Raytracing a menger sponge in 512 bytes of HTML5

Agreed. I'd like to see the code commented, too. It'd be a good learning experience for those of us new to HTML5.

The article explaining it was posted before -> http://www.p01.org/releases/512b_jspongy/

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>

Your computer would have exploded if it had been in Flash then :)