Fire JS Bin - hypnolgow

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/*
       *  chain( func )
       *  make func chainable by making it return itsReturnValue||this
       */
/*    */  function chain( func )
/*    */  {
/* 01 */     return function()
/*    */    {
/* 02 */      return func.apply( this, arguments )||this;
/*    */    }
/*    */  }
 
      /*
       *  chain a bunch of CanvasRenderingContext2D methods
       */
/* 03 */  for( chainThat in {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} )
/*     */  {
/* 04 */    CanvasRenderingContext2D.prototype[chainThat] = chain( CanvasRenderingContext2D.prototype[chainThat] );
/*     */  }
      /*
       *  dynamic()
       *  capture the position of mouse
       */
/*    */  function dynamic( event )
/*    */  {
/* 05 */    window.mouse = [ (window.event||event).screenX, (window.event||event).screenY ];
/*     */  }
 
 
      /*
       *  render()
       *  display a few curves with hypnoglow
       */
/*    */  function render( event )
/*    */  {
        //  curves
/* 06 */    var  now    = new Date().getTime();
/* 07 */    var ctxL  = document.getElementById('logic').getContext('2d').clearRect( 0, 0, 200, 100 );
/* 08 */    var  colors  = ['#165','#457','rgb('+Math.round(24+(window.mouse||[0,0])[1]/19+34*Math.cos(now/8192+(window.mouse||[0,0])[0]/92))+','+Math.round(16+20*Math.cos(2+now/7192+(window.mouse||[0,0])[1]/71))+','+Math.round(32+24*Math.cos(4+now/5192+(window.mouse||[0,0])[0]/87))+')'];
/* 09 */    for( var j=0; j<colors.length; j++ )
/*    */    {
/* 10 */      ctxL.beginPath().moveTo( 250,50 ).fillStyle = colors[j];
/* 11 */      for( var i=0; i<128; i+=3 )
/*    */      {
/* 12 */        ctxL.lineTo( Math.abs(i-64)*4-32, 32+(64+Math.abs(i-64)/2)*(.1+.2*Math.cos(j+(now/352)+i/31))+(i&64)*1/(68-Math.abs(i-64))+16*Math.sin( (now+(window.mouse||[0,0])[0]/1337 )/( (788-j*287)%1337 ) - Math.abs(i-64)*(.07+j/43+(window.mouse||[0,0])[1]/1973-(window.mouse||[0,0])[0]/1837) ) );
/*    */      }
/* 13 */      ctxL.closePath().fill();
/*    */    }
/*    */
        //  hypnoglow
/* 14 */    document.getElementById('render').getContext('2d').clearRect( 0, 0, 200, 100 ).drawImage( ctxL.canvas, 0, 0 ).globalCompositeOperation = 'lighter';
/* 15 */    ctxL.globalCompositeOperation = 'copy';
/* 16 */    for( var i=0; i<6; i++ )
/*    */    {
/* 17 */      document.getElementById('render').getContext('2d').drawImage( ctxL.drawImage( ctxL.canvas, 0, 0, 200>>i, 100>>i, 0, 0, 100>>i, 50>>i ).canvas, 0, 0, 100>>i,  50>>i, 0, 0, 200, 100 );
/*    */    }
/* 18 */    ctxL.globalCompositeOperation = document.getElementById('render').getContext('2d').globalCompositeOperation = 'source-over';
/*    */
 
        //  stylee
/* 19 */    document.getElementById('overlay').style.backgroundPosition = Math.round(4-8*Math.random() ) +'px '+ Math.round( Math.random()*4-2+16*Math.cos( (window.mouse||[0,0])[1]/98 ) %300) +'px';
 
        //  here we go again
/* 20 */    setTimeout( render, 25 );
/*    */  }
 
 
/*     */  onload    = render
/*     */  onmousemove  = dynamic

<?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>20 lines - dynamic hypnoglow | Mathieu 'P01' HENRI | 20080127</title>

</head> 
<body> 
 
 
  <div id="header"> 
    <h1>Dynamic hypnolgow - <a href="http://www.ozoneasylum.com/29836">20 lines JavaScript contest - Dynamics</a> <span>by</span> <a href="http://www.p01.org">Mathieu 'p01' Henri</a> <span>January 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://my.opera.com/desktopteam/blog/">Opera 9.5</a> or <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3</a>.</p> 
  </div> 
 
  <div id="content"> 
    <canvas id="render" width="200" height="100">This animation takes a decent browser such as Opera 9.5 or Firefox 3.</canvas> 
    <div id="overlay"></div> 
  </div> 
 
  <div id="hidden"> 
    <canvas id="logic" width="200"  height="100"></canvas> 
  </div> 
 
</body> 
</html>

*
{
  margin:0;
  padding:0;
  border:0;
}
body
{
  color:#666;
  background:#000;
  font:normal normal .8em/1.5em Trebuchet,sans-serif;
}
#header
{
  padding:1em;
  background:#000;
  letter-spacing:.05em;
}
#header h1
{
  color:#999;
  font-weight:normal;
  font-size:1.2em;
  margin-bottom:.25em;
}
#header a
{
  color:inherit;
  text-decoration:none;
  color:#fff;
  padding:0 .25em;
}
#header a:hover
{
  text-decoration:underline;
}
#header span
{
  font-style:italic;
  font-size:.6em;
}
#header p
{
  font-size:.9em;
}
p.notice
{
  background:#300;
  padding:1em;
  margin:0 -1em;
  color:#f30;
}
 
#hidden
{
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  width:0;
}
 
#content
{
  position:relative;
  display:block;
  margin:1em auto;
  clear:both;
  width:600px;
  height:300px;
  background:#000;
  border:1px solid #333;
  padding:1px;
  overflow:hidden;
}
#content *
{
  position:absolute;
  top:1px;
  left:1px;
  width:600px;
  height:300px;
}
#overlay
{
  background:url(/assets/hypnoglow.png);
}

Pop out