Spiral

Just some hypnotic graphics...

The JavaScript code above is this...

<div style="background-color:black;">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
(function() {
  let frameCount= 0;
  let can= document.getElementById('canvas');  //EDIT name of canvas to draw to
  function draw() {
    let bottom= can.getBoundingClientRect().bottom;
    if(bottom>=0 && bottom<=(innerHeight+can.height)) {  //only draw when visible in browser
      let ctx= can.getContext('2d');
      ctx.fillStyle= '#000';
      ctx.fillRect(0, 0, can.width, can.height);
      ctx.save();
      ctx.translate(can.width*0.5, can.height*0.5);
      ctx.fillStyle= '#FFF';
      ctx.beginPath();
      let theta= Math.sin(frameCount*0.001)*Math.PI*2*4;
      for(let y= 0; y<can.height; y++) {
        for(let 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);
  }
  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;
)

Updates:

• 200914: ported to Rust nannou /software/nannou/spiral/