MathPlay — Interactive Math Learner

A black-and-yellow landing page with three hands-on animations for learning and teaching math, built with Vite and plain JavaScript + Canvas.

Lessons

1. Unit Circle & Sine Waves — a point orbits the unit circle and unrolls into sine/cosine waves. Drag the point, change the speed, toggle cosine. Live readout of θ, sin θ, cos θ and sin²θ + cos²θ = 1.
2. Pythagorean Theorem — adjust legs a and b; the squares on each side morph live. "Show proof" pours the areas of a² and b² into c² to show they fill it exactly.
3. Derivative as a Slope — pick f(x) (x², x³ − 3x, sin x), drag a point along the curve and shrink h to watch the secant line become the tangent, with the secant slope converging to f′(x).

Getting started

npm install
npm run dev      # start dev server
npm run build    # production build into dist/
npm run preview  # serve the production build

Project structure

index.html                    landing page markup
src/main.js                   entry point
src/style.css                 black & yellow theme
src/canvas.js                 shared canvas helpers (HiDPI, render loop, drawing)
src/hero.js                   animated hero background
src/animations/unitCircle.js
src/animations/pythagoras.js
src/animations/derivative.js