Worley Noise: Build Cellular Canvas Textures

Worley noise becomes useful when the cellular field is reproducible, searchable, and art-directed—not just random dots under a color ramp. This tutorial builds a bounded Canvas renderer from seeded feature points, proves its F1/F2 search, tiles the field seamlessly, and exports the recipe beside the pixels.

Define the Worley noise field before drawing

Worley noise begins with distances to feature points, not with a blur or a random collection of circles. For every sample position, find the nearest point distance F1, the second-nearest distance F2, and optionally the identity of the winning cell. Those values form a scalar field that can be mapped into stone, foam, cracked glaze, biological membranes, or an abstract print.

Steven Worley’s original cellular texture paper describes a procedural basis built from a spatial point process and ordered distances. A browser edition can use a simpler deterministic point count per grid cell while preserving the central contract: candidate points are generated reproducibly, neighbor search is bounded by a proved stopping condition, and each pixel’s style derives from measured distances.

Write the edition recipe before touching color. Record the seed, canvas dimensions, device-independent sampling resolution, cell size, feature count rule, distance metric, tile mode, field expression, normalization range, palette, and export scale. This receipt turns “random texture” into reproducible creative code.

The article lab uses at most 512×512 samples, a bounded grid, and one seeded feature per cell. That constraint is an artistic tool as much as a safety limit: it makes the field quick to regenerate and possible to audit. Worley noise can still look organic when the underlying process is explicit. Complexity should come from composition, scale, and field mapping—not from losing the seed or hiding how the nearest points were chosen.

Generate seeded feature points cell by cell

Divide the plane into square lattice cells and derive a pseudo-random offset for each cell from the global seed and integer cell coordinates. A hash-based generator is convenient because any cell can be regenerated independently; there is no mutable random stream whose result changes when loop order changes. Store the algorithm name and numeric seed with the edition.

One feature per cell creates a regular density with irregular placement. More varied point counts create stronger clumps and voids, but also complicate the proof and normalization. Begin with the controlled version, then change the distribution deliberately. The useful question is not whether the texture looks “natural.” It is which spatial statistics support the intended visual voice.

The feature positions should exist in field coordinates rather than output pixels. Rendering at twice the resolution must sample the same field, not invent a new point set. That separation makes high-resolution export deterministic and keeps a thumbnail visually related to the final print.

Seed discipline connects Worley noise to seeded randomness in generative art. Preserve a canonical integer seed, stable coordinate hashing, and algorithm version. If the hash changes, increment the recipe version because every point will move even when the displayed seed stays constant.

For review, draw a point-overlay mode that labels a few feature cells and the selected nearest pair for one probe pixel. The overlay is not part of the final texture; it is evidence that the field and the image share one source of truth.

Prove when the neighbor search can stop

A naive renderer compares every sample against every feature point. That works for tiny sketches but scales poorly and obscures the locality that makes cellular noise practical. Search the sample’s own lattice cell and successive rings of neighboring cells. After each ring, compare the current F2 with a lower bound on the distance to any point in all unvisited cells.

For Euclidean distance and one feature constrained inside each cell, the lower bound comes from the sample’s distance to the boundary of the searched square. When that bound is no smaller than F2, no unseen point can enter the first two positions, so the search can stop. Use a conservative bound if the exact geometry is inconvenient; extra cells cost time, while an optimistic bound corrupts the image.

Record the maximum ring visited and verify a deterministic sample of pixels against a brute-force oracle over the complete finite point set. The bounded lab does both. A mutant that always stops after the adjacent 3×3 neighborhood must fail on a fixture whose second-nearest feature lies farther away.

This proof distinguishes intentional approximation from accidental artifacts. If the artwork chooses a fixed neighborhood for speed, label it as stylized cellular noise rather than exact Worley noise. A correct F1 F2 distance receipt makes that boundary visible. The receipt should say which interpretation was rendered.

Search behavior also creates a useful diagnostic image: color pixels by ring count. Dense quiet areas and boundary cases become visible immediately, and unexpectedly large regions reveal either a sparse feature process or a broken lower bound.

Derive F1, F2, and edge distance honestly

F1 is the distance to the nearest feature; F2 is the distance to the runner-up. Mapping F1 alone creates rounded cells around sites. Mapping F2−F1 highlights approximate boundaries because the two candidates approach equal distance near a Voronoi edge. Ratios and weighted combinations can create other materials, but name the expression and guard division around zero.

Distance units matter. Normalize coordinates by cell size so a recipe behaves consistently across canvas dimensions. If the output is intended to tile, compute wrapped coordinate deltas before the metric. Squared Euclidean distances are sufficient for ordering candidates; take square roots only when the selected field expression requires true distance.

Worley noise is not the same as a Voronoi diagram, though they share nearest-site geometry. A diagram emphasizes cell ownership and edges; cellular noise treats ordered distances as continuous signals. Preserve the winning site ID when you want per-cell color variation, but do not confuse that label with the F1 magnitude.

The art direction can combine a broad F1 body with a narrow F2−F1 ridge. Keep those channels separate until the final mapping so a reviewer can inspect each grayscale layer. Blue-noise stippling on Canvas is a useful contrast: blue noise optimizes spacing between samples, while this field measures distance from every evaluation point to a seeded feature process. Both require a precise spatial contract, but they solve different visual problems.

Art-direct cellular noise as an edition system

