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>
<body></body>
<script src="d3.v4.js"></script>
<script>
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>