ANIMATIX WALKTHROUGH · OPTIMIZATION KINEMATICS

Rolling Downhill: Gradient Descent

4 interactive stages
WebGPU 60 FPS vector engine
Analytical contour & vector fields
Zero video buffering

Training a neural network is often described as "learning". Mechanically, it is a particle rolling downhill on a high-dimensional loss surface. Dissect the loss landscape, gradient vectors, learning rates, and descent trajectories below.

Fig 00 // Complete Optimization Suite · 6 Beats

pkg-slim · 1.6MB 60 FPS WEBGPU

Master Composition · GPU Transition Wipes

The Complete Descent Story

From convex parabolic loss bowl and gradient vector fields to trajectory integration and learning rate overshoot dynamics.

scene.amx ↗

Loss Surface: f(x, y) = x² + y² Update Rule: θ ← θ - η ∇f(θ) Convergence: Global Minimum at (0, 0)

Fig 01 // Analytical Contour Rings & Gradient Field

pkg-slim · 1.6MB 60 FPS WEBGPU

01 · Mathematical Landscape

The Loss Surface: Contours and Slopes

Rings are contours where loss is equal. Vectors point in the direction of steepest ascent. Drawn directly from functional math equations — no static mesh assets.

losssurface.amx ↗

Contours: Equipotential Rings Gradient: ∇f(x, y) = (2x, 2y)

Fig 02 // Stepping Against the Gradient

pkg-slim · 1.6MB 60 FPS WEBGPU

02 · Optimization Rule

Go Against the Gradient

The gradient points uphill (steepest increase). Training negates it: step along -∇f and loss is guaranteed to decrease for sufficiently small step sizes.

gradientdirection.amx ↗

Red Vector: +∇f (Uphill Ascent) Green Vector: -∇f (Descent Update)

Fig 03 // Particle Trajectory to Minimum

pkg-slim · 1.6MB 60 FPS WEBGPU

03 · Convergence Path

Rolling to the Global Minimum

The particle traces a smooth exponential convergence trajectory directly into the bowl center, slowing down as the gradient magnitude shrinks near zero.

descent.amx ↗

Convergence: Exponential Deceleration Rest Position: Perfect Zero Loss

Fig 04 // Learning Rate Sensitivity: Undershoot vs Overshoot

pkg-slim · 1.6MB 60 FPS WEBGPU

04 · Hyperparameter Tuning

Step Size Decides Everything

Too small (η = 0.05): crawl agonizingly slow. Too large (η = 1.05): overshoot and explode into catastrophic divergence. Just right (η = 0.35): rapid exponential settle.

learningrate.amx ↗

Optimal η: Critical Damping Instability: Divergent Oscillation When η > 1 / L

How this page works

Every figure is compiled live in your browser over WebGPU using declarative .amx scripts. Zero pre-rendered video files, zero runtime allocations.