Tanzende Kacheln - OpenProcessing

kacheln
xxxxxxxxxx
 
/**
​
Bevor du dich auf den Code konzentrierst, klick erstmal auf Play und versuch dir vorzustellen, wie man 
den Sketch programmieren könnte.
​
Mögliche Experimente:
- Was passiert wenn wir andere Formen zeichnen? Wir könnten auch Vier- und Dreiecke mischen...
- Warum nicht ein paar mehr als 2 Runs?
- Können wir die Animation verlangsamen oder verschnellern?
​
**/
​
shape_max_size = 90; // Wie groß ist die Höhe/Breite einer Form maximal?
shape_min_size = 40; // Wie groß ist die Höhe/Breite einer Form minimal?
gap = 10; // Wie groß ist die Lücke zwischen Formen?
​
min_color = 50; // Was ist der minimale R/G/B/A-Wert einer Farbe?
max_color = 255; // Was ist der maximale R/G/B/A-Wert einer Farbe?
​
min_trans = 100; // minimale Transparenz einer Kachel
max_trans = 230; // maximale Transparenz einer Kachel
​
max_offset = 2 * gap; // wie weit dürfen sich die Kacheln maximal von ihrer normalen Position verschieben?
min_offset = -max_offset; // wie weit dürfen sich die Kacheln maximal von ihrer normalen Position verschieben?
​
t = 0; // Zeitvariable für noise()
t_step = 0.02; // Um wieviel verschieben für t pro Frame?
​
function setup() {
  createCanvas(800, 800); // erstelle 800*800 Pixel Leinwand
  strokeWeight(0); // Wir zeichnen keine Rahmen für die Formen
}
​
function draw() {
  background(240, 240, 240); // Übermale alles bisher gemalte mit der Hintergrundfarbe
  
  runs = 0; // Wir wiederholen alles folgende 2 Mal!
  while (runs < 2) {
    x = gap; // Wir starten unsere Zeichnung mit einem kleinen Abstand zum Rand.
    while (x < 800) { // Wiederhole so lange, bis wir den rechten Rand (d.h. x=800) erreicht haben.
      y = gap; // Wir starten unsere Zeichnung auch in y-Richtung mit einem kleinen Abstand zum Rand.
      while (y < 800) { // Wiederhole bis zum unteren (y=800) Rand.
        r = map(noise(1000^(!runs|(runs&!x|(x&y))), t), 0, 1, min_color, max_color);
        g = map(noise(2000^(!runs|(runs&!x|(x&y))), t), 0, 1, min_color, max_color);
        b = map(noise(3000^(!runs|(runs&!x|(x&y))), t), 0, 1, min_color, max_color);
        a = map(noise(4000^(!runs|(runs&!x|(x&y))), t), 0, 1, min_trans, max_trans);
        //            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        //            Diesen Teil könnt ihr ruhig ignorieren. Wichtig ist nur: noise() bekommt als Paramter die Koordinaten,
        //            die Anzahl der runs und die Zeitvariable t.
        
        c = color(r, g, b, a);
        fill(c);
​
        w = map(noise(5000^(!runs|(runs&!x|(x&y))), t*0.2), 0, 1, shape_min_size, shape_max_size);
        h = map(noise(6000^(!runs|(runs&!x|(x&y))), t*0.2), 0, 1, shape_min_size, shape_max_size);
        //            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        //              Analog zu Oben bei den Farben
        //                         vvvvvvvvvvvvvvvvvvvv
        offset_x = map(noise(7000, !runs|(runs&!x|(x&y)), t*0.2), 0, 1, min_offset, max_offset);
        offset_y = map(noise(8000, !runs|(runs&!x|(x&y)), t*0.2), 0, 1, min_offset, max_offset);
​
        // Zeichne ENDLICH die Form!
        rect(x + offset_x, y + offset_y, w, h);
        
        y += (shape_max_size + gap);;
      } // Ende des y-Loops 
      x += (shape_max_size + gap);
    } // Ende des x-Loops
    runs += 1;
  } // Ende des 2x-Loops
  t += t_step; // Der aktuelle Frame ist gezeichnet, und wir erhöhen unsere Zeitvariable
}