Fire JS Bin - HypnoTrip

/*    */
/*    */
/*    */  //  chain( func )
/*    */  //  make func chainable by making it return itsReturnValue||this
/*    */  function chain( func )
/*    */  {
/* 01 */     return function()
/*    */    {
/* 02 */      return func.apply( this, arguments )||this;
/*    */    }
/*    */  }
/*    */
/*    */
/*    */  //  initialize everything
/*    */  onload = function()
/*    */  {
/*    */    //  initialize the contexts and the fractal
/* 03 */    window.fx =
/*    */    {
/*    */        'barCtx':    document.getElementById('bar'  ).getContext('2d'),
/*    */        'fooCtx':    document.getElementById('foo'  ).getContext('2d'),
/*    */        'logicCtx':    document.getElementById('logic'  ).getContext('2d'),
/*    */        'renderCtx':  document.getElementById('render').getContext('2d'),
/*    */        'fractal':    [0,0,0,0,2,0,0,0,0],
/*    */        //  work around Safari's non exposure of the CanvasRenderingContext2D
/*    */        CanvasRenderingContext2D:  (window.CanvasRenderingContext2D?CanvasRenderingContext2D.prototype:document.getElementById('bar'  ).getContext('2d').__proto__)
/*    */    }
/*    */
/*    */    //  set( what, to )
/*    */    //  sets a property of the CanvasRenderingContext2D, making such operation chainable
/*    */    window.fx.CanvasRenderingContext2D.set = function( what, to )
/*     */    {
/* 04 */      this[what] = to;
/*    */    }
/*    */
/*    */    //  switchTo( context )
/*    */    //  returns another CanvasRenderingContext2D, making such operation chainable
/*    */    window.fx.CanvasRenderingContext2D.switchTo = function( context )
/*     */    {
/* 05 */      return context;
/*    */    }
/*    */
/*    */    //  chain a bunch of CanvasRenderingContext2D methods
/* 06 */    for( chainThat in {set:1,switchTo:1,clearRect:1,save:1,translate:1,rotate:1,drawImage:1,scale:1,restore:1,fillRect:1,moveTo:1,lineTo:1,beginPath:1,closePath:1,stroke:1,fill:1,arc:1} )
/*     */    {
/* 07 */      window.fx.CanvasRenderingContext2D[chainThat] = chain( window.fx.CanvasRenderingContext2D[chainThat] );
/*    */    }
/*    */
/*    */    //  let's get the party started
/* 08 */    render();
/*    */  }
/*    */
/*    */
/*    */  //  render()
/*    */  function render()
/*    */  {
/*    */    //  the time is now
/* 09 */    var  now    = new Date().getTime();
/*    */
/*    */    //  mutate the outer cells of the rug
/* 10 */    fx
/*    */      .fractal[ Math.floor(Math.random()*8+5)%9 ] = Math.floor( Math.random()*3 );
/*    */
/*    */    //  softly kills the previous generations of the rug
/* 11 */    fx
/*    */      .fooCtx
/*    */        .set( 'fillStyle', 'rgba(0,0,0,.1)' )
/*    */        .fillRect( 0, 0, 192, 192 )
/*    */        .set( 'fillStyle', '#653' )
/*    */      .switchTo( fx.barCtx )
/*    */        .clearRect( 0, 0, 192, 192 );
/*    */
/*    */    //  render 1st generation of the rug
/* 12 */    for( var i=-1; ++i<9; fx.fooCtx.fillRect( (i%3)*64+1,Math.floor(i/3)*64+1,(fx.fractal[i]&1)*62,(fx.fractal[i]&1)*62 ))
/*    */    {
/*    */    }
/*    */    //  render next generations of the rug
/* 13 */    for( var j=0; j++<3; fx.fooCtx.drawImage( fx.barCtx.canvas,0,0 ) )
/*    */    {
/* 14 */      for( var i=-1; ++i<9; fx.barCtx.drawImage( fx.fooCtx.canvas,0,0,192,192, (i%3)*64+1,Math.floor(i/3)*64+1, (fx.fractal[i]&2)*31, (fx.fractal[i]&2)*31 ) )
/*    */      {
/*    */      }
/*    */    }
/*    */
/*    */    //  render rotozoomed rug
/* 15 */    fx
/*    */      .logicCtx
/*    */        .set( 'globalCompositeOperation', 'source-over' )
/*    */        .clearRect( 0, 0, 256, 192 )
/*    */        .save()
/*    */        .translate( 96, 96 )
/*    */        .rotate( (now/5841%2)*Math.PI )
/*    */        .scale( 1+2*((now/1274)%1), 1+2*((now/1274)%1) )
/*    */        .drawImage( fx.fooCtx.canvas,0,0,192,192, -288,-288,576,576 )
/*    */        .drawImage( fx.fooCtx.canvas,0,0,192,192, -96 ,-96 ,192,192 )
/*    */        .drawImage( fx.fooCtx.canvas,0,0,192,192, -32 ,-32 ,64 ,64  )
/*    */        .restore()
/*    */        .set( 'globalCompositeOperation', 'copy' )
/*    */      //  prepare for hypnoglow
/*    */      .switchTo( fx.renderCtx )
/*    */        .set( 'globalCompositeOperation', 'source-over' )
/*    */        .clearRect( 0, 0, 192, 192 )
/*    */        .drawImage( fx.logicCtx.canvas, 0, 0 )
/*    */        .set( 'globalCompositeOperation', 'lighter' );
/*    */
/*    */    //  hypnoglow
/* 16 */    for( var i=-1; ++i<6; fx.renderCtx.drawImage( fx.logicCtx.drawImage( fx.logicCtx.canvas, 0, 0, 192>>i, 192>>i, 0, 0, 96>>i, 96>>i ).canvas, 0, 0, 96>>i,  96>>i, 0, 0, 192, 192 ) )
/*    */    {
/*    */    }
/*    */
/*    */    //  here we go again
/* 17 */    setTimeout( render, 25 );
/*    */  }
/*    */
/*    */

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
 
