Versions Compared

Version Old Version 6 New Version 7
Changes made by

Luke Franzke

Luke Franzke

Saved on

Key

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


Code Block
float ellipse_x;
float ellipse_y;
float easingFactor = 0.1;
   
void setup() {
  size(800, 600); 
  noStroke();  
}
   
void draw() { 
  background(255);
  fill(0);
  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 codeIn this simple programme, we animate an ellipse to always chase the mouse. The ellipse only ever moves a percentage of the distance between it and the mouse in each step.

The PVector object is used to handle the coordinates and the simple math operations.

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);  // find the distance between mouse and position on the x an y axis
  targetPos = PVector.mult(targetPos, easingFactor); // multiply the distance by the easingFactor to slow it down
  if(targetPos.mag() > .5) { 
//magnitude is always an absolute number, so we don't need to use the abs() function 
  pos = PVector.add(pos,targetPos);
  } 
  ellipse(pos.x, pos.y, 60, 60);
}