Animation

In this simple program, we animate an ellipse to always chase a point defined by the mouse. The ellipse only ever moves a percentage of the distance between it and the target destination in each step.

The PVector object is used to handle the coordinates and the simple math operations.

PVector pos;
PVector targetPos;
PVector mousePos;
void setup() {
  size(1000, 600);
  fill(0);
  pos = new PVector(0, 0);
  targetPos = new PVector(0, 0);
  mousePos = new PVector(width/2, height/2);
}

void draw() {
  background(255);
  targetPos.set(mousePos); 
  targetPos.sub(pos);  // find the distance between mouse and ellipse position
  targetPos.mult(.2); // each step in the animation will move this percentage of the distance to the target position
  pos.add(targetPos);
  ellipse(pos.x, pos.y, 60, 60);
}
void mousePressed() {
  mousePos.set(mouseX, mouseY);
};

Activity: