处理 - 两点之间的动画

Question

我正在开发下面的代码。为了给你一个简短的描述，它允许用户点击屏幕上的不同点，然后这些鼠标坐标和位置存储在一个数组中，也可以在屏幕上看到。当用户单击enter时，将使用线性插值技术从第一个点到最后一个点进行移动。由于PVector v正在存储坐标，因此我在for循环中遇到困难。任何人都可以请相应地引导我？

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

我真的不知道，你想干什么，但是如果我把你的权利，你想要做这样的事情：

• 绘制某些圈子里，如果用户点击在画布上
• 如果用户按下回车键，开始动画
• 动画是指：另一个圆（ⅴ）从圆内移动线性来圈

我真的不知道，你的frameCount是。可能你现在可以更容易地将它添加到此代码中吗？请注意，即使动画属实，您也可以通过点击鼠标来添加新目标。

你可以这样做：你的帮助

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