Versions Compared

Version Old Version 2 New Version Current
Changes made by

paulina.zybinska

paulina.zybinska

Saved on

Key

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


Exercise

Modify the example to do the following:

  1. The start and end point of the the animation path is to be defined by mouse click

  2. The ellipse should move forward and backwards endlessly

Code Block
languagejs

...

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");
}

...

Exercise 11

Modified the example to do the following:

  1. The start and end point of the the animation path is to be defined by mouse click
  2. The ellipse should move forward and backwards endlessly
...
Example Solution
 Code Block
languagejs
linenumberstrue
collapsetrue
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
 Code Block
languagejs
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);
    }
  }
}