Clyune Component GallerySoft Blob · How it works & code
Soft Blob formed by spring vertices
Runtime logic
Visiting `/canvas/blob`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'blob' })`. mount resolves the variant to family `blob`; `withControls` builds the control panel (7 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; hexRgb — Colour string → [r, g, b]; rgba — Builds an rgba() colour string; 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.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.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.quadraticCurveTo() — Adds a quadratic Bézier segment; ctx.fill() — Fills the current path; ctx.arc() — Adds a circular arc (center, radius, start/end angle)
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.blob (L313-L358)
Code walkthrough
L315-315: Control definitions (colour/speed/size/count/extras): Soft Color, Radius R, Vertex Count, Softness, Pointer Push. L316-316: Preset buttons: name → parameter overrides (7). L317-325: Info-panel content: live rows(v), formula, notes, params, steps. L326-357: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `createRadialGradient`, `beginPath`, `moveTo`, `quadraticCurveTo`, `fill`, `arc`; math via `Math.round`, `Math.min`, `Math.sin`, `Math.cos`, `Math.abs`; returns readouts `n`, `A`, `A0`, `def`, `L`, `soft`, `push` … to the info panel.
Principles
Target Radius r (θ) = R · (1 + 0.08 sin(3θ + t) + 0.05 sin(5θ − 1.3t)) Spring: a = -k · (r − r Mindful) − c · v，k = 60 · (1.1 anticipate) Area (shoe-lace formula) A = 1⁄2|Σ(xᵢyᵢ₊₁ − xᵢ₊₁yᵢ)| The edge of the mollusk is the top of a circle. Each vertebrae moves only along the path Spring Pull“Target Radius”。目标半径随时间轻微起伏，于是整体像果冻一样蠕动。 There is also smoothness between adjacent peaks to avoid sharp thorns. The pointer closes the vertebrae, pushes the vertebrae inward, releases it and bounces back. Area Shoelace Formula Calculates by all vertex coordinates, and can see how the area changes when the shape changes.