Versions Compared

Version Old Version 1 New Version Current
Changes made by

Luke Franzke

paulina.zybinska

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  The p5.Vector object is used to handle the coordinates and the simple math operations.

Exercise 

  1. Add an additional ellipse that follows the mouse at a slower rate than the first ellipse. 

  2. Modify the code

...

  1. so that the ellipse always follows the mouse position.  

  2. Replace with the ellipse with another shape (like a triangle or even a car) , and keep it pointed towards the mouse.

Code Block
languagejs
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 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
collapselanguagetruejs
PVector[]var pos; = PVector[];
var targetPos = [];
PVectorvar mousePos = [];
intvar arrayLength = 5;
void
function setup() {
  sizecreateCanvas(1000, 600);
  fill(0);

  pos = new PVector[arrayLength];
  targetPos = new PVector[arrayLength];

  for (intvar i = 0; i< i<pos.lengtharrayLength; i++) { 
    pos[i] = new PVectorcreateVector(0, 0);
    targetPos[i] = new PVectorcreateVector(0, 0);
  }
   mousePos = new PVectorcreateVector(width/2, height/2);
}

voidfunction draw() {

   mousePos.set(mouseX, mouseY);
   background(255);

  
   for (intvar i = 0; i<posi < pos.length; i++) { 
        targetPos[i].set(mousePos); 
        targetPos[i].sub(pos[i]);  // find the vector between mouse position and ellipse position
        targetPos[i].mult((i*0.02) + 0.0205); // each step in the animation will move this percentage of the distance to the target position
        pos[i].add(targetPos[i]);
        fill(125,255,23);
        ellipse(pos[i].x, pos[i].y, 60, 60);
    }
}



Solution using a class. 
...

Exercise Solution Using Arrays and Objects
 Code Block
languagejs
let shape = [];
var arrayLength = 60;


function setup() {
  createCanvas(1000, 600);
  fill(0);

  for (var i= 0; i < arrayLength; i++) {
    shape[i] = new myShape((i*0.02) + 0.02);
  }
}

function draw() {
  background(255);
  for (var i= 0; i < shape.length; i++) {
    shape[i].update();
  }
}

class myShape {
  
  constructor(_speed) {
   this.pos = createVector(0,0);
   this.targetPos = createVector(0,0);
   this.mousePos = createVector(width/2, height/2);
   this.speed = _speed;
  }
  

  update() {
    this.mousePos.set(mouseX, mouseY);
    this.targetPos.set(this.mousePos); 
    this.targetPos.sub(this.pos);  // find the vector between mouse position and ellipse position
    this.targetPos.mult(this.speed); // each step in the animation will move this percentage of the distance to the target position
    this.pos.add(this.targetPos);
    
    pushMatrix();
    translate(this.pos.x, this.pos.y);
    rotate(calcAngle(this.pos, this.mousePos));
    triangle(0,0,-5,20,5,20);
    popMatrix();
  }

  calcAngle(p1, p2)
  {
    return -atan2(p1.x - p2.x,p1.y - p2.y);
  }
}