Erste Schritte in Processing
Leinwand
Eingabefeld
Fehlermeldungen
Start / Stop
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
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
Erstelle eine Ellipse in der Mitte der Leinwand.
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
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
var x // Der Buchstabe x wird hier als Variable definiert (var)
function setup() {
createCanvas(400, 300)
x = 0 // Zu Beginn soll der Wert auf "0" gesetzt werden
}
function draw() {
x = x + 5 // Der Wert “5” wird zur Variable “x” addiert
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
6. Erzeugung von Animationen durch Variablen
Aufgabe
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".
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
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
Befehle
ellipse(mouseX, mouseY, b, h)
Lösung
Zusätzliche Aufgabe
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.
if (mouseIsPressed) {
fill(0, 0, 0)
} else {
fill(255, 255, 255)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
10. Anwendung von Bedingungen
Aufgabe
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
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: