Home▸Crystals & Crystallization▸Crystal Lab (2D)

Crystal Lab (2D)

2D companion to Crystal Lab: a top-down crystal lattice whose pillars rise and fall from two overlapping wave fields, with pointer-injected ripples and a live glow readout.

Crystals & Crystallization2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-crystal-lab ↗ Open standalone

This 2D companion drives the same two overlapping wave fields as the 3D Crystal Lab through a flat, top-down lattice view: each cell's height comes from a radial wave plus a diagonal pulse wave, rendered with an isometric offset and a hue that shifts with the local glow. Moving the pointer over the grid adds a decaying ripple at that point, and the Wave, Pulse, Glow and Grid density sliders let you retune the interference pattern in real time.

⚙ Under the hood

Canvas 2D crystal lattice driven by h = base + sin(wave term) + cos(pulse term), with a pointer-distance ripple term and an HSL color mapping tied to local height (glow).

crystal latticewave interferencecanvas 2disometric grid

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

Why does the lattice look isometric instead of a flat grid?

Each cell's screen position is offset by its own current height, so taller pillars are drawn slightly higher and later (painter's-algorithm depth sort), giving a pseudo-3D relief without WebGL.

What do the Wave and Pulse sliders actually change?

Wave scales the speed of a radial wave measured from the lattice center; Pulse scales the speed of a diagonal wave measured along the grid's x−z axis. Together they set the interference pattern you see moving across the surface.

Does this match the 3D Crystal Lab's mechanics?

Yes — the same height formula (base height, radial wave, diagonal pulse wave, pointer ripple) drives both versions; only the rendering differs, from an instanced 3D mesh to a flat isometric canvas grid.

What did you find?

Add reproduction steps (optional)