๐Ÿ‘ฆ๐Ÿป

๐Ÿšถ Bipedal Walker with Physics Simulation

Interactive 2D bipedal robot simulator with Rapier physics, ZMP balance control, and gait generation. Visualize contact forces, support polygons, and stability metrics in real-time.
5 min read
Tech Stack:
TypeScript
React Three Fiber
Rapier Physics
Leva
Loading 3D scene...

Bipedal Walker with Physics Simulation

An interactive 2D bipedal robot simulator built with React Three Fiber and Rapier physics engine. Watch a humanoid robot learn to stand, balance, and walk using Zero Moment Point (ZMP) control and gait generation algorithms.

Overview

This project demonstrates fundamental concepts in humanoid robotics and dynamic balance control. The bipedal walker uses advanced physics simulation to model realistic robot dynamics, including:

  • Rigid Body Dynamics: 7-segment articulated body (torso, thighs, shins, feet) with 6 actuated joints
  • ZMP Balance Control: Maintains stability by keeping the Zero Moment Point inside the support polygon
  • Gait Generation: Creates smooth walking motions using foot trajectory planning
  • Real-Time Visualization: See contact forces, balance metrics, and stability margins

Key Features

Physics Simulation

  • Full rigid-body dynamics using Rapier physics engine
  • Ground contact detection with friction modeling
  • Joint torque limits and realistic constraints
  • 100 Hz physics update rate for smooth simulation

Balance Control

  • Zero Moment Point (ZMP): Critical point where net moment is zero
  • Center of Pressure (CoP): Weighted average of ground contact forces
  • Support Polygon: Convex hull of foot contact points
  • Stability Margin: Distance from ZMP to polygon edge

Gait Generation

  • Cubic polynomial for smooth horizontal foot motion
  • Parabolic arc for vertical foot clearance
  • Adjustable step length, height, and walking speed
  • Double support phase for stable weight transfer

Interactive Controls

Tune robot parameters in real-time with Leva GUI:

  • Gait Parameters: Step length, height, duration, walking speed
  • PID Gains: Hip, knee, and ankle joint controller gains
  • Visualization: Toggle display of ZMP, CoP, forces, and trajectories

How It Works

1. Robot Structure

The bipedal walker consists of 7 rigid bodies connected by 6 revolute (hinge) joints:

``` Torso (40kg) โ”œโ”€โ”€ Left Hip Joint โ”‚ โ””โ”€โ”€ Left Thigh (8kg) โ”‚ โ””โ”€โ”€ Left Knee Joint โ”‚ โ””โ”€โ”€ Left Shin (4kg) โ”‚ โ””โ”€โ”€ Left Ankle Joint โ”‚ โ””โ”€โ”€ Left Foot (1kg) โ””โ”€โ”€ Right Hip Joint โ””โ”€โ”€ Right Thigh (8kg) โ””โ”€โ”€ Right Knee Joint โ””โ”€โ”€ Right Shin (4kg) โ””โ”€โ”€ Right Ankle Joint โ””โ”€โ”€ Right Foot (1kg) ```

Each joint has:

  • Range of motion: Hip (ยฑ60ยฐ), Knee (0ยฐ-120ยฐ), Ankle (ยฑ45ยฐ)
  • Torque limits: Hip (100 Nโ‹…m), Knee (80 Nโ‹…m), Ankle (50 Nโ‹…m)
  • PID control: Position-based motor control with tunable gains

2. Balance Control (ZMP)

The Zero Moment Point (ZMP) is a key concept in bipedal robotics. For a robot to remain balanced:

``` ZMP must stay inside the support polygon ```

ZMP Calculation: ```typescript x_zmp = ฮฃ(f_i ร— x_i) / ฮฃ(f_i) ```

Where:

  • f_i = Normal force at contact point i
  • x_i = Position of contact point i

Stability Criterion:

  • Stable: ZMP inside support polygon (green)
  • Unstable: ZMP outside support polygon (red)
  • Margin: Distance from ZMP to polygon edge

3. Walking Gait

The gait generator creates alternating swing and stance phases:

Swing Phase (foot in air):

  • Horizontal motion: Cubic polynomial for smooth acceleration ``` x(t) = aโ‚€ + aโ‚โ‹…t + aโ‚‚โ‹…tยฒ + aโ‚ƒโ‹…tยณ ```
  • Vertical motion: Parabolic arc for foot clearance ``` y(t) = 4โ‹…hโ‹…tโ‹…(1-t) // Maximum at t=0.5 ```

Stance Phase (foot on ground):

  • Foot remains stationary
  • Body weight supported by stance leg
  • Opposite leg enters swing phase

Double Support Phase:

  • Both feet on ground during weight transfer
  • Typically 20% of gait cycle
  • Critical for stability during transitions

4. Joint Control (PID)

Each joint uses a PID controller to track desired angles:

```typescript torque = Kpโ‹…error + Kdโ‹…(-velocity) + Kiโ‹…integral ```

Where:

  • error = targetAngle - currentAngle
  • Kp = Proportional gain (stiffness)
  • Kd = Derivative gain (damping)
  • Ki = Integral gain (usually 0 for position control)

Recommended Gains:

  • Hip: Kp=200, Kd=20
  • Knee: Kp=150, Kd=15
  • Ankle: Kp=100, Kd=10

Technical Implementation

