Places where a hands-on experiment would help, such as dragging a point, changing a matrix or picking a starting value. They are collected in Appendix E as the design inventory for a future companion app.

A number line you can zoom indefinitely. Mark \(\sqrt{2}\) and keep zooming: each zoom reveals another decimal digit, and the nearest rational points with small denominators (\(\tfrac{7}{5}\), \(\tfrac{17}{12}\), \(\tfrac{41}{29}\), …) light up and are left behind, but the point itself never lands on a rational.

Try it: Best fractions for √2

Type a number and watch it displayed simultaneously in bases 2, 8, 10, and 16, with each digit’s place value shown as a stack of blocks. Click a bit to toggle it and see the decimal and hex values update; notice that toggling bit \(k\) always changes the value by exactly \(2^k\).

Try it: 255 in every base

Drag the dividing line in a \(a \times (b + c)\) rectangle and watch the two partial areas and their sum update. Then switch to "floating-point mode": generate a random list of 1,000 floats, sum it in forward, reverse, and shuffled order, and display the differing totals.

Try it: Floating-point mode: summation order · Floating-point mode: sum order

Type an expression and see its parse tree drawn, with a selector for convention: "strict PEMDAS", "implied multiplication binds tighter", "Python", "C", "Excel". Watch the tree — and the answer — change for \(8 \div 2(2 + 2)\) and \(-3^2\).

Try it: Open the Precedence playground

Enter a number and watch trial division run step by step: the current divisor, the shrinking value, the growing factor list, and a marker showing \(\sqrt{n}\) where the search may stop. Then plot the number of steps against \(n\) for \(n\) up to a million and see primes (worst case) form the top envelope.

Try it: Open the factor explorer · Factorise any number

An \(n\)-bit clock with a slider for \(n\) from 3 to 8. Each position shows its bit pattern and both its unsigned and signed labels. Add or subtract a chosen amount and watch the hand move; the overflow boundary flashes when crossed. A second mode multiplies, showing that multiplication modulo \(2^n\) also wraps.

Try it: Multiplication wraps too · Open the Overflow clock

The app shows a quick calculation (\(387 \times 52\), \(0.023 \times 3800\), \(7.9 \text{ GB} / 41 \text{ s}\)) for three seconds, then asks for an estimate. Score by how close the estimate is on a logarithmic scale, and track your typical error factor over time.

Two fraction bars with sliders for numerator and denominator. Press "add" and the app animates re-cutting both bars into the lcm-sized pieces, then slides them together. Press "divide" and it animates tiling the first bar with copies of the second, counting the copies (including a fractional last copy).

Enter \(p\) and \(q\). The app runs long division with a remainder wheel showing the values 0 to \(q - 1\); each step lights up the current remainder, and when one repeats, the cycle is highlighted and the period displayed. Try every denominator from 2 to 50 and look for the pattern in which ones terminate and which have the maximum period \(q - 1\) (7, 17, 19, 23, 29, 47, …).

Try it: Open the repeating decimal factory · Repeating decimals of p/q

Stack a sequence of percentage changes as draggable blocks (\(+20\%\), \(-15\%\), …) on a starting bar. The bar updates after each block, the running multiplier is shown, and a toggle reveals the naive "add the percents" answer for comparison. Shuffle the blocks and see the final value stay the same.

Type a decimal number and see its exact stored binary value, its sign/exponent/significand bits, the neighbouring representable doubles on either side, and the error. A second panel sums 0.1 a chosen number of times as float, as Decimal, and as integer tenths, plotting the float’s drift.

Try it: Watch 0.1 drift · Float explorer: drift of 0.1 · The same drift in float32 · 0.25 is stored exactly

Enter an exponent "rule" — true or false — such as \((a + b)^n = a^n + b^n\) or \(a^m a^n = a^{mn}\). The app tests it on random numbers and shows a counterexample if one exists, or a factor-counting picture (rows of coloured tiles for each factor) if it holds.

Drag a square’s side until its area matches a target (say 20) and watch the side length converge; then switch to the Babylonian method and step it, showing each guess and its partner \(20/g\) closing in from opposite sides of the true root.

Try it: Babylonian square-root stepper

An infinite zoom from \(10^{-35}\) m to \(10^{27}\) m, with landmarks appearing as you pass their order of magnitude. A side panel shows the current scale in scientific notation, E notation, and the matching SI prefix, and lets you pin two objects to compare their ratio.

A slider for bit width \(n\) from 1 to 128 that shows the number of patterns \(2^n\), the signed and unsigned ranges, the memory addressable with \(n\)-bit pointers, and a familiar real-world comparison ("more than the number of grains of sand on Earth"). A second panel converts any size among B, KB, KiB, MB, MiB, …, highlighting the percentage gap.

Try it: Open the Bits and bytes calculator

Choose growth functions (\(n\), \(n \log n\), \(n^2\), \(n^3\), \(2^n\), \(n!\)) and a "computer speed" in steps per second. A race shows the largest \(n\) each can handle in one second, one hour, and one year. Toggle the vertical axis between linear and logarithmic and watch the exponential curve become a straight line.

Try it: Growth curves on log axis · Growth race: one second · Growth race: one year

Enter a base and exponent. The exponent’s bits are shown as a row of switches; stepping through the loop lights up the current bit, shows the square and the result, and counts multiplications against the naive method. A slider pushes the exponent to thousands of bits (with a modulus) to show the naive count becoming astronomically large while the fast count grows by one or two per bit.

Try it: Open the square-and-multiply stepper · Huge powers mod m, instantly

Type an expression and see its tree drawn live. Drag values onto the variable leaves and watch each internal node light up with its value as evaluation flows from leaves to root. Then remove a pair of brackets and see how the tree, and the answer, changes.

Drag sliders for \(a\) and \(b\) and watch a square of side \(a + b\) split into \(a^2\), \(b^2\), and two \(ab\) rectangles. Toggle "freshman’s dream" to overlay \(a^2 + b^2\) alone and see exactly what area is missing.

Load an equation onto a virtual balance as boxes (unknowns) and discs (units), including "negative" balloons that pull upward. Apply operations to both pans and watch the beam. Try an illegal move, such as removing a disc from one pan only, and watch it tip. Try "multiply both pans by 0" and watch every possible \(x\) become a solution.

