Clyune Component GallerySmoke · How it works & code
Smoke with buoyancy + turbulence + diffusion
Runtime logic
Visiting `/canvas/smoke`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'smoke' })`. mount resolves the variant to family `smoke`; `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. 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); makeNoise — Smooth value noise + fBm octaves; rgba — Builds an rgba() colour string; clamp — Clamps a value to a range; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.createRadialGradient() — Creates a radial gradient; ctx.fillRect() — Fills a rectangle; ctx.drawImage() — Draws an image or offscreen canvas
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.smoke (L1110-L1139)
Code walkthrough
L1112-1112: Control definitions (colour/speed/size/count/extras): Smoke Color, Smoke Blob Size, Emission Rate per second, Buoyancy a, Turbulence Diffusion. L1113-1113: Preset buttons: name → parameter overrides (6). L1114-1122: Info-panel content: live rows(v), formula, notes, params, steps. L1123-1138: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `createRadialGradient`, `fillRect`, `drawImage`; math via `Math.exp`, `Math.min`; returns readouts `n`, `rate`, `a`, `age`, `r`, `sp` to the info panel.
Principles
vᵧ ← vᵧ − a · Δt (hot smoke rising) vₓ ← vₓ + s·(noise(x, y, t) − ½)·Δt Radius r = r₀(1 + 1.5·age), Opacity α = α₀(1 − age/life) The smoke consists of many semi-transparent circles. The hot air is lighter than the surroundings Buoyancy Speed up; irregular air currents in the air are simulated by noise fields, pushing smoke packs to the right and the left Turbulence ）。 Addresses of smoke are increasing and decreasing, indicating that smoke is spreading around and concentrations are decreasing. Smoke comes from both the source of smoke and the pointer position at the bottom.