Don't understand what this code means (easing)

Processing Coding Questions
1

please format code with </> button * homework policy * asking questions

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.

2

Hi @EKEN,

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

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

3

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

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

“Easing Box”
Easing Topics

5

Hello @EKEN ,

You can also do a search here for easing:
https://processing.org/

Example on Processing site with description:
https://processing.org/examples/easing.html

Take a look at this example:

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

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

:)

1 Like