Easing in Animation

The concept

Easing (non-linear interpolation) transforms mechanical motion into organic motion. Instead of moving at constant speed, we accelerate at start and decelerate at end. In p5.js, lerp(a, b, t) linearly interpolates between a and b. For easing, apply a curve to t: t*t (ease-in), 1-(1-t)*(1-t) (ease-out), or smoothstep t*t*(3-2*t).

The code

// Easing: circle follows mouse with smoothstep
let x = 0, y = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  // Smoothstep easing toward mouse
  let t = 0.08;
  x = lerp(x, mouseX, t);
  y = lerp(y, mouseY, t);
  noStroke(); fill(55, 227, 195);
  ellipse(x, y, 24, 24);
  // Trail
  fill(55, 227, 195, 40);
  ellipse(mouseX, mouseY, 10, 10);
}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.