Clyune Component GalleryIsometric Blocks · How it works & code
2.5D array of equidistance projection.
Runtime logic
Visiting `/canvas/isometric`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'isometric' })`. mount resolves the variant to family `isometric`; `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; makeNoise — Smooth value noise + fBm octaves; hexRgb — Colour string → [r, g, b]; hueOf — Hue of a colour (0–360°); 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.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.closePath() — Closes the current sub-path; ctx.fill() — Fills the current path
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.isometric (L1191-L1228)
Code walkthrough
L1193-1193: Control definitions (colour/speed/size/count/extras): Column Colors, Column Thickness, Grid Cells per Side n, Amplitude, Pointer Lift, Color by Height. L1194-1194: Preset buttons: name → parameter overrides (6). L1195-1203: Info-panel content: live rows(v), formula, notes, params, steps. L1204-1227: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `beginPath`, `moveTo`, `lineTo`, `closePath`, `fill`; math via `Math.round`, `Math.min`, `Math.sin`, `Math.cos`, `Math.exp`, `Math.max`; returns readouts `N`, `hmax`, `hav`, `cell`, `tw` to the info panel.
Principles
Screen x = x₀ + (i − j)·w/2 Screen y = y₀ + (i + j)·w/4 − h h(i,j,t) = H · [½ + ½ sin(0.6i + t) · cos(0.5j - 0.7t)] + lifting · e^(−d² / 4) Isometric Projection It's common in games“2.5D”Picture: Look at the three-dimensional grid along the diagonal line x、y 两个方向都缩成一半宽的斜线，高度直接向上画。它没有近大远小，所以远处的柱子和近处一样大。 When you draw, you have to Backwards (i + j From childhood to age) draw, the columns in front can block the back. The height of each pillar is multiplied by two sine waves to form the up and down topography, where the pointer is raised.