Animations from first principles — Rodrigo Girão Serrão

Animations can be created by showing a sequence of images in rapid succession, with small changes between frames creating the illusion of movement

To create animations from first principles, start with basic pixel drawing capabilities and build up from there

A parameterization is a function that accepts a percentage (0-100%) and returns a position on the screen - this is fundamental for drawing shapes

Linear interpolation (lerp/morph) between two parameterizations allows smooth transitions between different shapes/animations

The animation loop consists of:

• An outer loop controlling overall animation progress
• An inner loop drawing each frame
• Screen updates between frames

Progress/time needs to be “baked into” parameterizations to create movement and changes over time

Complex animations can be broken down into simpler parameterizations that are combined and interpolated

Screen clearing between frames and proper screen updates are critical for smooth animations

Number of sampling steps affects how smooth shapes appear - more steps = smoother curves

Color can be incorporated by returning RGB values that change based on progress/time

Simple mathematical formulas (sine, cosine) can create interesting motion patterns when parameterized properly