Animated movement

Tree55Topz

Lets just say I have a object, such as a rectangle, and I center it in the screen so (200,200). I want the rectangle to move to (50,50) and I don't want it to jump, I want to see it move to the new coordinates. What is a simple example of how this would work with a rectangle?

GoToLoop

Processing invokes draw() @ about 60 FPS by default. So in order to actually see it moving, you gotta do step by step.

I believe you've already got an answer from your previous thread?
http://forum.processing.org/two/discussion/3315/moving-objects-to-specific-location

There's a simpler 1 below too:
http://forum.processing.org/two/discussion/3319/tween-between-random-positions

GoToLoop

A tweaked version:

/**
 * Random Lerp Tweens (v2.02)
 * by  Poersch (2014/Feb)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/3319/tween-between-random-positions
 * forum.processing.org/two/discussion/3337/animated-movement
 */

static final int DIM = 020, FPS = 120;
int originX, originY, destX, destY;
int counter;

void setup() {
  size(800, 600, JAVA2D);
  frameRate(FPS);
  smooth(4);
  ellipseMode(CENTER);
  strokeWeight(2);
  clear();

  destX = width>>1;
  destY = height>>1;

  restart();
}

void draw() {
  final float interval = (float) frameCount % FPS / FPS;

  if (interval == 0.0)  restart();

  final float x = lerp(originX, destX, interval);
  final float y = lerp(originY, destY, interval);

  ellipse(x, y, DIM, DIM);

  frame.setTitle("Counter: " + counter
    + "\t\tFPS: " + round(frameRate)
    + "\t\tInterval: " + nf(interval, 0, 2));
}

void keyTyped() {
  clear();
}

void mouseClicked() {
  clear();
}

void restart() {
  ++counter;

  originX = destX;
  originY = destY;

  destX = (int) random(DIM, width  - DIM);
  destY = (int) random(DIM, height - DIM);

  noStroke();
  fill((color) random(#000000));
  ellipse(destX, destY, DIM*1.3, DIM*1.3);

  stroke(0100, 050);
  fill(-1, 050);
}

Tree55Topz

Okay this seems much clearer. Let me try to understand this logic. So your restart function is sort of similar to a move() function. What is the final float interval? I am confused as the what that does, and the lerp as well... Thank you for your help btw, this is a very clear example, I am just new to animations.

GoToLoop

It wasn't be who made that example. So I don't get it 100% either! 3:-O

So your restart() function is sort of similar to a move() function.

Nope! It just randomly picks a new destination and draws a colored spot there when interval begins a new cycle!

What is the final float interval?

That expression divides 1 second into FPS units. So interval is the current fractioned value of 1 second.
Hence, it takes about 1 second to reach destination spot, no matter its distance.

and the lerp() as well...

It's a little mystery for me as well. Better you read about it for yourself: :(

http://processing.org/reference/lerp_.html