Verarbeitung - Linie in Richtung des Mauszeigers

Question

I unten

In meinem Code eine Wirkung wie das Bild zu erreichen versuche, habe ich es geschafft, diesen Effekt zu schaffen, sondern die Wirkung zu wiederholen scheint es sich zu vermehren nach innen auf sich selbst. Könnte jemand mir helfen, meinen Code zu erreichen, den Effekt im Bild oben zu erzielen?

void setup(){ 
    size(500,500); 
    frameRate(60); 
    ellipseMode(CENTER); 
    smooth(); 
    loop(); 
} 

void draw() { 

    background(#ffffff); 

    //border 
    strokeWeight(3); 
    fill(255); 
    arc(50, 50, 50, 50, -PI, -PI/2); 
    fill(255); 
    arc(450, 450, 50, 50, 0, PI/2.0); 
    line(25, 50, 25, 475); 
    line(25, 475, 450, 475); 
    line(475, 450, 475, 25); 
    line(475, 25, 135, 25); 
    fill(0); 
    text("MAGNETS", 60, 30); 

    //Lines  
for(int i=0; i<3; i++){ 
    drawMagnet(); 
} 
} 

    float angle = 0; 
    int x = 75; 
    int y = 75; 
    float tAngle = 0; 
    float easing = 0.1f; 

void drawMagnet(){ 

    int l = 10; //length 

    angle = atan2(mouseY - y, mouseX - x); 

    float dir = (angle - tAngle)/TWO_PI; 
    dir -= round(dir); 
    dir *= TWO_PI; 

    tAngle += dir * easing; 

    stroke(0); 
    translate(x, y); 
    rotate(tAngle); 
    line(-l, 0, l, 0); 
} 

Answer 1

Ihre Rotationen und Übersetzungen stapeln, was Ihr Problem verursacht. Um dies zu beheben, könnte man so etwas tun:

pushMatrix(); 
    translate(x, y); 
    rotate(tAngle); 
    line(-l, 0, l, 0); 
    popMatrix(); 

Hier verwende ich die pushMatrix() und popMatrix() Funktionen, damit Ihre Rotationen und Übersetzungen sind nicht stapelbar.

Aber dann sind alle Ihre Linien auf dem gleichen x,y Standort. Sie haben also alle den gleichen Winkel zur Mausposition.

Sie verwenden die translate() Funktion, um sie an verschiedenen Stellen zu zeichnen, aber das ändert nicht ihre zugrunde liegende "Modell" -Position.

Ähnlich wie meine Antwort auf this question, müssen Sie entweder Ihre Berechnungen aus dem Bildschirm Lage der Linien Basis (unter Verwendung der screenX() und screenY() Funktionen), oder Sie müssen sich auf translate() stoppen Ihre Linien zu bewegen und berechnen ihre Positionen direkt.