Das Programm

snow

Vorbereitung

Als Erstes muss Processing installiert werden: https://processing.org/

Die wichtigsten Befehle sind hier erklärt: kurzes Intro

Schritt 1: Wir lassen es schneien

Als Erstes lassen wir es vor einem schwarzen Nachthimmel schneien.

Gegeben ist der folgende Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Variable hoehe erstellen

void setup(){
    size(400,400);
    stroke(255);                (1)
    frameRate(10);              (2)
}

void draw(){                    (3)
    background(0);              (4)
    for (int i=1; i<=30; i++){  (5)
        strokeWeight(5);        (6)
        point(200,200);         (7)
    }
    // Farbe der Schneedecke wählen

    // Variable hoehe verändern

    // Schneebälle/Schneedecke zeichnen

    // Text schreiben

    // Bilder Speichern
}
1 Der Schnee soll weiss sein
2 Die Methode frameRate() gibt an wie viele Bilder pro Sekunde gezeichnet werden sollen. Wenn der Wert auf 0 gesetzt ist, dann stoppt das Programm.
3 Die draw() Methode wird in einer Endlosschleife immer wieder aufgerufen.
4 Es werden 30 Schneeflocken gezeichnet. Die Schneeflocke 1, 2, 3, 4, …​ bis 30.
5 Der Hintergrund wird hier in jedem Bild neu gezeichnet.
6 Die Strichstärke wird mit dem Wert 5 gesetzt.
7 An einer definierten Position wird ein Punkt gezeichnet. Hier bei x=200 und y=200.

So wird aber nur eine Schneeflocke angezeigt, da in jedem Frame die Schneeflocke wieder am gleichen Ort entsteht. Das soll mit einer Zufallsfunktion gelöst werden. Denn Schneeflocken fallen ja zufällig vom Himmel und haben auch eine zufällige Grösse.

Eine zufällige Zahl kann mit der Methode random(…​) erstellt werden.

  • Ersetze die Zahl 5 durch eine zufällige Zahl zwischen 0 und 5.

  • Ersetze die zwei 200erter durch Zahlen zwischen 0 und 400.

Lösung 
    void setup(){
        size(400,400);
        stroke(255);
        frameRate(10);
    }

    void draw(){
        background(0);
        for (int i=1; i<=30; i++){
            strokeWeight(random(5));
            point(random(400),random(400));
        }
        // Farbe der Schneedecke wählen

        // Schneebälle/Schneedecke zeichnen

        // Text schreiben

        // Bilder Speichern
    }

Schritt 2: Die Schneedecke wächst

Nun soll am Ende der Methode draw der Code hinzugefügt werden, der die Schneedecke wachsen lässt.

Dafür muss als Erstes noch die Zeichenfarbe für die Schneedecke auf weiss gesetzt werden:

fill(255);

Nun sollen 20 Schneekugeln gezeichnet werden, welche ganz unten auf dem Screen platziert sind.

Wie bei den Schneeflocken verwenden wir eine Schleife. Um den Boden des Bildes abzudecken wurden in der Lösung 20 Kugeln verwendet. Sie können es aber auch mit einer anderen Anzahl ausprobieren.

TASK: Schreiben Sie eine Schleife für die gewünschte Anzahl.

Lösung 
 // Schneebälle/Schneedecke zeichnen
for (int i=1; i<= /* gewünschte zahl */; i++){

}

Nun sollen wieder zufällig grosse Bälle gezeichnet werden.

TASK: Zeichnen Sie in der Schleife Bälle mit einem zufälligen Durchmesser. Einen Ball zeichnet man mit ellipse(x, y, breite, hoehe), wobei x,y den Mittelpunkt bezeichnen. Als Breite und Höhe soll eine Zufallszahl zwischen 0 und 200 gewählt werden. Der Mittelpunk der Bälle soll unten auf dem Fenster liegen und immer einen Abstand von Fensterbreite/gewählte Zahl haben. Beim Beispiel mit 20 wäre das wieder 20.

Die Schneedecke sollte sich jetzt sehr wild bewegen.

WildeSchneedecke
Lösung 
 // Schneebälle/Schneedecke zeichnen
for (int i=1; i<=20; i++){  (1)
    ellipse(i*20, 400, random(200), random(200));  (2)
}
1 Es werden die Bälle/Schneehaufen 1, 2, 3, 4, 5, …​ bis 20 gezeichnet
2 Die Position der Bälle ist bei (1*20,400), (2*20,400), (3*20,400), …​

Wir möchten aber, dass die Schneedecke langsam wächst. Also müssen wir einen Zähler haben, der bei jedem Zeichnen grösser wird, genau so wie die Schneedecke.

TASK:

  1. Fügen Sie am Anfang des Programms eine Variable zum Zählen ein: int hoehe=0;

  2. Erhöhen Sie diesen Wert immer um 1, wenn neu gezeichnet wird. hoehe= hoehe+1.

  3. Verwenden Sie diesen Wert nun, um die Schneedecke wachsen zu lassen. Wir möchten aber immer noch eine Bewegung drin haben, also wird immer noch eine Zufallszahl hinzugefügt. Probieren Sie hier ein paar verschiedene Werte aus.

Lösung 
int hoehe=0;        // (1)

void setup(){
    size(400,400);
    stroke(255);
    frameRate(10);
}

void draw(){
    background(0);
    for (int i=1; i<=30; i++){
        strokeWeight(random(5));
        point(random(400),random(400));
    }
    hoehe= hoehe + 1;     // (2)
    fill(255);
    // Schneebälle/Schneedecke zeichnen
    for (int i=1; i<=20; i++){
      ellipse(i*20+10, 400, hoehe+20+random(10), hoehe+random(10));    // (3)
    }
    // Text schreiben

    // Bilder Speichern
}

