Tutorial on Easing

p5.js Beginners
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