Physics Engine: Rapier

This project uses @react-three/rapier for physics simulation:

```typescript <Physics gravity={[0, -9.81, 0]} timeStep={1/100}> <RigidBody type="dynamic" colliders="cuboid" mass={40}> {/* Torso */} </RigidBody> <RevoluteJoint body1={torsoRef} body2={thighRef} anchor={[0, -0.25, 0]} axis={[0, 0, 1]} limits={[-Math.PI/3, Math.PI/3]} /> </Physics> ```

Forward Kinematics

Computing body positions from joint angles:

```typescript export function computeForwardKinematics( basePosition: Vector3D, joints: JointAngles, config: RobotConfig ): BodyPositions { // Chain from torso โ†’ thigh โ†’ shin โ†’ foot const hipPos = add3D(torso, [0, -torsoLength/2, 0]); const thighAngle = baseOrientation + joints.hip; const kneePos = add3D(hipPos, rotate([0, -thighLength], thighAngle)); // ... continue chain } ```

Center of Mass

Weighted average of body segment positions:

```typescript export function computeCenterOfMass( bodyPositions: BodyPositions, config: RobotConfig ): Vector3D { const totalMass = getTotalMass(config); const comX = ( torsoPos.x * torsoMass + thighPos.x * thighMass + // ... all segments ) / totalMass; return [comX, comY, comZ]; } ```

Controls & Interaction

Keyboard Shortcuts

  • Space: Play/Pause simulation
  • r: Reset robot to standing position

Mouse Controls

  • Left Drag: Rotate camera around robot
  • Scroll: Zoom in/out
  • Right Drag: Pan camera (desktop only)

Leva GUI Parameters

Gait Parameters:

  • Step Length: 0.2m - 0.6m (default: 0.3m)
  • Step Height: 0.02m - 0.1m (default: 0.05m)
  • Walking Speed: 0.2 m/s - 1.0 m/s (default: 0.375 m/s)
  • Step Duration: 0.6s - 1.0s (default: 0.8s)

PID Tuning:

  • Hip Kp: 50 - 500 (default: 200)
  • Hip Kd: 5 - 50 (default: 20)
  • Knee Kp: 50 - 400 (default: 150)
  • Ankle Kp: 50 - 300 (default: 100)

Visualization:

  • Show ZMP (yellow circle)
  • Show CoP (cyan circle)
  • Show Support Polygon (green outline)
  • Show Contact Forces (force arrows)
  • Show CoM Trail (blue line)

Performance

The simulation is optimized for both desktop and mobile devices:

Desktop (High Performance)

  • 100 Hz physics update rate
  • Full visualization (forces, trajectories, trails)
  • 200 trail points for smooth motion history

Mobile (Optimized)

  • 30 Hz physics update rate
  • Simplified visualization
  • 50 trail points to conserve memory

Device adaptation is automatic based on:

  • Screen size (mobile vs desktop)
  • GPU capabilities (WebGL performance tier)
  • User agent detection

Educational Value

This project demonstrates:

  1. Dynamics & Control

    • Rigid body dynamics with contact constraints
    • PID control for position tracking
    • Model-based balance control (ZMP)
  2. Robot Kinematics

    • Forward kinematics for multi-link chains
    • Center of mass calculation
    • Foot trajectory planning
  3. Physics Simulation

    • Contact detection and force computation
    • Joint constraints and limits
    • Integration methods (Rapier uses impulse-based solver)
  4. Computer Graphics

    • Real-time 3D rendering with Three.js
    • Interactive camera controls
    • Data visualization (forces, trajectories)

Future Extensions

Potential enhancements for this project:

  • Running Gait: Add flight phase with both feet off ground
  • Stairs & Terrain: Handle discrete height changes
  • Push Recovery: Apply external forces and test balance recovery
  • Energy Metrics: Track and minimize torque ร— velocity
  • 3D Walker: Full 3D humanoid with lateral balance
  • RL Training: Use reinforcement learning to learn walking from scratch

References & Resources

Humanoid Robotics

Physics Engines

Gait Generation

Technologies Used

  • React 19 & Next.js 16: Modern React framework
  • React Three Fiber 9: React renderer for Three.js
  • Rapier Physics 1.5: High-performance physics engine
  • Leva 0.10: React-based GUI controls
  • TypeScript: Type-safe development
  • Tailwind CSS: Styling

Try It Yourself

Experiment with the bipedal walker above:

  1. Start Simple: Keep it in Standing mode and adjust PID gains
  2. Add Motion: Switch to Walking mode and tune step parameters
  3. Observe Balance: Watch how ZMP stays inside support polygon
  4. Challenge It: Increase walking speed and see if it stays stable
  5. Optimize: Find the most energy-efficient walking gait

Source Code

View the complete source code on GitHub.

Key files:

  • /components/r3f/projects/bipedal-walker.tsx - Main component
  • /lib/bipedal-walker/types.ts - Type definitions
  • /lib/bipedal-walker/kinematics.ts - Forward kinematics
  • /lib/bipedal-walker/zmp-calculator.ts - Balance metrics
  • /lib/bipedal-walker/gait-generator.ts - Foot trajectory planning
  • /lib/bipedal-walker/joint-controller.ts - PID control

This project is part of my robotics portfolio showcasing dynamic simulation, balance control, and real-time visualization.