Lerp Animation

jaspervanblokland

Hi There,

I made a program where you can move a element from right to left with by a lerp function by the left and right cursor. I want to make this code that i can move the element in steps to the right or left. Its now just 1 step.

It is probably very simple to solve this, i can't fix it.

Cheers!

Code:

///

float x = 0; float y = 0;

void setup() { size(500, 400); fill(255, 0, 0); noStroke(); } void draw() { background(255); ellipse(width/2+x, height/2, 20, 20);

if (keyCode == LEFT) { x = lerp(x, -100, 0.1); } if (keyCode == RIGHT) { x = lerp(x, 100, 0.1); } }

//

Eeyorelife

Edit post, highlight code, ctrl + o

TfGuy44

You don't need lerp() at all!

float x = 0; 
float y = 0;

void setup() { 
  size(500, 400); 
  fill(255, 0, 0); 
  noStroke();
} 
void draw() { 
  background(255); 
  ellipse(width/2+x, height/2, 20, 20);
}

void keyPressed() {
  if (keyCode == LEFT) { 
    x = x-5;
  } 
  if (keyCode == RIGHT) { 
    x = x+5;
  }
}

jaspervanblokland

Thanks for the comment. Exually this option i already used. That works perfectly. I do prefer to use a lerp effect / function to have a transition in the animation from A to B. I was wondering if i could combine the lerp() transition with the option that you gave me.

Eeyorelife

How bout this?

void draw() { 
  background(255); 
  float f = x - z;
  x = x - f/15;
  ellipse(width/2+x, height/2, 20, 20);
}

void mousePressed() {
    z -=150;
}

Eeyorelife

I wrote it on my phone, so I had to change keyPressed to mousePressed in order to be able to check if it worked.

jaspervanblokland

Thanks!