An interactive, educational web application for exploring how PID controller gains affect drone stability. Built for students studying distributed systems and IoT.
This simulator makes PID control concepts tangible through real-time 2D drone simulation. Students can experiment with Proportional, Integral, and Derivative gains, observe how wind disturbances affect stability, and build intuition for controller tuning — all through an interactive visual interface.
The physics model is ported directly from the course's Python notebook (PID.ipynb), ensuring the web simulation matches the classroom material exactly.
- Interactive PID Tuning: Adjust Kp, Ki, Kd gains with real-time visual feedback
- Top-Down Quadcopter: Animated drone with spinning rotors (speed proportional to thrust)
- Force Arrow Visualization: Color-coded arrows showing P (blue), I (green), D (red), and Wind (orange) forces
- 4 Educational Presets: Walk through P → PD → PID progression
- Wind Disturbance: Constant or gusty wind with visible particle effects
- Click-to-Target: Click anywhere on the canvas to set a new target position
- Real-Time Graphs: Position error and control signal magnitude over time
- Fading Trail: See the drone's recent path for trajectory analysis
- Dark/Light Theme: Matches classroom and outdoor environments
- Zero Dependencies: Single HTML file, no build step, no frameworks
This tool helps students understand:
| Concept | What You'll Learn |
|---|---|
| Proportional Control | How Kp creates a restoring force proportional to error |
| Integral Control | How Ki eliminates steady-state offset from persistent disturbances |
| Derivative Control | How Kd damps oscillation and reduces overshoot |
| Controller Tuning | The trade-offs between response speed, stability, and steady-state accuracy |
| Wind Disturbance | How external forces challenge a control system |
| Control Saturation | What happens when the control signal hits its limits |
This is a single HTML file with no dependencies. Just open it:
# Clone the repository
git clone https://github.com/ANRGUSC/pid-drone-control.git
cd pid-drone-control
# Open in your browser
open index.html # macOS
xdg-open index.html # Linux
start index.html # WindowsOr simply visit the live demo.
Click Play to start. The drone hovers at the center with the default PID Tuned gains while wind gently disturbs it.
Walk through the four presets to understand each PID component:
| Preset | Gains (Kp, Ki, Kd) | What You'll See |
|---|---|---|
| No Control | (0, 0, 0) | Drone drifts helplessly with the wind |
| P-Only | (1, 0, 0) | Drone fights back but oscillates around target |
| PD Control | (1, 0, 7) | Oscillations dampen, but wind causes steady-state offset |
| PID Tuned | (1, 0.1, 7) | Integral term eliminates offset — drone holds position |
- Click the canvas to set a new target and watch the drone pursue it
- Increase wind speed to challenge the controller
- Enable gusty wind for time-varying disturbances
- Adjust drone mass to see how inertia affects response
- Crank up Kp to see oscillation and instability
- Position Error: Should converge to zero with good tuning
- Control Signal: Shows how hard the controller is working
The simulation implements a discrete-time PID controller in 2D, ported from the course notebook:
error = target - position
derivative = error - previous_error
integral += error
control = Kp × error + Ki × integral + Kd × derivative
control = clip(control, -maxControl, +maxControl)
acceleration = (control + wind) / mass
velocity += acceleration
position += velocity
| Parameter | Value | Range |
|---|---|---|
| Kp | 1.0 | 0–10 |
| Ki | 0.1 | 0–2 |
| Kd | 7.0 | 0–20 |
| Mass | 25 kg | 1–100 |
| Max Control | 15 | fixed |
| Wind Speed | 0.3 | 0–5 |
| Physics Rate | 30 Hz | fixed |
pid-drone-control/
├── index.html # Complete application (single file, ~700 lines)
├── PID.ipynb # Original Python notebook (physics reference)
├── README.md
└── LICENSE.md
The entire application is a single HTML file with inline CSS and JavaScript — no build tools, no frameworks, no dependencies. This makes it trivially deployable and ensures long-term maintainability.
- Canvas 2D API for all visualizations (drone, forces, particles, graphs)
- HiDPI-aware: Scales canvas by
devicePixelRatiofor sharp rendering on Retina displays - Fixed timestep physics at 30 Hz, decoupled from render via
requestAnimationFrame+ accumulator - CSS custom properties for theme switching — canvas reads theme colors via
getComputedStyle
- Quadcopter: Central body, 4 diagonal arms, 4 rotor discs with spinning blades
- Force arrows: Color-coded vectors from drone center showing P/I/D/Wind contributions
- Wind particles: ~40 flowing dashes oriented along wind vector
- Trail: Fading polyline of last 120 positions
- Target: Pulsing crosshair at click position
- Graphs: Rolling 300-sample window with auto-scaling Y axis
This project is licensed under the PolyForm Noncommercial License 1.0.0.
- Non-commercial use: Free for educational, research, and personal use
- Commercial use: Requires a separate commercial license
For commercial licensing inquiries, please contact the author.
Bhaskar Krishnamachari University of Southern California EE 250 — Introduction to Distributed Systems for Internet of Things
Developed with Claude Code, February 2026
- Built as an educational tool for USC's EE 250 curriculum
- Physics model based on the course's PID control notebook