Clyune Component GalleryClick Water Ripple · How it works & code
Water ripple from discrete wave equation
Runtime logic
Visiting `/canvas/ripple-c`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'ripple-c' })`. mount resolves the variant to family `ripple-c`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Pointer down/drag/move updates the interaction (drag handles, hover readouts); when untouched and auto-demo is on, the pointer follows a Lissajous path. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; makeLayer — Offscreen layer (trails / pixel fields); rng — Seeded deterministic PRNG (same seed, same result); hexRgb — Colour string → [r, g, b]; clamp — Clamps a value to a range; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.get — Reads current control values; S.onDown — Pointer down; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.drawImage() — Draws an image or offscreen canvas
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.ripple-c (L1342-L1381)
Code walkthrough
L1344-1344: Control definitions (colour/speed/size/count/extras): Water surface color, Drop radius, Damping retention rate, Auto rain drops /s, Drop intensity. L1345-1345: Preset buttons: name → parameter overrides (6). L1346-1354: Info-panel content: live rows(v), formula, notes, params, steps. L1355-1380: Init function: sets up state and returns the per-frame callback: registers pointer handlers `S.onDown`; draws with Canvas 2D `drawImage`; math via `Math.ceil`, `Math.floor`, `Math.min`, `Math.max`, `Math.round`, `Math.hypot`; returns readouts `cols`, `rows`, `damp`, `c`, `E`, `hp`, `drops` … to the info panel.
Principles
∂²h / ∂t² = c² · ∇2h Separation: hₙ₊₁ = ½(Up+Down+Left+Right)ₙ − hₙ₋₁ Stop: hₙ₊₁ ← d·hₙ₊₁; Wave speed c ≈ Gugwan × 60 / √2 Each cell on the surface Fundamentals records a height. Fluctuation equation Says: The acceleration of a cell depends on its height and the surroundings. Bad——They were pulled up lower than their neighbours and pulled down higher than their neighbours. Two elevation maps (this frame and the previous frame) are used interchangeably to allow disturbances to spread outward in circles, and when they encounter a border reflection, encounter Interfere 。 Each step multiplied by the retention rate of the resistance d，波纹逐渐平息。点击或拖动在水面滴水，明暗来自水面的坡度。