Seizure-inducing Magenta Spiral

index.html

<canvas id="picture" width=800 height=600></canvas>

<script>
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");


ctx.translate(canvas.width/2,canvas.height/2);

var t = 0;
function render() {
  t += 0.005;
  var j = 1 + Math.sin(t)/1000;

  ctx.clearRect(-canvas.width/2,-canvas.height/2,canvas.width,canvas.height);

  for (var i = 0; i<500; i++) {
    ctx.globalAlpha = 0.5;
    ctx.strokeStyle = "rgb(" + 2*i + ",0," + Math.round(200*j) + ")";

    ctx.beginPath();
    ctx.moveTo(2*i,0);

    ctx.rotate(Math.PI/86+j);
    ctx.font = i + "px sans-serif";
    //ctx.fillText(i,4*i,20);

    ctx.lineTo(200, 2*i);
    ctx.stroke();
  }
};

window.requestAnimFrame = window.requestAnimationFrame  || 
  window.webkitRequestAnimationFrame        || 
  window.mozRequestAnimationFrame           || 
  window.oRequestAnimationFrame             || 
  window.msRequestAnimationFrame            || 
  function(callback, element) {
    window.setTimeout(callback, 16);
  };

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();

</script>