Tutorial on Easing

p5.js Beginners
1

Theres an easing example on p5js that i would love to make my own but i’m not completely sure how easing works. Can anyone explain how easing works? like why we’re defining these variables and what each of them do? that would be very helpful. Thanks!

This is the link to the example I’m referring to :
https://p5js.org/examples/input-easing.html

1 Like
2

okay, this is the version without easing.

I commented the two easing parts out and marked them with !!!.

let x = 1;
let y = 1;
let easing = 0.05;

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

function draw() {
  background(237, 34, 93);

  let targetX = mouseX;
  let dx = targetX - x;
  x += dx ; //  * easing;     // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  let targetY = mouseY;
  let dy = targetY - y;
  y += dy ; // * easing;   // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  ellipse(x, y, 66, 66);
}

When you test it, ball is on mouse immediately. No easing.

Now, you see that both parts for x and y are the same. Three lines each.

Explanation

First mouseX gets copied into targetX for better readability. The mouse is the target.

We now calculate the difference dx between targetX and x (the ball x position).

  • targetX is where the ball SHOULD BE (desired / future),
  • x where it is (present /past).
  • dx is the difference.

When we add this difference dx to the current position x, the current position x immediately is the desired position. The ball jumps to the mouse.

Easing is the effect that we slow this process down by saying dx * easing prior to adding this result to x.

What does this multiplication do? With an easing of 0.05 a difference dx of 200 would only be 10. Only 10 is added to x, so x is changed very slowly, so the ball slowly approaches the mouse. This is easing. It looks more natural or organic.

Same goes for y in the next section of the code (the next three lines do the same for y).

Chrisir

2 Likes
3

Hello,

Welcome to the Processing community.

These are related:
Processing / p5.js Tutorial: What is lerp? (Linear Interpolation)

I remember creating my own lerp function before I knew there was one!

Have fun coding!

:)

1 Like