Abschnittsübersicht

  • Allgemeines

    Alles einklappen Alles aufklappen

  • 1. Grundlagen und erste Programmexperimente

  • Funktionen und Systemvariablen

    • Glossar Funktionen

      Funktionen könnt ihr euch wie kleine Unterprogramme vorstellen, die darauf spezialisert sind, eine bestimmte Aufgabe zu erledigen. console.log() gibt Textnachrichten in der Konsole aus. fill() legt die Füllfarbe für künftige Malaktionen fest. circle() malt einen Kreis ins Programmfenster.

      Die meisten Funktionen erwarten Argumente. Die sagen der Funktion genauer, was sie machen soll. Die Argumente stehen zwischen den runden Klammern. Bei console.log ist das der Text, der ausgegeben werden soll, zum Beispiel: console.log("Hallo Welt"). Bei fill sind das die Farbwerte, zum Beispiel: fill(255, 0, 0). Bei circle sind das die Koordinaten und der Durchmesser des Kreises, zum Beispiel: circle(200, 200, 40).

      Ein Funktionsaufruf besteht also aus dem Funktionsnamen, den runden Klammern und Argumenten.

    • Glossar Rückruffunktionen

      Rückruffunktionen sind spezielle Funktionen, die nicht von dir selbst aufgerufen werden, sondern automatisch vom Programm ausgeführt werden – und zwar in bestimmten Situationen. In p5.js sind zum Beispiel setup(), draw() und mousePressed() solche Rückruffunktionen.

      Die Funktion setup() wird einmal ganz am Anfang ausgeführt. Hier kannst du Dinge vorbereiten, zum Beispiel die Größe des Programmfensters festlegen. Die Funktion draw() wird jedes Mal ausgeführt, wenn das Programmfenster neu gezeichnet wird – das passiert im Normalfall 30 mal pro Sekunde. In ihr beschreibst du, was laufend passieren soll, zum Beispiel das Zeichnen von Formen oder das Reagieren auf Mausbewegungen. Die Funktion mousePressed() wird immer dann ausgeführt, wenn die Maustaste gedrückt wird.

      Du schreibst diese Funktionen also selbst, aber p5.js kümmert sich darum, wann sie ausgeführt werden.

    • Glossar Systemvariablen

      Systemvariablen sind fest vorgegebene Variablen, die p5.js automatisch bereitstellt und ständig aktualisiert. Sie liefern dir wichtige Informationen über den Zustand des Programms.

      Zum Beispiel gibt mouseX die aktuelle horizontale Position der Maus an. mouseY gibt die vertikale Position der Maus an.

      Systemvariablen kannst du in deinen Programmen verwenden, um dynamisch auf Benutzeraktionen oder Fenstergrößen zu reagieren.

      Mit mouseX und mouseY kannst du zum Beispiel einen Kreis genau dort zeichnen, wo sich der Mauszeiger gerade befindet – etwa so: circle(mouseX, mouseY, 40).