005 - Animation System

The Animation System interpolates values over normalized time (0-1).

The Problem

Animations in creative coding are more complicated than they appear:

• Timing – When does what start? How long does it last?
• Easing – Linear movement feels robotic, natural movement accelerates/decelerates
• Coordination – Multiple animations simultaneously, but synchronized
• Loops – Endless, once, back-and-forth?

Without a system, you end up with spaghetti code with if (frame > 60 && frame < 120).

The Solution

The Animation System separates time from value:

1. AnimationClock – A clock that runs from 0 to 1 (normalized time)
2. Animation – Translates time into a value (e.g., scale from 0.8 to 1.2)
3. AnimationComposer – Manages multiple animations on one clock

Why normalized time? Because 0.5 always means "in the middle," whether the animation lasts 1 second or 10 minutes. Easing functions expect 0-1, loops jump from 1 back to 0. Everything becomes simpler.

Why separate Clock? Because you can pause a clock without touching each animation individually. Or attach two animations to the same clock so they run in sync.

Concept

┌───────────────────┐      ┌──────────────────────┐
│  AnimationClock   │─────▶│  AnimationComposer   │
│  position: 0-1    │      └──────────────────────┘
└───────────────────┘                  │
                          ┌────────────┼────────────┐
                          │            │            │
                          ▼            ▼            ▼
                   ┌────────────┐ ┌────────────┐ ┌────────────┐
                   │ Animation  │ │ Animation  │ │ Animation  │
                   │     1      │ │     2      │ │     3      │
                   └────────────┘ └────────────┘ └────────────┘
                          │            │            │
                          ▼            ▼            ▼
                   ┌────────────┐ ┌────────────┐ ┌────────────┐
                   │   Value    │ │   Value    │ │   Value    │
                   └────────────┘ └────────────┘ └────────────┘

Core Concept:

• Animation defines: WHEN (Timeline) + HOW (Playback) + WHAT (Value)
• Clock provides normalized time (0-1)
• Composer orchestrates multiple animations
• Each animation produces an interpolated value

Components

AnimationClock

Central time source with position 0-1.

Properties:

Methods:

Time Modes:

AnimationComposer

Orchestrates multiple animations.

API:

Animation Base Class

Common structure for all animation types.

Timeline Options:

Playback Options:

BreatheAnimation

Pulsing value (e.g., for scale).

Options:

Modes:

Output: number (e.g., 0.8 → 1.2 → 0.8)

RotateAnimation

Continuous rotation.

Options:

Modes:

Output: number (angle in degrees)

ShakeAnimation

Vibration / Trembling.

Options:

Modes:

Output: { x: number, y: number } (offset)

Easing

Easing functions for smooth transitions.

Available Easings:

Usage:

import { Easing } from '@carstennichte/cc-toolbox';

const eased = Easing.get('easeOutCubic')(t);

Tweakpane Integration

All animations have Tweakpane support.

Module Pattern:

Legacy: AnimationTimer

For time-controlled throttling (still used by ColorSet).