

Raytracing a menger sponge in 512 bytes of HTML5 - mcantelon
http://www.p01.org/releases/512b_jspongy/jspongy.htm

======
endtime
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.

~~~
hackermom
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>

~~~
IgorPartola
I'd replace setInterval( 'sponge();', 20 ); with setInterval( sponge, 20 );

Eliminates the overhead of eval().

------
euroclydon
Wow! That pegged my CPU. The fan increased speed three times!

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

~~~
wdewind
stop spreading that nonsense. flash isnt slow. although the mac version is
shit - i'll give you that.

~~~
CrazedGeek
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.

~~~
gb
What does Flash playing video have to do with raytracing in AS3? The AVM has
nothing to do with the video decoding in Flash.

~~~
gb
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.

------
buster
wow, i love this. actually, i always found it amazing what people can do in
512b/4kb/32kb, it's awesome!

