Mathematics of Animation
summary
Shows the actual math and code used: polar coordinates with the formulas x = r cos θ, y = r sin θ, converting degrees to radians, and a polygon generator wired to sliders that change radius and side count (hexagon demo). Demonstrates sine/cosine oscillation driven by a theta increment (example amplitude 300px) and staggered phase offsets, and solving triangles with arctan and the law of cosines to build SVG arcs and a blobby connector between two circles. Links to p5.js examples and Generative Design resources.
AI-written summary · about
chapters (12)
- 0:00Start
- 0:52Coordinate Systems
- 1:06Cartesian Coordinate System
- 1:37The Polar Coordinate System
- 2:34Polar Patterns
- 3:48Dynamically Generate Polygons
- 8:28Animation Loader
- 8:53Waves and Oscillations
- 13:59Solving Triangles
- 14:38Right Triangle
- 18:33Law of Cosines
- 20:44Generative Design
related talks
43mMathematics of Animation
30mMaths-powered transforms for creating 3D shapes
34mZero to One: The Mystical Mathematics Of Creative Coding
32mStunning visuals with Maths and...no JavaScript?
54mMaking things with maths
30mHTML5 Canvas Animation with Javascript
43mThe Internet of Shapes
33mYou Can Do What With Math Now?