Clyune Component GalleryTrig Identities · How it works & code
Geometric proof of trigonometric identities with the unit circle.
Runtime logic
Visiting `/math/trig-id`, DemoHost lazy-loads `demos/kits/kit-math.js` (registry `mod: 'kit-math'`) and calls `mount(host, { variant: 'trig-id' })`. mount resolves the variant to family `trig-id`; `withControls` builds the control panel (6 presets + sliders). `createInfoPanel` splits the stage into canvas + info panel; `makeCanvas` creates a HiDPI canvas. Every `requestAnimationFrame`: read controls, `drawFamily` runs this demo’s branch, and the info panel readout refreshes. 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
makeCanvas — Creates an auto-sized canvas; loop — requestAnimationFrame loop (stoppable); bar — Demo control bar; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; readLiveControls — Reads live control values (CSS-variable fallback); localPoint — Event → canvas-local coordinates; withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; createInfoPanel — Side/bottom info panel: live readout + formula/notes/params/steps; alignDocParams — Aligns the documented parameters with the actual controls; MATH_DOCS — Formula/notes/params text table for math demos; ctx.fillRect() — Fills a rectangle; ctx.fillText() — Draws filled text; 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.closePath() — Closes the current sub-path; ctx.fill() — Fills the current path; ctx.arc() — Adds a circular arc (center, radius, start/end angle)
Source code
frontend/src/demos/kits/kit-math.js: FAMILY_CONTROLS['trig-id'] (L91-L91), circleGeom() · if (family === 'trig-id') (L446-L446), hitTargets() · if (family === 'trig-id') (L469-L473), applyDrag() · if (family === 'trig-id') (L551-L557), drawFamily() · case 'trig-id' (L611-L611), MATH_DOCS['trig-id'] (L152-L160)
Code walkthrough
L91-91: This demo's entry in the `FAMILY_CONTROLS` table (control config). L446-446: Branch for this demo inside `circleGeom()`: returns readouts `cx`, `cy`, `R` to the info panel. L469-473: Branch for this demo inside `hitTargets()`: math via `Math.cos`, `Math.sin`. L551-557: Branch for this demo inside `applyDrag()`: math via `Math.atan2`. L611-611: `case` branch in `drawFamily()`: this demo's per-frame drawing. L152-160: This demo's entry in the `MATH_DOCS` table (info-panel text: formula/notes/params/steps).
Principles
sin²θ + cos²θ = 1 sin 2θ = 2 sin θ cos θ Right straight-angle triangle with 1，Two straight corners sin θ 与 cos θ，The constant equation is based on the definition of shares. The yellow line on the left always equals 1。