Iridescent effect with thin-film interference

<canvas id="film" width="240" height="240" style="width:360px;height:360px;border-radius:50%;background:#0d0d12"></canvas>
<script>
const canvas = document.getElementById('film')
const g = canvas.getContext('2d')
const W = canvas.width, img = g.createImageData(W, W)
const N = 1.33, WAVES = [650, 532, 450] // nm: red, green, blue
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
function film(d) {
  return WAVES.map((l) => Math.sin((2 * Math.PI * N * d) / l) ** 2)
}
function frame(t) {
  const s = still ? 0 : t / 1000
  for (let y = 0; y < W; y++) for (let x = 0; x < W; x++) {
    const u = x / W - 0.5, v = y / W - 0.5, r = Math.hypot(u, v)
    const i = (y * W + x) * 4
    if (r > 0.5) { img.data[i + 3] = 0; continue }
    // Thin at the top, thick at the bottom, with a slow swirl.
    const swirl = Math.sin(u * 9 + s * 0.7) * Math.cos(v * 7 - s * 0.5)
    const d = 150 + (v + 0.5) * 650 + swirl * 120
    const [cr, cg, cb] = film(d)
    const rim = Math.min(1, 0.25 + r * 1.6) // the film shows most at the edge
    img.data[i] = cr * 255 * rim
    img.data[i + 1] = cg * 255 * rim
    img.data[i + 2] = cb * 255 * rim
    img.data[i + 3] = 255
  }
  g.putImageData(img, 0, 0)
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>