Lernpfad:Einführung in Processing/16

Vorheriger Schritt

Nächster Schritt

tixy

Im Tauschordner findest du ein Processing-Projekt mit dem Namen tixy. Öffne das Projekt und sieh es dir an. Du siehst eine Funktion dot und zwei Reiter: tixy und canvas. canvas soll nicht verändert werden, sondern nur die dot Funktion.

Starte das Programm und schau dir das Ergebnis an. Lösche dann die Zeile return x%4 - y%4 und entferne den Kommentar // aus der Zeile darüber. Studiere erneut das Ergebnis.

Das Programm arbeitet nach einem einfachen Prinzip:

1. Die dot-Funktion gibt eine Zahl zwischen -1 und 1 zurück (return).
2. Der Betrag der Zahl bestimmt die Größe des Punktes (0.5 und -0.5 bedeuten beide halbe Größe, -.25 und .25 bedeuten beide ein Viertel der Größe, usw.).
3. Negative Zahlen färben den Punkt rot, positive weiß.

Die Funktion erhält vier Parameter:

1. t ist die Zeit, die das Programm läuft in Millisekunden.
2. i ist die Nummer des Kreises. Es gibt 16 Reichen und 16 Spalten. Der Kreis oben links hat die Nummer 0, der Kreis links daneben 1, und so weiter bis Nummer 255 unten rechts.
3. x - ist die Spaltennummer des Kreises (von 0 bis 15).
4. y - ist die Zeilennummer des Kreises (von 0 bis 15).

Arbeitsauftrag

Experimentiere mit der dot-Funktion und versuche spannende Muster und Animationen zu erzeugen.

Du kannst Funktionen wir sin, cos, tan, usw. verwenden.

Das Muster

float size = 50;
float x = 0;
float y = 0;

void setup() {
  size(400, 400);
}

void draw() {
  background(200);
  
  float s = size+(size*sin(millis()/1000.0)*0.5);
  
  for ( float i = 0; i < width/s; i+=1.0 ) {
    for ( float j = 0; j < height/s; j+=1.0 ) {
      fill(255);
      stroke(0);
      strokeWeight(2);
      rect(x + i*s, x+j*s, s, s);
    }
  }
}

Das obige Programm erstellt ein Karo-Muster und animiert es.

Arbeitsauftrag

1. Analysiere das Programm und erkläre seine Funktion. Nutze die Fachbegriffe, die du in diesem Lernpfad gelernt hast.
2. Animiere das Muster. Du kannst das Programm beliebig modifizieren, aber du musst immer vom ursprünglichen Karo-Muster ausgehen. Sei kreativ!
   • Schau dir für weitere Ideen die Processing Referenz an.
   • Befehle wie rect und line lassen sich durch Angabe einer dritten Koordinate auch in 3D-Darstellen. Lies für weitere Informationen in der Referenz nach.