1. Der Editor

Hier siehst du die vier Grundelemente des Editors mit welchem wir in den weiteren Schritten arbeiten werden.

 

 

2. Grundfunktionen der Arbeitsumgebung

Zuerst stellen wir dir die Grundstruktur von Processing vor.

Die beiden Grundbausteine function setup() und function draw() wirst du immer als erstes in der Arbeitsumgebung sehen.

 

Unter function setup() werden die allgemeinen Bedingungen aufgelistet, die zur Vorbereitung der Arbeitsumgebung benötigt werden.

Unter function draw() findest du die Befehle mit welchen du auf der Leinwand malen kannst.

 

Um zu beginnen müssen wir mit dem Befehl createCanvas(breite, höhe) eine Leinwand erstellen.

Damit die Leinwand sich vom Hintergrund abhebt, färben wir sie mit dem Befehl background(farbwert).

 

Aufgabe

1. Versuche den unten stehenden Code nachzuvollziehen und führe ihn aus.

3. Erstellung einfacher Formen

Kreise und Ellipsen werden mit dem Befehl ellipse(x-koordinate, y-koordinate, breite, höhe) erstellt.

Beispiel: ellipse(120, 120, 50 , 60)

 

Tipp: Ein Kreis ist eine Ellipse mit der gleichen Breite und Höhe.

 

Aufgabe

1. Erstelle eine Ellipse in der Mitte der Leinwand.

2. Klicke auf Ausführen und beobachte was passiert.

Befehle

ellipse(x, y, b, h)

 

Lösung

 

4. Manipulieren von Formen

Du kannst die Farbe und Größe des Kreises ganz einfach verändern. Füllungen können mit dem Befehl fill(farbcode) geändert werden und die Größe variiert mit Veränderung der Breite und Höhe in ellipse().

 

Tipp: Der Farbcode der Farbe Schwarz ist 0, der Farbcode der Farbe Weiß ist 255 und alle Kodierungen dazwischen sind unterschiedliche Graustufen.

 

Aufgabe

1. Verändere nun die Form des Kreises in eine Ellipse und färbe diese grau.

Befehle

fill(farbcode)

ellipse(x, y, b, h)

Lösung

 

Tipp: Für x und y kannst du zwei Pixelwerte deiner Wahl eintragen. Damit der Kreis zu einer Ellipse wird, sollten die beiden Werte aber unterschiedlich sein.

5. Variablen

Du hast gesehen wie man eine Form erstellt und sie verändert. Jetzt wirst du lernen wie man die Leinwand zum Leben erweckt.

Dazu wollen wir unseren Kreis animieren sich über die Leinwand zu bewegen.

 

Wenn sich ein Objekt bewegt hat es keine fixe Position, deshalb benötigen wir flexible Werte (Variablen).

Variablen sind Platzhalter, die beliebige Inhalte haben können. Sobald du etwas in den Variablen gespeichert hast, merkt sich der Computer das und du kannst später im Programm wieder darauf zugreifen.

 

Beispiel

• In Zeile 1 definieren wir den Buchstaben “x” als Variable (var)

• In Zeile 5 greifen wir auf die Variable zu und setzen sie auf den Wert "0"

• In Zeile 9 addieren wir den Wert "5" zu der Variable “x” hinzu

6. Erzeugung von Animationen durch Variablen

 

Aufgabe

1. Erzeuge einen Kreis mit einer Breite und Höhe von "50". Setze den Abstand vom linken Rand auf die Variable "x" und den Abstand zum oberen Rand auf "200".

2. Die Variable “x” soll immer um den Wert “5” erhöht werden.

Befehle

ellipse(x, y, b, h)

var "variablenName"

"variablenName" = "grundWert"

"variablenName" += "additionsWert"

Lösung

 

 

7. Schleifen

Du siehst, dass sich der Kreis nicht wirklich bewegt, sondern immer ein neuer an einer anderen Position erzeugt wird. Das hat damit zu tun, dass function draw() als Schleife ausgeführt wird. Dies passiert solange bis man den Stopp-knopf drückt.

Die function setup() dagegen wird nur einmalig ausgeführt.

Um die Spuren der Kreise zu verwischen, müssen wir die Leinwand vor jedem Kreis auf die Farbe Weiß zurücksetzen.

Mit background(255, 255, 255) wird die Leinwand auf die Farbe mit dem Farbcode “255, 255, 255” gesetzt (Weiß).

Diese Art der Farbkodierung nennt man RGB (Rot, Grün, Blau).

 

Aufgabe

1. Setze den Hintergrund mit background(255, 255, 255) immer dann auf die Farbe Weiß zurück, bevor eine neuer Kreis erzeugt wird.
2. Du kannst den Hintergrund auf verschiedene Werte zwischen 0 und 255 stellen. Probiere es doch mal aus!

Befehle

background(rotWert, gruenWert, blauWert)

8. Interaktive Animationen

