# Easing, don't get it fully

**URL:** <https://discourse.processing.org/t/easing-dont-get-it-fully/22154>\
**Category:** Beginners\
**Created:** [June 25, 2020, 10:39am UTC](https://discourse.processing.org/t/easing-dont-get-it-fully/22154 "2020-06-25T10:39:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![klap](https://avatars.discourse-cdn.com/v4/letter/k/a698b9/32.png) [@klap](https://discourse.processing.org/u/klap)\
**Post date:** [June 25, 2020, 10:39am UTC](https://discourse.processing.org/t/easing-dont-get-it-fully/22154/1 "2020-06-25T10:39:01Z")

</div>

I don’t think I fully understand easing. Maybe it’s my math, but I don’t see why the two ellipses, end up in the same position with the ‘\* easing’ part.

```auto
float x = 0.0;
float easing = 0.05;

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

void draw(){
  background(0);
  float targetX = mouseX;
  x += (targetX - x) * easing;
  ellipse(mouseX, 30, 40, 40);
  ellipse(x, 70, 40, 40);
}

```

---

<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:** [June 25, 2020, 11:15am UTC](https://discourse.processing.org/t/easing-dont-get-it-fully/22154/2 "2020-06-25T11:15:07Z")

</div>

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.

```auto
float x = 0.0;
float easing = 0.5;

float targetX;

void setup() 
  {
  size(500, 100);
  }
                 
void draw()   
  {
  background(0);
  targetX = width;

  
  ellipse(width, 30, 40, 40);
  ellipse(x, 70, 40, 40);
  }
  
  
void keyPressed()
  {
  x += (targetX - x) * easing;
  println(x, easing, targetX);
  }

```

println() is your friend when it comes to understanding and troubleshooting.  
[https://processing.org/reference/println\_.html](https://processing.org/reference/println_.html)

Processing website example:  
[https://processing.org/examples/easing.html](https://processing.org/examples/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:** [June 25, 2020, 11:29am UTC](https://discourse.processing.org/t/easing-dont-get-it-fully/22154/3 "2020-06-25T11:29:36Z")

</div>

Good explanation!

I would add:

- Easing means to move something slowly, in a soft way to a position.

So instead of moving the 2nd ellipse to the mouse ellipse _at once_, we do it in a more soft and organic way.

This would be the code for moving it straight away:

```auto
float x = 0.0;

void setup() {
  size(1100, 900);
}

void draw() {
  background(0);

  // ellipse at mouse pos
  ellipse(mouseX, 30, 40, 40);

  // second ellipse 
  x += mouseX - x; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  ellipse(x, 70, 
    40, 40);
}

```

As you can see, this line moves the 2nd ellipse:  
` x += mouseX - x;`  
it says: **Add** to x the current difference between the mouse and the old x. Which brings you to the new position of the mouse-ellipse. This line you need to keep in mind.

**Easing**

Now with easing you want to add the current difference but `not the full amount` but only let’s say 1 % or so.

And this reads like this:

`x += (mouseX - x) * easing;`

We don’t add the full amount of the difference (which is `(mouseX - x)` ) but with the expression `* easing` (and easing being 0.1 or being 0.05), we make it much smaller add only this small percentage of it.

Since draw() runs 60 times per second the new difference is calculated **throughout** , made smaller by saying `* easing` and added.

Eventually the 2nd ellipse reaches the first since we always add a amount however small. (Having said that due to rounding errors this doesn’t always work, so sometimes I just put ellipse 2 directly to ellipse 1 when the distance is very small).

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:** [June 27, 2020, 12:07pm UTC](https://discourse.processing.org/t/easing-dont-get-it-fully/22154/4 "2020-06-27T12:07:35Z")

</div>

> [@Chrisir](#):
>
> I would add

I would not…

Sometimes [Less is More](https://idioms.thefreedictionary.com/less+is+more)

It is important that new programmers know their resources and able to work through code.

And we can ease them in the right direction… `:)`

I slowed things down with keyPressed() and used println(); two important tools.  
That was enough to start…

> [@Chrisir](#):
>
> `// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!`

Less is more.

`:)`