/* Animation Demo - Feb 14 2008 - by Charlie Roberts
** 
** This file gives a demonstration of how to animate a shape changing over time
** using easing. Clicking the mouse causes the shape to change.
**
*/
class Point {
  int x;
  int y;
  int targetY;    // target for point to move to
  boolean animationFlag = false;  // should I animate?
  
  Point(int startX, int startY) {
    x = startX;
    y = startY;
  }
  
  void animate() {
    if(animationFlag) {
      y += (targetY - y) / 20;  // move 1/20th of the distance to the target
    
      if(abs(targetY - y) <= 1) {  // if it's less than one pixel away....
         y = targetY;              // ... move all the way to the target
         animationFlag = false;    // .... and stop animating
      }
    } 
  }
}

Point[] points = new Point[15];    // create an array to hold all our points

void setup() {
  frameRate(60);
  smooth();
  size(300, 500);
  for(int i=0; i<points.length; i++) {
    points[i] = new Point(20*i, int(random(50, 450)));  // create a new point and give it a starting x and y value
  }
}

void draw() {
  background(0);
  beginShape();
  vertex(0,450);                         // create a starting vertex for our shape
  for(int i=0; i<points.length; i++) {
    points[i].animate();                      // tell each point to move towards their targetY position
    vertex(points[i].x + 20, points[i].y);    // draw a vertex using the current x and y position of each point
  }
  vertex(300,450);                       // draw one of our ending vertices...
  vertex(0,450);                         // ... draw the other
  endShape();                            // end the shape
}


void mousePressed() {
  for(int i=0; i<points.length; i++) {
    points[i].targetY = int(random(50, 450));   // give a new random y position to each point
    points[i].animationFlag = true;             // tell each point it should animate
  }
}