Clyune Component GalleryFlow Field · How it works & code
Vector Field Streamlines Driven by Noise Angle Field
Runtime logic
Visiting `/canvas/flow`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'flow' })`. mount resolves the variant to family `flow`; `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; makeLayer — Offscreen layer (trails / pixel fields); fadeA — Frame-rate independent fade factor; rng — Seeded deterministic PRNG (same seed, same result); makeNoise — Smooth value noise + fBm octaves; 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.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.drawImage() — Draws an image or offscreen canvas; ctx.fillRect() — Fills a rectangle; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.arc() — Adds a circular arc (center, radius, start/end angle)
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.flow (L588-L630)
Code walkthrough
L590-590: Control definitions (colour/speed/size/count/extras): Streamline Color, Line width, Particle Count N, Field Scale, Pointer Vortex Γ, Tail Decay. L591-591: Preset buttons: name → parameter overrides (6). L592-600: Info-panel content: live rows(v), formula, notes, params, steps. L601-629: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `drawImage`, `fillRect`, `beginPath`, `moveTo`, `lineTo`, `stroke` …; math via `Math.abs`, `Math.round`, `Math.cos`, `Math.sin`, `Math.hypot`; returns readouts `n`, `ang`, `vm`, `curl`, `sc`, `fade`, `lw` to the info panel.
Principles
The corner θ(x,y,t) = 4π · noise(x/s, y/s, 0.1t) v = 60·(cos θ, sin θ) + Γ·r̂⊥ · 4000/(r + 40) Position p & p · Δt Set a direction for each point of the canvas Vector Field 。成千上万个粒子顺着方向走，并在离屏画布上留下逐渐淡去的轨迹，流线就显现出来了。 Put one on the pointer Eddy ：速度垂直于指向指针的方向，大小随距离衰减，Γ So it's the reverse clockwise and the negative is the clockwise. The particles run out of canvass or live to be randomly reborn.