White on White

From chatting with Blanca one time ages ago; apologies to Kazimir Malevich. Draws white squares atop black squares of the exact same dimensions; if screen resolution was perfect you’d see nothing. So everything you see is the antialiasing residue of the canvas rendering.

<!DOCTYPE html>
<meta charset="utf-8">

<style>

html, body, canvas {
	width: 100%;
	height: 100%;
	margin: 0;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
}

</style>

var mouse = [innerWidth*.25,innerHeight*.25];
d3.select('body').on('mousemove', function() {
	mouse = d3.mouse(this);
});

var rotation;
window.addEventListener('deviceorientation', handleOrientation);

var c2 = document.createElement('canvas');
var x2 = c2.getContext('2d');
c2.setAttribute('width', innerWidth);
c2.setAttribute('height', innerHeight);
document.body.appendChild(c2);
x2.translate(innerWidth/2, innerHeight/2);

var c = document.createElement('canvas');
var x = c.getContext('2d');
c.setAttribute('width', innerWidth);
c.setAttribute('height', innerHeight);
document.body.appendChild(c);

d3.timer(function(t) {

var w = innerWidth + Math.sin(t/320) * Math.sin(t/5000) * innerWidth;
	var h = innerHeight + Math.sin(t/320) * Math.sin(t/5000) * innerHeight;
	var r = Math.min(w, h) * 2 / 3;

c.setAttribute('width', w);
	c.setAttribute('height', h);

x.translate(w/2, h/2);
	if(rotation) {
		x.rotate(rotation.alpha / 360 * Math.PI * 2);
	} else {
		x.rotate(t / 15000);		
	}

x.fillStyle = '#000000';
	x.fillRect(-r/2,-r/2,r,r);
	x.fillStyle = '#ffffff';
	x.fillRect(-r/2,-r/2,r,r);

// draw lil guys orbiting
	if(rotation) {
		var diagonal = Math.sqrt(Math.pow(innerWidth,2) + Math.pow(innerHeight,2));
		var orbit = .25 * diagonal + .5 * diagonal * (rotation.gamma / 90);
	} else {
		var orbit = Math.sqrt(Math.pow(mouse[0] - innerWidth/2, 2) + Math.pow(mouse[1] - innerHeight/2, 2));		
	}
	var r2 = r/5;
	d3.range(55 + 50 * Math.sin(-Math.PI/2 + t/12000)).forEach(function(d,i,arr) {
		var theta = i * Math.PI * 2 / arr.length;
		x2.rotate(Math.sin(t/10000) * .001);
		x2.fillStyle = d3.interpolateRainbow(i/arr.length);
		x2.fillRect((-r2/2) + orbit*Math.cos(theta), (-r2/2) + orbit*Math.sin(theta),r2,r2);
		x2.fillStyle = '#ffffff';
		x2.fillRect((-r2/2) + orbit*Math.cos(theta), (-r2/2) + orbit*Math.sin(theta),r2,r2);
	})

})

function handleOrientation(e) {
  if(e.gamma === null || e.beta === null || e.alpha === null) return;
  rotation = {
    gamma: e.gamma || 0,
    beta: e.beta || 0,
    alpha: e.alpha || 0
  }
}

</script>