Seizure-inducing Magenta Spiral

​

<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>

​