处理 - 两点之间的动画

时间:2017-03-01 08:23:29

标签: arrays processing lerp

我正在开发以下代码。为了给你一个简短的描述,它允许用户点击屏幕上的不同点,然后这些鼠标坐标和位置存储在一个数组中,也可以在屏幕上看到。当用户点击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
  }
}

1 个答案:

答案 0 :(得分:0)

我真的不确定,你想要做什么,但如果我做对了你想要做这样的事情:

  • 如果用户在画布上点击,则绘制一些圆圈
  • 如果用户按Enter键,则启动动画
  • 动画意味着:另一个圆圈(v)从圆圈线性移动到圆圈

我真的不知道你的 frameCount 是为了什么。可能你现在可以更容易地将它添加到此代码中吗?请注意,即使 animation 为true,也可以通过鼠标单击添加新目标。

你可以这样做:

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