Pick a formula from physics or finance and a target variable. Apply operations step by step from a palette ("subtract \(u\) from both sides", "factor out \(x\)"); the lab refuses illegal moves and flags any division by an expression that could be zero. When you finish, it round-trips random values through your rearranged formula to confirm it is correct.

Show an equation as a balance scale with \(x\)-boxes and unit weights on each pan. The learner chooses an operation ("add 3 to both", "divide both by 2"); the scale applies it to both pans and the symbolic equation updates beside it. Illegal moves, such as acting on one pan only or dividing by zero, visibly tip the scale. A counter compares the learner’s number of steps with the minimum.

A slider sets \(k\); the display shows two points \(a < b\) on a number line and their images \(ka\) and \(kb\). As \(k\) passes through 0 the images collide and then swap order, making the sign-flip rule visible. A second panel lets the learner type an inequality and drag a test point, which turns green inside the solution set and red outside.

Sliders for \(m\) and \(b\) redraw \(y = mx + b\) live, with a draggable rise–run triangle whose size changes while its ratio stays fixed. A second mode shows two draggable points; the line through them and its three equation forms update as the points move. A third mode shades the region where \(mx + b > k\) on the \(x\)-axis.

Try it: Slide m and b

Drag two points and a slider for \(t\) from \(-0.5\) to \(1.5\); the interpolated point moves along the line, turning red when it leaves \(\lbrack 0, 1]\) (extrapolation). A second panel adds a third control point and shows the nested lerps of de Casteljau’s construction tracing a Bézier curve.

Show two lines with sliders for each slope and intercept, and display the intersection point and its coordinates live. Rotate one line until it’s parallel to the other and watch the intersection run off to infinity and vanish. Then slide its intercept until the lines coincide. A second mode shows the equations in standard form \(ax + by = c\) with sliders on \(a, b, c\), so the learner sees how coefficients control slope.

Try it: Two lines with sliders

Display a 3×3 or 4×4 augmented matrix with a "step" button. Each press performs one row operation and highlights the pivot, the row being changed, and the multiplier. Alongside, a 3D view shows the three planes; after each row operation the planes move but their common point stays fixed. That’s the geometric meaning of "equivalent system". Include a toggle between hand-friendly pivoting (smallest nonzero integer) and partial pivoting (largest absolute value), and a mode where the learner chooses each operation and the app checks it.

The learner enters up to five linear inequalities. The app shades the feasible region and labels its vertices. A draggable slider for \(P\) moves the objective level line \(30x + 20y = P\) across the plane, and the line turns red the moment it leaves the region. A second control rotates the objective (changing the profit ratio) so the learner can watch the optimal vertex jump from corner to corner, and see the tie when the objective lines up with an edge.

Try it: Slide the profit line

Type two polynomials; the lab draws the area-model grid with each cell sized by its term (for positive values of \(x\)) and colours cells of equal degree the same. Slide \(x\) and watch the total area equal the product of the side lengths.

Drag the two binomials \((px + q)\) and \((rx + s)\) by adjusting \(p, q, r, s\); the lab shows the expanded trinomial and its area model. Then flip modes: given a trinomial, rearrange the tiles of an algebra-tile set into a rectangle, or discover that no rectangle exists.

Pick a degree \(n\) and a value of \(x\). The lab evaluates the polynomial three ways, counts multiplications, and (in floating point, for polynomials like \((x - 1)^{10}\) expanded out) plots the error of each method near \(x = 1\), where cancellation makes the expanded form noisy whichever way you evaluate it: the naive method is worst and Horner is somewhat better, while evaluating the factored form \((x - 1)^{10}\) directly stays accurate.

Try it: Horner versus the naive loop

Choose a small modulus \(M\) (say 101) and a base \(B\). Type strings and watch their polynomial hashes; the lab searches for two strings with the same hash and shows the difference polynomial having \(B\) as a root mod \(M\). Then increase \(M\) and watch collisions become rare.

Three sliders for \(a\), \(b\), \(c\). Four synchronised panels: the equation in standard, vertex and factored form (factored form greys out when there are no real roots); the parabola with vertex, axis and roots marked; a table of values with first and second differences; and a short sentence in words ("opens downward, maximum 13.48 at t = 1.53, two real roots"). Drag the graph’s vertex directly and watch the coefficients change.

Try it: Open the Four views lab · Parabola with a, b, c sliders

Fix \(a\) and \(b\); slide \(c\). Watch the parabola rise, the two roots slide together, merge at \(\Delta = 0\), and vanish. A second panel plots the roots in the complex plane: as they leave the real axis they become a symmetric pair \(p \pm qi\) moving vertically, preparing the ground for Chapter 15.

Try it: Open the Discriminant explorer · Open the discriminant explorer · Slide c, watch roots merge

Plot a quadratic and run bisection and Newton side by side, one step per click. Bisection shows a shrinking bracket; Newton shows tangent lines. Choose \(x_0\) exactly at the vertex and watch Newton fail (horizontal tangent, division by zero); start Newton on \(x^2 + 1\) and watch it wander chaotically, because there is no real root to find.

Try it: Bisection versus Newton, step by step · Newton on x² + 1 · Newton from the vertex

Slide \(b\) from \(10\) to \(10^{10}\) in \(x^2 + bx + 1 = 0\). Show both formulas' results digit by digit, with correct digits in green and wrong digits in red, and the number of lost digits plotted against \(\log_{10}|b|\). Add a "precision" switch (16, 7, or 4 significant digits) to see the same collapse happen earlier in single precision and in the by-hand 4-digit model.

Try it: How much precision do you lose?

A 200 by 200 pixel canvas. For each pixel, fire a ray and colour it by the discriminant: black for \(\Delta < 0\), and shaded by \(t_1\) (near is bright) otherwise. Move the camera into the sphere and watch the \(t_1 < 0 < t_2\) case take over. Then toggle "textbook formula" and push the sphere far away to see cancellation noise appear at the edges.

