Processing Workshop | Teil 6 | Bewegung und Spiegelung

Markus Walthert

Spieglein Spieglein
In diesem Beispiel bewegen sich Linien von der Mitte der Screen zum linken Bildrand. Auf der rechten Bildhälfte passiert das genau gleiche, nur spiegelverkehrt – aber trotzdem mit den selben Variablen und Formeln. Der einzige Unterschied ist die if-Bedingung für den Richtungswechsel. der ist für die linke Bildhälfte bei 0 und width/2, für die rechte Bildhälfte bei width/2 und width.

In der setup() Methode werden in einer for-Schleife die Anzahl der Linien N generiert und gleich beim Erstellen über den Parameter side als Linie definiert die sich nach links oder nach rechts bewegen soll. Die Variable side kennt zwei Zustände; true und false. Ich habe definiert, dass eine Bewegung nach link false und eine Bewegung nach rechts true ist. Die Abfrage kann dann einfach if(side) oder if(!side) lauten.

Zum Ansehen bitte auf das Vorschaubild klicken!

VertLine[] myVertLines;
int N = 100; //Anzahl Linien für die linke Seite
boolean side; //left = false, right = true
 
void setup(){
  size(340,400);
  frameRate(25);
  float xPos = 10;
  myVertLines = new VertLine[N*2];
 
  for(int i=0;i<N*2;i++){
    float xPosLeft = width/2;
    float speedLeft = random(-1,1);
    int trans;
 
    if(i<N){
      side = false;
    }
    else{
      side = true;
    }
    myVertLines[i] = new VertLine(xPosLeft, speedLeft, side);
  }
 }
 
 void draw(){
  background(255);
  for(int i=0;i<N*2;i++){
    myVertLines[i].run();
  }
}
 
//Klasse für die Linien
class VertLine{
  float xPosLeft;
  float speedLeft;
  boolean side;
  int trans;
  int thickness;
 
  VertLine(float _xPosLeft, float _speedLeft, boolean _side){
    xPosLeft = _xPosLeft;
    side = _side;
    speedLeft = _speedLeft;
  }
 
  void run(){
    // println(side);
 
    /*
     * Die Linien sollen in der Mitte jeweils Dicke = 1 und 
     * opacity = 255, und am Rand dick und transparent sein
     */
    if (!side){//Linke hälfte
        xPosLeft = xPosLeft + speedLeft;
 
      //einzeilige if-Bedingungen können ohne geschweifte Klammer geschrieben werden
      if(xPosLeft < 0)
        speedLeft =- speedLeft;
 
      if(xPosLeft > width/2)
        speedLeft =- speedLeft;
 
      /*
       * innen dunkel / 255 alpha
       * aussen alpha 20
       * differenz = 235
       */
      float trans = (235/(width/2))*xPosLeft;
      stroke(0,0,0,trans);
 
      /*
      * Breite in der Mitte = 1
      * aussen = 10
      */
      float thickness = (width/2) / (xPosLeft+(width/10));
      strokeWeight(thickness);
      drawShape();
    }
    else{//rechte Hälfte
      xPosLeft = xPosLeft + speedLeft;
 
      if(xPosLeft > width)
        speedLeft =- speedLeft;
 
      if(xPosLeft < width/2)
        speedLeft =- speedLeft;
 
      /*
       * innen dunkel / 255 alpha
       * aussen alpha 20
       * differenz = 235
       */
      float trans = width-(235/(width/2))*xPosLeft;
      stroke(0,0,0,trans);
 
      /*
      * Breite in der Mitte = 1
      * aussen = 10
      */
      float thickness = (width/2) / ((width - xPosLeft)+(width/10));
      strokeWeight(thickness);
      drawShape();
    }
  }
 
  void drawShape(){
    line(xPosLeft,0,xPosLeft,height);
  }
}