Nun soll der Kreis dem Mauszeiger über den Bildschirm folgen. Die beiden Variablen mouseX und mouseY beschreiben die x- und y-Koordinaten der Mauszeiger-Position. Diese Variablen können in einem anderen Befehl verwendet werden, in unserem Fall ellipse(), da wir möchten, dass die Ellipse dem Mauszeiger folgt.

 

Tipp: Das funktioniert nur, wenn dein Mauszeiger sich über der Leinwand bewegt.

 

Aufgabe

1. Erstelle nun eine Ellipse, welche der Position des Mauszeigers folgt.

Befehle

ellipse(mouseX, mouseY, b, h)

 

Lösung

 

Zusätzliche Aufgabe

1. Lösche nun den background() Befehl aus dem Eingabefenster und schaue was passiert.

9. Bedingungen

Wir möchten die Eingabe nun so verändern, dass die Ellipse der Maus folgt und die Ellipse beim Drücken der Maustaste schwarz wird.

Dafür werden wir eine neue Struktur einführen: if-else. Die Struktur sieht folgendermaßen aus:

 

if (Bedingung) {
    führe Befehl A aus
} else {
    führe Befehl B aus
}

 

Die Bedingung im if-Block wird auf Richtigkeit überprüft. Falls diese wahr ist wird Befehl A ausgeführt. Wenn die Bedingung nicht wahr ist, wird der Befehl B im else-Block ausgeführt.

 

Im folgenden Beispiel wird die Leinwand schwarz gefärbt, wenn der Mauszeiger gedrückt gehalten wird und sonst grau.

Um diese Funktion selbst auszuprobieren, gehe auf die nächste Seite.

10. Anwendung von Bedingungen

 

Aufgabe

1. Lasse den Kreis dem Mauszeiger folgen.
2. Zudem soll sich der Kreis weiß färben, wenn die Maustaste gedrückt ist und schwarz, wenn die Maustaste nicht gedrückt ist.

 

Tipp: verwende die Bedingung mouseIsPressed

Befehle

if (mouseIsPressed) { Befehl A }

else { Befehl B }

Lösung

 

 

11. Zufällige Farben

Nun wollen wir den Zufall entscheiden lassen welche Farbe die Kreise annehmen sollen.

 

Aufgabe

1. Falls die Maustaste gedrückt ist, sollen die Kreise ihre Farbe zufällig verändern. Ersetze dazu den ersten Farbwert von fill() durch einen zufälligen Wert mit random().
2. Versuch auch andere Werte im Programm durch random() zu ersetzen.

 

Tipp: random() kann wie eine Variable in Befehlen eingesetzt werden. Du musst lediglich den Wertebereich definieren von welchem zufällig ein Wert ausgewählt werden soll (z.B. random(200, 255)).

Befehle

fill(rotWert, grünWert, blauWert)

stroke(rotWert, grünWert, blauWert)

random(untersterWert, obersterWert)

Lösung

 

 

Beispiel

 

 

          Extra-Challenge

 

 

Programmiere einen einfachen Taschenrechner , der zwei Integerwerte abfragt und dann jeweils das Ergebnis der Addition, der Subtraktion, der Multiplikation sowie der Division berechnet und anzeigt.  Die Grundlagen dazu hast du bereits gelernt!

Befolge nun folgende Schritte und teste nach jedem Schritt, ob dein Programm wie gedacht funktioniert. (Testen funktioniert häufig sehr gut über die Ausgabe, also mit dem 'print'-Befehl.)

 

   1. Schritt: Lese zwei Werte über die Konsole ein. Speichere diese als Integer in je einer Variablen (wert1 und wert2). Beachte: Du darfst im Moment davon ausgehen, dass der Benutzer keine falschen Eingaben macht! (Teste mit print(wert1, wert2).)

 

   2. Schritt: Addiere die beiden Werte und speichere das Ergebnis in einer weiteren Variablen (ergebnis_add). Erweitere deine 'print'-Zeile folgendermaßen: print('Ergebnis Addition von %d + %d = %d' % (wert1, wert2, ergebnis_add))

 

   3. Schritt: Füge drei weitere Variablen (ergebnis_sub, ergebnis_mul und ergebnis_div) hinzu. Speichere das Ergebnis der Subtraktion (-), das Ergebnis der Multiplikation (*) und das Ergebnis der Division (/) in der jeweiligen Variablen. Füge nun auch die passenden print-Befehle in dein Programm ein.

 

   4. Schritt: Extra-Challenge: Das Ergebnis der Division stimmt leider nicht, wenn keine natürliche Zahl rauskommt. Welchen Datentyp brauchst du für Kommazahlen? Beachte: Auch beim print-Befehl musst du Anpassungen vornehmen.

 

Entweder versuchst du die Aufgabe selbstständig zu lösen. Hier findest einen leeren repl, den du für deine Lösung nutzen kannst. Alternativ kannst du auf den folgenden Seiten die Challenge Schritt für Schritt lösen. Dort findest du auch Zwischenlösungen. Wenn du alle Schritte korrekt befolgt hast, sollte deine Ausgabe so aussehen: