Voronoi Diagram Generator

// Voronoi Cells — for each pixel, find the nearest of a grid of drifting
// seed points. Checking only the 9 neighbouring cells (not every seed on
// screen) is what makes this affordable per pixel.
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
if (!gl) throw new Error('WebGL is not available in this browser.');

const params = window.params = Object.assign({
  speed: 0.4,
  density: 6,
  drift: 1,
  edge: 0.06,       // border thickness between cells
  hue: 190,
  hueSpread: 90,
  flat: false,      // flat cell colours instead of a distance gradient
  zoom: 1, panX: 0, panY: 0, interactive: false
}, window.params);

const vert = `
attribute vec2 pos;
void main() { gl_Position = vec4(pos, 0.0, 1.0); }
`;

const frag = `
precision highp float;
uniform vec2 res;
uniform float time;
uniform vec2 pan;
uniform float zoom;
uniform float uDensity;
uniform float uDrift;
uniform float uEdge;
uniform float uHue;
uniform float uSpread;
uniform float uFlat;

// Deterministic pseudo-random vector per cell. No textures, no CPU work.
vec2 hash(vec2 p) {
  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
  return fract(sin(p) * 43758.5453);
}

void main() {
  vec2 uv = (gl_FragCoord.xy - 0.5 * res - pan) / (min(res.x, res.y) * zoom);
  vec2 p = uv * uDensity;

  vec2 cell = floor(p);
  vec2 f = fract(p);

  float d1 = 8.0, d2 = 8.0;      // nearest and second-nearest distances
  vec2 nearest = vec2(0.0);

  for (int j = -1; j <= 1; j++) {
    for (int i = -1; i <= 1; i++) {
      vec2 g = vec2(float(i), float(j));
      vec2 o = hash(cell + g);
      // Each seed drifts on its own little orbit.
      o = 0.5 + 0.5 * sin(time * uDrift + 6.2831 * o);
      float d = length(g + o - f);
      if (d < d1) { d2 = d1; d1 = d; nearest = cell + g; }
      else if (d < d2) { d2 = d; }
    }
  }

  float id = fract(sin(dot(nearest, vec2(12.9898, 78.233))) * 43758.5453);
  float hue = (uHue + id * uSpread) / 360.0;
  vec3 col = 0.5 + 0.5 * cos(6.28318 * (hue + vec3(0.0, 0.33, 0.67)));

  // d2 - d1 is small exactly on the boundary between two cells.
  float border = smoothstep(0.0, uEdge, d2 - d1);
  col *= mix(1.0, 0.35 + 0.65 * d1, 1.0 - uFlat);
  col = mix(vec3(0.02), col, border);

  gl_FragColor = vec4(col, 1.0);
}
`;

function compile(type, src) {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
  return s;
}

const prog = gl.createProgram();
gl.attachShader(prog, compile(gl.VERTEX_SHADER, vert));
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, frag));
gl.linkProgram(prog);
gl.useProgram(prog);

// One oversized triangle rather than two triangles for a quad: same coverage,
// no seam down the diagonal, one less vertex.
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
const loc = gl.getAttribLocation(prog, 'pos');
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

const u = (name) => gl.getUniformLocation(prog, name);
const uRes = u('res'), uTime = u('time');
const uPan = u('pan'), uZoom = u('zoom'), uDensity = u('uDensity');
const uDrift = u('uDrift'), uEdge = u('uEdge'), uHue = u('uHue');
const uSpread = u('uSpread'), uFlat = u('uFlat');

function resize() {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  canvas.width = Math.floor(canvas.clientWidth * dpr);
  canvas.height = Math.floor(canvas.clientHeight * dpr);
  gl.viewport(0, 0, canvas.width, canvas.height);
}
resize();
new ResizeObserver(resize).observe(canvas);

window.panZoom && window.panZoom(canvas, params);

let t = 0, last = performance.now();
function frame() {
  const now = performance.now();
  // Our own clock, so changing the speed slider never makes time jump.
  t += ((now - last) / 1000) * params.speed;
  last = now;

  gl.uniform2f(uRes, canvas.width, canvas.height);
  gl.uniform1f(uTime, t);
  gl.uniform2f(uPan, params.panX, -params.panY);
  gl.uniform1f(uZoom, params.zoom);
  gl.uniform1f(uDensity, params.density);
  gl.uniform1f(uDrift, params.drift);
  gl.uniform1f(uEdge, params.edge);
  gl.uniform1f(uHue, params.hue);
  gl.uniform1f(uSpread, params.hueSpread);
  gl.uniform1f(uFlat, params.flat ? 1.0 : 0.0);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(frame);
}
frame();