Clyune Component GalleryBouncing Balls · How it works & code
Bouncing with gravity and restitution coefficient, with momentum conservation between balls
Runtime logic
Visiting `/physics/wall-ball`, DemoHost lazy-loads `demos/kits/kit-physics.js` (registry `mod: 'kit-physics'`) and calls `mount(host, { variant: 'wall-ball' })`. mount resolves the variant to family `wall-ball`; `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; rng — Seeded deterministic PRNG (same seed, same result); hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.onDown — Pointer down; S.onUp — Pointer up; S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.beginPath() — Starts a new path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.fill() — Fills the current path; ctx.stroke() — Strokes the current path
Source code
frontend/src/demos/kits/kit-physics.js: FAM.wall-ball (L222-L261)
Code walkthrough
L224-224: Control definitions (colour/speed/size/count/extras): Ball color, ball radius, Number of Balls, restitution e, gravity g. L225-225: Preset buttons: name → parameter overrides (6). L226-234: Info-panel content: live rows(v), formula, notes, params, steps. L235-260: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `beginPath`, `arc`, `fill`; math via `Math.round`, `Math.abs`, `Math.max`, `Math.sqrt`; returns readouts `n`, `E`, `K`, `e`, `vmax`, `bps`, `g` to the info panel.
Principles
Free location: v ← v + g · Δt，y ← y + v · Δt Crash wall: v⊥ ← −e·v⊥ (e = Recovery factor) Bounce height h₂ = e²·h₁; Energy E = ½mv² + mg(H − y) When the ball accelerates its descent by gravity, and hits the wall or the ground, the speed of the wall is reversed vertically and multiplied by restitution e . e = 1 It's completely elastic. The ball's gonna jump e < 1 Every time 1 − e² The energy's dropping. Consistency between the ball and the ball by kinetic weight (mass) ∝ Radius²). The pointers move together“Block”, It's gonna put energy back into the system, so it won't stop completely. Press the ball to drag it and throw it out at the speed of your hand.