Oszillierende Bewegung in Processing

Hinzugefügt am von Steffen Fiedler

Powered by Processing.js

Um realistisch bzw. organisch anmutende Bewegungen zu formulieren lohnt sich ein Blick auf sin() und cos(). Als trigonometrische Funktionen ermöglichen sie im Zusammenhang mit der Kreiszahl PI sauber erscheinende Schwingungen. Der Bewegungsverlauf verhält sich dabei wie der Graf einer Sinus-, bzw. Kosinusfunktion.

Der Sketch

float radBase = 10;    // Basisradius
float radDiff = 5;     // Differenzradius
float oscillation = 0; // aktueller Zustand
float xpos = 0;

void setup () {
    size (550, 200);
    smooth ();
    background (76);
    fill (236);
}

void draw () {
    noStroke ();
    fill (76, 3);
    rect (0, 0, width, height);
    
    // Zähler der oszillierenden Schwingung 
    // im Bereich zwischen 0 und zwei PI.
    oscillation += 0.1;
    
    // Berechne den Kreisradius
    float rad = radBase + radDiff * sin (oscillation);
    float ypos = (height / 2) + (sin (oscillation) * 40);
    
    // Zeichne den Kreis
    fill (236);
    ellipse (xpos, ypos, rad, rad);
    
    // Verschieben auf der x-Achse
    xpos = xpos + 0.6;
    
    // Zurücksetzen der x-Position
    // wenn Kreis die Zeichenfläche verlässt
    if (xpos > width) {
        xpos = 0;
    }
}