Mausverfolger in Processing

Hinzugefügt am von Steffen Fiedler

Powered by Processing.js

Bei anderen Mausverfolger-Beispielen setzt man üblicherweise die Position eines visullen Objekts gleich der aktuellen Mausposition, bzw. nähert diese an. Als zweiten Schritt bewegen wir in dieser Version das visuelle Objekt nicht nur zur Maus, sondern rotieren es auch noch in deren Richtung.

Der erste Teil – die Bewegung – basiert auf dem Ansatz der non-linearen Animation. Wir berechnen die aktuelle Distanz zwischen Maus und Dreieck und verschieben das Dreieck um 1/10tel der verbleibenden Strecke: 
xpos = xpos + (mouseX - xpos) / 10.0;
ypos = ypos + (mouseY - ypos) / 10.0;
Um das Dreieck um sein Zentrum zu rotieren, bedienen wir uns dem translate() Befehl und verschieben den Koordinatenursprung um die Position. 
translate (xpos, ypos);
Im Anschluss berechnen wir den Anstieg (angle) zwischen Dreiecksposition - Maus, und rotieren die Zeichenfläche um den entsprechenden Winkel. 
float angle = atan2 (mouseY - ypos, mouseX - xpos) + PI/2;
rotate (angle);
Da nun das gesamte Koordinatensystem verschoben und rotiert ist, kann das Dreieck an einer festen Position gezeichnet werden.

Der Sketch

// globale Variablen zum Ablegen 
// der aktuellen Dreiecks-Position
float xpos = 0;
float ypos = 0;

void setup () {
    size (550, 220);
    smooth ();
}

void draw () {
    // Hintergrund einfärben
    fill (76, 10);
    noStroke ();
    rect (0, 0, width, height);
    
    // nonlineare Bewegung des Bildes zur Maus
    xpos = xpos + (mouseX - xpos) / 10.0;
    ypos = ypos + (mouseY - ypos) / 10.0;

    // Koordinatensystem in Richtung
    // der Maus verschieben
    translate (xpos, ypos);
    
    // Winkel zwischen Dreick und Maus berechnen
    float angle = atan2 (mouseY - ypos, mouseX - xpos) + PI/2;
    
    // Koordinatensystem rotieren
    rotate (angle);
    
    // Dreieck darstellen
    fill (236);
    triangle (0, -10, 10, 10, -10, 10);
}