Drag the sun’s elevation angle and the height of a pole. Watch the shadow length change, and see the "height / shadow" ratio stay constant for every object in the scene at a given sun angle. Then drag a second slider that scales a triangle by \(k\) and read off its perimeter (×\(k\)) and area (×\(k^2\)) live.

Drag the corner of a right triangle to change \(a\) and \(b\). The app animates the four triangles sliding between the two arrangements, and displays \(a^2\), \(b^2\) and \(c^2\) as numbers that always balance. Then unlock the right angle: as the angle opens past 90°, watch \(c^2\) exceed \(a^2 + b^2\).

Try it: Solve any triangle

Fix points \(A\) and \(B\) on a circle and drag a third point \(V\) around the rim. The display shows \(\angle AVB\) and the central angle \(\angle AOB\) live. Watch \(\angle AVB\) stay constant while \(V\) stays on one arc and jump to \(180^\circ - \angle AVB\) when it crosses to the other. Drag \(A\) and \(B\) to opposite ends of a diameter to see Thales' right angle.

Try it: Open the inscribed angle explorer

A 3D model of a cube that splits along its interior diagonals into three congruent square pyramids, which can be dragged apart and rotated, then reassembled. A second panel fills a cone and a cylinder of the same base and height with "water" to show three cones fill one cylinder.

Try it: Cylinder: three cones’ volume

Drag two points around the plane. The app draws the right triangle with legs \(\Delta x\) and \(\Delta y\), shows \(\Delta x^2 + \Delta y^2 = d^2\) updating live, and marks the point \(P(t)\) as you move a slider for \(t\) from 0 to 1. Try dragging one point across the other and watch \(\Delta x\) change sign while \(d\) stays positive.

Place a focus and a directrix, then drag a slider for eccentricity \(e\). The app plots every point whose focus-distance is \(e\) times its directrix-distance. Watch the ellipse stretch as \(e \to 1\), snap into a parabola at \(e = 1\), and split into a hyperbola beyond. A second mode slices a 3D cone with a tiltable plane.

Try it: Open the focus–directrix playground · Slide the eccentricity

Draw a triangle, then stack transformations (translate, reflect, rotate, dilate) in a list you can reorder. The app shows each intermediate image and the final rule \((x, y) \mapsto (x', y')\). Swap two items and see whether the result changes. A matrix panel shows the 2×2 (or 3×3 homogeneous) matrix of the composite.

Try it: Transformation sandbox

Click two pixels on a zoomed-in grid. Step through Bresenham one column at a time, watching the midpoint dot, the true line, and the value of \(D\) in a side panel. Toggle to DDA and to anti-aliased mode and compare the results on near-horizontal, 45°, and steep lines.

Try it: Open the pixel-by-pixel lab

Pick a metric (Euclidean, Manhattan, Chebyshev, or a general \(L^p\) with a slider for \(p\)) and the app draws every point at distance 1 from a centre you can drag. Watch the circle morph from diamond (\(p = 1\)) through round (\(p = 2\)) to square (\(p \to \infty\)). A second panel runs A* on a grid with each metric as heuristic and counts the nodes explored.

Try it: When p < 1 breaks · Morph the unit circle, run A* · Morph the Lᵖ unit circle · Morph the unit circle with p

Sketch any curve freehand on a coordinate grid. A vertical line follows the cursor and lights red whenever it meets the curve more than once; the app then offers to split the curve into the fewest function-pieces. Try a circle, a sideways parabola \(x = y^2\), and the letter S.

Choose a family and drag sliders for its parameters (\(m, b\) for lines, \(a, b, c\) for quadratics, \(k, n\) for powers). A second panel shows the table of values and its first and second differences, so you can see "constant first differences = linear, constant second differences = quadratic" happening live.

Try it: Quadratic family with table

Pick a parent (\(x^2\), \(\lvert x \rvert\), \(\sqrt{x}\), \(x^3\), \(\lfloor x \rfloor\)) and drag sliders for \(a, b, h, k\) in \(a f(b(x - h)) + k\). Ghost arrows show where each key point of the parent goes. Then try "guess the formula": the app shows a transformed graph and you set the sliders to match it.

Try it: a f(b(x − h)) + k sliders

Draw a function’s graph; the app draws its reflection in \(y = x\) and colours it red wherever the reflection fails the vertical line test. Drag a "domain window" to restrict the original until the reflection becomes a valid function.

Try it: Reflect y = x² in y = x

Load a small data set (stopping distance against speed, average cost against batch size, height against time). Choose a family, drag its parameters to fit the points, and watch a residual plot. Then drag a slider extending the \(x\)-range beyond the data and see which fitted families stay sensible and which go wild.

Try it: Fit braking distances

Type keys into a hash table with an adjustable number of buckets and a choice of hash function (length of string, sum of character codes, CRC32). Watch the buckets fill, count collisions, and compare against the "birthday" prediction that collisions appear after roughly \(\sqrt{n}\) keys in \(n\) buckets (Chapter 29). Then switch the codomain to as many buckets as keys and try to find a hash that is a bijection.

Drag points on a scatter plot and switch the \(y\)-axis between linear and log scale. Watch exponential data straighten under the log. Fit a line on the log view and see the fitted \(a\) and \(k\) (and doubling time) update live. Then add a logistic "saturation" and watch the fit’s predictions go badly wrong beyond the data.

Try it: Exponential fit to data

Pick \(n\) with a slider (1 to \(10^{12}\)) and watch binary search on a bar of \(n\) items. The bar halves on each step and a counter shows comparisons. Beside it, show \(\log_2 n\), the bits needed for \(n\), and the height of a balanced tree holding \(n\) keys, so the reader sees all three are the same number.

Try it: Halving explorer

Plot \(\log n\), \(n\), \(n\log n\), \(n^k\) (with \(k\) on a slider) and \(b^n\) (with \(b\) on a slider). Toggle linear, semi-log and log-log axes. Find where \(1.01^n\) finally overtakes \(n^{3}\). (It happens near \(n \approx 2{,}340\).)

Try it: Growth race, log-log axes · Growth-race plotter · 1.01ⁿ against n³

