处理 - 两点之间的动画

Question

我正在开发以下代码。给大家简单介绍一下，就是让用户点击屏幕上的不同点，然后将这些鼠标坐标和位置存储在一个数组中，也可以在屏幕上看到。当用户单击 enter 时，会使用线性插值技术从第一个点移动到最后一个点。我在 for 循环中遇到困难，因为 PVector v 正在存储坐标。有人可以相应地指导我吗？

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

我真的不确定你想做什么，但如果我没猜错你想做这样的事情：

绘制一些圆圈，如果用户点击 canvas
如果用户按下 Enter，开始动画
动画表示：另一个圆圈 (v) 从一个圆圈到另一个圆圈线性移动

我真的不知道，你的 frameCount 是干什么用的。也许您现在可以更轻松地将它添加到此代码中？请注意，即使 animation 为真，您也可以通过单击鼠标添加新目标。

你可以这样做：

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

处理 - 两点之间的动画

Processing - Animation between two points

arrays

processing

lerp