Wave visualizer

A small 3D browser demo of a radial ripple: height follows a sine in the phase (k r - \omega t), with an optional Gaussian falloff toward the edges of the sheet. You see the wave as a surface (and optional wireframe), not a single line, so outward propagation reads like water ripples.

Built with Vite and Three.js.

What you can show

• Ripple surface — dense plane, vertex colors from phase, updates every frame with recomputed normals for lighting.
• Particle sine demo — one marker at a fixed radius; its height oscillates sinusoidally in time. A trail along (-x) plots past heights so (z) vs time appears as a sine in space.
• Radial ray — a polyline from the center along (+x); height vs distance is the spatial sine along that outgoing direction (again with the same envelope as the surface).

Controls (in the panel): amplitude, wavenumber (k), angular frequency (\omega), edge falloff, pause, wire overlay, particle demo options, and the radial ray toggle. Orbit with drag, zoom with scroll.

Run locally

npm install
npm run dev

Then open the URL Vite prints (typically http://localhost:5173).

Build

npm run build
npm run preview   # optional: serve production build

Project layout

• src/main.js — scene, wave update, overlays, UI wiring
• src/style.css — fullscreen canvas and panel styles
• index.html — entry HTML