Flow field art: how a noise flow field works, with code

<canvas id="flow" style="position:fixed;inset:0;width:100%;height:100%;background:#f3efe6"></canvas>
<script>
const canvas = document.getElementById('flow')
const g = canvas.getContext('2d')
const N = 1500, SCALE = 0.0022, SPEED = 1.2, TURNS = 2 // TURNS: how far the noise can twist the flow
const SHEET = 480, FADE = 40 // frames: draw a sheet, then fade it out and start a new one
const PAPER = '#f3efe6', INK = 'rgba(22,24,32,0.2)', ACCENT = 'rgba(214,72,46,0.5)'
const still = matchMedia('(prefers-reduced-motion: reduce)').matches

// Smooth value noise: random values on a 3D lattice, blended with a smoothstep.
// The third axis is time, so the field drifts without jumping.
const hash = (x, y, z) => {
  let h = (x * 374761393 + y * 668265263 + z * 2147483647) | 0
  h = Math.imul(h ^ (h >>> 13), 1274126177)
  return ((h ^ (h >>> 16)) >>> 0) / 4294967295
}
const smooth = (t) => t * t * (3 - 2 * t)
const lerp = (a, b, t) => a + (b - a) * t
function noise(x, y, z) {
  const X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z)
  const u = smooth(x - X), v = smooth(y - Y), w = smooth(z - Z)
  const c = (i, j, k) => hash(X + i, Y + j, Z + k)
  return lerp(
    lerp(lerp(c(0, 0, 0), c(1, 0, 0), u), lerp(c(0, 1, 0), c(1, 1, 0), u), v),
    lerp(lerp(c(0, 0, 1), c(1, 0, 1), u), lerp(c(0, 1, 1), c(1, 1, 1), u), v), w)
}
// The field: every point on the canvas has an angle
const angle = (x, y, t) => (noise(x * SCALE, y * SCALE, t) * 0.75 + noise(x * SCALE * 3, y * SCALE * 3, t + 9) * 0.25) * Math.PI * 2 * TURNS

let w, h, dpr
function size() {
  dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
  g.fillStyle = PAPER; g.fillRect(0, 0, w, h)
}
size()

const spawn = (p) => { p.x = Math.random() * w; p.y = Math.random() * h; p.life = 60 + Math.random() * 180; return p }
const parts = Array.from({ length: N }, (_, i) => spawn({ accent: i % 40 === 0 }))

let t = Math.random() * 100
function step() {
  g.lineWidth = dpr
  for (const color of [INK, ACCENT]) { // one path per color: far fewer draw calls than one per particle
    g.strokeStyle = color; g.beginPath()
    for (const p of parts) {
      if ((color === ACCENT) !== p.accent) continue
      const a = angle(p.x / dpr, p.y / dpr, t) // read the field where the particle stands
      const nx = p.x + Math.cos(a) * SPEED * dpr, ny = p.y + Math.sin(a) * SPEED * dpr
      g.moveTo(p.x, p.y); g.lineTo(nx, ny)
      p.x = nx; p.y = ny
      if (--p.life < 0 || nx < 0 || ny < 0 || nx > w || ny > h) spawn(p) // old or off the edge: start again
    }
    g.stroke()
  }
  t += 0.0005 // the field drifts slowly while it draws
}
const sheet = () => { for (let i = 0; i < 300; i++) step() }

if (still) {
  sheet() // reduced motion: draw one finished sheet and stop
  addEventListener('resize', () => { size(); sheet() })
} else {
  addEventListener('resize', size)
  let n = 0
  requestAnimationFrame(function frame() {
    if (n < SHEET) step() // strokes pile up into a drawing
    else { g.globalAlpha = 0.15; g.fillStyle = PAPER; g.fillRect(0, 0, w, h); g.globalAlpha = 1 }
    if (++n === SHEET + FADE) { size(); parts.forEach(spawn); t = Math.random() * 100; n = 0 } // a new field
    requestAnimationFrame(frame)
  })
}
</script>