← back to archive
This code makes the animation :)) you can make some changes yourself and see how it looks different :)
const img = ctx.createImageData(W, H) for (let y = 0; y < H; y++) { for (let x = 0; x < W; x++) { const v = Math.sin(x * 0.08 + t) + Math.sin(y * 0.12 + t * 1.2) + Math.sin((x + y) * 0.06 + t * 0.8) + Math.sin(Math.hypot(x - W / 2, y - H / 2) * 0.1 - t) const q = (v + 4) / 8 const r = Math.floor(128 + 127 * Math.sin(q * Math.PI * 2)) const g = Math.floor(60 + 60 * Math.sin(q * Math.PI * 2 + 2)) const b = Math.floor(180 + 75 * Math.sin(q * Math.PI * 2 + 4)) const i = (y * W + x) * 4 img.data[i] = r; img.data[i+1] = g; img.data[i+2] = b; img.data[i+3] = 255 } } ctx.putImageData(img, 0, 0)
This Live Coding Tool is called Strudel, you can play around and hear the difference :)