MathPlay Lab — interactive math learning
A black-and-yellow landing page with three hands-on math animations, built with Vite and plain JavaScript + Canvas (no runtime dependencies).
| Lab | Concept | What you can play with |
|---|
| 01 · Unit Circle & Sine Wave | Trigonometry | Drag the point (or the wave), play/pause, speed, special angles, cosine overlay, 15° snapping. Live sin / cos / tan and radians as fractions of π. |
| 02 · Pythagoras, Proved by Sliding | Geometry | Change sides a and b, jump to famous triples, scrub or play a rearrangement proof where the yellow area stays the same while c² becomes a² + b². |
| 03 · Why a Circle's Area is πr² | Measurement | Slice a circle into 4–60 pieces and unroll it into a near-rectangle; live readout of how close width × height gets to πr². |
Run it
npm install
npm run dev # local dev server with hot reload
npm run build # production build to dist/
npm run preview # serve the production build
Project layout
index.html landing page + lab markup
src/main.js wires up the three labs
src/style.css theme tokens (black / yellow) and layout
src/lib/canvas.js hi-DPI canvas sizing + on-screen-only animation loop
src/lib/theme.js shared colours and maths helpers
src/labs/*.js one module per lab
Animations pause automatically when a lab scrolls off screen, and decorative motion respects prefers-reduced-motion.
