# 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 vector between mouse position and ellipse position
targetPos.mult(.2); // each step in the animation will move this percentage of the distance to the target position
ellipse(pos.x, pos.y, 60, 60);
}
void mousePressed() {
mousePos.set(mouseX, mouseY);
};
```

### Exercise 10

Add an additional ellipse that follows the mouse at a slower rate than the first ellipse.

Modify the code so that the ellipse always follows the mouse position.

Replace with the ellipse with another shape (like a triangle or even a car) , and keep it pointed towards the mouse.

### Exercise Solution Using Arrays

Expand source
```PVector[] pos;
PVector[] targetPos;
PVector mousePos;
int arrayLength = 5;
void setup() {
size(1000, 600);
fill(0);

pos = new PVector[arrayLength];
targetPos = new PVector[arrayLength];

for (int i = 0; i<pos.length; i++) {
pos[i] = new PVector(0, 0);
targetPos[i] = new PVector(0, 0);
}
mousePos = new PVector(width/2, height/2);
}

void draw() {
mousePos.set(mouseX, mouseY);
background(255);

for (int i = 0; i<pos.length; i++) {
targetPos[i].set(mousePos);
targetPos[i].sub(pos[i]);  // find the vector between mouse position and ellipse position
targetPos[i].mult((i*0.02)+.02); // each step in the animation will move this percentage of the distance to the target position