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
Solution using a class.