Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
      • Animation Solution with objects
      • Animation-2 Answer
    • Simple Collision Detection
    • Sound
    • Typography

/
Animation 2

Animation 2

Nov 01, 2017

Analytics

Loading data...
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

, multiple selections available,
{"serverDuration": 55, "requestCorrelationId": "c6af86d4e6b14d03bb0cea4f2395f4f6"}