Ease-in ease-out movement

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

Answers

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

  • edited June 2017

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

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

  • Its still just a test

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

  • edited June 2017 Answer ✓

    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)

  • Thank you all!

  • 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)

Sign In or Register to comment.