Activate your free membership today | Log-in

Wednesday, June 18th, 2008

Hypno trip down the fractal rug

Category: Canvas, JavaScript

<>p>Hypno trip

What a great title. It is an entry in the JavaScript 20 liners call out:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. //      chain( func )
  3. //      make func chainable by making it return itsReturnValue||this
  4. function chain( func )
  5. {
  6.         return function()
  7.         {
  8.                 return func.apply( this, arguments )||this;
  9.         }
  10. }
  11.  
  12.  
  13. //      initialize everything
  14. onload = function()
  15. {
  16.         //      initialize the contexts and the fractal
  17.         window.fx =
  18.         {
  19.             'barCtx':      document.getElementById('bar'      ).getContext('2d'),
  20.             'fooCtx':      document.getElementById('foo'      ).getContext('2d'),
  21.             'logicCtx':  document.getElementById('logic'  ).getContext('2d'),
  22.             'renderCtx':        document.getElementById('render').getContext('2d'),
  23.             'fractal':    [0,0,0,0,2,0,0,0,0],
  24.             CanvasRenderingContext2D:   (window.CanvasRenderingContext2D?CanvasRenderingContext2D.prototype:document.getElementById('bar'  ).getContext('2d').__proto__)
  25.         }
  26.  
  27.         //      set( what, to )
  28.         //      sets a property of the CanvasRenderingContext2D, making such operation chainable
  29.         window.fx.CanvasRenderingContext2D.set = function( what, to )
  30.         {
  31.                 this[what] = to;
  32.         }
  33.  
  34.         //      switchTo( context )
  35.         //      return another CanvasRenderingContext2D, making such operation chainable
  36.         window.fx.CanvasRenderingContext2D.switchTo = function( context )
  37.         {
  38.                 return context;
  39.         }
  40.  
  41.         //      chain a bunch of CanvasRenderingContext2D methods
  42.         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} )
  43.         {
  44.                 window.fx.CanvasRenderingContext2D[chainThat] = chain( window.fx.CanvasRenderingContext2D[chainThat] );
  45.         }
  46.  
  47.         //      let's get the party started
  48.         render();
  49. }
  50.  
  51.  
  52. //      render()
  53. function render()
  54. {
  55.         //      the time is now
  56.         var     now    = new Date().getTime();
  57.  
  58.         //      mutate the outer cells of the rug
  59.         fx
  60.                 .fractal[ Math.floor(Math.random()*8+5)%9 ] = Math.floor( Math.random()*3 );
  61.  
  62.         //      softly kills the previous generations of the rug
  63.         fx
  64.                 .fooCtx
  65.                         .set( 'fillStyle', 'rgba(0,0,0,.1)' )
  66.                         .fillRect( 0, 0, 192, 192 )
  67.                         .set( 'fillStyle', '#653' )
  68.                 .switchTo( fx.barCtx )
  69.                         .clearRect( 0, 0, 192, 192 );
  70.  
  71.         //      render 1st generation of the rug
  72.         for( var i=-1; i&lt;9; fx.fooCtx.fillRect( (++i%3)*64+1,Math.floor(i/3)*64+1,(fx.fractal[i]&1)*62,(fx.fractal[i]&1)*62 ))
  73.         {
  74.         }
  75.         //      render next generations of the rug
  76.         for( var j=0; j++&lt;3; fx.fooCtx.drawImage( fx.barCtx.canvas,0,0 ) )
  77.         {
  78.                 for( var i=-1; ++i&lt;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 ) )
  79.                 {
  80.                 }
  81.         }
  82.  
  83.         //      render rotozoomed rug
  84.         fx
  85.                 .logicCtx
  86.                         .set( 'globalCompositeOperation', 'source-over' )
  87.                         .clearRect( 0, 0, 256, 192 )
  88.                         .save()
  89.                         .translate( 96, 96 )
  90.                         .rotate( (now/5841%2)*Math.PI )
  91.                         .scale( 1+2*((now/1274)%1), 1+2*((now/1274)%1) )
  92.                         .drawImage( fx.fooCtx.canvas,0,0,192,192, -288,-288,576,576 )
  93.                         .drawImage( fx.fooCtx.canvas,0,0,192,192, -96 ,-96 ,192,192 )
  94.                         .drawImage( fx.fooCtx.canvas,0,0,192,192, -32 ,-32 ,64 ,64  )
  95.                         .restore()
  96.                         .set( 'globalCompositeOperation', 'copy' )
  97.                 //      prepare for hypnoglow
  98.                 .switchTo( fx.renderCtx )
  99.                         .set( 'globalCompositeOperation', 'source-over' )
  100.                         .clearRect( 0, 0, 192, 192 )
  101.                         .drawImage( fx.logicCtx.canvas, 0, 0 )
  102.                         .set( 'globalCompositeOperation', 'lighter' );
  103.  
  104.         //      hypnoglow
  105.         for( var i=-1; ++i&lt;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 ) )
  106.         {
  107.         }
  108.  
  109.         //      here we go again
  110.         setTimeout( render, 25 );
  111. }
  112.  

Related Content:

Posted by Dion Almaer at 6:32 am
7 Comments

++++-
4.6 rating from 32 votes

7 Comments »

Comments feed TrackBack URI

“P01″ is a madman as you can see (and he works for a browser vendor too :D). His site: http://p01.org/ has a collection of cool DHTML experiments, 256-byte entries and so on.

Comment by Schill — June 18, 2008

And I chose this month’s topic :D

Comment by KevinWeibell — June 18, 2008

p01 has been coding intense, efficient visualizations for years, I have been watching his work since the late 90s in the demoscene. If you’re ever lacking inspiration, whether artistically, musically, or for coding, check out a few demoscene entries! Incredible works that push the envelope in every platform. I would not be the same without it.

Comment by doublerebel — June 18, 2008

I made myself a start page with this code. I hope the author does not mind. Check it out here:

http://floatsolutions.com/docs/start/startpage.html

Comment by math0ne — June 18, 2008

Thanks everyone.

Dion: o_O what did you do with the screenshot, it’s completely borked.

math0ne: Glad you like the effect this much. As long as you keep the credits clear and link back to the original page, I’m fine with it.

Comment by Mathieu \'p01\' Henri — June 19, 2008

@mathOne: wow that’s awful.

This is really cool though. I love JavaScript — the language that lets you turn 112 lines into 20.

Comment by richtaur — June 22, 2008

I covered Mathieu’s Cavas chaining trick in my blog. In a comment there, Mathieu replied that he came up with the idea on his own (and it’s a great one).

http://dreaminginjavascript.wordpress.com/2008/06/30/chainchainchain/

Comment by Nosredna — June 30, 2008

Leave a comment

You must be logged in to post a comment.