Home▸Mathematics▸Convex Optimization: Gradient Descent Landscape

Convex Optimization: Gradient Descent Landscape

Interactive 3D visualization of convex optimization: a ball performs real gradient descent (x_new = x - alpha * grad f(x)) down a convex bowl to the global minimum, with a feasible-region overlay for constrained optimization and a side-by-side non-convex landscape that traps the same algorithm in a local minimum.

Mathematics3DModerate60 FPS

Details

CategoryMathematics

RenderingThree.js · WebGL

DifficultyModerate

Target FPS60

ControlsLearning-rate alpha slider (0.02-0.60) controls the gradient-descent step size; Reset ball / Random start buttons restart the descent; click anywhere on a surface to drop the ball there; Feasible region toggle overlays and enforces a |x|+|z|<=R constraint on the convex bowl via projected gradient descent; Show non-convex toggle adds a side-by-side rippled surface running the same update rule for comparison.

Three.jsconvex optimizationgradient descentconstrained optimizationlocal vs global minimum

Related simulations

AI & Machine Learning SimulatorWatch a small neural network learn live: real backpropagation and gradient descent update…

Batch Size Hyperparameters: Gradient Descent SimulatorWatch a mini-batch of samples drive gradient descent across a bumpy loss landscape: shrink…

Batch Size HyperparametersA 3D loss-landscape simulator showing how batch size controls gradient noise, convergence… ⊞ All 277 in Mathematics →

This simulator visualizes why convexity matters for optimization: a ball performs real gradient descent, x_new = x − α∇f(x), down a 3D surface toward a minimum. On the convex bowl, every starting point leads to the same global minimum. Toggle a feasible-region overlay to see constrained optimization project the ball back inside an allowed set, and toggle the comparison panel to watch the identical algorithm get trapped in a local minimum on a non-convex surface instead.

⚙ Under the hood

A ball performs real gradient descent (x_new = x - alpha*grad f(x)) down a 3D convex bowl to the global minimum. Toggle a feasible-region overlay for constrained optimization, and toggle a side-by-side non-convex surface to watch the identical algorithm get trapped in a local minimum.

Three.jsconvex optimizationgradient descentconstrained optimizationlocal vs global minimum

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install