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 () {
  const UPDATERATE = 1000.0 / 60.0 // 60fps
  let frameCount = 0
  let lastTime = -1
  const can = document.getElementById('canvas') // EDIT name of canvas to draw to
  function draw () {
    const currTime = Date.now()
    if (currTime >= (lastTime + UPDATERATE)) {
      lastTime = currTime
      const bottom = can.getBoundingClientRect().bottom
      if (bottom >= 0 && bottom <= (innerHeight + can.height)) { // only draw when visible in browser
        const 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()
        const 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 += 1
      }
    }
    window.requestAnimationFrame(draw)
  }
  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));
var frameCount= 0;
usr.background= Color.black;
usr.drawFunc= {
  var theta= sin(frameCount*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));
    };
  };
  frameCount= frameCount+1;
};
CmdPeriod.doOnce({win.close});
win.front;
Routine({
  var nextTime;
  while({win.isClosed.not}, {
    nextTime= Main.elapsedTime+(1/60);
    usr.refresh;
    (nextTime-Main.elapsedTime).max(0.001).wait;
  });
}).play(AppClock);
)

Updates:

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