I'm Unsatisfied with Easing Functions

Summary

I'm unsatisfied with easing functions July 15, 2025 You've probably encountered easing functions before. If you're a creative coder, you've likely heard of them or used them. If you're a user, you've certainly interacted with them. They're everywhere, and they give a little more life to computer generated animations. Taking it easyFor the uninitiated: let's say you've got a circle that you want to move from left to right over the course of a second. We can conceptualize this by converting the time into progress: a value between 0 and 1, representing how far through the animation we are. 0 represents the start of the animation, and 1 represents the end. Then, we can convert that progress to a position to draw the circle at.function setup() { createCanvas(200, 200); } function draw() { background('white'); fill('red'); let progress = map(millis() % 3000, 1000, 2000, 0, 1, true); let x = lerp(50, 150, progress); circle(x, height/2, 20); } This looks pretty mechanical. Animators may be able to articulate exactly why. A book written by Disney animators outlines the 12 principles of animation, and these have become an essential part of an animation education. They're a set of things to think about as you animate to help bring characters believably to life (or, as rules to break at opportune moments for shock or comedy.) One of the principles is slow in, slow out. Basically: an object starting from rest takes some time to accelerate, and an object coming to a stop has to take time to decelerate. It's a high-level consequence of laws of physics, really. And our initial code violates it by suddenly jolting our circle to a constant speed, before suddenly stopping it again.So what do you do about it? The answer for many is to slap an easing function on it! They're a useful set of functions to add character to your motion created in 2001 by Robert Penner. An easing function takes in a linear progress value, and returns a new progress value, but converted to nonlinear motion. Sa...