Surfaces, gradients and gradient descent
Type f(x, y) and see a rotatable 3-D surface, contours and a heat map, linked; partial derivatives as slices; the gradient field and a directional-derivative dial; the tangent plane and its error; critical points classified by the Hessian; Lagrange multipliers with λ as a shadow price; a double integral as columns that refine; and an optimiser race of gradient descent, momentum and Adam.
Added
How to use it
Type a formula in x and y at the top (x^2 + 3y^2, sin(x)cos(y), x^3 - 3x + y^2,
exp(-(x2+y2))). Implicit multiplication works (2xy, 3exp(x)), as do pi, e, sqrt,
exp, ln, log, the trigonometric functions and * for powers. The *view box is x from, x to,
y from, y to. The function and the point you pick are shared by every tab; Book examples… opens
any worked example from the book.
-
Surface. Three linked views: the surface (drag to rotate, double-click to reset, arrow keys when focused), the contour plot and the heat map. Hover or tap any of them and the point is marked in all three. The slider sets the number of contour levels, and the readout gives the spacing: bunched lines mean a steep surface.
-
Partials. Two slices through the point (a, b): y = b in red and x = a in blue. Each slice is an ordinary curve, and its slope at the point is the partial derivative. The panel lists fx, fy, the second partials and the mixed partials taken in both orders (Clairaut’s theorem says they agree).
-
Gradient. The gradient field over the contours (every arrow crosses the contours at right angles) and the dial: drag the orange unit vector u and watch Duf = ∇f·u = |∇f| cos θ move along a cosine wave. It peaks along ∇f and is zero along the contour through the point.
-
Tangent plane. The plane L = f(a, b) + fxΔx + fyΔy touching the surface, the step (Δx, Δy) and the error f − L, with a log–log plot showing the error shrinking like (step)². The total differential and the worst-case bound |fx dx| + |fy dy| give the error propagation for measurements.
-
Critical points. Every point in the view with ∇f = 0, found by Newton’s method from a grid of starts, with the Hessian, D = fxxfyy − fxy², the eigenvalues and the verdict: bowl (minimum), dome (maximum), saddle, or inconclusive when D = 0.
-
Lagrange. Type a constraint g(x, y) = c. The tool draws the constraint curve, finds the points where ∇f = λ∇g, and draws the contour of f that just touches the curve there. Drag along the curve (or use slide along) to watch ∇f and ∇g swing into line. λ is shown beside the measured shadow price df*/dc (the tool re-solves at c ± δ), and they agree. Move the c slider to relax the constraint.
-
Double integral. Columns over a rectangle, with heights from the midpoint, a corner or a random point of each cell. ▶ Refine steps n from 1 to 40 per side. The table shows how the error falls for n = 5 … 500 (about 100 times per tenfold refinement with midpoints).
-
Descent. Pick a landscape: round or elongated bowl, the ravine from chapter 33, the Rosenbrock banana, two minima, an egg box, or your own f. Click to place the start. Gradient descent, momentum and Adam race from the same point. Set η (logarithmic slider) and β, and press ▶ Play to animate. The loss curve is on a log scale. The stability check reads the Hessian at the lowest minimum and compares η with 2/λmax (and 2(1 + β)/λmax for momentum). Colour basins shades every starting point by the minimum it ends in. Ten random starts counts how many reach the global minimum. Gradient flow overlays the continuous path dx/dt = −∇f, which gradient descent follows with Euler steps of size η. The 1-D switch runs x ← x − η f′(x) on a curve, with a table of steps and the bound η < 2/f″(x*).
⛶ Full screen (or F) gives the current tab’s main view (the surface or the contour map) the
whole screen — the browser’s full screen where it is allowed, otherwise a full-window layer
(iPhone); it is redrawn as the window changes. Escape leaves.
Limits
Derivatives are central differences (h ≈ 10−5 for gradients, 10−4 for second derivatives, scaled to the point), so expect agreement with hand calculations to about six significant figures. Critical points and Lagrange candidates are searched for inside the view only, from a grid of starting points. A very narrow feature can be missed, and D = 0 cases are reported as inconclusive rather than classified. The 3-D views clip extreme heights (poles such as 1/x) to the bulk of the values. Stability bounds are exact for quadratic bowls and hold near the minimum for other landscapes. Adam has no simple bound. Momentum is the heavy-ball form v ← βv + ∇f, x ← x − ηv used in the book, and Adam uses β1 = β and β2 = 0.999.
Related: Graphing calculator for one-variable functions, Vectors for the dot product behind Duf, Matrix transformations for the eigenvalues that set the learning rate, ODE solver for gradient flow and Euler’s method, and Neural network to see gradient descent train a model.
Companion to Multivariable Calculus and the Gradient (chapter 20), the gradient-descent teaser in Applications of Derivatives (chapter 18) and Optimisation: the art of going downhill (chapter 33) of Mathematics, Reconnected.
Linking to an example
Share link copies a URL with your settings. You can also write one by hand:
/tools/surfaces/?f=x2+3y2&box=-4,4,-3,3#surface. The part after # picks the tab: surface,
partials, gradient, tangent, critical, lagrange, integral or descent. In expressions a
literal ` means plus (as typed) and spaces are ignored. A link the tool builds encodes ` as
%2B, which also works. Numbers may be written as 1/3 or 2pi. When a link has example=, the
other parameters override the example’s settings.
| Parameter | Meaning | Example |
|---|---|---|
|
one of the book presets below (also sets the tab if the link has no |
|
|
f(x, y) |
|
|
view: x from, x to, y from, y to |
|
|
number of contour levels (3–40) |
|
|
the point (a, b) for partials, gradient, tangent plane and Lagrange |
|
|
direction of the unit vector u, degrees from the x-axis |
|
|
tangent-plane step Δx, Δy |
|
|
Lagrange constraint g(x, y) = c |
|
|
double-integral rectangle: x from, x to, y from, y to |
|
|
columns per side (the view draws at most 40) |
|
|
column height from |
|
|
descent landscape: |
|
|
descent start |
|
|
learning rate η and momentum β |
|
|
methods to race, comma-separated: |
|
|
number of steps |
|
|
colour basins, draw gradient flow ( |
|
|
|
|
|
1-D mode: f(x) and the start x0 |
|
Book presets (?example=…):
| Name | Shows |
|---|---|
|
Explore a surface: two hills in three linked views (the chapter 20 lab) |
|
Level curves of the bowl x² + 3y² are ellipses |
|
Slices of x³ + 2xy² − y at (1, 2): fx = 11, fy = 7, fxy = fyx = 8 |
|
The gradient field on the two hills, perpendicular to the contours |
|
Follow the arrow: at (1, 2) towards (3, 4), Duf = 12.2; steepest rate 13.04 at 32.5° (lab) |
|
Tangent plane at (1, 2): L(1.1, 1.9) = 7.4 against f = 7.373 |
|
Area xy of a 20 × 10 cm rectangle, each side ±0.1 cm: worst case dA = 3 |
|
x³ − 3x + y²: a minimum at (1, 0) (D = 12) and a saddle at (−1, 0) (D = −12) |
|
x² − 4xy + y²: a single saddle, D = −12 |
|
x⁴ − y⁴: D = 0, the test is inconclusive |
|
Gradient descent on x² + 3y² from (3, 1) with η = 0.1: 12 → 6.24 → 3.76 → 2.37 |
|
Tune the learning rate: η = 0.34 just above 2/λmax = 1/3 diverges (lab) |
|
The Rosenbrock banana valley |
|
Two minima, each start coloured by the minimum it reaches (lab) |
|
Fence against a wall: max xy with x + 2y = 8 at (4, 2), λ = 2 |
|
Coffee and cake: max xy with 2x + 4y = 40 at (10, 5), λ = 2.5 |
|
x + y on the circle x² + y² = 2: λ = ±½ |
|
∬ (x² + y) dA over [0, 1] × [0, 2] = 8/3 with 5 × 5 midpoint columns (2.66) |
|
One-variable descent on (x − 3)² + 1 from 0 with η = 0.2: 1.2, 1.92, 2.352 … |
|
The same with η = 1.1: overshoots and diverges (needs η < 1) |
|
Gradient descent, momentum and Adam in the ravine ½(x² + 25y²) from (10, 1) (lab) |
|
Forty steps of plain descent against momentum (β = 0.7, η = 0.07) |
|
Egg box: basins and ten random starts (lab) |
|
The 330 ml can: minimum area at r ≈ 3.74 cm, h ≈ 7.49 cm; λ = 2/r ≈ 0.534 cm² per ml |
|
Gradient descent as Euler’s method on gradient flow (η = 0.3 zig-zags off the flow) |
Feedback is a gift. Something to improve, a feature to add, or a bug? Tell me.
Runs entirely in your browser; nothing you type leaves this page.