Skizzieren mit Software
Leinwand
Eingabefeld
Fehlermeldungen
Start / Stop
Der Editor
Hier siehst du die vier wichtigsten Bereiche des p5.js -Editors, mit dem wir in diesem Kurs arbeiten.
Grundfunktionen der Arbeitsumgebung
Mit dem Befehl createCanvas(Breite, Höhe) wird eine Leinwand erstellt.
Mit dem Befehl background(Farbwert) wird die Farbe der Leinwand bestimmt.
Hinweis: Du kannst den gesamten Code sehen, indem du
hier herunterscrollst.
Grundstruktur von Processing
Die beiden Grundbausteine function setup() und function draw() findest du zunächst in jedem Processing-Programm.
/* Einmalige Konfiguration der Arbeitsumgebung */
function setup() {
}
/* Malen auf der Leinwand */
function draw() {
}
Erstellen einer einfachen Form
Erstelle einen Kreis in der Mitte der Leinwand. Nutze dazu den ellipse-Befehl (s. orange Hinweis-Box). Als Hilfestellung kannst du dir die graue Infobox unten durchlesen.
Klicke auf Start und beobachte, was passiert.
Befehle
ellipse(x, y, b, h)
Kreise und Ellipsen werden mit dem Befehl ellipse(x-Koordinate, y-Koordinate, Breite, Höhe) erstellt.
Beispiel: ellipse(120, 120, 50 , 60)
Tipp 1: Die Mitte der Leinwand kannst du bestimmen, indem du jeweils die Breite und Höhe der Leinwand durch zwei teilst. Z. B. hat unsere Leinwand eine Höhe von 300. Geteilt durch 2 ergibt sich 150 als Position für die y-Koordinate des Kreises.
Tipp 2: Ein Kreis ist eine Ellipse mit gleicher Breite und Höhe.
Manipulieren von Formen
Befehle
fill(farbcode)
Du kannst die Farbe des Kreises ganz einfach verändern. Dazu brauchst du den fill-Befehl. In den Klammern legst du die Füllfarbe fest.
Der Farbcode der Farbe Schwarz ist 0, der Farbcode der Farbe Weiß ist 255. Alle Zahlenwerte dazwischen sind unterschiedliche Graustufen.
Interaktive Animationen
Befehle
ellipse(mouseX, mouseY, b, h)
mouseX und mouseY beschreiben die x- und y-Koordinaten der Mauszeiger-Position. Wenn wir möchten, dass unser Kreis dem Mauszeiger folgt, übergeben wir dem ellpise-Befehl, mouseX und mouseY als x- und y-Koordinate.
Tipp: Das funktioniert nur, wenn du deinen Mauszeiger über der Leinwand bewegst.
Anwendung von Verzweigungen
Befehle
if (BEDINGUNG) { Befehl A }
else { Befehl B }
Verzweigungen
Wir haben unser Programm soeben so angepasst, dass der Kreis unterschiedlich eingefärbt wird. Wenn die Maus geklickt wird, wird der Kreis weiß gezeichnet. Wenn die Maus nicht geklickt wird, wird der Kreis schwarz gezeichnet. Dazu haben wir eine Verzweigung genutzt. Nämlich if-else:
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 der Kreis Weiß gefärbt, wenn der Mauszeiger gedrückt gehalten wird und sonst Schwarz:
if (mouseIsPressed) {
fill(255)
} else {
fill(0)
}
/* Überprüfe die Bedingung. Z. B., ob die Maustaste gedrückt ist */
if (BEDINGUNG) {
/*Wenn die Bedingung zutrifft, führe diese Befehle (A) aus.*/
//Befehle A, z. B. den Kreis weiß färben.
} else {
/* Wenn die Bedingung nicht zutrifft, z. B. die Maustaste nicht geklickt wird,
führe diese Befehle (B) aus. */
//Befehle B, z. B. den Kreis schwarz färben
}
RGB Farben
Befehle
fill(r,g,b)
Du kannst die Farbe des Kreises ganz einfach verändern. Dazu brauchst du den fill-Befehl. In den Klammern legst du die Füllfarbe fest. Statt einem Wert zwischen 0 und 255 für Schwarz, Grau und Weiß, kannst du auch die RGB-Farbcodierung verwenden. RGB steht für Rot, Grün und Blau. Für jeden Kanal vergibst du wiederum einen Wert zwischen 0 und 255. So kannst du alle Farben mischen.
Tipp: Ein möglicher RGB-Code für Rot ist (255,0,0).
Zufällige Farben
Nun wollen wir den Zufall entscheiden lassen, welche Farbe die Kreise annehmen. Konkret: Falls die Maustaste gedrückt ist, soll ein zufälliger Rot-Wert vergeben werden. Gehe dazu wie folgt vor:
Befehle
var "variablenName" = "grundWert"
"variablenName" = random(untersterWert, obersterWert)
fill(r,g,b)
Tipp: Der random-Befehl wählt eine zufälligen Wert. Du musst lediglich den Wertebereich definieren. Für einen zufälligen Farbwert zum Beispiel 0 bis 255 oder z. B. random(200, 255).
Variablen
Variablen sind Platzhalter, die beliebige Inhalte haben können. Sobald du etwas in den Variablen gespeichert hast, merkt sich der Computer den Wert. Du kannst später im Programm wieder darauf zugreifen oder den Wert verändern. Variablen sind also flexible Werte.
Wenn wir eine Variable erstellen nennt man das initialisieren. Wenn wir der Variablen einen Wert geben, nennt man das deklarieren.
Beispiel
In Zeile 1 definieren wir den Buchstaben “r” als Variable (var). Wir speichern den Wert "0" in der Variablen r.
In Zeile 12 greifen wir auf die Variable zu und ändern den Wert auf einen zufälligen Wert zwischen 0 und 255.
In Zeile 13 fügen wir für den Rot-Wert des Kreises den zufälligen Wert der Variablen ein.
var r = 0
function setup() {
createCanvas(400, 300)
background(0)
}
function draw() {
ellipse(mouseX, mouseY, 80, 80)
if(mouseIsPressed) {
r = random(0,255)
fill(r,0,0)
} else{
fill(0)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Extra-Challenge
Bist du etwa schon fertig? Toll! Dann überlege dir nun, wie du dein Programm erweitern könntest.
Hier sind 2 Anregungen:
Befehle
fill(r, g, b)
random(untersterWert, obersterWert)
rect(x, y, b, h)
Super-Extra-Challenge
Bist du etwa schon wieder fertig? Toll! Folgend eine weitere Anregung, wie du dein Programm erweitern kannst.
Erstelle eine Animation. Gehe dazu wie folgt vor:
Befehle
var "variablenName" = "grundWert"
rect(x, y, b, h)
fill(r, g, b)
Super-Extra-Challenge
Hier findest du den gesamten Code mit Erklärungen.
Lasst eurer Kreativität freien Lauf.