p5.js Animation Solution with Objects

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);
    }
  }
}
Welcome back

p5.js Animation Solution with Objects

Welcome back

p5.js Animation Solution with Objects
