Voronoi

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4import { createPointerSource } from "../lib/pointerSource";5 6/**7 * A shattered-glass cell pattern that drifts, with the pointer as one of the8 * seeds.9 *10 * Voronoi is normally computed by finding the nearest seed. The edges come11 * from also tracking the SECOND nearest and drawing where the two distances12 * are close — the set of points equidistant from two seeds is exactly the cell13 * boundary. Deriving edges that way makes them mathematically correct and14 * uniformly thin, where thresholding the nearest distance alone gives borders15 * that fatten around large cells and vanish in small ones.16 *17 * Seeds live on a 3x3 neighbourhood of a hashed lattice rather than in a18 * uniform array, so the pattern is infinite and costs nine hashes per pixel19 * regardless of how much of it is on screen.20 */21 22const VERTEX = `attribute vec2 position;23void main() { gl_Position = vec4(position, 0.0, 1.0); }`;24 25const FRAGMENT = `26precision highp float;27uniform vec2  uResolution;28uniform float uTime;29uniform vec2  uPointer;30uniform vec3  uColorA;31uniform vec3  uColorB;32uniform float uScale;33uniform float uEdge;34 35vec2 hash(vec2 p) {36  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));37  return fract(sin(p) * 43758.5453);38}39 40void main() {41  vec2 uv = gl_FragCoord.xy / uResolution;42  float aspect = uResolution.x / uResolution.y;43  vec2 p = vec2(uv.x * aspect, uv.y) * uScale;44 45  vec2 cell = floor(p);46  vec2 local = fract(p);47 48  float nearest = 8.0;49  float second  = 8.0;50 51  for (int y = -1; y <= 1; y++) {52    for (int x = -1; x <= 1; x++) {53      vec2 offset = vec2(float(x), float(y));54      vec2 seed = hash(cell + offset);55      /* Each seed orbits its own cell, so the tessellation stays valid — a56         seed wandering out of its cell would break the neighbourhood search. */57      seed = 0.5 + 0.42 * sin(uTime * 0.6 + 6.2831 * seed);58      float d = length(offset + seed - local);59      if (d < nearest) { second = nearest; nearest = d; }60      else if (d < second) { second = d; }61    }62  }63 64  /* The pointer is an extra seed, competing with the lattice. */65  vec2 pointerP = vec2(uPointer.x * aspect, uPointer.y) * uScale;66  float dp = length(p - pointerP);67  if (dp < nearest) { second = nearest; nearest = dp; }68  else if (dp < second) { second = dp; }69 70  /* Equidistance from the two nearest seeds IS the boundary. */71  float edge = smoothstep(0.0, 0.06 * uEdge, second - nearest);72 73  vec3 colour = mix(uColorA, uColorB, clamp(nearest * 0.9, 0.0, 1.0));74  gl_FragColor = vec4(colour * edge, 1.0);75}`;76 77function compile(gl: WebGLRenderingContext, type: number, src: string) {78  const s = gl.createShader(type);79  if (!s) return null;80  gl.shaderSource(s, src);81  gl.compileShader(s);82  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;83}84 85function toRgb(hex: string): [number, number, number] {86  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());87  if (!m) return [0, 0, 0];88  const n = parseInt(m[1], 16);89  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];90}91 92export interface VoronoiProps {93  colorA?: string;94  colorB?: string;95  /** Cells across the shorter axis. */96  scale?: number;97  /** Boundary thickness. */98  edge?: number;99  speed?: number;100  still?: boolean;101  className?: string;102}103 104export function Voronoi({105  colorA = "#c3f53c",106  colorB = "#14301f",107  scale = 7,108  edge = 1,109  speed = 1,110  still = false,111  className = "",112}: VoronoiProps) {113  const ref = useRef<HTMLCanvasElement>(null);114 115  useEffect(() => {116    const canvas = ref.current;117    if (!canvas) return;118    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });119    if (!gl) return;120 121    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);122    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);123    if (!vs || !fs) return;124    const program = gl.createProgram();125    if (!program) return;126    gl.attachShader(program, vs);127    gl.attachShader(program, fs);128    gl.linkProgram(program);129    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;130    gl.useProgram(program);131 132    const buffer = gl.createBuffer();133    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);134    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);135    const position = gl.getAttribLocation(program, "position");136    gl.enableVertexAttribArray(position);137    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);138 139    const uniform = (n: string) => gl.getUniformLocation(program, n);140    const uResolution = uniform("uResolution");141    const uTime = uniform("uTime");142    const uPointer = uniform("uPointer");143    gl.uniform3fv(uniform("uColorA"), toRgb(colorA));144    gl.uniform3fv(uniform("uColorB"), toRgb(colorB));145    gl.uniform1f(uniform("uScale"), scale);146    gl.uniform1f(uniform("uEdge"), edge);147 148    const reduced =149      still ||150      (typeof matchMedia === "function" &&151        matchMedia("(prefers-reduced-motion: reduce)").matches);152 153    let uw = 0;154    let uh = 0;155    const resize = () => {156      const dpr = Math.min(devicePixelRatio || 1, 2);157      const w = Math.floor(canvas.clientWidth * dpr);158      const h = Math.floor(canvas.clientHeight * dpr);159      if (!w || !h || (w === uw && h === uh)) return;160      uw = w;161      uh = h;162      canvas.width = w;163      canvas.height = h;164      gl.viewport(0, 0, w, h);165      gl.uniform2f(uResolution, w, h);166    };167 168    const pointer = createPointerSource(canvas);169    const start = performance.now();170 171    const draw = (now: number) => {172      resize();173      const elapsed = (now - start) / 1000;174      const local = pointer.read(elapsed);175      gl.uniform2f(uPointer, local.x, local.y);176      gl.uniform1f(uTime, elapsed * speed);177      gl.drawArrays(gl.TRIANGLES, 0, 3);178    };179 180    let frame = 0;181    const loop = (now: number) => {182      draw(now);183      frame = requestAnimationFrame(loop);184    };185 186    draw(reduced ? start + 2600 : start);187    if (!reduced) frame = requestAnimationFrame(loop);188 189    const observer = new ResizeObserver(() => {190      resize();191      if (reduced) draw(start + 2600);192    });193    observer.observe(canvas);194 195    return () => {196      cancelAnimationFrame(frame);197      observer.disconnect();198      pointer.dispose();199      gl.deleteProgram(program);200      gl.deleteShader(vs);201      gl.deleteShader(fs);202      gl.deleteBuffer(buffer);203    };204  }, [colorA, colorB, scale, edge, speed, still]);205 206  return <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />;207}208