Versions Compared

Version Old Version 5 New Version Current
Changes made by

Luke Franzke

Luke Franzke

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

Code Block
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);
  filltargetPos.set(0mousePos); 
 float target_x = mouseX;
  float distance_x = target_x - ellipse_x;
  if(abs(distance_x) > 1) {  //check that the absolute value(positive) if the distance is greater than 1
    println(distance_x); 
    ellipse_x += distance_x * easingFactor;
  }
     
  float target_y = mouseY;
  float distance_y = target_y - ellipse_y;
  if(abs(distance_y) > 1) {   //check that the absolute value(positive) if the distance is greater than 1
    ellipse_y += distance_y * easingFactor;
  }
  ellipse(ellipse_x, ellipse_y, 60, 60);
}

 

Here’s the same principle again, this time using the PVector object to simplify the code

Code Block
PVector pos;
PVector targetPos;
float  easingFactor = 0.1;
   
void setup() {
  size(800, 600); 
  fill(0);
  pos = new PVector();
  targetPos = new PVector();
}
   
void draw() { 
  background(255);
  targetPos.set(mouseX,mouseY);
  targetPos = PVector.sub(targetPos, pos 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

Code Block
collapsetrue
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 distancevector between mouse position and ellipse position
  targetPos     = PVectortargetPos[i].mult(targetPos, easingFactor(i*0.02)+.02); // multiplyeach thestep distance byin the easingFactoranimation towill slowmove itthis downpercentage of  if(targetPos.mag() > .5) { 
//magnitude is always an absolute number, so we don't need to use the abs() functionthe distance to the target position
        pos = PVector[i].add(pos,targetPos[i]);
    }    ellipse(pos[i].x, pos[i].y, 60, 60);
    }
}


Solution using a class. 

classExample.zip