如何在地圖上的兩點之間設置動畫效果？

Question

我想做一個twitter可視化。 我使用曲線連接地圖上的兩個點。

這是我使用它的代碼。這是來自加利論壇Chrisir的一個例子。

void setup() 
{ 
    size(800, 800, P3D); 
} // setup 

void draw() 
{ 
    // myCurveTest() ; 
    PVector firstpoint = new PVector (120, 320, -30); 
    PVector secondpoint = new PVector (320, 220, -30); 
    myCurve (firstpoint, secondpoint) ; 
    firstpoint = new PVector (420, 220, 30); 
    secondpoint = new PVector (620, 120, -30); 
    myCurve (firstpoint, secondpoint) ; 
} 


void myCurve (
PVector firstpoint, 
PVector secondpoint) { 
    PVector beginningcontrolpoint = new PVector (120, firstpoint.y+1200, -30); 
    PVector endingcontrolpoint = new PVector (720, secondpoint.y+1200, -30); 
    myPointPVector(beginningcontrolpoint, color(255, 0, 0)); 
    myPointPVector(firstpoint, color(0, 0, 255)); 
    myPointPVector(secondpoint, color(0, 0, 255)); 
    myPointPVector(endingcontrolpoint, color(255, 0, 0)); 
    stroke (255); 
    noFill(); 
    curve(
    beginningcontrolpoint.x, beginningcontrolpoint.y, beginningcontrolpoint.z, 
    firstpoint.x, firstpoint.y, firstpoint.z, 
    secondpoint.x, secondpoint.y, secondpoint.z, 
    endingcontrolpoint.x, endingcontrolpoint.y, endingcontrolpoint.z); 
} 


void myPointPVector (PVector test, color col1) { 
    MyBox(test.x, test.y, test.z, 
    test.x+3, test.y, test.z, 
    9, 
    col1); 
} 

void MyBox(float x1, float y1, float z1, float x2, float y2, float z2, float weight, color strokeColour) 
// was called drawLine; programmed by James Carruthers 
// see http://processing.org/discourse/yabb2/YaBB.pl?num=1262458611/0#9 
{ 
    PVector p1 = new PVector(x1, y1, z1); 
    PVector p2 = new PVector(x2, y2, z2); 
    PVector v1 = new PVector(x2-x1, y2-y1, z2-z1); 
    float rho = sqrt(pow(v1.x, 2)+pow(v1.y, 2)+pow(v1.z, 2)); 
    float phi = acos(v1.z/rho); 
    float the = atan2(v1.y, v1.x); 
    v1.mult(0.5); 
    pushMatrix(); 
    translate(x1, y1, z1); 
    translate(v1.x, v1.y, v1.z); 
    rotateZ(the); 
    rotateY(phi); 
    noStroke(); 
    fill(strokeColour); 
    box(weight, weight, p1.dist(p2)*1.2); 
    popMatrix(); 
} 

我想動畫這個3D曲線，以便我可以看到它們在地圖上繪製。任何人都可以幫助我解決這個問題。我曾嘗試一切從幀數又在處理libraried先進的動畫，但沒有運氣尚未:(

感謝。

Answer 1

您使用的是曲線（）命令（http://processing.org/reference/curve_.html）繪製曲線，該曲線繪製的Catmull-Rom樣條。在你的代碼中，你只繪製了一個樣條曲線部分（兩個控制點之間的部分），所以你真正感興趣的是「我怎樣才能繪製Catmull-Rom樣條曲線的一部分」。沒有那個答案，但如果你改變你的曲線（control1，第一，第二，control2）調用bezier（第一，c1，c2，second）調用（你現在必須拿出代碼爲控制點c1和c2），那麼您可以使用de Casteljau的算法在任何地方將曲線切割成兩段它。如果您將每個幀的剪切位置向上滑動，然後只繪製從分割操作中獲得的第一個段，則它將看起來像一條從開始到結束點自身繪製的曲線。見http://pomax.github.io/bezierinfo/#splitting關於如何做到這一點的說明（獎金：源代碼，即使在處理）

Answer 2

你可能只是計算由點拋物線點，使用curveVertex和使用翻譯的軌道它在3D繪製和旋轉，在這裏一個例子（使用1.5.1/P3D/fontMode(SCREEN)）：

float initial_x = -200; 
float x = initial_x; 
float y; 
float y_offset; 
float r = 200;// change this to change the height of the parabola 
ArrayList<PVector> pts = new ArrayList<PVector>(); 
float mx = 70, my = -15, tmx, tmy; 
boolean animating = false; 
PFont f; 



void setup() { 
    size(800, 400, P3D); 
    background(255); 
    smooth(); 
    f = createFont("Arial", 15); 
    textMode(SCREEN); 
} 

void draw() { 
    //lights(); 
    background(255); 
    fill(100); 
    textFont(f, 15); 
    text("drag to orbit", width - 10 - textWidth("drag to orbit"), height -30); 
    text("any key to redraw parabola", width - 10 - textWidth("any key to redraw parabola"), height -10); 

    //rotate 3d 
    translate(width/4, height/2); 
    rotateY(radians(mx)); 
    rotateZ(radians(my)); 

    // to mark origin and help view 3d 
    noFill(); 
    stroke(100); 
    box(20); 
    pushMatrix(); 
    translate(100, 5, -100); 
    stroke(200); 
    fill(0, 20); 
    box(600, 2, 600); 
    popMatrix(); 



    //store y offset 
    if (x == initial_x) { 
    y_offset = (sq(x)+2*x)/r; 
    } 

    // stop parabola 
    if (x == initial_x || x < -initial_x + 2) { 
    x+=2; 
    animating = true; 
    // add to curve storage 
    pts.add(new PVector(x, y)); 
    } 
    else { 
    animating = false; 
    } 

    //calc y 
    y = (sq(x)+2*x)/r - y_offset; 

    stroke(50, 30, 7); 
    noFill(); 
    strokeWeight(1); 

    //draw at origin 
    translate(-initial_x, 0); 


    //draw curve 
    beginShape(); 
    for (PVector p:pts) { 
    curveVertex(p.x, p.y); 
    } 
    endShape(); 

    //draw a ball 
    if (!animating) { 
    translate(pts.get(frameCount%pts.size()).x, pts.get(frameCount%pts.size()).y); 
    noStroke(); 
    fill(220, 190, 35); 
    sphere(4); 
    } 
} 
void mousePressed() { 
    tmx = mouseX; 
    tmy = mouseY; 
} 
void mouseDragged() { 
    mx = tmx - mouseX; 
    my = tmy - mouseY; 
} 

void keyPressed() { 
    x = -200; 
    pts.clear(); 
} 

Answer 3

利用curvePoint（）方法的。這是一個類似問題的解決方案： http://forum.processing.org/one/topic/animation-with-curve.html。