Die Steuerung deines Programms erfolgt über meist innerhalb des Zeichenbereichs (Canvas). Der Zeichenbereich wird innerhalb einer Internetseite angezeigt. Ein Internet-Browser stellt ein Fenster zur Verfügung, in dem eine Internetseites dargestellt wird, nachdem oben in der Adresszeile eine Internet-Adresse eingegeben wurde. Ein solches Fenster kann ganz unterschiedliche Größen haben, je nachdem auf welchem Gerät eine Internetseite aufgerufen wird.
Damit kannst du einen Zeichenbereich anlegen, der immer das gesamte Fenster des Internet-Browsers ausfüllt.
Verändere die Größe des Vorschaufensters. Der Zeichenbereich füllt nicht die gesamte Fläche des Fensters aus. Klicke nochmals auf "Run". Jetzt wird wieder das ganze Vorschaufenster eingefärbt, denn der Zeichenbereich wird auf die sichtbare Fenstergröße ausgeweitet.
In einem neuen Fenster starten: Zeichenbereich
Für den Zeichenbereich kannst du eine Variable anlegen, mit deren Hilfe du die Position des Zeichenbereichs verändern kannst:
var zBereich = createCanvas(250, 150);zBereich ist jetzt ein Verweis auf das Objekt Canvas (= Zeichenbereich). width ist die Breite des Canvas (= Zeichenbereich) gespeichert, height die Höhe des Canvas, nachdem dieser festgelegt wurde. Wenn man jetzt möchte, dass der Zeichenbereich in der Mitte des Browser-Fensters mit 15 Pixel Abstand vom oberen Rand positioniert wird, kann man das wie folgt programmieren:
var zBereich = createCanvas(250, 150); wird die Größe des Canvas festgelegt und ein Verweis auf das Objekt gesetzt.zBereich.position(xPos, yPos); legt man die obere linke Ecke des Canvas fest. xPos und yPos müssen vorher festgelegt worden sein. Damit der Canvas in der Mitte des Browserfensters liegt muss man kurz rechnen: var xPos = (windowWidth - width) / 2;. Denke mal kurz darüber nach, warum der Canvas dadurch in der Mitte des Browserfensters landet. Mit var yPos = 15; legt man den Abstand des Canvas vom oberen Fensterrand auf 15 Pixel fest.Damit kann der Zeichenbereich nun wie gewünscht positioniert werden.
Verändere die Größe des Fensters. Klicke wieder auf Run um das Fenster neu zu positionieren.
In einem neuen Fenster starten: Positionierung
Die Neupositionierung des Zeichenbereichs kann automatisiert werden, indem man das Programm erkennen lässt, wenn die Fenstergröße geändert wurde. Dazu gibt es die Funktion windowResized():
function windowResized() {
zentriereZBereich();
}Diese Funktion wird immer dann aufgerufen, wenn sich die Größe des Browserfensters ändert. Hier wird die Funktion zentriereZBereich() aufgerufen, in der dafür gesorgt wird, dass der Zeichenbereich wieder in der Mitte des geänderten Fensters positioniert wird.
Verändere die Fenstergröße. Die Fenstergröße des Programmbereichs ändert sich, aber der Zeichenbereich bleibt in der Mitte. Der Zeichenbereich verändert seine Position automatisch.
In einem neuen Fenster starten: Automatische Positionierung
In den beiden p5.js-Variablen mouseX und mouseY sind die aktuellen Koordinaten des Mauszeigers gespeichert. Wenn du die Mausposition innerhalb der Zeichenfläche veränderst, dann verändern sich gleichzeitig diese beiden Variablen. Wenn du die Maus sehr schnell veränderst, kannst du im nächsten Beispiel beobachten, wie der Kreis nicht so schnell mitkommt - das zeichnen dauert einen Moment.
Da die Anweisung background('aliceblue'); in der Funktion draw() steht, bewegt sich der Kreis mit der Maus mit. Wenn du diese Anweisung in die Funktion setup() setzt, dann kannst du, wie das nächste Beispiel zeigt, ein kleines Zeichenprogramm bauen.
Ganz nette Effekte kannst du einbauen, wenn du die Eigenschaften des Kreises von den Mauskoordinaten abhängig machst.
und wieder als Malprogramm:
Der Computer kann deine Kunst erzeugen. Du enwickelst einen Algorithmus, durch den unvorhersehbare Farb- und Formexplosionen entstehen können.
Vieles von dem, was du im Kapitel Animation kennengelernt hast, soll jetzt hier eingebaut werden.
Bewege in den beiden folgenden Beispielen die Maus auf der Zeichenfläche. Die Farben und die Schwingungsebenen werden sich entsprechend ändern. Der Quellcode sieht erschreckend kompliziert aus. Es ist aber einfach experimentelle Programmierung, bei der man vorher nicht genau weiß, was das Ergebnis sein wird, die aber echt Spass machen kann.
Wenn im folgenden Beispiel die Zeichenfläche zu voll ist, kannst du durch Linksklick mit der Maus den Bildschirm löschen.
function mousePressed() {
background(0);
}Bewege die Maus jetzt an eine bestimmte Position, lass diese dort einen Moment stehen und beobachte. Wenn du etwas Neues beobachten willst, bewege die Maus an eine neue Position. Soll der Bildschirm gelöscht werden, klicke einmal mit der linken Maustaste.
In einem neuen Fenster starten: Kunst
ellipse(mouseX, (windowHeight/2) + sin(frameCount/25) * (windowHeight/2), sin(frameCount/17) * 190, 150); sieht schon beeindruckend aus, oder? Diese Zeile ist jedoch nichts anderes als ellipse(210, 150, 30, 40);, nur dass die Zahlen eben vom Computer berechnet werden. Wenn du dich fragst, wie man auf so etwas kommt? Ganz einfach: ausprobieren bzw. experimentieren.(mouseX)%255. Da die Zahlenwerte der RGB-Farben von 0 bis 255 reichen, wird mit Modulo 255 (der Rest der Division durch 255) erreicht, dass nur diese Zahlen auftreten, ganz gleich wie groß mouseX ist.sin(frameCount/25) kann man die Geschwindigkeit der Schwingung steuern. frameCount wird mit jedem Frame größer und je größer der Nenner ist, desto langsamer ist die Schwingung.p5.js weitere Funktionen zur Verfügung, mit der du eine Benutzeroberfläche gestalten kannst und interaktive Programme möglich sind. Unter anderem kannst du Schaltflächen (Buttons), Eingabefelder (Inputs), Schieberegler (Sliders), Auswahlfelder (Radio-Buttons) oder Auswahlboxen (Check-Boxes) anlegen. In den folgenden Beispielen kannst du sehen, wie diese in ein Programm eingebaut werden können.
Alle diese Elemente werden hinter den Kulissen als Objekte einer Internetseite angelegt, können also vollständig zum Beispiel mit Cascading-Style-Sheets gestaltet werden. Hier findest du eine Einführung, wie dieses Styling funktioniert: SelfHtml .
Wir steuern den Computer meistens mit der Maus oder mit dem Finger auf einem Touch-Screen. Auf dem Bildschirm gibt es Buttons, die eine Aktion auslösen, wenn man auf diese klickt.
Dazu legst du eine Variable mit var button; an. In der setup-Funktion wird der Button dann erzeugt:
button = createButton("Plopp!"); wird der Button angelegt, mit der Beschriftung "Plopp".button.position(20, 20); wird der Button an der Position P(20/20) angezeigt.button.mousePressed(plopp); wird die Aktion festgelegt, die eintreten soll, wenn der Button angeklickt wird. In diesem Fall wird die Funktion plopp(), die weiter unten definiert wird, aufgerufen.plopp() {...} stehen die Anweisungen, die ausgeführt werden sollen, wenn du auf den Button klickst.In einem neuen Fenster starten: Plopp!
Die Eingabe von Texten oder Werten ist in Inputs möglich.
In einem neuen Fenster starten: Eingabefeld
Die Steuerung von Werten innerhalb eines Intervalls ermöglichen Sliders.
In einem neuen Fenster starten: Schieberegler
Die Einstellung von Werten bei einer vorgegebenen Auswahl ermöglichen Radiobuttons und Checkboxes.
In einem neuen Fenster starten: Auswahlfeld, Auswahlkasten