A technically correct Worley noise field can still produce generic texture. Build a contact sheet instead of tuning one image. Hold the seed fixed and vary the field expression across columns; hold the expression fixed and vary scale, contrast curve, and palette across rows. Label every tile with its recipe so visual judgment remains attached to reproducible inputs.

Use structure beyond color. Thin boundary ridges, broad cell interiors, threshold bands, and sparse contour accents create hierarchy that survives grayscale. A palette can then reinforce the hierarchy with warm and cool roles. Avoid assigning meaning only through hue; a print, dark theme, or color-vision difference should not erase the composition.

Canvas ImageData is a direct pixel surface, but not an accessibility surface. The HTML canvas specification makes clear that authors must provide suitable fallback content and interaction alternatives. Pair the rendered bitmap with a concise textual description, visible recipe table, and downloadable receipt. If controls change the field, expose labeled native inputs and a live status line that reports the chosen edition without announcing every pixel update.

For this edition, the strongest design usually comes from restraint: one dominant cell scale, one secondary ridge scale, and a limited palette. If the texture must sit behind text, measure contrast at the final crop rather than assuming a dark overlay is enough. The field is an ingredient; the product surface still owns legibility.

Make the procedural texture tile seamlessly

A seamless procedural texture is a field on a torus. Generate the canonical feature cells for one period, then evaluate distances with wrapped deltas: for each axis choose the shortest displacement among the direct value and its plus-or-minus-period copies. Features near the left edge can then influence samples near the right edge, and the same applies vertically.

Do not patch seams after rendering by blending opposite edges. Blending hides discontinuities but changes the field and often creates soft cross-shaped bands. Periodic distance makes the underlying measurement continuous before any palette mapping.

Verify the contract numerically. Sample corresponding points on the left and right boundaries and require matching field values within a declared floating tolerance; repeat for top and bottom. Also render a 2×2 preview of the tile. The repeated view makes directional seams, density shifts, and palette discontinuities obvious even when the numeric edge test passes.

Domain warping can be applied to the sample coordinates before the periodic distance calculation, but the warp itself must be periodic or it reintroduces seams. The domain-warping marble shader provides a richer displacement vocabulary; import its ideas only after the base tile has a passing receipt.

The lab’s tile mode keeps seed points and wrapped deltas explicit. Its seam mutant uses direct distance at the boundary and must be rejected. The result is a tileable field by construction, not a bitmap whose edges merely happen to look similar at one resolution.

Export pixels with a complete recipe receipt

Render through Canvas ImageData so every output channel is a deterministic function of the selected field. Build the typed pixel buffer once, write four channels per pixel, and commit it with putImageData. Avoid per-pixel style strings or fill calls in the inner loop; they make a bounded study needlessly slow.

An exported Worley noise PNG preserves pixels but not necessarily provenance. Pair it with JSON containing seed, algorithm version, dimensions, sample scale, cell size, metric, field expression, tile period, normalization, palette stops, and a hash of the derived feature set. A CSV probe ledger can include selected pixel coordinates, F1, F2, winning feature, ring count, and final tone.

The text alternative should describe the visible structure rather than recite settings. The WCAG 2.2 guidance for non-text content requires an equivalent purpose, not a dump of raw pixels. For an ornamental background, an empty alternative may be correct in the product while the adjacent recipe serves people studying the generator. For a standalone artwork, provide a brief visual description and link the technical receipt separately.

Keep high-resolution export bounded. The lab exports its preview receipt rather than promising print production at arbitrary dimensions. A production tool can move the same field code into a worker or tiled renderer after profiling. Canvas dithering can be added as a deliberate final quantization stage, but its seed and error kernel must join the receipt because they change the visible edition.

Break the renderer with named mutants

Mutation fixtures protect both the mathematics and the art system. Replace the seeded hash with ambient randomness and reproducibility should fail. Stop the search too early and the brute-force probe oracle should find a wrong F2. Sort F1 and F2 backwards and the invariant F1≤F2 should fail. Use direct distances in tile mode and the seam check should fail. Drop the text alternative and the accessibility contract should fail.

Each fixture must enter the same production function through one named switch. A test that fabricates a bad receipt downstream proves only the test. Capture the expected failure code, observed code, and hashes of the good and mutated results. One mutation should trigger one primary explanation so maintenance does not become a hunt through unrelated red badges.

Worley noise benefits from visual regression too, but pixel snapshots alone are brittle. A second Worley noise seed should change features without changing the declared search and tiling contract. Preserve field probes, feature hashes, seam values, and histogram summaries alongside the reference image. Those semantic checks explain whether a changed bitmap comes from an intentional palette adjustment, a new point algorithm, or a broken distance search.

Finally, print or place the texture in context. The browser lab validates a bounded finite field; it does not prove ink behavior, compression quality, text contrast, or motion performance. Revisit when the Canvas implementation, accessibility guidance, export pipeline, or art direction changes. The finished work earns its texture through a reproducible field, a visible recipe, and a composition that does more than demonstrate an algorithm.

Runnable local artifact — The lab verifies its finite seeded feature field, selected probes, and periodic boundary samples only; it makes no print, compression, browser-performance, or perceptual-naturalness claim.

Choose a seed, grid, resolution, and F1/F2 mapping; render with Canvas ImageData, compare bounded search to brute-force probes, check wrapped seams, kill five mutants, and export the field receipt.