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.


...

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

Example Solution

Code Block
languagejs
let startPos;
let endPos;
let curTime = 0;
let animSpeed = 5;
let animDuration = 2000;
booleanlet drawFlag = false;
let animEndFlag drawFlag= false;
let 
voidclickFlag = false;
 


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


voidfunction draw()
{
  background(51);
    // calc. the anim time
  curTime += animSpeed;
  if(curTime >= animDuration) {
     curTime = 0;
 }
  // calc. the proportion of completion in the animation
  floatvar 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
    PVectorlet dir = PVectorp5.Vector.sub(endPos, startPos);
 
    //  PVectormove the circle on the line
    let pos = PVectorp5.Vector.add( startPos , PVectorp5.Vector.mult(dir,normTime));
    ellipse(pos.x,pos.y, 20,20);
  }
 
}
 

voidfunction 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);
= startPos.get(    clickFlag = false;
  }
  print(clickFlag);
}
 
function mouseMoved() {
void  if mouseDragged(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) {
  void mouseReleased()
{
  drawFlag = false;
  println("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

Animation-2 Lösung

...

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