Mathematical Teaching Demonstrations

A collection of interactive, browser-based visualizations for teaching mathematical concepts. All applications are standalone HTML files requiring no installation—simply open in any modern browser.

Contents

Demo Topic Key Concepts
Gaudí’s Hyperboloid Ruled Surfaces Hyperboloid of one sheet, doubly ruled surfaces
Hyperbolic Paraboloid Ruled Surfaces Saddle surface, two families of rulings
Wave Ruled Surface Ruled Surfaces Sinusoidal curves, phase shift, traveling waves
Brachistochrone Calculus of Variations Cycloid, fastest descent, variational problems
Double Integral Visualizer Multivariable Calculus Improper integrals, convergence criteria
Ellipse Billiard Conic Sections Focal properties, reflection law
Rule of 72 Financial Mathematics Compound interest, exponential growth
Stirling’s Formula Approximation Theory Factorial, asymptotic analysis
Small World Network Graph Theory Watts-Strogatz model, six degrees of separation
PageRank Graph Theory Markov chains, eigenvector centrality
Maxwell’s Equations FDTD Electromagnetism Wave propagation, finite-difference methods
Binomial to Gaussian Probability & Statistics Central limit theorem, de Moivre-Laplace
Galton Board Probability & Statistics Normal distribution, random walks
Conic Sections Geometry Cone slicing, eccentricity, degenerate conics
Small Angle Approximation Trigonometry x ≈ sin(x), Taylor series
Simple Sea Waves Trigonometry Sin waves, phases, frequencies
Fundamental Theorem of Calculus Calculus FTC Part 1, derivative of integral
Riemann Sum Quadrature Calculus Numerical integration, convergence
Clothoid Highway Curves Differential Geometry Euler spiral, curvature, road design
Bottle Flip Physics Mechanics Projectile motion, angular momentum
Vibration (2nd-Order ODE) Differential Equations Damped harmonic oscillator, phase portraits

Ruled Surfaces

Gaudí’s Hyperboloid

File: gaudi_hyperboloid.html

Interactive visualization of the hyperboloid of one sheet, demonstrating how twisting straight lines between two parallel circles generates a curved surface.

Mathematical Background: The hyperboloid of one sheet is defined by: \(\frac{x^2}{a^2} + \frac{y^2}{b^2} - \frac{z^2}{c^2} = 1\)

It is a doubly ruled surface—every point lies on exactly two straight lines contained entirely in the surface. This property was exploited by Antoni Gaudí in architectural designs, allowing curved surfaces to be constructed from straight structural elements.

Controls:

Hyperbolic Paraboloid

File: hyperbolic_paraboloid.html

Visualization of the saddle surface $z = xy$, showing both families of straight lines (rulings) that lie on the surface.

Mathematical Background: The hyperbolic paraboloid can be written as: \(z = \frac{x^2}{a^2} - \frac{y^2}{b^2}\)

or equivalently $z = xy$ after rotation. Two distinct families of lines:

This surface appears in tensile roof structures (e.g., Pringles chip shape).

Controls:

Wave Ruled Surface

File: wave_ruled_surface.html

Straight rods connecting two sinusoidal curves create a ruled surface with wave-like geometry.

Mathematical Description: Two parallel sinusoidal curves serve as directrices: \(\text{Front edge: } z = A\sin(\omega x)\) \(\text{Back edge: } z = A\sin(\omega x + \varphi)\)

When $\varphi = 0$, all rods are horizontal. As $\varphi$ increases, the rods tilt, creating a twisted wave surface.

Controls:

Calculus of Variations

Brachistochrone

File: brachistochrone.html

Physics simulation comparing descent times along three paths: linear, circular arc, and cycloid.

Mathematical Background: The brachistochrone problem asks: What curve between two points yields the shortest travel time for a frictionless bead under gravity?

The solution is the cycloid, parametrized by: \(x = r(\theta - \sin\theta), \quad y = r(1 - \cos\theta)\)

This was solved independently by Johann Bernoulli, Newton, Leibniz, L’Hôpital, and Jakob Bernoulli (1696–97), marking a foundational problem in the calculus of variations.

Features:

Multivariable Calculus

Double Integral Visualizer

File: indefinite_integral.html

Interactive 3D visualization of the improper double integral: \(I = \int_{1}^{\infty} \int_{1}^{\infty} \frac{1}{x^n y^n} \, dx\, dy\)

Convergence Analysis: By Fubini’s theorem, this separates into: \(I = \left(\int_{1}^{\infty} x^{-n} dx\right)^2\)

Controls:

Conic Sections

Ellipse Billiard

File: ellipse_billiard.html

