Ease-in ease-out movement

jaspervanblokland

Hi All,

I do have now this code. The element will bounce to the borders in horizontal direction. From the left to the right the speed starts fast and the speed will slow at the end. When the element hits the right side, the element will bounce back.

From the right to the left the speed now start slow and will speed-up at the end. I do want to do this the other way around for the movement from right to the left where it starts fast and will slow at the end.

float x;
float y;
float easing = 0.05;
float targetX;
float dx;
float w = 100;
float h = 50;
void setup() {
  size(640, 360); 
  noStroke();
}

void draw() { 
  background(51);


  targetX = width+25-w;
  dx = targetX - x;
  x += dx * easing;
  if (x < 25) {
    targetX = width+25;
    dx = targetX - x;
    easing = 0.04;
  }
  if (x > width - w) {
    targetX = 0;
    dx = targetX;
    x += dx * -easing;

    easing = -0.04;
  }

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

  rect(x, height/2, w, h);
}

koogs

why does it say Lerp in the title? you don't use linear interpolation anywhere.

jaspervanblokland

You are right, i will change it. can you help me

koogs

why is line 19 unconditional but line 28 is within the condition?

jaspervanblokland

Its still just a test

prince_polka

you can do easing with bezierPoint

float A,B,a,b;
void setup(){
  size(640, 360); 
  noStroke();
  A=width*3/4;
  B=width*4/5;
}
void draw(){
  a=A; b=B;
  float t = frameCount%100/100.;
  if(frameCount%200<100){t=1.-t;
  a=width-A; 
  b=width-B;
}
  float xpos = bezierPoint(0,a,b,width,t);
  background(0);
  fill(180);
  rect(xpos,100,100,20);
}

kfrajer

Check this: https://forum.processing.org/two/discussion/comment/99933/#Comment_99933

Shiffman uses lerp in his video as you can see in one of the posts.

Kf

koogs

your code was more complicated than it needed to be. the main thing is that speed towards the target is proportional to distance from it

final static float EASING = 0.05; // constant

float x;
float y;
float targetX;

// bat size
float w = 100;
float h = 50;

void setup() {
  size(640, 360); 
  noStroke();

  // initial target
  targetX = width + 25 - w;
}

void draw() { 
  background(51);

  // speed towards target is proportional to distance
  float dx = targetX - x;
  //println(dx);
  x += dx * EASING;

  // at edges, swap targets to other edge
  if (x < 25) {
    targetX = width + 25;
  }
  if (x > width - w) {
    targetX = 0;
  }

  rect(x, height/2, w, h);
}

what is odd is that your targets are unbalanced. so the speed going in one direction gets down to -26, slows down quite a lot, but in the other direction it doesn't go down below 130. that's to do with when you turn and where you set the new target. (lines 28 to 33)

jaspervanblokland

Thank you all!

koogs

Shiffman uses lerp in his video as you can see in one of the posts.

hueSlider = lerp(hueSlider, slider.value(), 0.01)

you are right. and what this is doing is moving hueSlider to a place 1% nearer to slider value, which, of course, slows down as the distance decreases. it's neat, but not particularly clear (but nothing a comment wouldn't cure)