McCollough effect

; // Mateon1 x Semicolon

if (window.ran) throw "Don't run this multiple times, you'll break it!";
window.ran = true;

(function(){

document.body.innerHTML="Look at the reference image first.<br>After you're done, look at the center-ish of the changing image. You can blink and move your eyes a little bit, but don't move in relation to your screen.<br><br>After the time (6 minutes 30 seconds) passes, you will be shown the reference image again. It should have a tint near the bars.<br>This is NOT a persistence of view illusion. This effect can stay for a longer amount of time. <a href='https://en.wikipedia.org/wiki/McCollough_effect'>More info on the Wikipedia page for the McCollough effect.</a><br>";
document.head.innerHTML = "<style>canvas{display:block;margin-left:70px;margin-right:50px;float:left}</style>";
document.body.appendChild(canvas = document.createElement("canvas"));
document.body.appendChild(timerD = document.createElement("div"));;;;

function timer(initial, now, duration) {
  if(now-initial-duration>0)return timerD.innerHTML="<pre>Time's up!</pre>";
  timerD.innerHTML = "<pre>TIMER:<br>Start: "+new Date(initial)+"<br>Now:   "+new Date+"<br>---<br>Seconds passed/total:"+((now-initial)/1000).toFixed(2)+"/"+duration/1000+"<br>Left:"+((duration-now+initial)/1000)+"<br>Percentage:"+((now-initial)/duration*100).toFixed(2)+"%</pre>"
}

size = 600;
canvas.width=canvas.height=size + 10;
ctx = canvas.getContext("2d");
mins = 6.5;
interval = 6
gap = 5;


function drawTest() {
  ctx.clearRect(0,0,size+20,size+20);
  ctx.fillStyle = "black";
  for (var i = 0; i < size/2-gap; i += 2*interval) {
    ctx.fillRect(i+5,0+5,interval,size/2-gap);
    ctx.fillRect(i+size/2+gap+5,size/2+gap+5,interval,size/2-gap);
    ctx.fillRect(size/2+gap+5,i+5,size/2-gap,interval);
    ctx.fillRect(0+5,i+size/2+gap+5,size/2-gap,interval);
  }
}

function drawActivator(color,orientation) {
  ctx.fillStyle = "black";
  ctx.fillRect(0,0,size+20,size+20);
  ctx.fillStyle=color;
  for (var i = 0; i < size; i += 2 * interval) {
    if (orientation) ctx.fillRect(i+5, 5, interval, size);
    else             ctx.fillRect(5, i+5, size, interval);
  }
}

drawTest();
var start = Date.now(), last = 0;
setTimeout(function loop(){
  if (Date.now() > start + mins * 60 * 1000) return drawTest();
  drawActivator(["#2e2","red"][last],last=(last+1)&1);
  setTimeout(loop, 3000)
}, 10000);
requestAnimationFrame(function t(){requestAnimationFrame(t);timer(start,Date.now(),mins*60000);})
}());