Animieren von Kreisen über die Linie

Question

Ich benutze die Funktion lerp(), um meinen Kreis über eine Linie zu bewegen, aber es funktioniert nicht. Der Kreis endet immer irgendwo auf der Linie, abhängig davon, was mein amt-Parameter für die Funktion lerp() ist. Wenn ich 0,5 für das Amt setze, wird der Kreis auf halber Strecke der Linie platziert, aber ich kann weder sehen, dass er sich bewegt, noch dass der Kreis sich über die Länge des Kreises bewegt. Kann mir also jemand helfen, den Kreis entlang der Linie zu bewegen?

float x1,y1,x2,y2; 
float cx,cy; 
float x4,y4; 

void setup() { 
    size(600,600); 
    x1 = 200; 
    y1 = 150; 
    x2 = 300; 
    y2 = 250; 
    cx = 450; 
    cy = 200; 
} 

void draw() { 
    background(60); 
    stroke(220); 
    line(x1,y1,x2,y2); 
    noFill(); 
    noStroke(); 
    // calculate the point 
    float k = ((y2-y1) * (cx-x1) - (x2-x1) * (cy-y1)) 
/((y2-y1)*(y2-y1) + (x2-x1)*(x2-x1)); 
    float x4 = cx - k * (y2-y1); 
    float y4 = cy + k * (x2-x1); 
    stroke(0); 
    line(cx,cy,x4,y4); //line connecting circle and point on line 

    float x = lerp(cx, x4, .1); 
    float y = lerp(cy, y4, .1); 

    fill(255, 0, 175); 
    ellipse(x4,y4, 8,8); 

    fill(175, 0, 255); 
    ellipse(x, y, 50, 50); 
} 

Answer 1

Sie benötigen eine Variable für den amount Wert in die lerp() Funktion übergeben können. Dann erhöhen Sie einfach diese Variable im Laufe der Zeit zu animieren:

float amount = 0; 
float speed = .001; 

void setup() { 
    size(500, 500); 
} 

void draw() { 

    float startX = 0; 
    float startY = 0; 
    float endX = width; 
    float endY = height; 
    float currentX = lerp(startX, endX, amount); 
    float currentY = lerp(startY, endY, amount); 

    background(0); 
    ellipse(currentX, currentY, 20, 20); 

    amount += speed; 

}