Exercise

Modify the example to do the following:

The start and end point of the the animation path is to be defined by mouse click
The ellipse should move forward and backwards endlessly

let startPos;
let endPos;
let curTime = 0;
let animSpeed = 5;
let animDuration = 2000;
let drawFlag = false;
 
function setup()
{
  createCanvas(640, 480);
  smooth();
  startPos = createVector(0,0);
  endPos = createVector(0,0);
} 


function draw()
{
  background(51);
  // calc. the anim time
  curTime += animSpeed;
  if(curTime >= animDuration) {
     curTime = 0;
 }
  // calc. the proportion of completion in the animation
  var normTime = curTime * 1.0 / animDuration;
 
  if(drawFlag)
  {
    stroke(255);
    line(startPos.x,startPos.y,endPos.x,endPos.y);
 
    // calculate the position of the circle on the line
    let dir = p5.Vector.sub(endPos, startPos);
 
    let pos = p5.Vector.add(startPos, p5.Vector.mult(dir,normTime));
    ellipse(pos.x,pos.y, 20,20);
  }
 
}
 
function mousePressed()
{
  drawFlag = true;
  curTime = 0;
  startPos.set(mouseX,mouseY,0);
  get(startPos.x, startPos.y);
}
 
function mouseDragged()
{
 endPos.set(mouseX,mouseY,0);
}
 
function mouseReleased()
{
  drawFlag = false;
  print("released");
}

Example Solution

let startPos;
let endPos;
let curTime = 0;
let animSpeed = 5;
let animDuration = 2000;
let drawFlag = false;
let animEndFlag = false;
let clickFlag = false;
 


function setup()
{
  createCanvas(640, 480);
  smooth();
  startPos = createVector(0,0);
  endPos = createVector(0,0);
} 


function draw()
{
  background(51);
  // calc. the anim time
  curTime += animSpeed;
  if(curTime >= animDuration) {
     curTime = 0;
 }
  // calc. the proportion of completion in the animation
  var normTime = curTime * 1.0 / animDuration;
 
  if(drawFlag)
  {
    stroke(255);
    line(startPos.x,startPos.y,endPos.x,endPos.y);
 
    // calculate the position of the circle on the line
    let dir = p5.Vector.sub(endPos, startPos);
 
    // move the circle on the line
    let pos = p5.Vector.add(startPos, p5.Vector.mult(dir,normTime));
    ellipse(pos.x,pos.y, 20,20);
  }
 
}
 

function mousePressed()
{
  if (clickFlag == false) {
    stroke(255, 0, 0);
    fill(255,0,0);
    drawFlag = true;
    curTime = 0;
    startPos.set(mouseX, mouseY, 0);
    clickFlag = true;
  } else {
    stroke(255);
    fill(255);
    endPos.set(mouseX, mouseY, 0);
    clickFlag = false;
  }
  print(clickFlag);
}
 
function mouseMoved() {
  if (clickFlag == true) {
    endPos.set(mouseX, mouseY, 0);
  }
}

Alternative Solution with Object

let clickFlag = false;
var myAnimators = [];
let count;
 
function setup()
{
  createCanvas(640, 480);
  smooth();
  stroke(200);
  fill(255);
  myAnimators = new Animator();
 
}
  
function draw()
{
  
  background(51);
  for(var i = 0; i < myAnimators.length; i++) {
    myAnimators.get(i).drawAnimator();
  }
 
}
  
function mousePressed()
{
  if (clickFlag == false) {
    myAnimators = new Animator(mouseX, mouseY);
    clickFlag = true;
  } else {
    myAnimators.endClick(mouseX, mouseY);
    clickFlag = false;
  }
  print(clickFlag);
}
  
function mouseMoved() {
  if (clickFlag == true) {
   myAnimators.endClick(mouseX, mouseY);
     
  }
}
 
 
class Animator {
 
  constructor(x, y){
    this.drawFlag = true;
    this.curTime = 0;
    this.startPos = createVector(x,y,0);
    this.endPos= this.startPos;
    this.animSpeed = 5;
    this.animDuration = 2000;
    this.animEndFlag = false;
    }
 
 
  endClick(X, Y) {
    this.endPos.set(X, Y, 0);
  }
 
  drawAnimator() {
    // calc. the anim time
    if (this.curTime >= this.animDuration) {
      this.animEndFlag = true;
    }
 
    if (this.curTime <= 0) {
      this.animEndFlag = false;
    }
 
    if (this.animEndFlag) {
      this.curTime -= this.animSpeed;
    } else {
      this.curTime += this.animSpeed;
    }
 
    // calc. the proportion of completion in the animation
    var normTime = this.curTime * 1.0 / this.animDuration;
 
    if (this.drawFlag)
    {
 
      line(this.startPos.x, this.startPos.y, this.endPos.x, this.endPos.y);
 
      // calculate the position of the circle on the line
      let dir = p5.Vector.sub(this.endPos, this.startPos);
      let pos = p5.Vector.add(this.startPos, p5.Veector.mult(dir, normTime));
      ellipse(pos.x, pos.y, 20, 20);
    }
  }
}

Programming

p5.js Animation Exercise 2

Analytics

Exercise

Example Solution

Alternative Solution with Object

Related content