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 p5.Vector object is used to handle the coordinates and the simple math operations.

var pos;
var targetPos;
var mousePos;

function setup() {
  createCanvas(1000, 600);
  fill(0);
  pos = createVector(0, 0);
  targetPos = createVector(0, 0);
  mousePos = createVector(width/2, height/2);
}

function draw() {
  background(255);
  targetPos.set(mousePos); 
  targetPos.sub(pos);  // find the vector between mouse position and ellipse position
  targetPos.mult(0.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);
}

function mousePressed() {
  mousePos.set(mouseX, mouseY);
}

Exercise

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

var pos = [];
var targetPos = [];
var mousePos = [];
var arrayLength = 5;

function setup() {
  createCanvas(1000, 600);
  fill(0);
  for (var i = 0; i< arrayLength; i++) { 
    pos[i] = createVector(0, 0);
    targetPos[i] = createVector(0, 0);
  }
   mousePos = createVector(width/2, height/2);
}

function draw() {
   mousePos.set(mouseX, mouseY);
   background(255);
  
  for (var 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) + 0.05); // each step in the animation will move this percentage of the distance to the target position
        pos[i].add(targetPos[i]);
        fill(125,255,23);
        ellipse(pos[i].x, pos[i].y, 60, 60);
    }
}

Exercise Solution Using Arrays and Classes

let shape = [];
var arrayLength = 60;


function setup() {
  createCanvas(1000, 600);
  fill(0);

  for (var i= 0; i < arrayLength; i++) {
    shape[i] = new myShape((i*0.02) + 0.02);
  }
}

function draw() {
  background(255);
  for (var i= 0; i < shape.length; i++) {
    shape[i].update();
  }
}

class myShape {
  
  constructor(_speed) {
   this.pos = createVector(0,0);
   this.targetPos = createVector(0,0);
   this.mousePos = createVector(width/2, height/2);
   this.speed = _speed;
  }
  

  update() {
    this.mousePos.set(mouseX, mouseY);
    this.targetPos.set(this.mousePos); 
    this.targetPos.sub(this.pos);  // find the vector between mouse position and ellipse position
    this.targetPos.mult(this.speed); // each step in the animation will move this percentage of the distance to the target position
    this.pos.add(this.targetPos);
    
    pushMatrix();
    translate(this.pos.x, this.pos.y);
    rotate(calcAngle(this.pos, this.mousePos));
    triangle(0,0,-5,20,5,20);
    popMatrix();
  }

  calcAngle(p1, p2)
  {
    return -atan2(p1.x - p2.x,p1.y - p2.y);
  }
}

p5.js Animation Exercise 1

Exercise

Exercise Solution Using Arrays

Exercise Solution Using Arrays and Classes