---
title: "Stokes · generative art"
description: "Colour, too thick to hurry. Generative art plate #37 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/stokes"
---

![](https://vorillaz.com/_astro/stokes.DxAJAsey_jYDA.webp)

fig. #37 · rendered live in your browser from the code below

# #37 stokes

Colour, too thick to hurry.

- date

  2026.10.13

- tags

  generative-art · javascript

A field of colour from the lab palette, graphite, ember, signal, coral and ink, dragged down the plate one column at a time. Each column lets go at its own ragged edge and carries what it held down with it, taking on less and less of what it passes, so the top hangs in drips and the bottom settles into one warm wash. Then a chromatic grain goes over all of it. Play it and the field sinks slowly, the way a viscous flow would, and the grain moves.

## The smear

```javascript title="stokes.js"
// down each column the colour carried mixes in less and less of what it passes
for (let x = 0; x < N; x++) {
  const start = N * (0.22 * noise(x / N * 3.1, t * 0.5) - 0.04 + edge[x]); // where it lets go
  let carried = source(x, 0);
  for (let y = 0; y < N; y++) {
    const k = y < start ? 1 : grip[x] * exp((start - y) / N * 7) + 0.005;
    carried = mix(carried, source(x, y), k);
    field[x][y] = carried;
  }
}
```

## The wash

```javascript title="stokes.js"
// deeper down the columns run together: each row is blended with its neighbours,
// wider and more the lower it sits, and the chroma the averaging dulls is lifted back
const amount = clamp((y / N - 0.2) / 0.8) ** 1.4 * 0.85;
row = mix(row, boxBlur(row, 2 + floor(y / N * 20)), amount);
row = saturate(row, 1 + amount * 0.45);
```

## The grain

```javascript title="stokes.js"
// each channel gets its own noise, laid in overlay at the canvas's own pixels,
// with a sparse warm speck added on top; a fresh offset every frame
grain[i] = [128 + gaussian() * 52, 128 + gaussian() * 52, 128 + gaussian() * 52];
fill(pattern(grain, offset), "overlay", 0.75);
fill(pattern(specks, offset), "lighter", 0.35);
```

## References

- [Stokes flow](https://en.wikipedia.org/wiki/Stokes_flow)
- [Glitch art](https://en.wikipedia.org/wiki/Glitch_art)
- [Film grain](https://en.wikipedia.org/wiki/Film_grain)