spiral

just some hypnotic graphics...

the javascript code above is this...

<div style="background-color:black;">
<canvas id="can" width="800" height="600"></canvas>
<script>
var width, height;
var ctx, frameCount= 0;
(function() {
    var can= document.getElementById('can');
    ctx= can.getContext('2d');
    width= can.width;
    height= can.height;
    ctx.fillStyle= '#FFF';
    window.requestAnimationFrame(draw);
})();
function draw() {
    ctx.clearRect(0, 0, width, height);
    ctx.save();
    ctx.translate(width*0.5, height*0.5);
    ctx.beginPath();
    var theta= Math.sin(frameCount*0.001)*Math.PI*2*4;
    for(var y= 0; y<height; y++) {
        for(var i= 0; i<10; i++) {
            ctx.rotate(theta*0.001);
            ctx.fillRect((Math.sin(y*0.1+theta+(i*2))*100), y, 2, 2);
        }
    }
    ctx.restore();
    frameCount= frameCount+1;
    window.requestAnimationFrame(draw);
}
</script>
</div>

originally this was a quick sketch made in processing...

//spiral.pde - processing
void setup() {
  size(800, 600);
  noStroke();
}
void draw() {
  background(0);
  translate(width*0.5, height*0.5);
  float theta= sin(frameCount*0.001)*TWO_PI*4;
  for(int y= 0; y<height; y++) {
    for(int i= 0; i<10; i++) {
      rotate(theta*0.001);
      rect((sin(y*0.1+theta+(i*2))*100), y, 2, 2);
    }
  }
}

and then ported to supercollider...

//spiral.scd - supercollider
(
var width= 800, height= 600;
var win= Window("spiral", Rect(100, 100, width, height), false);
var usr= UserView(win, Rect(0, 0, width, height));
usr.background= Color.black;
usr.animate= true;
usr.drawFunc= {
        var theta= sin(usr.frame*0.001)*2pi*4;
        Pen.fillColor= Color.white;
        Pen.translate(width*0.5, height*0.5);
        height.do{|y|
                10.do{|i|
                        Pen.rotate(theta*0.001);
                        Pen.fillRect(Rect(sin(y*0.1+theta+(i*2))*100, y, 2, 2));
                };
        };
};
CmdPeriod.doOnce({win.close});
win.front;
)