Learn creative coding writing simple programs

64. Animate objects that slow down and stop using lerp()

In this episode we find out how we can animate an object that does not move at a constant speed, but is reducing its speed, like a car approaching a red traffic light. What we do in each frame of our animation is to find out the middle point between where we are now and where we want to be, and move to that middle point. Frame after frame we move half of the distance to our destination. The steps becomes smaller and smaller, so it looks like we are moving slower and slower until the steps are so small that it looks like are not moving anymore.
To achieve this kind of animation we use a function called lerp(). With lerp we can find out what's the middle point between two other points. For example, we can find what's the middle x between the current x and the destination x. Not only we can find the middle point, but also other points between two numbers that are closer to the first number or closer to the second number.

Tags: animation, motion, decelerating

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```