Demonstrates the reflection property of ellipses: a ray from one focus always passes through the other focus after reflection.

Mathematical Background: For an ellipse with semi-axes $a$ and $b$, the foci are at $(\pm c, 0)$ where $c = \sqrt{a^2 - b^2}$.

The defining property—that the sum of distances from any point on the ellipse to both foci is constant ($2a$)—implies that the tangent at any point makes equal angles with lines to both foci (reflection law).

Controls:

Financial Mathematics

Rule of 72

File: rule_of_72.html

Visualizes the “Rule of 72” approximation for compound interest doubling time.

Mathematical Background: For continuous compounding at rate $r$, the exact doubling time is: \(t_{\text{exact}} = \frac{\ln 2}{\ln(1 + r/100)} \approx \frac{0.693}{\ln(1 + r/100)}\)

The Rule of 72 approximates this as: \(t_{\text{approx}} \approx \frac{72}{r}\)

This approximation works well for rates between 2% and 20%.

Controls:

Approximation Theory

Stirling’s Formula

File: stirling_formula.html

Compare the exact factorial $n!$ with Stirling’s approximation: \(n! \approx \sqrt{2\pi n} \left(\frac{n}{e}\right)^n\)

Features:

Mathematical Note: The ratio $\dfrac{\text{Stirling}}{n!} \to 1$ as $n \to \infty$. Even for small $n$, the approximation is remarkably accurate (e.g., 0.92 at $n=1$, 0.9917 at $n=10$).

Graph Theory

Small World Network

File: smallworld.html

Interactive simulation of the Watts-Strogatz small world model, demonstrating the “six degrees of separation” phenomenon.

Mathematical Background: The Watts-Strogatz model starts with a regular ring lattice of $N$ nodes, each connected to $K$ nearest neighbors. Each edge is then rewired with probability $p$:

The key insight is that a small number of random “shortcuts” dramatically reduces the average path length while preserving local clustering structure.

Controls:

PageRank

File: pagerank.html

Visualization of Google’s original PageRank algorithm for ranking web pages by importance.

Mathematical Background: PageRank models a “random surfer” who either follows links or jumps to a random page. The rank $PR(i)$ of page $i$ satisfies:

\[PR(i) = \frac{1-d}{N} + d \sum_{j \in B_i} \frac{PR(j)}{L_j}\]

where:

This is equivalent to finding the principal eigenvector of the modified adjacency matrix (a Markov chain stationary distribution).

Controls:

Electromagnetism

Maxwell’s Equations FDTD

File: maxwell.html

Real-time simulation of electromagnetic wave propagation using the Finite-Difference Time-Domain (FDTD) method.

Mathematical Background: This simulation solves the 2D Transverse Magnetic (TMz) mode of Maxwell’s equations. Three field components are computed:

The FDTD method discretizes Faraday’s and Ampère’s laws: \(\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}, \quad \nabla \times \mathbf{H} = \frac{\partial \mathbf{D}}{\partial t}\)

The Courant number $C = c \cdot \Delta t / \Delta x$ must satisfy $C < 1/\sqrt{2}$ for numerical stability in 2D.

Controls:

Features:

Probability & Statistics

Binomial to Gaussian

File: binomialtogaussian.html

Interactive visualization of the binomial distribution converging to the Gaussian (normal) distribution as the number of trials increases.

Mathematical Background: The binomial distribution $B(n, p)$ gives the probability of $k$ successes in $n$ independent trials: \(P(X = k) = \binom{n}{k} p^k (1-p)^{n-k}\)

The de Moivre-Laplace theorem (a special case of the Central Limit Theorem) states that as $n \to \infty$: \(\frac{X - np}{\sqrt{np(1-p)}} \xrightarrow{d} N(0,1)\)

The binomial distribution approaches a normal distribution with mean $\mu = np$ and standard deviation $\sigma = \sqrt{np(1-p)}$.

Controls:

Galton Board

File: galton_board.html

Physical simulation of a Galton board (bean machine), demonstrating how random binary choices lead to a normal distribution.

Mathematical Background: As balls fall through $n$ rows of pegs, each bouncing left or right with equal probability ($p = 0.5$), the final distribution follows the binomial distribution, which approximates the Gaussian: \(f(x) = \frac{N}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}\)

where $\mu = 0.5n$ and $\sigma = \sqrt{0.25n}$.

Controls:

See also: Cédric Villani’s TED talk What’s So Sexy About Math?

Geometry

Conic Sections

File: conic_sections.html

Interactive 3D visualization showing how slicing a double cone at different angles produces the four conic sections.

