UNDA

What is Unda?

Unda (Latin: wave) is a browser-based wave interference generator that uses text as its seed. Type any word — up to 24 characters — and Unda runs FNV-32a on the lowercase text to produce a 32-bit hash. That hash seeds a deterministic xorshift32 generator, which places 3 to 7 circular wave sources at positions inside a unit square. Each source emits concentric circular waves at a shared wavelength (with a slight per-source spread of ±8%). The result is an animated 2D interference pattern: where waves from different sources arrive in phase, they produce bright constructive fringes; where they arrive out of phase, they cancel into dark destructive bands.

The Physics — Huygens Principle and Superposition

Wave interference is one of the most fundamental phenomena in physics. When two or more coherent waves travel through the same medium, the principle of superposition states that the total displacement at any point equals the sum of the individual displacements. Constructive interference occurs where crests arrive together (amplitude doubles); destructive interference occurs where a crest meets a trough (amplitude cancels). For circular waves from point sources, the constructive zones form a characteristic pattern of hyperbolic fringes — the same geometry that appears in ripple tanks, double-slit experiments, and the colorful bands of soap bubbles.

Unda models each source as an idealized point emitter with amplitude:

A(x, y, t) = Σᵢ cos(2π · dist(x,y, sᵢ) / λᵢ − ω·t)

where:
  sᵢ  = position of source i (derived from word hash)
  λᵢ  = wavelength of source i
  ω   = 2.0 rad/s (angular frequency)
  dist = Euclidean distance in normalised [0,1]² coordinates

Rendering — Phasor Decomposition

Computing the full sum for 280 × 280 = 78,400 pixels at 60 fps would require 78,400 × N square roots and trigonometric evaluations per frame — far too slow for real-time use. Unda uses a phasor decomposition to reduce the per-frame cost to a single multiply-add per pixel.

Expanding using the cosine sum formula:

cos(φᵢ − ωt) = cos(φᵢ)·cos(ωt) + sin(φᵢ)·sin(ωt)

So: A(x,y,t) = cos(ωt)·Pr(x,y) + sin(ωt)·Pi(x,y)

where:
  Pr(x,y) = Σᵢ cos(2π · distᵢ / λᵢ)  [precomputed once]
  Pi(x,y) = Σᵢ sin(2π · distᵢ / λᵢ)  [precomputed once]

On each word change, Unda precomputes the two Float32Array maps Pr and Pi (the real and imaginary components of the phasor sum) across the 280 × 280 grid — O(W·H·N) work, done once. Every animation frame then requires only O(W·H) work: for each pixel, multiply Pr by cos(ωt) and add Pi by sin(ωt), normalise, and look up the colour. This runs in under 2 ms per frame on any modern device.

How to Use Unda

1. Type any word in the input field at the bottom of the screen.
2. Unda hashes the word with FNV-32a, extracting a seed for a deterministic xorshift32 generator.
3. The generator places 3 to 7 circular wave sources at positions in the canvas interior, each with a near-identical wavelength.
4. Two phasor maps — Pr (cosine sums) and Pi (sine sums) — are precomputed once across the 280 × 280 computation grid.
5. Each animation frame: amplitude(x, y, t) = Pr·cos(ωt) + Pi·sin(ωt). Bright aqua where waves add constructively; dark where they cancel.
6. The same word always produces the same source positions and therefore the same interference geometry. Share via URL.

Technical Notes

Unda is a single static HTML file with no external JavaScript dependencies. The computation grid is 280 × 280 (78,400 pixels); the phasor maps are two Float32Arrays of that size. The colour lookup table (LUT) maps 512 normalised amplitude values to RGBA via smooth-step interpolation between ten hand-tuned stops, producing a deep-ocean bioluminescent palette from near-black through medium teal to bright aqua-white. Rendering uses an OffscreenCanvas for the pixel-level work, then scales the result to the display via ctx.drawImage with high-quality image smoothing — the smooth gradient of wave patterns upscales cleanly without visible artefacts. Source indicator dots are drawn as radial gradient circles directly on the main canvas. The word is stored as an encodeURIComponent URL fragment for shareability.