← 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) const cx1 = W * 0.65 + Math.cos(t * 0.4) * 8 const cy1 = H * 0.55 + Math.sin(t * 0.3) * 6 const cx2 = W * 0.20 + Math.sin(t * 0.5) * 10 const cy2 = H * 0.45 + Math.cos(t * 0.4) * 6 for (let y = 0; y < H; y++) { for (let x = 0; x < W; x++) { const d1 = Math.hypot(x - cx1, y - cy1) const d2 = Math.hypot(x - cx2, y - cy2) const v = Math.sin(d1 * 0.45 - t * 4) + Math.sin(d2 * 0.55 - t * 3.2) const q = Math.floor((v + 2) * 1.6) const pal = [ [22,10,48],[60,28,90],[110,60,140],[160,100,180], [200,140,220],[230,180,240],[245,210,250], ] const col = pal[Math.max(0, Math.min(pal.length - 1, q))] const i = (y * W + x) * 4 img.data[i] = col[0]; img.data[i+1] = col[1]; img.data[i+2] = col[2]; 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 :)