Gerstner Waves in Canvas: Art-Direct the Ocean

Gerstner waves in Canvas turn a small, bounded set of moving particles into an ocean with deliberate crests and rhythm. This tutorial validates the wave spectrum, freezes simulation time for replay, layers depth and curvature foam, and exports each art-directed edition without pretending to simulate complete fluid dynamics.

Set the boundary for Gerstner waves in Canvas

Gerstner waves in Canvas are a graphic construction: particles move on bounded circular or elliptical paths, and their displaced positions form trochoidal waves with sharper crests and flatter troughs. A handful of components can feel oceanic, but the result does not solve a complete fluid, shoreline, refraction, spray, or breaking-wave system.

That boundary is creatively useful. Instead of chasing physical completeness, define an edition: viewport, pixel ratio cap, seed, three spectral bands, fixed simulation time, depth layers, palette, foam rule, and crop. The same inputs must yield the same sample geometry and receipt. Art direction remains visible as a decision rather than hiding behind randomness.

Tessendorf’s ocean simulation course notes provide broader spectral context. This tutorial borrows the discipline of explicit wave parameters while using a far smaller deterministic sum. It never claims equivalence to an FFT ocean.

Canvas is the output surface because thousands of short line segments and filled bands can be redrawn economically without preserving a DOM node per sample. If the artwork needs a larger compute surface, compare WebGPU generative art after the visual contract is stable. The studio here stays dependency-free, bounded to 12 components and 720 horizontal samples, and able to freeze time for inspection.

Move particles into a trochoidal profile

For each component, start with phase θ = k·x − ω·t + φ. Vertical displacement is amplitude times sin θ. Horizontal displacement adds direction times steepness-scaled amplitude times cos θ. The horizontal term is what leans the profile into a crest instead of leaving a simple height graph.

Treat the parametric sample index as the source identity. Calculate displaced x and y, retain θ, tangent, curvature estimate, band, and component contribution. Sort for drawing only after validating the original order. If neighboring displaced x values reverse, the profile folds over itself; that can be a deliberate breaking-wave effect, but this bounded studio rejects it as outside its stable graphic contract.

The first figure follows one particle from its rest point around an orbit to the resulting crest. Arrows and numbered positions carry the explanation without relying on color. The same anatomy appears in the live studio as a static semantic table for readers who cannot inspect motion.

A Gerstner wave animation should not read wall-clock time inside geometry functions. Pass simulation time explicitly. The artifact fixes the default at 4.25 seconds, advances only from labeled controls, and freezes under reduced motion. This makes screenshots, exports, tests, and art reviews comparable. A mutation that reads the current clock produces a different canonical sample ledger and fails.

Compose a coherent three-band wave set

One component looks like a diagram; an authored ocean needs hierarchy. Divide the bounded spectrum into swell, body, and capillary-like detail. Swell uses the longest wavelength, largest amplitude, and slowest phase. Body waves establish rhythm and directional variation. Fine components add surface texture but should not compete with the silhouette.

For each band, store wavelength, amplitude, direction sign, phase, speed multiplier, and steepness share. Generate phase offsets from seeded randomness for generative art, then persist the realized values. The seed is provenance, not a substitute for the spectrum table.

The orchestra-score figure lays components on three staves. Bar length represents wavelength, vertical mark height represents amplitude, arrow direction encodes travel, and an explicit fraction records steepness budget. Gerstner waves in Canvas stay legible when the fine band does not take over the composition.

Gerstner waves in Canvas become coherent when ratios are deliberate. Start with wavelength intervals separated by roughly an octave, keep fine-band amplitude modest, and vary phases so major crests do not all align. These are art-direction starting points, not ocean laws. The studio lets you switch among two bounded spectra while the oracle checks every realized component against caps and stable ordering.

Validate a conservative steepness budget

Horizontal displacement can make the parametric surface fold when components become too steep. Use a conservative aggregate budget before sampling, then verify monotonic displaced x over the rendered interval. The aggregate gate is fast; the sample oracle catches interactions the summary can miss.

For each component, compute a dimensionless share from wave number, amplitude, and its declared steepness control. Sum absolute shares across the spectrum and require the total to remain below the studio’s explicit limit. Then sample Gerstner waves in Canvas at a denser oracle resolution than the display path, checking finite coordinates, positive x progression, and bounded vertical extent.

GPU Gems explains effective water simulation from summed waves, including parameter relationships and surface derivatives. Here, those ideas support a stable procedural water primitive. Curvature foam is a heuristic drawn where sampled curvature and crest height cross thresholds; it is not a simulated whitecap model.

Mutation fixtures remove the steepness gate, reverse sample order, inject a nonfinite amplitude, and allow too many components. The independent validator recomputes from the raw spectrum and must reject each defect. The Canvas ocean effect is considered exportable only when summary and sampled checks agree.