Mathematical Background: The type of conic depends on the plane’s tilt angle $\theta$ relative to the cone’s half-angle $\alpha$:

Eccentricity is computed as $e = \dfrac{\sin\theta}{\cos\alpha}$.

Controls:

Trigonometry

Small Angle Approximation

File: xsinx.html

Demonstrates the small angle approximation $\sin x \approx x$ (for $x$ in radians) through unit circle and function graph visualizations.

Mathematical Background: The Taylor series expansion of sine is: \(\sin x = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \cdots\)

For small $x$, the higher-order terms become negligible, yielding $\sin x \approx x$. This approximation is fundamental in physics (pendulum motion, optics, wave mechanics) and engineering.

Error Analysis:

Controls:

Simple Sea Waves

File: simple_sea_waves.html

Animated visualization of layered sine waves and the parameters that control wave behavior.

Mathematical Background: Each wave layer $i$ is computed using: \(y_i(x, t) = y_{\text{pos}} + A_i \sin(k_i x + \omega_i t + \phi_i)\)

The parameters scale across layers:

Controls:

Calculus

Fundamental Theorem of Calculus

File: ftc_vertical.html

Interactive demonstration of the Fundamental Theorem of Calculus, Part 1, showing how the derivative of an integral recovers the original function.

Mathematical Background: The FTC Part 1 states that if $f$ is continuous on $[a, b]$, then: \(\frac{d}{dx} \int_a^x f(t) dt = f(x)\)

This demo visualizes the limit process: \(\lim_{h \to 0} \frac{1}{h} \int_x^{x+h} f(t) dt = f(x)\)

by comparing the area under the curve with the rectangle approximation $h \cdot f(x+h)$.

Controls:

Riemann Sum Quadrature

File: quadrature_xn.html

Visualization of Riemann sums approximating the integral $\int_0^1 x^n \, dx = \frac{1}{n+1}$.

Mathematical Background: The definite integral is defined as the limit of Riemann sums: \(\int_0^1 x^n \, dx = \lim_{N \to \infty} \sum_{i=1}^{N} f(x_i^*) \Delta x\)

where $\Delta x = 1/N$ and $x_i^*$ is a sample point in each subinterval. Three sampling methods are available:

Controls:

Differential Geometry

Clothoid Highway Curves

File: clothoid_highway_demo.html

Interactive demonstration of clothoid (Euler spiral) curves used in highway and railway design for smooth transitions between straight sections and circular arcs.

Mathematical Background: The clothoid (Cornu spiral) is defined by the property that curvature increases linearly with arc length: \(\kappa(s) = \frac{s}{A^2}\)

where $A$ is the clothoid parameter. The curve is given by Fresnel integrals: \(x(s) = \int_0^s \cos\left(\frac{t^2}{2A^2}\right) dt, \quad y(s) = \int_0^s \sin\left(\frac{t^2}{2A^2}\right) dt\)

The fundamental relation $A^2 = R \cdot L$ connects the parameter $A$, the final radius $R$, and the spiral length $L$.

Controls:

Mechanics

Bottle Flip Physics

File: bottle_flip_edu.html

Physics simulation of the “bottle flip challenge,” demonstrating projectile motion with rotation and the role of water redistribution in successful landings.

Mathematical Background: The bottle undergoes projectile motion with rotation. Key equations: \(x(t) = x_0 + v_0 \cos\theta \cdot t, \quad y(t) = y_0 + v_0 \sin\theta \cdot t - \frac{1}{2}gt^2\) \(\theta(t) = \theta_0 + \omega_0 t\)

The shifting center of mass due to water sloshing creates a damping effect on rotation, which is crucial for landing upright. Angular momentum conservation and energy dissipation determine landing success.

Controls:

Differential Equations

Vibration (2nd-Order ODE)

File: vibration_demo.html

Interactive visualization of the second-order linear ODE governing mechanical vibrations, with real-time phase portraits and energy analysis.

Mathematical Background: The damped harmonic oscillator is described by: \(m\ddot{x} + c\dot{x} + kx = F(t)\)

The damping ratio $\zeta = \dfrac{c}{2\sqrt{mk}}$ classifies the system behavior:

Controls:

Technical Notes

Browser Compatibility: All demos use vanilla JavaScript and HTML5 Canvas.

Dependencies:

License

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).

You are free to share and adapt these materials for non-commercial purposes, provided you give appropriate credit to the author.

Author

So Okada (so.okada@gmail.com)

These demonstrations were created through AI-assisted development using generative AI tools including Claude (Anthropic) and Gemini (Google). The development process involved iterative collaboration—describing mathematical concepts and desired interactions in natural language, then refining the AI-generated code through conversation.