?

Log in

No account? Create an account
Sarah's Blog [entries|archive|friends|userinfo]
Sarah

[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

March 28th, 2009

A simple little Firefox pixel Canvas demo. [Mar. 28th, 2009|01:51 pm]
Sarah
(It takes a few seconds to start, and takes a bit of CPU)

http://www.untamed.co.uk/CanvasColouredCircles.htm

<html>
<head>
<title>Canvas Flux</title>

</head>
<body>

<canvas id="canvas" width="400" height="400"></canvas>
<canvas id="i1" width="800" height="800" style="display:none;"></canvas>
<canvas id="i2" width="800" height="800" style="display:none;"></canvas>

<script>

canvas=document.getElementById('canvas');
i1=document.getElementById('i1');
i2=document.getElementById('i2');

gh=canvas.getContext('2d');
gh1=i1.getContext('2d');
gh2=i2.getContext('2d');


var x=0,y=0;

i=gh1.getImageData(0,0,800,800);
p=i.data;
ctr=0

gh1.putImageData(makeCircles(22,30,35),0,0);
alert("Half way there...");
gh2.putImageData(makeCircles(22,25,28),0,0);

function makeCircles(or,og,ob)
      {
      for(y=-400;y<400;y++)
            {
            for(x=-400;x<400;x++)
             {
            
             delta=(x*x+y*y);
            
            
             r=Math.sin((Math.sqrt(delta*or))/180*Math.PI)*127+127;
             g=Math.sin((Math.sqrt(delta*og))/180*Math.PI)*127+127;
             b=Math.sin((Math.sqrt(delta*ob))/180*Math.PI)*127+127;
            
                  p[ctr++]=r
                  p[ctr++]=g
                  p[ctr++]=b
                  p[ctr++]=16
                  
             }
            }
      return(i);
      }

var x=Math.random()*200-300;
var y=Math.random()*200-300;
var tx=Math.random()*200-300;
var ty=Math.random()*200-300;
var dxx=-5+Math.random()*10;
var dyy=-5+Math.random()*10;

var x2=Math.random()*200-300;
var y2=Math.random()*200-300;
var tx2=Math.random()*200-300;
var ty2=Math.random()*200-300;
var dxx2=-5+Math.random()*10;
var dyy2=-5+Math.random()*10;

setInterval("animate()",10);

function animate()
      {

      var X = (tx - x);
      var Y = (ty - y);
      var len = Math.sqrt(X*X+Y*Y);
      if(len < 1) len = 1;

      var NEWdx = 20 * (X/len);
      var NEWdy = 20 * (Y/len);

      var ddx = (NEWdx - dxx)/10;
      var ddy = (NEWdy - dyy)/10;

      dxx += ddx;
      dyy += ddy;

      x+=dxx;y+=dyy;

      if(Math.random() >.95 )
            {
            tx = Math.random()*200-300;
            ty = Math.random()*200-300;
            }

      var X2 = (tx2 - x2);
      var Y2 = (ty2 - y2);
      var len2 = Math.sqrt(X2*X2+Y2*Y2);
      if(len2 < 1) len2 = 1;

      var NEWdx2 = 20 * (X2/len2);
      var NEWdy2 = 20 * (Y2/len2);

      var ddx2 = (NEWdx2 - dxx2)/10;
      var ddy2 = (NEWdy2 - dyy2)/10;

      dxx2 += ddx2;
      dyy2 += ddy2;

      x2+=dxx2;y2+=dyy2;

      if(Math.random() >.95 )
            {
            tx2 = Math.random()*200-300;
            ty2 = Math.random()*200-300;
            }

      if(Math.random() >.1 )
                  {
                  gh.drawImage(i1,x2,y2);
                  }
      
      if(Math.random() >.1 )
                  {
                  gh.drawImage(i2,x,y);
                  }

      }

</script>
</body>
</html>
link4 comments|post comment

It's better than the real hack in the Matrix film! [Mar. 28th, 2009|09:02 pm]
Sarah
link6 comments|post comment

navigation
[ viewing | March 28th, 2009 ]
[ go | Previous Day|Next Day ]