Pixel Art and Complex Systems
summary
Demonstrates rendering pixel art purely with CSS box-shadow pixels so one DOM element can represent many squares and drive thousand box‑shadows at ~60fps for animations and particle systems; builds walking sprites, gravity and motion‑blur by mapping velocity to blur, and tiny tornadoes with Perlin noise. Exports frame‑by‑frame data and uses Node.js + Photoshop (Generator) to render HD video. Shows agent systems—Braitenberg vehicles, sheep/wolves/zombies and termites with 3,500 wood chips—where a 5px sensor radically speeds aggregation and equilibrium formation.
AI-written summary · about
chapters (19)
- 0:00Pixel art and abstraction
- 1:47Atari pixel art memories
- 2:48Post-it pixel art demo
- 4:56Gormley’s pixel sculptures
- 7:04CSS box shadows rendering
- 9:33Box shadow performance
- 10:42Walking animations with CSS
- 12:06Pixel tornado simulation
- 17:09Simulations to video with Photoshop
- 19:15Braitenberg agent systems
- 21:45Sheep versus wolves simulation
- 23:38Predator-prey feedback loops
- 24:40Zombies for negative feedback
- 26:10Equilibrium in simulations
- 27:15Termites building structures
- 30:46Sensors for termite efficiency
- 32:53Pixel art for complexity
- 34:19Interpretive freedom in pixel art
- 34:42Q&A