Sample space and time without shimmer

Sampling density must follow the shortest wavelength and the output scale. Too few samples create corners that flicker as phase advances. Unlimited sampling wastes main-thread time and can turn decorative motion into input delay. The studio caps logical width, device pixel ratio, samples, components, and animation steps.

Render geometry in logical CSS pixels, scale the backing store by a capped pixel ratio, and reset the transform before each frame. Advance a fixed simulation step when animation is enabled; if frames arrive late, cap catch-up work and preserve a dropped-step counter. The deterministic export always uses an explicit time, never the last displayed frame.

The WebGPU vs Canvas generative art comparison is useful once measured redraw cost exceeds the Canvas budget or the work is naturally parallel. Do not switch APIs because the picture is called an ocean. Profile the actual number of samples, layers, blends, and pixels on target devices.

Gerstner waves in Canvas also need resize discipline. Recompute projection from the new logical bounds, but preserve seed, spectrum, simulation time, and style. The receipt records both geometry inputs and presentation size so a changed crop is distinguishable from changed waves. Stable time and bounded resampling make before-and-after art direction inspectable.

Art-direct depth, curvature foam, and color

Draw back-to-front depth bands from the same wave geometry with modest phase and vertical offsets declared in the edition. A distant band should be thinner, lower contrast, and slower in apparent travel. The foreground can carry the strongest silhouette and sparse foam marks. Negative space above the horizon is part of the composition.

Curvature foam begins as evidence, not decoration. Calculate a finite-difference curvature estimate over the fixed samples, select points above both curvature and height thresholds, then apply a minimum spacing. The rendered dashes show where the rule fired. The receipt stores thresholds and count, allowing a reviewer to distinguish a threshold change from a spectral change.

The triptych keeps geometry identical while changing only palette, line weight, fills, paper grain marks, and foam treatment. Moon Glass uses restrained navy and silver arcs. Signal Sea uses dark cyan with coral markers. Paper Tide uses flat ink shapes and warm negative space. Labels and pattern choices survive grayscale.

This separation matters in a Gerstner wave animation: if changing “style” quietly changes amplitude or phase, an art review cannot isolate its judgment. The studio hashes geometry separately from presentation and kills a mutation that lets style alter the spectrum. For an alternative material language, study the layering discipline in the Canvas watercolor wet-paint grid.

Respect reduced motion and provide equivalents

Animation is optional presentation. The artwork must communicate its spectrum, depth order, steepness status, simulation time, and edition without requiring a reader to track moving crests. Provide pause and step controls, start paused when reduced motion is requested, and never use animation as the only sign of an invalid spectrum.

The Canvas element receives a concise accessible name, while a nearby table exposes the component values and validation state. The HTML Canvas specification defines the canvas element and its fallback model. A raster surface does not excuse missing semantics: keep controls, status, evidence, and export actions as ordinary HTML.

Keyboard targets are at least 44 pixels high, focus is visible, and status updates use a polite live region. The three art treatments retain named labels. Foam, bands, and travel direction use stroke, spacing, and text in addition to hue. Under forced colors, the studio simplifies to outlined bands and preserves the spectrum table.

Gerstner waves in Canvas should also stop doing invisible work. Pause redraw when the document is hidden, avoid an always-running request loop when the edition is frozen, and cap catch-up steps. These are product-quality decisions even for a poetic visual. A beautiful ocean that steals input responsiveness is unfinished.

Export a replayable ocean edition receipt

An edition receipt records schema version, seed, realized spectrum, steepness limit and sum, sample bounds, fixed simulation time, depth offsets, foam thresholds, logical size, pixel-ratio cap, art treatment, geometry digest, presentation digest, and validation results. It states the fluid-simulation boundary in plain language.

JSON supports exact replay. Standalone SVG provides a portable still made from the sampled paths, with title, description, metadata, and style name. The export validator reparses JSON, confirms the SVG semantic elements, recomputes the geometry digest, and asserts that changing only treatment leaves that digest untouched. No remote font, texture, script, or image is required.

Test same seed and time twice, a changed seed once, minimum and maximum bounded spectra, reduced motion, 200% zoom, and all target widths. Inject every mutation and require the independent oracle to disagree. Keep the mutation names and outcomes in the receipt so “tested” has inspectable meaning.

Gerstner waves in Canvas become more expressive when mathematics and art direction are not forced into false opposition. The bounded wave sum supplies coherent motion; the edition system supplies mood, hierarchy, and restraint. Preserve both ledgers, name the heuristic foam, and revisit when the validator, Canvas behavior, or target-device measurements change.

Runnable local artifact — The studio draws a graphic sum of trochoidal waves; it is not a complete fluid, spray, refraction, or coastal simulation.

Tune a bounded three-band spectrum, inspect folding evidence at fixed time, switch art direction without changing geometry, and export a replayable edition.