Creating natural simulations in a web browser
summary
Builds working natural-looking systems in plain browser tech: vanilla JavaScript CSS HTML, using vector math, requestAnimationFrame and hardware-accelerated CSS to sum forces (gravity, wind, mass/friction) into acceleration→velocity→position. Shows concrete demos — falling ball, flocking, scroll-as-pedal, mouse-proximity gestures, audio-driven attractors via Web Audio + getUserMedia, and Leap Motion control — with code on GitHub and demos that behave believably and run acceptably in real browsers.
AI-written summary · about
chapters (9)
- 0:00Introduction to simulations
- 3:08Breitenberg vehicles
- 5:00Creating natural behavior
- 8:09Physics and forces
- 11:16Browser constraints
- 13:38Vector mathematics
- 16:48Mouse interaction techniques
- 21:33Audio and gesture input
- 23:23Conclusion and resources
related talks
45mNatural physics simulations and canvas hackery
43mThe Web Beyond the Edges of the Browser Window
29mNatural User Interface using JavaScript
01h 08mThe quest for the graphical web
33mDeep Space - A Simulation Drama
45mArt.js
27mCSS as a Game Engine: Building Playful, Stateful Web Experiences Without JS
27mA JavaScript framework for computational simulations