← ~/visualizations

gradients #

Shows a scalar field f(x,y) with animated contour lines (level sets). A movable sample point displays the gradient vector ∇f as the direction of steepest ascent, a tangent segment to the nearby contour (demonstrating ∇f ⟂ level sets), and a rotating unit direction u to illustrate the directional derivative D_u f = ∇f·u via a live dot-product bar.

canvasclick to interact

⏮◀◀▶▶STEP0.25x1xZOOM

t=0s

practical uses #

• 01.Gradient descent/ascent in machine learning optimization
• 02.Finding steepest slope directions in terrain/heightmap analysis
• 03.Computing directional rates of change in physics (e.g., temperature/pressure fields)

technical notes #

Contours are approximated by sampling a grid and drawing crossing segments per level (marching-squares style). The sample point is pointer-controlled when available; otherwise it follows a smooth loop. All geometry is snapped to a small pixel grid for a retro blocky aesthetic; animations are time-based (2–4s cycles).

← multivariable-calculuscosine-similarity →