Zu (3): Damit am Anfang keine Lücken entstehen wird immer mit mindestens 20 in der Breite gearbeitet.

Schritt 3: Text hinzufügen

Nun soll noch ein Text erscheinen, wenn die Schneedecke wächst.

Text zeichnet man in Processing mit dem Befehl text("mein Text", x, y). Wobei der Text immer in " " eingefasst sein muss. So wie im Deutsch bei der direkten Rede in einem Text.

TASK: Überlegen Sie sich, welcher Text angezeigt werden soll und versuchen Sie ihn korrekt zu positionieren. Damit der Text erst nach und nach erscheint, muss er schwarz geschrieben werden. Fügen sie also nach der "Schneedecke" die folgenden Zeilen ein:

fill(0);
text("mein Text", , );

Die Schriftrösse kann mit dem Befehl textSize(…​) gesetzt werden.

Lösung 
int hoehe=0; // (1)

void setup(){
    size(400,400);
    stroke(255);
    frameRate(10);
    textSize(40);  // Schriftgrösse setzen
}

void draw(){
    background(0);
    for (int i=1; i<=30; i++){
        strokeWeight(random(5));
        point(random(400),random(400));
    }
    hoehe= hoehe + 1;
    fill(255);
    for (int i=1; i<=20; i++){
      ellipse(i*20+10, 400, hoehe+20+random(10), hoehe+random(10)); // (3)
    }
    // Text schreiben
    fill(0);
    text("Frohe Festtage",70,300);
    // Bilder Speichern
}

Schritt 4: einzelne Bilder speichern

Als Letztes sollen noch die einzelnen Bilder des Gifs erstellt werden. In jedem Durchlauf soll einfach das angezeigte in einem png gespeichert werden.

Der Code dazu ist save("picture"+hoehe+".png"); Dieser wird am Ende der draw-Methode hinzugefügt.

Nun ist es wichtig, dass man weiss, wo das Programm gespeichert ist. Die Bilder werden auch dort gespeichert.

TASK:

  1. Fügen Sie den Code zum Speichern ein.

  2. Speichern Sie das Programm an einem Ort, an dem Sie es auch wieder finden.

  3. Starten Sie das Programm.

Nun sollten Sie im Ordner die erzeugten Bilder finden. Diese können Sie mit einem beliebigen Tool zu einem Gif zusammensetzten.

Lösung 
int hoehe=0; // (1)

void setup(){
    size(400,400);
    stroke(255);
    frameRate(10);
    textSize(40);  //Schriftgrösse setzen
}

void draw(){
    background(0);
    for (int i=0; i<30; i++){
        strokeWeight(random(5));
        point(random(400),random(400));
    }
    hoehe= hoehe + 1; // (2)
    fill(255);
    for (int i=0; i<20; i++){
      ellipse(i*20+10, 400, hoehe+20+random(10), hoehe+random(10)); // (3)
    }
    // Text schreiben
    fill(0);
    text("Frohe Festtage",70,300);
    // Bilder Speichern
    save("picture"+hoehe+".png");
}

Schritt 5: Gif erstellen

Verwenden Sie ein Tool ihrer Wahl für das Erstellen des Gifs. Ein mögliches ist: https://gif-erstellen.com/

Zusatz: Arbeiten mit Objekten

Fallender Schnee

Klassen und Objekte sind ein zentrales Konzept in der Programmierung. In Processing kann man auch damit arbeiten. Processing verwendet Java als Programmiersprache, und kann somit auch objektorientiert programmiert werden. Will man viele Schneeflocken zeichnen, so kann es sinnvoll sein, eine Klasse Schneeflocke zu erstellen. Diese Klasse kann dann die Eigenschaften und das Verhalten einer Schneeflocke definieren. Die Klasse schreiben Sie im gleichen File einfach unter dem anderen Code. Hier ein Beispiel für die Schneeflocke:

class Snowflake {  //( 1)

  float xpos, ypos, size, speed;   // (2)

  Snowflake (float x, float y, float si, float sp) {   // (3)
    xpos = x;
    ypos = y;
    size = si;
    speed = sp;
  }

  void update() {    // (4)
    ypos += random(speed);
    if (ypos > 400) {
      ypos = 0;
    }
    strokeWeight(size);
    point(random(1)+xpos, ypos);
  }
}
1 Die Klasse für eine Schneeflocke wird definiert. Code wird in aller Regel in Englisch geschrieben, daher der Name Snowflake.
2 Die Eigenschaften der Schneeflocke werden als Variablen definiert.
3 Der Konstruktor der Klasse wird definiert. Dieser wird aufgerufen, wenn eine neue Schneeflocke erstellt wird.
4 Die Methode update() wird definiert. Diese Methode aktualisiert die Position der Schneeflocke und zeichnet sie.

In der setup() Methode des Hauptprogramms können dann mehrere Schneeflocken erstellt und in einem Array gespeichert werden:

Snowflake[] snowflakes = new Snowflake[30];   // (1)
void setup() {
  size(400, 400);
  stroke(255);
  frameRate(10);
  for (int i = 0; i < snowflakes.length; i++) {   // (2)
    snowflakes[i] = new Snowflake(random(400), random(400), random(3)+0.25, 2);
 }
}
1 Ein Array für 30 Schneeflocken wird erstellt.
2 In einer Schleife werden die Schneeflocken erstellt und mit zufälligen Eigenschaften initialisiert. In der draw() Methode des Hauptprogramms können dann die Schneeflocken aktualisiert und gezeichnet werden: 
...
for (Snowflake snowflake : snowflakes) {
    snowflake.update();
}
...

Downloads

Damit PDE Dateien ausgeführt und bearbeitet werden können, muss Processing lokal auf dem Rechner installiert sein.