Using Easing Functions in p5.js

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Easing functions are the unsung heroes of animations. They give life to dull, linear movements and add a touch of realism to our digital worlds. The p5.js library makes it easy to incorporate easing functions into your animations, elevating them to a higher level of sophistication. Let's dive right in and explore the magic of easing functions in p5.js!

What are easing functions?

Easing functions are mathematical formulas used to create non-linear interpolations between two values. In simpler terms, they help to smoothly vary an object's speed or position during an animation. Easing functions can be used to create natural-looking, organic movements that mimic real-world physics.

In p5.js, easing functions are built into the lerp() function, which stands for "linear interpolation." It allows us to blend between two values based on a specific input, called the interpolation factor.

A simple example

Imagine a ball that needs to move from point A to point B. Without easing, the ball would just move at a constant speed, which isn't very exciting. Let's see how we can use easing functions to make this animation more interesting:

let startX = 10;
let startY = 40;
let endX = 300;
let endY = 200;
let t = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let x = lerp(startX, endX, t);
  let y = lerp(startY, endY, t);

  // Update the interpolation factor (t) with a simple easing function
  t += (1 - t) * 0.05;

  // Draw the ball
  fill(255, 0, 0);
  ellipse(x, y, 20, 20);
}

In this example, we use the lerp() function to interpolate the x and y coordinates of the ball. We also define an easing function (1 - t) * 0.05 to update the interpolation factor t. The result is a smooth animation where the ball starts fast and slows down as it approaches its destination.

Exploring other easing functions

There are many different easing functions that you can use to create interesting animations. Some popular ones include:

• Quadratic: t * t
• Cubic: t * t * t
• Sinusoidal: sin(t * PI / 2)
• Exponential: pow(2, 10 * (t - 1))

You can experiment with different easing functions by replacing the formula in the example above. Remember, the key is to find the right balance between realism and artistic expression.

Conclusion

Easing functions are a powerful tool for creating believable animations in p5.js. By understanding the concepts behind them and experimenting with different formulas, you can bring your sketches to life and wow your audience with smooth, natural-looking movements. So, go ahead and sprinkle some easing magic on your next p5.js project!

FAQ

let startX = 0;
let endX = 100;
let interpolationAmount = 0.1;
let currentX = lerp(startX, endX, interpolationAmount);

function myEasingFunction(t) {
    return t * t * (3 - 2 * t);
}