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 pos.add(targetPos); 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
Solution using a class.Â