Drag a point around the unit circle. Show its coordinates \((\cos\theta, \sin\theta)\) live, colour the quadrant, and draw the reference angle. Next to it, trace \(\sin\theta\) and \(\cos\theta\) as graphs against \(\theta\) as the point moves, so the reader sees the circle "unwrap" into waves. Add a toggle between degrees and radians.

Try it: Unit circle unwrapped · Spin the unit circle

Type \(r = f(\theta)\) (for example \(\cos(k\theta)\) with \(k\) on a slider) and watch the curve trace out as \(\theta\) sweeps from 0 to \(2\pi\), with the radius line drawn live. Integer \(k\) gives roses with \(k\) or \(2k\) petals. Find the rule.

Try it: Rose curves r = cos(kθ)

Sliders for the amplitudes of the first eight harmonics of a 220 Hz tone. Show the summed waveform and play it live. Presets: odd harmonics with amplitude \(1/k\) (approaching a square wave), all harmonics with \(1/k\) (a sawtooth). Then show the FFT bar chart of the result so synthesis and analysis appear side by side.

Try it: Harmonics towards a square wave · All harmonics make a sawtooth · Odd harmonics make a square

A turret at the centre of the screen tracks the mouse. Toggle between atan(dy/dx) and atan2(dy, dx) and watch the naive version flip the wrong way in two quadrants. Add a toggle for "y points down" to see the clockwise/anticlockwise flip, and a "degrees bug" toggle that passes degrees to sin/cos.

Try it: Rotate and aim

Choose \(a\) and drag a slider for \(r\) from \(-1.5\) to \(1.5\). Plot the partial sums \(S_1, \ldots, S_{40}\) as dots, with a horizontal line at \(\frac{a}{1-r}\) when \(|r| < 1\). Watch the dots zig-zag in when \(r < 0\), creep in slowly when \(r\) is close to 1, and break away to infinity the moment \(|r|\) reaches 1.

Try it: Partial sums, slide the ratio

Animate the call tree of fib(n) for \(n\) up to 10, colouring nodes by argument. Toggle "memoise" and watch the tree collapse into a single path with short side-branches. Display call counts side by side with \(2F_{n+1} - 1\) and with \(n + 1\).

Try it: Memoised fib collapses · Visualise the waste · Count the calls in Python

Drag a slider for \(n\) and watch two staircases of 1 to \(n\) blocks slide together into an \(n \times (n+1)\) rectangle. A second mode shows the nested-loop grid filling cell by cell as a program runs, with a running counter matching \(\frac{n(n-1)}{2}\).

Try it: Staircase against n(n + 1)/2 · Count the loop in Python

Drag \(\theta\) from 0 to \(2\pi\). Show the point \(e^{i\theta}\) travelling around the unit circle, with its shadow on the real axis tracing \(\cos\theta\) and its shadow on the imaginary axis tracing \(\sin\theta\) as two graphs unrolling beside the circle. A second panel shows the partial sums of the power series \(\sum (i\theta)^n/n!\) as a chain of arrows, each turned \(90^\circ\) from the last and shrinking, spiralling into the point \(e^{i\theta}\).

Try it: Open the Euler formula explorer · e^(iθ) and its shadows

Click any point \(c\) in the plane and watch the orbit \(0, c, c^2 + c, \ldots\) drawn as a path of connected dots: spiralling into a fixed point, cycling, or flying off. Zoom into the boundary with a scroll wheel and a slider for the iteration limit, and see where double precision gives out.

Try it: Explore the Mandelbrot set

Draw a shape (a letter F works well, since it has no symmetry). Drag a complex number \(w\) around the plane and watch the shape multiplied by \(w\) update live: rotating as \(w\) moves around a circle, growing and shrinking as \(w\) moves in and out, and turning exactly a quarter-turn when \(w = i\). A second mode shows \(z \mapsto z^2\) distorting a grid, doubling all angles.

Try it: Multiply and watch

Show the graph of \(d(t) = 21t^2\) with a fixed point at \(t = 1.5\) and a draggable second point. Display the secant line, its slope, and \(h\). As the user drags the second point in from either side, a table records the slopes, and the secant visibly rotates into the tangent. Let the user change \(d(t)\) to \(\sqrt t\), \(\sin t\), or \(|t - 1.5|\) (where the left and right secants disagree).

Try it: Try |t − 1.5|: no tangent · Open the secant-to-tangent lab · Slide h: secant to tangent

Enter a function and an interval. Each click on "step" shades the current interval, marks the midpoint with the sign of \(f(m)\), and keeps the half containing the sign change. A side panel plots the interval width on a logarithmic scale (a straight line: halving each step). Include a mode with \(1/x\) to watch bisection "converge" to an asymptote.

Try it: Bisection on 1/x · Open the bisection stepper

The app plays challenger: it shows a graph, a point \(a\), a claimed limit \(L\), and a horizontal band of half-height \(\varepsilon\). The user drags a vertical strip of half-width \(\delta\); the portion of the graph inside the strip turns green if it fits within the band and red where it escapes. Each round, \(\varepsilon\) shrinks. For a function with a jump, the user discovers that no \(\delta\) works once \(\varepsilon\) is smaller than half the jump — a visual proof that the limit does not exist.

Try it: Try to win at a jump · Play the ε–δ game

A slider for \(h\) from \(10^{-1}\) to \(10^{-20}\) (log scale) computes the difference quotient of a chosen function in double precision and in exact rational arithmetic side by side, plotting both errors on log–log axes. Show the bits of \(x + h\) and \(x\) as \(h\) shrinks, highlighting the moment they become identical.

Try it: Floating-point limits, bit by bit

Drag a second point \(Q\) along a curve towards a fixed point \(P\). A readout shows the secant slope to six decimal places as \(h\) shrinks, and a second panel plots secant slope against \(h\). Try a smooth curve, then \(\lvert x \rvert\) at \(P = (0,0)\), and watch the slopes from the left and the right refuse to agree.

Try it: Try |x| at the origin · Open the secant-to-tangent lab · Secants of |x| at 0

A slider sets \(\log_{10} h\) from \(-16\) to 0 and plots forward and central difference errors for a function you choose (\(\sin\), \(e^x\), \(x^3\), \(\sqrt{x}\) near 0). Find the best \(h\) for each. Then switch to 32-bit floats and watch the sweet spot move to much larger \(h\).

