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.