# Don't understand what this code means (easing)

**URL:** <https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [August 31, 2022, 5:46pm UTC](https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588 "2022-08-31T17:46:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![EKEN](https://avatars.discourse-cdn.com/v4/letter/e/8dc957/32.png) [@EKEN](https://discourse.processing.org/u/EKEN)\
**Post date:** [August 31, 2022, 5:46pm UTC](https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588/1 "2022-08-31T17:46:24Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello I am really new to processing and programing in general and I wanted this smiley to follow my mouse, and then i googled how to do it and just copied on of the answers, an me being a beginner i didnt exactly mean what it meant so please could you explain what it means and how does it make the smiley follow my mouse?

`float targetY = mouseY; float dy = targetY - y; y += dy * easing;`

dont know if i posted the code correctly but easing is a float and means 0,05, Y is also a float and means y.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 31, 2022, 6:01pm UTC](https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588/2 "2022-08-31T18:01:10Z")

</div>

Hi @EKEN,

That isn’t the full algorithm…  
Should be s.th. like this as you need x/y coords.

```auto
float targetX = mouseX; // get the mouseX as target x coord
float dx = targetX - x; // delta between the current x and target x
x += dx * easing; // move the current x a bit closer to the target x

// Do the same with Y
float targetY = mouseY; // get the mouseY as target y coord
float dy = targetY - y; // delta between the current y and target y
y += dy * easing; // move the current y a bit closer to the target y

```

Briefly spoken it moves the object from current position a bit closer to the target position.

Hope that helps …

Cheers  
— mnse

---

<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:** [August 31, 2022, 8:53pm UTC](https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588/3 "2022-08-31T20:53:32Z")

</div>

here is a running code (based on mnse).

The code calcs the distance between current x and target x.  
This distance could be added to current x.  
When we would add the **full** distance immediately, the rectangle would be at the mouse position immediately. This has to be understood first.

But instead we multiply the distance by **easing** first (which must be very small (like 0.05)) so instead of adding the full distance we only add a small amount.

Therefore the easing / slowness of the approach of the rectangle.

Chrisir

```auto
float easing = 0.05; 
float x, y; 

void setup() {
  size(800, 800);
}

void draw() {

  // manage x 
  float targetX = mouseX; // get the mouseX as target x coord
  float dx = targetX - x; // calc delta between the current x and target x
  x += dx * easing; // move the current x a bit closer to the target x by adding delta BUT NOT the full delta but a value that is a smaller fraction 

  // Do the same with Y
  float targetY = mouseY; // get the mouseY as target y coord
  float dy = targetY - y; // delta between the current y and target y
  y += dy * easing; // move the current y a bit closer to the target y

  rect(x, y, 
    12, 12);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 31, 2022, 11:10pm UTC](https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588/4 "2022-08-31T23:10:35Z")

</div>

[“Easing Box”](http://studio.processingtogether.com/sp/pad/export/ro.9XkJm3bjTAxB2)  
[Easing Topics](https://forum.processing.org/two/discussions/tagged/easing.html)

---

<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:** [September 1, 2022, 11:08am UTC](https://discourse.processing.org/t/dont-understand-what-this-code-means-easing/38588/5 "2022-09-01T11:08:12Z")

</div>

Hello @EKEN ,

You can also do a search here for _easing_:  
[https://processing.org/](https://processing.org/)

Example on Processing site with description:  
[https://processing.org/examples/easing.html](https://processing.org/examples/easing.html)

Take a look at this example:

> [@Easing, don't get it fully](https://discourse.processing.org/t/easing-dont-get-it-fully/22154/2):
>
> Hello, Work through this program. You move 1/2 way with each key press. And then modify the easing value and try it. I used a fixed destination (width) instead of a moving one (mouseX). The default frameRate is 60 fps so things move quickly each frame. [https://processing.org/reference/frameRate\_.html](https://processing.org/reference/frameRate_.html) I slowed it down to only advance with a key press. float x = 0.0; float easing = 0.5; float targetX; void setup() { size(500, 100); } void draw() { backgrou…

The _easing_ in example above is the same as yours except that it eases across the screen with a _keyPressed()_ and expanded below:

```auto
void keyPressed()
  {
  targetX = width;
  float dx = targetX-x;  
  x += dx*easing;
  println(x, easing, targetX); // Very useful to print values to console
  }

```

`:)`