An interactive 3D mathematical surface animation that demonstrates multi-agent optimization algorithms, traveling wave dynamics, and real-time physics simulation. This project combines advanced mathematical concepts with smooth visual rendering to create an engaging demonstration of optimization theory in action.

Overview

This animation features a dynamic 3D surface generated by complex mathematical wave functions, populated by intelligent agents that use gradient descent algorithms to navigate the evolving landscape. The system demonstrates key concepts in optimization theory, multi-agent systems, and mathematical visualization.

Key Features:

Real-time 3D surface generation using traveling wave mathematics
Multi-agent optimization system with different behavioral strategies
Interactive scroll-controlled time parameter
Mouse-driven wave disturbances
Smooth 60fps animation with performance optimization

Mathematical Foundation

Surface Generation

The 3D surface is generated using a combination of traveling wave functions that create a dynamic, ever-changing landscape. The height function $f: \mathbb{R}^2 \times \mathbb{R} \to \mathbb{R}$ is defined as:

$$f(x,y,t) = \sum_{i=1}^{4} w_i(x,y,t) + \sum_{j=1}^{3} r_j(x,y,t)$$

where $w_i$ are the primary wave components and $r_j$ are the ripple components.

Primary Wave Components:

$$w_1(x,y,t) = 0.8 \sin(1.5x - 2t) \cos(1.2y)$$

$$w_2(x,y,t) = 0.6 \sin(0.8(x+y) - 1.5t + \frac{\pi}{3})$$

$$w_3(x,y,t) = 0.4 \sin(2x - 0.5t) \sin(2y + 0.3t)$$

$$w_4(x,y,t) = 0.3 \cos(0.5(x^2 + y^2) + 0.8t)$$

Ripple Components:

$$r_1(x,y,t) = 0.15 \sin(4x + 2t) \cos(4y - t)$$

$$r_2(x,y,t) = 0.1 \sin(8\sqrt{x^2 + y^2} - 3t)$$

$$r_3(x,y,t) = 0.2 \sin(x + t_{\text{auto}}) \cos(y - t_{\text{auto}})$$

Gradient Descent Algorithm

The agents use numerical gradient descent to navigate the surface, seeking local minima (valleys) in the wave landscape. The gradient is computed using centered finite differences:

$$\nabla f(x,y) = \begin{bmatrix} \frac{\partial f}{\partial x} \\ \frac{\partial f}{\partial y} \end{bmatrix} \approx \begin{bmatrix} \frac{f(x+h,y) - f(x-h,y)}{2h} \\ \frac{f(x,y+h) - f(x,y-h)}{2h} \end{bmatrix}$$

The velocity update follows the momentum-based gradient descent rule:

$$\mathbf{v}_{t+1} = \beta \mathbf{v}_t - \alpha \nabla f(\mathbf{x}_t)$$

$$\mathbf{x}_{t+1} = \mathbf{x}_t + \mathbf{v}_{t+1}$$

where:

$h = 0.01$ (finite difference step size)
$\alpha \in [0.02, 0.03]$ (learning rate)
$\beta \in [0.85, 0.95]$ (momentum coefficient)
$\mathbf{x} = (x, y)$ (agent position)
$\mathbf{v} = (v_x, v_y)$ (agent velocity)

Multi-Agent System

Three distinct agents with different optimization strategies navigate the surface simultaneously:

Agent 1 - Leader (Pure Gradient Descent):

targetVx = -gradX * 0.03  // Subtract for minima
targetVy = -gradY * 0.03
momentum = 0.9

Agent 2 - Explorer (Gradient + Noise):

targetVx = -gradX * 0.025 + random_noise * 0.02
targetVy = -gradY * 0.025 + random_noise * 0.02
momentum = 0.85

Agent 3 - Memory (Leader Following):

leader_attraction = (leader_pos - current_pos) * 0.1
targetVx = -gradX * 0.02 + leader_attraction.x
targetVy = -gradY * 0.02 + leader_attraction.y
momentum = 0.95

