Little Galaxy ES5
var canvas = document.createElement('canvas'),
c = canvas.getContext('2d'),
SIZE = 350;
canvas.width = SIZE;
canvas.height = SIZE;
document.body.appendChild(canvas);
c.fillStyle = 'black';
c.fillRect(0, 0, SIZE, SIZE);
c.fillStyle = 'white';
var spa = function(ts) {
var r = 0, t = 0;
var jitterX, jitterY, jitterT, jitterR;
for (var i = 0; i < 100; i += 0.5) {
t = ts + i / 15;
r = i;
jitterR = 5 + i / 5;
jitterT = Math.random() * 2 * Math.PI;
jitterX = Math.random() * jitterR * Math.sin(jitterT);
jitterY = Math.random() * jitterR * Math.cos(jitterT);
c.fillStyle = `hsl(${t / Math.PI * 180}deg, 50%, 50%)`;
c.fillRect(
SIZE / 2 + r * Math.cos(t) + jitterX,
SIZE / 2 + r * Math.sin(t) + jitterY,
3, 3
);
}
}
spa(0);
spa(Math.PI);
I made this in response to a question from a friend of mine a few years back…