<title>Hypno trip down the fractal rug | 20 lines Javascript contest - Zoom | Mathieu 'p01' Henri | June 2008</title> 
<meta name="author" content="Mathieu 'p01' Henri" /> 
<meta name="description" content="Hypno trip down the fractal rug - Mathieu 'p01' Henri's entry for the 20 lines JavaScript contest - Zoom at the Ozone Asylum" /> 
<meta name="keywords" content="javascript,dhtml,canvas,ajax,css,size optimization,20 lines,demos,art,contest,3d,fractal,sierpinski,realtime,ozone asylum,p01,demoscene,guru,hardcore" /> 
 
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

</head> 
<body> 
 
 
  <div id="header"> 
    <h1>Hypno trip down the fractal rug - <span>for the</span> <a href="http://www.ozoneasylum.com/30306">20 lines JavaScript contest - Zoom</a> <span>by</span> <a href="http://www.p01.org">Mathieu 'p01' Henri</a> <span>June 2oo8.</span></h1> 
    <p class="notice">The specification of Canvas being in progress, this script is best rendered in a recent browser such as <a href="http://www.opera.com/products/desktop/"><strong>Opera 9.5</strong></a> or <a href="http://www.mozilla.com/en-US/firefox/">Firefox 3</a> or <a href="http://www.apple.com/safari/">Safari 3.1</a>.</p> 
  </div> 
 
  <div id="content"> 
    <canvas id="render" width="192" height="192"><img src="/assets/screenshot.png" alt="This animation takes a decent browser such as Opera 9.5, Firefox 3 or Safari 3.1." /></canvas> 
  </div> 
 
  <p class="enjoy">Take a <a href="http://www.evilmadscientist.com/article.php/fractalcookies">fractal cookie</a> and enjoy your never ending trip down this stochastic <a href="http://en.wikipedia.org/wiki/Sierpinski_carpet">Sierpinski-esque carpet</a>.</p> 
 
  <div id="hidden"> 
    <canvas id="foo" width="192" height="192"></canvas> 
    <canvas id="bar" width="192" height="192"></canvas> 
    <canvas id="logic" width="192"  height="192"></canvas> 
    
  </div> 
 
</body> 
</html>