3D Projection and Perspective

The 3D surface is projected onto a 2D canvas using rotation matrices and perspective projection. The transformation pipeline consists of:

1. Rotation Matrices:

$$R_x(\theta) = \begin{bmatrix} 1 & 0 & 0 \\ 0 & \cos(\theta) & -\sin(\theta) \\ 0 & \sin(\theta) & \cos(\theta) \end{bmatrix}$$

$$R_y(\phi) = \begin{bmatrix} \cos(\phi) & 0 & \sin(\phi) \\ 0 & 1 & 0 \\ -\sin(\phi) & 0 & \cos(\phi) \end{bmatrix}$$

2. Combined Transformation:

$$\mathbf{p}_{\text{rotated}} = R_y(\phi) \cdot R_x(\theta) \cdot \mathbf{p}_{\text{world}}$$

3. Perspective Projection:

$$s = \frac{d}{d + z_{\text{rotated}}}$$

$$\begin{bmatrix} x_{\text{screen}} \\ y_{\text{screen}} \end{bmatrix} = \begin{bmatrix} x_c \\ y_c \end{bmatrix} + s \cdot z \cdot \begin{bmatrix} x_{\text{projected}} \\ y_{\text{projected}} \end{bmatrix}$$

where:

$\theta = 0.3$ rad (fixed x-rotation)
$\phi = \frac{\pi}{2} \cdot s$ where $s = \text{scroll progress}$ (scroll-controlled y-rotation)
$d = 5$ (viewer distance)
$z = 30$ (zoom factor)
$(x_c, y_c)$ = canvas center

Technical Implementation

The animation achieves 60 FPS performance through careful optimization:

Frame throttling: Updates only every 16ms using requestAnimationFrame
Trail management: Limited to 8 points per agent with automatic cleanup
Gradient caching: Reuses calculations where possible
Canvas optimization: Minimal state changes and batched draw calls

Interactive Features

Scroll-Controlled Time: Maps scroll position $(s \in [0,1])$ to time parameter $(t \in [0,8\pi])$, allowing users to scrub through the wave evolution.

Mouse Wave Disturbances: Creates localized ripples using: $$r_{mouse} = 0.5 e^{-d^2/2} \sin(8d - 2t)$$ where $d$ is the distance from the mouse position.

Boundary Handling: Soft collision with velocity damping $(v \mapsto -0.3v)$ keeps agents within bounds $[-2, 2]^2$.

Key Concepts Demonstrated

Optimization Theory

The animation brings gradient descent to life, showing how different strategies navigate a complex landscape:

Pure gradient descent finds local minima efficiently but can get stuck
Stochastic exploration helps escape local optima through controlled randomness
Memory-based following demonstrates collaborative optimization

Mathematical Visualization

The project transforms abstract mathematical concepts into intuitive visual experiences:

Traveling waves create a dynamic optimization landscape
Real-time gradient computation shows the direction of steepest descent
3D perspective projection provides depth and spatial understanding

Multi-Agent Dynamics

Three agents with distinct personalities demonstrate emergent behaviors:

The Leader follows pure mathematics, seeking the deepest valleys
The Explorer adds controlled chaos, discovering new regions
The Memory agent balances independence with following successful paths

Visual Design

The minimalist aesthetic emphasizes mathematical beauty:

Wireframe rendering: 15×15 grid reveals the surface structure
Agent trails: Semi-transparent paths show movement history
Projected shadows: Ground shadows enhance 3D perception
Interactive rotation: Scroll to explore different viewing angles

Technical Highlights

Numerical Methods: Centered finite differences for gradient approximation
Performance: 60 FPS through optimized rendering and computation
Interactivity: Mouse disturbances and scroll-controlled time
Mathematical Rigor: Accurate implementation of optimization algorithms

This project demonstrates that complex mathematical concepts can be both rigorous and accessible, transforming abstract theory into tangible, interactive experiences.