Clyune Component GalleryTrig Functions · How it works & code
Projection of rotating point on unit circle gives sin/cos; waveform expands in real time with angle θ; can switch to tan, adjust phase/frequency/amplitude
Runtime logic
Visiting `/math/trig-waves`, DemoHost lazy-loads `demos/trig-waves.js` (registry `mod: 'trig-waves'`) and calls `mountTrigWaves(host, { variant: 'trig-waves' })`. The module creates its own three.js renderer, scene, camera and OrbitControls, and attaches the info panel with `createInfoPanel`. 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; WebGL (three.js): WebGL through three.js WebGLRenderer; 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, three 0.170.0
Dependencies
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
Imported APIs
THREE — three.js namespace; OrbitControls — three.js orbit camera controls: drag to rotate, wheel/pinch to zoom; readLiveControls — Reads live control values (CSS-variable fallback); colorToRgb — Colour → RGB components; maxDpr — Caps device pixel ratio per device; preferLiteFx — Lighter effects on low-end/mobile devices; tuneOrbitControls — Tunes OrbitControls (damping, touch); createInfoPanel — Side/bottom info panel: live readout + formula/notes/params/steps; dockControls — Docks the control panel next to the canvas; MATH_DOCS — Formula/notes/params text table for math demos; THREE.BufferGeometry — Custom vertex geometry; THREE.LineBasicMaterial — Basic line material; THREE.Line — Polyline; THREE.Vector3 — 3D vector; THREE.LineDashedMaterial — Dashed line material; THREE.WebGLRenderer — WebGL renderer; THREE.Scene — Scene graph root; THREE.OrthographicCamera — Orthographic camera; THREE.Group — Group container; THREE.LineSegments — Line segments; THREE.Mesh — Mesh (geometry + material); THREE.CircleGeometry — Circle geometry; THREE.MeshBasicMaterial — Unlit material; THREE.BufferAttribute — Typed vertex attribute (positions/colours)
Source code
frontend/src/demos/trig-waves.js: trig-waves.js (L1-L522)
Code walkthrough
L8-8: `TAU` (constant/table). L9-9: `COLORS` (constant/table). L11-35: `CSS` (constant/table). L37-41: `line` (function); creates three.js objects `BufferGeometry`, `LineBasicMaterial`, `Line`. L42-48: `dashed` (function); creates three.js objects `BufferGeometry`, `Vector3`, `LineDashedMaterial`, `Line`. L49-55: `setSeg` (function). L57-522: `mountTrigWaves` (function). L58-88: defines `ctrl`; creates three.js objects `WebGLRenderer`; math via `Math.max`, `Math.min`. L89-100: defines `labelsEl`; creates three.js objects `Scene`, `OrthographicCamera`. L103-111: layout: circle centered at (CX,0); waves start at X0 and run to X1; creates three.js objects `Group`. L114-125: grid + axes; creates three.js objects `LineBasicMaterial`, `Vector3`, `LineSegments`, `BufferGeometry`. L128-134: unit circle; creates three.js objects `Vector3`, `Mesh`, `CircleGeometry`, `MeshBasicMaterial`; math via `Math.cos`, `Math.sin`. L137-143: angle arc (θ); creates three.js objects `BufferGeometry`, `BufferAttribute`, `Line`, `LineBasicMaterial`, `Mesh`, `MeshBasicMaterial` …. L146-176: radius, projections, markers; draws with Canvas 2D `createRadialGradient`, `fillRect`; creates three.js objects `Vector3`, `SphereGeometry`, `Mesh`, `MeshBasicMaterial`, `CanvasTexture`, `SRGBColorSpace` …. L177-177: calls `glow()`. L180-205: waves: index 0 = newest (at X0), flows right; creates three.js objects `Color`, `BufferGeometry`, `BufferAttribute`, `DynamicDrawUsage`, `Line`, `LineBasicMaterial` …; returns readouts `line`, `pos`, `col`, `geo`, `fill`, `fpos`, `fg` … to the info panel.
Principles
y = A · sin(f·θ + φ) y = A · cos(f·θ + φ)，tan = sin / cos Period T = 2π / f Turn a dot on the left circle (θ 从 0 到 2π），Its vertical and vertical coordinates depict sine waves and cross-cosine waves. A Pull the wave high f I'm not sure if it's any goodφ Let the whole wave square.