Try it: Find the sweet spot · The sweet spot in float32 · Find the sweet spot

Drag nodes (\(+\), \(\times\), \(\sin\), \(\exp\), \(x^2\)) onto a canvas to build an expression graph. Press "forward" to watch values flow from inputs to output; press "backward" to watch local derivatives multiply their way back from the output, with each edge labelled by its local derivative. Compare the result with forward-mode dual numbers and with a finite difference.

Try it: Build a computation graph

Drag a slider for the cut size \(x\) on a 20 cm sheet and watch a 3-D box fold up, with its volume plotted live as a point on the \(V(x)\) curve. A second slider changes the sheet to a rectangle (\(a \times b\)); see the optimum move, and compare it with the root of \(V'(x) = 0\) found by the quadratic formula.

Try it: Open the box designer · Try a rectangular sheet · Box volume V(x) with sliders

Adjust the starting value \(x_0\) for Newton’s method with a slider and observe which root it reaches. The curve is drawn with each tangent line and each new iterate animated, and a side panel shows a table of \(x_n\), \(f(x_n)\), \(f'(x_n)\) and the correction. Preset functions: \(x^2 - 2\) (calm), \(x^3 - 2x + 2\) (find the start that cycles), \(\arctan x\) (find the divergence threshold near 1.39), and \(x^3 - x\) (colour the starting line by which root wins and zoom into the interleaved basins). Toggle "bisection" to race the two methods on the same function and plot their errors on a log scale. Extension: in the complex plane (Chapter 15), colour each starting point \(z_0\) by the root of \(z^3 - 1\) it reaches, and watch a fractal appear.

Try it: Colour x³ − x basins · Open the Newton explorer · The z³ − 1 fractal

Pick a function and an interval. Drag a slider for \(n\) from 1 to 200 and switch between left, right and midpoint rules. Watch the rectangles and a live readout of the sum and its error against the exact area. Try a decreasing function and a function that rises and falls to test the "underestimate" slogan.

Try it: Open the rectangles lab · Left sums of a decreasing f · A function that rises and falls · Riemann rectangles, slide n

Show a curve \(y = f(t)\) on top and, underneath, the graph of the accumulation function \(A(x) = \int_a^x f(t)\,dt\). Drag the endpoint \(x\) and watch the shaded area and \(A(x)\) update together. Show the tangent slope of \(A\) at \(x\) next to the height \(f(x)\): they always match. Try a curve that dips below the axis and watch \(A\) decrease there.

Try it: Open the painting-the-area lab · f and its area function

Plot \(2x\cos(x^2)\) on \({[0, \sqrt{\pi}]}\) beside \(\cos u\) on \({[0, \pi]}\), with a slider that moves a thin strip in one plot and the corresponding strip in the other. The strips have different widths and heights but the same area: substitution is a stretching of the horizontal axis that preserves area.

Try it: Open the substitution lab

Choose a function from a menu (smooth, kinked, oscillating, spiking) and a number of strips. Show trapezoids, midpoint rectangles and Simpson parabolas overlaid on the curve, with a live log–log error plot growing as you increase \(n\). Find a function where the trapezoid rule beats Simpson (hint: a periodic function over one full period, or one with a kink).

Try it: A kink slows Simpson · Race the rules

Draw a slope field for \(dy/dt = g(t, y)\): a tiny line segment at each grid point showing the slope there. Click a starting point and watch Euler’s method trace a path through the field with an adjustable \(\Delta t\), alongside the exact solution where known. Try \(dy/dt = 0.5y\), \(dy/dt = -y\), and the logistic equation \(dy/dt = y(1 - y)\).

Try it: Open the slope-field lab

Type a formula \(f(x, y)\) and see three linked views: the rotatable surface, the contour plot and the heat map. Hover over a point in any view to highlight it in the other two. Change the contour spacing and watch steep regions show up as bunched lines.

Try it: Open the surface explorer

Click a point on a contour map. The app draws \(\nabla f\) there and a draggable unit vector \(\mathbf{u}\). As you rotate \(\mathbf{u}\), a live readout shows \(D_{\mathbf{u}} f = |\nabla f|\cos\theta\) and a dot moves along the cosine wave. Confirm by hand that the maximum is along the gradient and the zeros are along the contour.

Try it: Open the Follow the arrow lab

Pick a surface (round bowl, elongated bowl, a banana-shaped Rosenbrock valley, a two-minimum landscape). Click to choose a starting point and drag a slider for \(\eta\). The app animates the descent path on the contour plot and draws the loss curve beside it. Find the largest \(\eta\) that still converges on the elongated bowl, and check it against the prediction \(2/\lambda_{\max}\). On the two-minimum landscape, colour each starting point by which minimum it reaches.

Try it: Colour the two basins · Open the learning-rate lab · Descend the Rosenbrock valley

Type two boolean expressions in up to five variables. The lab draws both truth tables side by side, highlights rows where they disagree, and offers a "push negation inward" button that applies De Morgan one step at a time, showing which law fired. A challenge mode gives a messy condition from real code and asks for the shortest equivalent.

Try it: Open the truth-table playground

A three-set Venn diagram has eight regions. Type a set expression such as \((A \setminus B) \cup \overline{C}\) and the lab shades the matching regions; click regions to paint a shape and the lab finds an expression for it. A second panel shows the same regions as rows of a three-variable truth table, making the sets-equal-logic correspondence concrete.

Try it: Regions as truth-table rows · Open the Venn region painter

Draw arrows between up to eight dots. The lab lights up which of reflexive, symmetric, antisymmetric and transitive hold, and for any that fail it highlights a witness (a missing loop, an unreturned arrow, a two-step path with no shortcut). Buttons add the reflexive, symmetric or transitive closure; when the result is an equivalence relation the dots recolor by class, and when it is a partial order the lab redraws it as a Hasse diagram.

Try it: Open the relation explorer

Type a claim as a Python predicate (for example lambda n: is_prime(n*n + n + 41) or lambda p: not is_prime(p) or is_prime(2**p - 1)) and a search range. The lab tests every value, plots passes and failures like the Euler-polynomial chart above, and highlights the first counterexample. Try to guess, before running, how far each claim survives.

Try it: Hunt counterexamples in Python

An "induction workbench": enter a conjectured closed form such as n*(n+1)(2*n+1)//6 and a recursive definition such as S(n) = S(n-1) + n*2. The lab tabulates both for \(n = 1 \ldots 50\) (discovery and checking), then animates the dominoes: the base-case domino turns green when you confirm \(P(n_0)\), and the chain falls only after you enter the algebra of the inductive step.

Build a full binary tree by clicking leaves to split them. The lab keeps live counts of leaves and internal nodes (watch \(L - I\) stay at 1), and shows the structural-induction proof annotating each split: "this split turns one leaf into an internal node and adds two leaves: \(L\) goes up by 1, \(I\) goes up by 1".

Step through binary search on an array you choose. At each iteration the lab shades the excluded regions grey (as in the figure), displays the invariant and the variant \(\texttt{hi} - \texttt{lo} + 1\), and turns red if you edit the code (for example to lo = mid) in a way that breaks maintenance or termination. Try to find an edit that keeps the invariant but loops forever.

Try it: Trace binary search in Python

A gallery of short "proofs", each with exactly one flaw (division by zero, missing base case, non-exhaustive cases, proving the converse, a broken small case). Click the line you think is wrong; the lab explains the error and shows a counterexample or a corrected proof. A good self-test before the mastery check.

Animate the sieve on a 20 × 20 grid. Each prime colours its multiples in its own colour, starting at \(p^2\). Let the reader change the grid width. With width 6, the primes after 3 line up in just two columns (the numbers of the form \(6k \pm 1\)). With width 10, they fall in the columns ending 1, 3, 7, 9. Ask why: the other columns are multiples of 2 or 3, or of 2 or 5.

Try it: Watch the sieve, width 6 · The primes up to 400

Build a two-jug simulator: choose capacities \(a\) and \(b\) and allow fill, empty and pour. Highlight the reachable amounts. The reader should discover that exactly the multiples of \(\gcd(a, b)\) (up to the larger capacity) are reachable. This is the Die Hard 3 puzzle: measure 4 gallons with 3- and 5-gallon jugs. Show the Bézout coefficients the path corresponds to.

Try it: Play the jug puzzle · Bézout for jugs of 3 and 5

A clock face with an adjustable modulus \(m\). The user picks \(a\) and \(b\) and sees \(a + b\) and \(a \cdot b\) as walks around the dial. A second mode draws the "times \(k\)" map as chords: connect each \(x\) to \(kx \bmod m\). With \(m = 200, k = 2\) you get a cardioid, and other \(k\) give nephroids and stranger curves. It is a striking picture of multiplication as rotation.

Try it: Open the any-modulus clock

Let the user enter \(a\), \(e\) and \(m\). Show the exponent in binary, then animate the square-and-multiply table, lighting each bit as it is consumed. Beside it, run naive repeated multiplication and keep a step counter. Push \(e\) to \(10^{6}\) and then \(10^{18}\) to feel the difference between linear and logarithmic.

Try it: Run the exponentiation race · Modular powers, any size

Sliders for \(a\), \(c\), \(m\) and the seed. Draw the state graph as in the figure, so that cycles and tails become visible, and report the period. Let the reader test the Hull–Dobell conditions by breaking them one at a time (for example, set \(c = 4\) with \(m = 16\)). A second panel plots consecutive pairs \((x_n, x_{n+1})\) so the lattice structure of LCGs becomes visible.

Try it: Open the period explorer

Let the reader pick small primes \(p, q\) and an \(e\). Show \(\gcd(e, \varphi)\) by Euclid, flag an invalid \(e\), and derive \(d\) with the extended-Euclid table on screen. Encrypt a short word letter by letter (and show why that is a terrible idea: identical letters give identical ciphertexts). Finally, an "attacker" pane factors \(n\) by trial division and shows the time growing as \(p\) and \(q\) get bigger.

Try it: Open the RSA playground · Inverses and powers mod n

Display Pascal’s triangle up to row 64. Let the reader colour entries by their remainder modulo 2, 3 or 5, and watch fractal patterns emerge. Clicking an entry highlights the two entries that sum to it, the hockey-stick diagonal ending at it, and its value as \(n!/(r!(n-r)!)\).

Try it: Pascal’s triangle mod 3 · Pascal’s triangle mod 5 · Pascal’s triangle explorer (mod 2)

Choose \(n\) (scoops) and \(k\) (flavours). The lab shows a random distribution as stars and bars and as a vector \((x_1, \ldots, x_k)\); dragging a bar moves stars between flavours. A counter enumerates all distributions for small \(n, k\) and confirms the formula \(\binom{n+k-1}{k-1}\).

Try it: Stars and bars sliders

Deal random five-card hands and tally the hand types over thousands of deals, side by side with the exact counts above. A "build a hand" mode walks through the stages (rank choices, suit choices) and lets the reader deliberately make the \(13 \times 12\) two-pair mistake and see the over-count.

Try it: Poker-hand counter and two-pair mistake · Exact poker hand counts

Add people one at a time to a virtual room, each with a random birthday, and stop at the first collision; repeat thousands of times and plot the histogram of stopping points against the exact curve. Then switch "days" to \(2^{16}\) or \(2^{24}\) hash buckets and see the \(\sqrt{N}\) rule hold. A password-keyspace calculator sits alongside: choose alphabet, length and guess rate, and watch the time-to-crack move by orders of magnitude as length grows.

Try it: 32-bit hash collisions · Birthday simulator and √N rule · Birthday bound for hashes

A canvas where the reader adds vertices and drags edges between them. Live panels show each vertex’s degree, the degree sum and \(2|E|\) side by side, the connected components in different colours, and whether the current graph has an Euler path, an Euler circuit, or neither, with the odd-degree vertices highlighted.

Try it: Open the graph sandbox

Draw or load a graph (or a grid maze). Step BFS and DFS side by side from the same start, colouring vertices as discovered, in the queue/stack, and finished, with the queue or stack contents shown live. Toggle "maze mode" to see BFS flood outward in rings while DFS snakes down corridors, and compare the paths each finds to the exit.

Try it: BFS versus DFS race

Load the example graph or draw your own. Step through Dijkstra’s algorithm, with finished vertices shaded, tentative distances shown on each vertex, and each relaxation flashing the edge involved. The trace table above fills in row by row. A "negative edge" toggle lets the reader set one weight below zero and watch the algorithm confidently report a wrong answer.

Try it: Dijkstra step-through

Two draggable arrows \(\mathbf{a}\) and \(\mathbf{b}\) start at the origin. The app draws \(\mathbf{a} + \mathbf{b}\) both tip-to-tail and as the parallelogram diagonal, and shows the component arithmetic updating live. A slider for \(c\) shows \(c\mathbf{a}\) stretching, shrinking, and flipping as \(c\) passes through zero.

Try it: Drag the arrows

Fix two vectors \(\mathbf{a}\) and \(\mathbf{b}\). Two sliders control \(x\) and \(y\), and the app draws \(x\mathbf{a} + y\mathbf{b}\) with a faint trail. Sweep the sliders and watch the trail fill the plane. Then drag \(\mathbf{b}\) onto the line of \(\mathbf{a}\) and watch the reachable set collapse to a line. A "target" mode places a random point and asks the learner to find the coefficients.

Try it: Combination sliders, collapsing span

Drag a vector \(\mathbf{a}\) and a direction \(\mathbf{b}\). The app shows the shadow of \(\mathbf{a}\) on the line of \(\mathbf{b}\), the perpendicular residual with its right-angle marker, and the numbers \(\mathbf{a}\cdot\mathbf{b}\), \(k\) and \(\theta\). Rotate \(\mathbf{a}\) past 90° and watch the projection flip to point backwards as the dot product goes negative. A "ramp" mode tilts a slope and resolves the box’s weight live.

Try it: Resolve a force

A slider sets the dimension \(n\) from 2 to 2000. The app draws 1000 random vector pairs and plots the histogram of their cosine similarities, with the curve narrowing as \(n\) grows. A second panel shows the distribution of distances from one random point to all others, so the learner can watch "nearest" and "farthest" converge. A third loads real sentence embeddings for the learner’s own sentences and compares their similarity scores against the random baseline.

Try it: Spin up the dimension

Four sliders (or draggable number fields) set the entries of a \(2\times 2\) matrix \(\begin{bmatrix} a & b \\ c & d \end{bmatrix}\). The app shows the coordinate grid, the unit square, an asymmetric F and the two basis arrows, and animates them smoothly from the identity to the chosen transformation. The learner can also drag the tips of the green and red arrows directly, with the matrix entries updating to match (the columns are the arrow tips). Readouts show the determinant (with the unit square’s area highlighted) and flag when it reaches zero and the plane collapses to a line. Preset buttons: rotate, scale, shear, reflect, project. A "compose" mode applies two matrices in sequence and lets the learner swap their order.

Try it: Change a matrix, watch the grid

A 2D dataset of two interleaved classes (for example two spirals). The learner picks a \(2\times 2\) matrix and bias for one layer and watches the data transform; then toggles ReLU on and off and sees how the bend folds the plane. A second layer follows. The app shows that without ReLU, two layers collapse to one matrix (it displays \(W_2 W_1\)), while with ReLU the classes can be pulled apart.

Try it: Neurons as directions: ReLU fold

Verify the worked example, then probe the failure modes.

The columns are \((1, 1)/\sqrt{2}\) and \((-1, 2)/\sqrt{5}\), which is \(-(1, -2)/\sqrt{5}\): the same direction as our hand answer, normalised and flipped. Now try these and explain each result geometrically:

Try it: Verify it step by step · Run the four experiments

The learner draws pages as nodes and links as arrows. The app animates a crowd of random surfers hopping along links (with occasional teleports), sizes each node by the fraction of surfers on it, and shows the power-iteration vector converging alongside. Sliders: damping factor \(d\) from 0 to 1 (watch rankings flatten towards uniform as \(d \to 0\), and convergence slow as \(d \to 1\)). Challenges: add a "link farm" of pages that all point at one page and see how much rank it gains; create a dead-end page and a closed loop and observe what goes wrong with \(d = 1\).

Try it: Grow your own web · PageRank with a damping slider

A scatter plot of 2D data with a draggable line through the centre. As the learner rotates the line, the app projects every point onto it and shows the variance of the projections as a live number and a dial. The learner hunts for the maximum, then clicks "reveal" to see PC1 drawn from the eigenvector of the covariance matrix, landing exactly on their best line. Further sliders change the correlation and the noise, so the learner sees the eigenvalue ratio (variance explained) track how elongated the cloud is.

Try it: Rotate the cloud

The learner uploads a photo (or picks one). The app converts it to greyscale, computes its SVD and shows a slider for the rank \(k\), redrawing the rank-\(k\) image live alongside a plot of the singular values with the cutoff marked, the storage cost, and the relative error. A second panel shows the individual rank-1 "layers" \(\sigma_i\mathbf{u}_i\mathbf{v}_i^\mathsf{T}\) for \(i = 1, 2, 3, \ldots\), so the learner sees the image being built from stripes. A third shows the unit circle turning into an ellipse for a user-chosen \(2\times 2\) matrix, step by step through \(V^\mathsf{T}\), \(\Sigma\) and \(U\).

Try it: Unit square through Vᵀ, Σ, U · Compress it yourself

Three sliders (prevalence, sensitivity, false-positive rate) drive a live natural-frequency tree and an "icon array" of 1,000 people, colouring true positives, false positives, true negatives and false negatives. Watch the posterior collapse as you slide prevalence from 50% down to 0.1%, and see how much specificity you’d need to make a rare-disease screen useful. A second mode adds a second, independent test.

Try it: Slide the prevalence · Bayes slider lab

A sandbox with a two-dice grid where you click cells to define events \(A\) and \(B\). The lab shades \(A \cap B\), displays \(P(A)\), \(P(B)\), \(P(A \mid B)\) and \(P(B \mid A)\), flags whether the events are independent, and animates "conditioning" as the non-\(B\) cells fading away. A second panel runs Monty Hall with a "host knows" / "host is random" toggle, so you can see the 2/3 answer turn into 1/2 when the host stops carrying information.

Try it: Two-dice event sandbox · Monty Hall: host knows or random

Choose any starting distribution, including a die, an exponential, a two-spike "0 or 100" distribution, or one you draw by hand. Choose \(n\). The lab draws thousands of samples of size \(n\) and builds the histogram of their means live, overlaying the predicted normal curve \(N(\mu, \sigma^2/n)\). A tail meter shows the fraction outside \(\pm 1.96\) standard errors versus the normal’s 5%. Then switch to a Cauchy distribution and watch the CLT fail.

Try it: Bell curve from a die · Build your own bell curve · Bell curve from 0 or 100

Animate requests falling into a row of servers. Toggle between "one random choice" and "best of two random choices" and watch the tallest stack, the number of idle servers, and a histogram of loads evolve. A second panel collects coupons: watch the long final wait for the last missing coupon, and compare the average against \(nH_n\).

Try it: Balls, bins and two choices · Coupon collector simulation

Set a population (normal, skewed, or two-humped), a sample size and a confidence level, then press "sample" repeatedly. Each press draws a new sample and adds its interval to a growing stack, coloured by whether it covers the true mean. A counter shows the running coverage rate approaching the stated level, and a slider for \(n\) shows the intervals narrowing like \(1/\sqrt n\). A "biased sampling" switch shifts the population that samples come from, and coverage collapses even as intervals narrow.

Try it: Catch the mean · Biased sampling breaks coverage

Sliders for baseline rate, minimum detectable effect, \(\alpha\) and power compute the required sample size live, with a plot of the two sampling distributions (null and alternative) moving apart as \(n\) grows. A "run" button simulates the experiment day by day, showing the z-score’s random walk and the 1.96 boundary; a "peek" toggle lets you stop at the first crossing, while a counter over many replays shows the false-positive rate climbing.

Try it: Plan an experiment

Type any decimal number and see its 64 bits coloured by field, its exact stored value, the neighbouring doubles on either side, and its ulp. Drag a slider through magnitudes from \(10^{-320}\) to \(10^{308}\) and watch the spacing change, the subnormal region appear, and the value finally overflow to infinity.

Try it: Float explorer: bits and ulp · The smallest subnormal double

Plot \(f(x)=x^3-2x+2\) and drag the starting point for Newton’s method. From \(x_0=0\) the iterates cycle \(0\to1\to0\to\ldots\) forever. Colour each starting point by which root (if any) it reaches, then switch to the complex plane (Chapter 15) for \(z^3-1=0\) and watch the famous fractal Newton basins appear.

Try it: Complex basins of z³ − 1 · Cycle islands of z³ − 2z + 2 · Open Newton’s basins

A slider sets \(\log_{10}h\) from 0 to \(-16\). Show the secant line on the graph of \(f\), the computed slope, and a live point moving along the V-shaped error plot. Switch between forward, central and complex-step formulas and switch the precision between float16, float32 and float64 to see the bottom of the V move.

Try it: Halving h in three precisions

Animate three pendulums side by side, one per integrator, with a live energy trace underneath. Sliders control \(h\) and the release angle. Then switch to a planet orbiting a star and watch Euler’s orbit spiral outward while the symplectic orbit precesses but stays closed.

Try it: Open the integrator shoot-out

Drag the number of nodes from 2 to 25 for \(1/(1+25x^2)\) and toggle between equally spaced and Chebyshev nodes, and between a global polynomial and a cubic spline. Then drag individual data points and see how far the disturbance spreads: everywhere for the global polynomial, only locally for the spline.

Try it: Open Runge’s wiggle · Compare a cubic spline

Draw a 2-D loss landscape (a ravine, a bowl, an egg box). Drop a ball and choose plain gradient descent, momentum, or Adam, with sliders for \(\eta\) and \(\beta\). Watch the paths, count steps to reach the minimum, and find the learning rate where each method first diverges. On the egg box, try ten random starting points and see how many reach the global minimum.

Try it: Ten starts on the egg box · Open the optimiser race

Plot five to twenty points and the least-squares line. Drag any point and watch the line, the residual squares, and the SSE update live. Drag one point far away to feel how an outlier pulls the line. Toggle between squared and absolute error and compare.

Try it: Drag the points · Least-squares fit and residuals

Plot pass/fail data and a sigmoid with sliders for \(w\) and \(b\). Show the cross-entropy loss live, and a second panel with the loss surface over \((w, b)\) as a contour plot with a dot for the current setting. Then press "train" and watch gradient descent slide the dot to the bottom of the (convex) bowl.

Try it: Sigmoid with w and b sliders · Logistic curve explorer

Build a tiny network (2 inputs, one hidden layer of up to 8 neurons, 1 output) and train it on a 2-D data set: two blobs, a circle inside a ring, a spiral. Watch the decision boundary bend as training proceeds. Remove the activation function and confirm that the boundary stays a straight line no matter how many layers you add. Hover over any weight to see its current gradient.

Try it: Train a tiny network

Type a handful of short documents and a query. See the vocabulary, the TF-IDF vectors as a table, the dot product and cosine for each document, and the ranking. Toggle stemming on and off; switch between TF-IDF and BM25 and move the \(k_1\) and \(b\) sliders to see how term saturation and length normalisation reorder the results.

Try it: Search engine in a box

Enter symbol probabilities (or paste text and let the lab count letters). Watch the entropy update, build the Huffman tree step by step, and compare the average code length to \(H\). Then deliberately use the wrong distribution \(q\) to build the code and see the average length rise by exactly \(D_{\mathrm{KL}}(p\,\Vert\,q)\) when the probabilities are powers of 2.

Try it: Build a code

Draw the slope field of \(dy/dt = f(t, y)\) for a choice of \(f\) (growth, logistic, spring). Click anywhere to drop an initial condition and trace the solution curve. Overlay Euler’s method with an adjustable step size and watch it peel away from the true solution as the step grows.

Try it: Open the slope-field lab

Paste a LaTeX formula. Hover over any symbol to see its name, its meaning, and the chapter of this book that introduced it. Then switch to "concrete mode": the lab asks for tiny example values, evaluates the formula step by step, and shows equivalent NumPy code.