# Tutorial on Easing

**URL:** <https://discourse.processing.org/t/tutorial-on-easing/18011>\
**Category:** Beginners\
**Created:** [February 22, 2020, 12:47pm UTC](https://discourse.processing.org/t/tutorial-on-easing/18011 "2020-02-22T12:47:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hessa](https://avatars.discourse-cdn.com/v4/letter/h/9f8e36/32.png) [@hessa](https://discourse.processing.org/u/hessa)\
**Post date:** [February 22, 2020, 12:47pm UTC](https://discourse.processing.org/t/tutorial-on-easing/18011/1 "2020-02-22T12:47:11Z")

</div>

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](https://p5js.org/examples/input-easing.html)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 22, 2020, 2:26pm UTC](https://discourse.processing.org/t/tutorial-on-easing/18011/2 "2020-02-22T14:26:16Z")

</div>

okay, this is the version without easing.

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

```auto
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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 22, 2020, 3:33pm UTC](https://discourse.processing.org/t/tutorial-on-easing/18011/3 "2020-02-22T15:33:05Z")

</div>

Hello,

Welcome to the Processing community.

These are related:  
[Processing / p5.js Tutorial: What is lerp? (Linear Interpolation)](https://www.youtube.com/watch?v=8uLVnM36XUc)

> **[reference | p5.js](https://p5js.org/reference/#/p5/lerp)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

Have fun coding!

`:)`