Chromostereopsis

Chromostereopsis effect

by Victor Ribeiro

CSS

html, body{
  margin: 0;
  padding: 0;
}
canvas{
  display: block;
}

JavaScript

let canvas = document.createElement('canvas');
canvas.width = w = innerWidth;
canvas.height = h = innerHeight;
let c = canvas.getContext('2d');
let twopi = 2*Math.PI;

document.body.appendChild(canvas);

function draw(){
	c.fillStyle = 'black';
	c.fillRect(0,0,w,h);
	c.save();
  c.translate(w/2,h/2);

  for(let i = 0; i < 3500; i++){
    let a = Math.random() * twopi;
    let u = Math.random() * 200 + Math.random() * 200;
    let r = u > 200 ? 400-u : u ;
    let x = Math.cos(a) * r;
    let y = Math.sin(a) * r;
    let d = Math.sqrt( x*x + y*y);
    let al = Math.random();
    if( d < 100 ){
    	c.fillStyle = 'rgba(255,0,0,'+al+')';
    }else if( d < 110){
    	c.fillStyle = 'rgba(0,0,0,1)';
    }else{
    	c.fillStyle = 'rgba(0,0,255,'+al+')';
    }
    c.fillRect(x,y,3,3);
  }
  c.restore();
}

draw();