Processing - Animation between two points

Question

I am developing the below code. To give you a brief description, it is allowing the user to click on different points on the screen, then these mouse coordinates and positions are stored in an array and also seen on the screen. When the user clicks enter there is a movement from the first point to the last point, using the linear interpolation technique. I am having difficulty in the for loop as the PVector v is storing the coordinates. Could anyone please guide me accordingly?.

ArrayList vectors;
PVector v = new PVector();
boolean animate = false; //declare a boolean variable you can use to switch from building points to animating the movement
int FirstMouseClick; //declare an int variable to store the frameCount of the first mouseclick
int AnimationStart; //declare an int variable to store the frameCount of the animation start

void setup()  
{
  size(500, 500);
  frameRate(60);
  vectors = new ArrayList();
}

void draw()  
{
  if(!animate)//if the boolean variable animate is true
  {
    float output = frameCount - AnimationStart; // subract the animation start frameCount from the current frameCount so you know which framecount from the vectors array you should be showing
    for(int i=0; i<vectors.size(); i++) //loop through the vectors array
     //until you find the (next PVector's frameCount - frameCount of first mouseClick) > above subtraction result
    {
      v = (PVector)vectors.get(frameCount); //until you find the (next PVector's frameCount)

    }
   ellipse(v.x,v.y,10,10);// use the current pvector's xpos and ypos to draw the ellipse
  }
}

void mouseClicked()
{
  frameCount = 0; //if not yet set, set the first frameCount value
  vectors.add(new PVector(mouseX, mouseY,frameCount));// <--- store the framecount in the z axis
  ellipse(mouseX,mouseY,10,10);
  println("Mouse Coordinates are: " + vectors);
}

void keyPressed()
{
  if(keyCode == ENTER)
  {
    animate = true; //set the boolean variable animate to true
    AnimationStart = 3; //set the framecount of the animation start
  }
}

Answer 1

I'm really not sure, what you were trying to do, but if I got you right you want to do something like this:

• Draw some circles, if user clicked on canvas
• If user pressed Enter, start animation
• Animation means: another circle (v) moves linear from circle to circle

I really don't know, what your frameCount was for. May be you can add it to this code easier now? Note, that you can add new targets by clicking with the mouse, even if animation is true.

You can do this:

ArrayList<PVector> vectors = new ArrayList();
PVector v = new PVector();
boolean animate = false; // true means, the circles moves
int nextTarget = 0; // defines the index of the next circle, the point is going to

void setup()  
{
  size(500, 500);
  frameRate(60);
  v = new PVector(width/2, height/2);
}

void draw() {

  // draw background to delete old drawings
  background(128);

  // show all circles
  for (int i=0; i<vectors.size(); i++) {
    fill(255);
    ellipse(vectors.get(i).x, vectors.get(i).y, 10, 10);
  }

  // if the boolean variable animate is true
  if (animate) {
    // compute angle to target circle and remaining distance
    float diffX = vectors.get(nextTarget).x - v.x;
    float diffY = vectors.get(nextTarget).y - v.y;
    float angle = atan2(diffX, diffY);

    // defines the speed of the circle
    float movement = 2;

    // compute new position of v
    v = new PVector(v.x + sin(angle)*movement, v.y + cos(angle)*movement);

    // if v reached the target circle, move on to the next one
    if (dist(v.x, v.y, vectors.get(nextTarget).x, vectors.get(nextTarget).y) < 1 && nextTarget < vectors.size()-1) {
      nextTarget++;
    }
  }
  fill(0);
  ellipse(v.x, v.y, 10, 10); // use the current pvector's xpos and ypos to draw the ellipse
}


void mouseClicked()
{
  vectors.add(new PVector(mouseX, mouseY));
  ellipse(mouseX, mouseY, 10, 10);
  println("Mouse Coordinates are: " + vectors);
}

// toggle animation mode
void keyReleased() {
  if (key == ENTER) {
    animate = !animate;
    println("animation: "+ animate);
  }
}