Interactive controllers you can tweak and visualize. Add/remove examples by dropping folders into src/playground/demos and registering them in DemoRegistry.ts.
in-browser RK4no backenddemo plugins
Demos
Pick a system and start tuning.
2 available
Simulation
Shared settings for all demos.
dt (s)
0.010
Steps per tick
2
Plot window (s)
8 s
Tip: if the simulation becomes unstable, reduce dt or increase stepsPerTick.
Pendulum: swing-up + stabilize
Energy shaping swing-up with a PD stabilizer near upright.
t = 0.00 sdt = 0.010window = 8 s
Pendulum animation
θ = 2.94 rad
Controller
Choose control strategy and tune gains.
Mode
k_p
18.00
k_d
4.50
k_E (energy gain)
2.20
Switch angle
0.40 rad
u_max
4.00
Plant
Physical parameters of the pendulum.
Length L
1.00
Mass m
1.00
Damping b
0.15
Current state
t = 0.00 s
θ = 2.94 rad
ω = 0.00 rad/s
Try this
Mini-challenges to guide exploration.
Reduce uMax until swing-up barely works. What fails first?
Increase damping b. Which gain helps most: kE, kP, or kD?
Set mode = PD only and start near downward equilibrium. Why can’t PD swing it up?
Time series
(waiting)
How to add a new demo
Drop a folder + register it.
Copy an existing demo folder (e.g. demos/vdp)
Edit its model.ts (dynamics/controller), controls.tsx (sliders), plots.ts
Export it from index.ts
Add it to DemoRegistry.ts
Next easy additions: sliding mode, backstepping, unicycle tracking, EKF vs high-gain observer.