Easing, don't get it fully

Processing Beginners
1

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.

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);
}
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

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()   
  {
  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

Processing website example:
https://processing.org/examples/easing.html

:)

1 Like
3

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:

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

4

I would not…

Sometimes 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…

Less is more.

:)

1 Like