Creating Animations in JS: Canvas 2D and WebGL
summary
Shows how to create animations for videos using JavaScript when many moving elements are needed, comparing rendering approaches with Canvas 2D and WebGL. Covers practical tooling (Node.js and FFmpeg) and technical techniques including shaders, signed distance fields (SDF) and color blending.
AI-written summary · about
chapters (17)
- 0:00Welcome
- 2:09JS animation basics
- 5:02Canvas 2D vs WebGL tools
- 8:13Canvas 2D vs WebGL
- 10:20Easing for smoothness
- 12:06Save animation as images
- 15:19Save as video with FFmpeg
- 18:51WebGL for complex animations
- 20:40WebGL rendering pipeline
- 22:49Fragment shaders for animation
- 23:54Motion blur techniques
- 26:43Post-processing effects
- 29:57SDF shape creation
- 33:52SDF smooth transitions
- 36:252D to 3D with ray marching
- 37:55Takeaways and tips
- 39:20Q&A
related talks
30mHTML5 Canvas Animation with Javascript
15mGetting Weird with Video Manipulation and HTML5 Canvas
26mCreative experiments with WebGL shaders in JavaScript
42mWebGL and 2D: As Simple as the Web
21mDynamic video in the browser
34mFrame.JS
34mZero to One: The Mystical Mathematics Of Creative Coding
35mVisualizations using SVG, Canvas, and WebGL in Vue