Animation 2

PVector     startPos = new PVector();
PVector     endPos = new PVector();
int         curTime = 0;
int         animSpeed = 5;
int         animDuration = 2000;
boolean     drawFlag=false;
 
void setup()
{
  size(640, 480);
  smooth();
}
 
void draw()
{
  background(51);
 
  // calc. the anim time
  curTime += animSpeed;
  if(curTime >= animDuration) {
     curTime = 0;
 }
  // calc. the proportion of completion in the animation
  float 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
    PVector dir = PVector.sub(endPos,startPos);
 
    PVector pos = PVector.add( startPos , PVector.mult(dir,normTime));
    ellipse(pos.x,pos.y, 20,20);
  }
 
}
 
void mousePressed()
{
  drawFlag = true;
  curTime = 0;
  startPos.set(mouseX,mouseY,0);
  endPos = startPos.get();
}
 
void mouseDragged()
{
  endPos.set(mouseX,mouseY,0);
}
 
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

Animation Solution with objects