Interaktion


Zeichenbereich gestalten

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.

  • Die Breite des Browser-Fensters wird in der p5.js-Variablen windowWidth gespeichert.
  • Die Höhe des Browser-Fensters wird in der p5.js-Variablen windowHeight gespeichert.

Damit kannst du einen Zeichenbereich anlegen, der immer das gesamte Fenster des Internet-Browsers ausfüllt.

Beispiel

Klicke einmal auf den Tab-Reiter JS, so dass der Quellcode nicht mehr angezeigt wird. Nur die Hälfte des Bildschirms ist eingefärbt. Der Zeichenbereich füllt nicht die gesamte Fläche des Fensters aus. Gehe mit der Maus auf die untere rechte Ecke des CodePen-Fensters und klicke auf RERUN. Jetzt wird der gesamte Bereich eingefärbt, denn der Zeichenbereich wird auf die gesamte Fenstergröße ausgeweitet.

See the Pen p5js_GL_Interaktion_01 by Pt (@pt69) on CodePen.


Zeichenbereich zentrieren

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);
  • Die Variable zBereich ist jetzt ein Verweis auf das Objekt Canvas (= Zeichenbereich).
  • In der Variablen width ist die Breite des Canvas (= Zeichenbereich) gespeichert,
  • in der Variablen 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:

  • mit var zBereich = createCanvas(250, 150); wird die Größe des Canvas festgelegt und ein Verweis auf das Objekt gesetzt.
  • mit 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.

Beispiel

Klicke auf JS, um den Programmcode zu verbergen. Der Zeichenbereich liegt im Fenster wie er zu Beginn war. Klicke unten rechts auf RERUN um das Fenster neu zu positionieren.

See the Pen p5js_GL_Interaktion_02 by Pt (@pt69) on CodePen.


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.

Beispiel

Klicke auf JS, um den Programmcode zu verbergen. Die Fenstergröße des Programmbereichs ändert sich, aber der Zeichenbereich bleibt in der Mitte. Klicke oben rechts auf EDIT ON CODEPEN und verändere dort die Größe des Programmfensters. Du kannst beobachten, wie der Zeichenbereich seine Position automatisch verändert.

See the Pen p5js_GL_Interaktion03 by Pt (@pt69) on CodePen.


Zeichenbereich in eine Internet-Seite einbauen

Wenn man ein p5.js-Programm in eine Internetseite einbaut, wird das Programm normalerweise an das Ende der Seite gestellt oder man legt die Position relativ zum Fenster fest. Der Zeichenbereich überschreibt dann die anderen Elemente der Internetseite.

See the Pen p5js_GL_Interaktion_04 by Pt (@pt69) on CodePen.


Du kannst ein p5.js-Programm aber auch an eine gewünschte Position in eine Internetseite einbauen. Dazu muss in der HTML-Datei ein Bereich für das p5.js-Programm reserviert werden:

<div id="p5js-programm">
  <!-- Der Zeichenbereich wird hier eingebaut -->
</div> 

Mit der hier festgelegten id wird das p5js-Programm verknüpft:

function setup() {
  var zBereich = createCanvas(250, 150);
  zBereich.parent('p5js-programm');
}

Damit wird der Zeichenbereich genau dort auf der Internet-Seite angezeigt, wo <div id="p5js-programm"> gesetzt wurde.

See the Pen p5js_GL_Interaktion_05 by Pt (@pt69) on CodePen.


Man kann auch bei einer bereits gestalteten Internetseite die gesamte Seite als Zeichenbereich für p5.js festlegen. Wenn man die Anweisung background(farbe); weglässt, werden die Inhalte nicht überschrieben. Sobald man jedoch p5.js-Elemente auf die Zeichenfläche malen lässt, werden die Elemente der Internetseite überschrieben.

See the Pen p5js_GL_Interaktion_06 by Pt (@pt69) on CodePen.


Steuerung mit der Maus

Dem Mauscursor folgen

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:

Anmerkung:

Der Computer kann deine Kunst erzeugen. Du enwickelst einen Algorithmus, durch den unvorhersehbare Farb- und Formexplosionen entstehen können.


Beispiel

Jetzt wollen wir einmal richtig übertreiben. 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. Sieht nett aus, oder - auch wenn im Programmcode etwas übertrieben wurde ;-).

See the Pen Swinging Colors by Pt (@pt69) on CodePen.


Anmerkungen:
  • Eine Zeile wie 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.
  • In den Anweisungen, mit denen eine Farbe festgelegt wird, findest du folgende Schreibweise: (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.
  • Mit 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.

Bilder importieren

Mit p5.js kannst du auch Bilder aus einer Bilddatei in dein Programm einbauen. Dazu lädt man das Bild vor der Funktion setup() innerhalb der Funktion preload() aus einer vertrauenswürdigen Quelle. Das Bild kann man dann innerhalb des Programms mit Hilfe der Anweisung image(bildvariable, xKoord, yKoord); anzeigen lassen.

See the Pen p5js_GL_images_01 by Pt (@pt69) on CodePen.


Benutzeroberfläche

p5.js stellt in der Funtionsbibliothek p5.dom.js weitere Funktionen zur Verfügung, mit der du eine Benutzeroberfläche gestalten kannst. Diese Bibliothek muss auch in der HTML-Seite mit eingebunden werden, damit die Funktionen verwendet werden können. Im HTML-Tab der Beispiele siehst du, wie man das macht. Mit Hilfe der p5.dom.js-Bibliothek sind interaktive Programme möglich. 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.


Schaltfläche (Button)

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:

  • Mit button = createButton("Plopp!"); wird der Button angelegt, mit der Beschriftung "Plopp".
  • Mit button.position(20, 20); wird der Button an der Position P(20/20) angezeigt.
  • Mit 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.
  • In der Funktion plopp() {...} stehen die Anweisungen, die ausgeführt werden sollen, wenn du auf den Button klickst.

See the Pen p5js_GL_Interaktion_07 by Pt (@pt69) on CodePen.


Der Button sieht noch nicht modern aus. Früher gab es diese 3D-grauen Buttons - heute kann man das vielfältiger:

See the Pen p5js_GL_Interaktion_08 by Pt (@pt69) on CodePen.


Um das Aussehen des Buttons genau zu steuern, können CSS-Styles angelegt werden. Diese findes du, wenn du auf den Tab CSS klickst. Im Programm wird mit der Zeile button.class("buttonCSS"); festgelegt, welche CSS-Styles für den Button verwendet werden sollen. Mit dieser Methode können alle anderen Oberflächenelemente ebenso gestalten werden.

See the Pen p5js_GL_Interaktion_09 by Pt (@pt69) on CodePen.


Eingabefeld (Input)

Die Eingabe von Texten oder Werten ist in Inputs möglich.

See the Pen p5js_GL_Interaktion_10 by Pt (@pt69) on CodePen.


Schieberegler (Slider)

Die Steuerung von Werten innerhalb eines Intervalls ermöglichen Sliders.

See the Pen p5js_GL_Interaktion_11 by Pt (@pt69) on CodePen.


Auswahlfeld (RadioButton), Auswahlkasten (CheckBox)

Die Einstellung von Werten bei einer vorgegebenen Auswahl ermöglichen Radiobuttons und Checkboxes.

See the Pen p5js_GL_Interaktion_12 by Pt (@pt69) on CodePen.


In den p5.js-Übungen und p5.js-Projekte findest du Beispiele, wie man eine Benutzeroberfläche gestalten kann.