Why Animations Feel Robotic
An animation becomes robotic when an object moves at constant speed or stops abruptly. Natural movement accelerates at the start, slows at the end, and never jumps between positions.
The Central Tool: lerp()
let x = 0;
function draw() {
x = lerp(x, mouseX, 0.1); // each frame, advance 10% toward target
ellipse(x, height/2, 20, 20);
}
The coefficient 0.1 controls speed. This creates a natural ease-out: fast at first, slow near the target.
Easing Curves
function easeInOut(t) { return t < 0.5 ? 2*t*t : 1-2*(1-t)*(1-t); }
function smoothstep(t) { return t*t*(3 - 2*t); }
// Apply to a timed animation:
let progress = 0;
function draw() {
progress = min(progress + 0.02, 1);
let t = smoothstep(progress);
let x = lerp(startX, endX, t);
}
The FrameRate Problem
lerp(x, target, 0.1) depends on frameRate. For consistent behaviour across machines:
function draw() {
let dt = deltaTime / 16.67; // normalise to 60fps
x = lerp(x, mouseX, 0.1 * dt);
}
Oscillators
let t = 0;
function draw() {
t += 0.05;
let y = height/2 + sin(t) * 80;
ellipse(width/2, y, 30);
}
Practical Rules
1. Low-coefficient lerp() for mouse tracking
2. Manual easing for event-triggered animations
3. deltaTime for multi-machine distribution
4. sin() for rhythmic, breathing, oscillating movement