# 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:** 1\
**Showing post:** 2

<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

---

_[View the full topic](https://discourse.processing.org/t/tutorial-on-easing/18011)._