window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();
isPrime = function(n) {
  if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false; 
  if (n==leastFactor(n)) return true;
  return false;
}
leastFactor = function(n){
  if (isNaN(n) || !isFinite(n)) return NaN;  
  if (n==0) return 0;  
  if (n%1 || n*n<2) return 1;
  if (n%2==0) return 2;  
  if (n%3==0) return 3;  
  if (n%5==0) return 5;  
  var m = Math.sqrt(n);
  for (var i=7;i<=m;i+=30) {
    if (n%i==0)      return i;
    if (n%(i+4)==0)  return i+4;
    if (n%(i+6)==0)  return i+6;
    if (n%(i+10)==0) return i+10;
    if (n%(i+12)==0) return i+12;
    if (n%(i+16)==0) return i+16;
    if (n%(i+22)==0) return i+22;
    if (n%(i+24)==0) return i+24;
  }
  return n;
}

var canvas=document.getElementById("c")
var ctx=canvas.getContext("2d")

var W = canvas.width = window.innerWidth*0.7;
var H  = canvas.height = window.innerHeight;

  ctx.font = "10px monospace";
  ctx.textAlign="center"
  ctx.textBaseline = 'middle';

var number=41
var i=0
var numbersThisLine=1
var times=0
var d=8
var w=20

function draw(){
  if(isPrime(number)){
    dot("dark")
  }else{
    dot("light")
  }
  if(i == numbersThisLine){
    i=0
    turn()
    times++
  }
  if(times==2){
    i=0;
    numbersThisLine+=1
    times=0
  }
  i+=1
  number+=1
  next()
  if(numbersThisLine <= Math.min(W, H) / (w + d)) requestAnimFrame(draw)
}
function dot(color){
  ctx.fillStyle=color == "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.7)";
  ctx.strokeStyle=color == "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.7)";
  ctx.strokeRect(-1*w/2, -1*w/2, w, w)
  ctx.fillText(number%1000, 0, 0)
}
function turn(){
  ctx.rotate(Math.PI/2)
}
function next(){
  ctx.translate(w + d, 0)
}
ctx.translate(W/2, H/2)
draw()