Differences

This shows you the differences between two versions of the page.

--- extras:codikon:p5js:einfuehrung_in_p5js [2026/03/20 07:45] – created Felix Hardmood Beck
+++ extras:codikon:p5js:einfuehrung_in_p5js [2026/09/18 08:12] (current) – [Arbeiten mit KI] Felix Hardmood Beck
@@ Line 1: / Line 1: @@
-Erstellt nach der DokuWiki-Syntax aus dem bereitgestellten Handbuch
+====== Einführung in p5.js ======
-====== P5.js ======
+[[https://p5js.org/|p5.js]] ist eine JavaScript-Bibliothek für //Creative Coding//. Mit vergleichsweise wenig Code lassen sich direkt im Browser Grafiken, Animationen, generative Systeme und interaktive Anwendungen entwickeln.
-===== Einführung =====
+Im Kontext von //Creative Technologies// verwenden wir p5.js vor allem als **gestalterisches Werkzeug**. Code wird dabei ähnlich wie Form, Farbe, Typografie, Bewegung oder Klang als Gestaltungsmaterial eingesetzt.
-p5.js ist eine JavaScript-Bibliothek für kreative Programmierung. Sie wurde so entwickelt, dass visuelle, interaktive und audiovisuelle Projekte leichter umgesetzt werden können. Besonders beliebt ist p5.js in den Bereichen Kunst, Design, Lehre und Prototyping.
+Mit p5.js können beispielsweise:
-Die Bibliothek baut auf JavaScript auf, vereinfacht aber viele typische Aufgaben wie das Zeichnen von Formen, das Arbeiten mit Farben, Animationen, Maus- und Tastatureingaben sowie Medien wie Bild, Ton und Video.
+  * Formen und grafische Kompositionen erzeugt,
+  * Farben und visuelle Systeme untersucht,
+  * Muster und generative Grafiken entwickelt,
+  * Bewegung und zeitliche Abläufe gestaltet,
+  * Maus und Tastatur als Eingabe verwendet,
+  * interaktive Systeme prototypisch umgesetzt,
+  * Bild, Video und Sound eingebunden werden.
-===== Hintergrund =====
+<WRAP center round important 100%>
+**Keine Angst vor Code.**
-p5.js ist von der Programmiersprache und Entwicklungsumgebung ‘‘Processing’’ inspiriert. Processing wurde geschaffen, um Künstlerinnen, Künstlern, Designerinnen, Designern und Einsteigerinnen und Einsteigern einen einfachen Zugang zur Programmierung zu ermöglichen.
+Für die ersten Experimente sind keine Programmierkenntnisse notwendig. Ziel ist zunächst nicht, JavaScript vollständig zu verstehen oder Code auswendig schreiben zu können. Entscheidend ist, eine gestalterische Idee zu entwickeln und zu verstehen, welche Teile des Codes das sichtbare und interaktive Ergebnis beeinflussen.
+</WRAP>
-Die Idee hinter p5.js ist, diese Prinzipien in den Webbrowser zu bringen. Dadurch können Programme direkt im Browser ausgeführt werden, ohne dass eine separate Installation einer Entwicklungsumgebung notwendig ist. Das macht p5.js besonders geeignet für:
-  * interaktive Webseiten
-  * digitale Kunst
-  * Animationen
-  * Lernprojekte
-  * kreative Experimente mit Code, etc.
-===== Grundprinzipien =====
+===== Der p5.js Web Editor =====
-==== 1. Niedrige Einstiegshürde ====
+Für die ersten Experimente verwenden wir den [[https://editor.p5js.org/|p5.js Web Editor]].
-p5.js soll leicht zu erlernen sein. Viele Funktionen sind bewusst einfach benannt und direkt nutzbar. Dadurch können schon mit wenig Code erste sichtbare Ergebnisse erzeugt werden.
+Damit können p5.js-Projekte direkt im Browser geschrieben, verändert und ausgeführt werden. Eine zusätzliche Entwicklungsumgebung muss zunächst nicht installiert werden.
-Beispielsweise reicht oft schon eine kleine Struktur aus, um eine Zeichenfläche zu erzeugen und etwas darauf darzustellen.
+Nach dem Öffnen des Editors kann direkt ein neuer Sketch angelegt werden. Der eigentliche p5.js-Code befindet sich in der Datei:
 <code>
+sketch.js
+</code>
+===== Unser erster Sketch =====
+Wir beginnen mit einem sehr einfachen Beispiel: einem Kreis auf einer Zeichenfläche.
+<WRAP group>
+<WRAP half column>
+**Code**
+<code javascript>
 function setup() {
   createCanvas(400, 400);
 }
 function draw() {
-background(220);
+  background(240);
-ellipse(200, 200, 100, 100);
+  circle(200, 200, 100);
 }
 </code>
+[[https://editor.p5js.org/hardmood/sketches/F0IlrPMJU|Sketch im p5.js Editor öffnen]]
-==== 2. Kreatives Programmieren ====
+</WRAP>
-Im Mittelpunkt steht nicht nur die technische Lösung eines Problems, sondern der kreative Ausdruck. p5.js wird häufig verwendet, um mit Formen, Farben, Bewegung, Zufall und Interaktion zu experimentieren.
+<WRAP half column>
-Mögliche Fragen in p5.js-Projekten sind zum Beispiel:
+**Ergebnis**
-  * Wie kann Bewegung interessant wirken?
-  * Wie reagieren Formen auf Maus oder Tastatur?
-  * Wie lassen sich Daten visuell darstellen?
-  * Wie können Klang und Bild verbunden werden?
-==== 3. Direkte visuelle Rückmeldung ====
+{{url>https://editor.p5js.org/hardmood/full/F0IlrPMJU 100%,400px noborder}}
-Ein wichtiges Prinzip von p5.js ist die unmittelbare Rückmeldung. Änderungen am Code führen schnell zu sichtbaren Veränderungen auf der Zeichenfläche. Dadurch eignet sich die Bibliothek sehr gut zum Lernen durch Ausprobieren.
+</WRAP>
-Dieses Vorgehen unterstützt ein experimentelles Arbeiten:
+</WRAP>
-  * Idee formulieren
-  * Code anpassen
-  * Ergebnis ansehen
-  * weiter verbessern
-==== 4. Der Zeichenzyklus ====
-Viele p5.js-Skizzen beruhen auf zwei zentralen Funktionen:
+===== Was passiert hier? =====
-  - ‘‘setup()’’ wird genau einmal zu Beginn ausgeführt
-  - ‘‘draw()’’ wird danach fortlaufend wiederholt
-Dieses Modell macht Animationen und interaktive Anwendungen besonders einfach.
+Das Beispiel besteht zunächst aus zwei wichtigen Funktionen:
-<code>
+<code javascript>
 function setup() {
-  createCanvas(600, 400);
 }
+</code>
+''setup()'' wird einmal beim Start des Sketches ausgeführt.
+<code javascript>
 function draw() {
-background(30);
-circle(mouseX, mouseY, 40);
 }
 </code>
-Hier wird in jedem Durchlauf der Hintergrund neu gezeichnet und ein Kreis an der aktuellen Mausposition dargestellt.
+''draw()'' wird anschließend kontinuierlich wiederholt.
-==== 5. Interaktion ====
+Mit
-p5.js ist stark auf Interaktivität ausgelegt. Maus, Tastatur und andere Eingaben können direkt verarbeitet werden. Dadurch lassen sich Anwendungen erstellen, die auf Benutzeraktionen reagieren.
+<code javascript>
+createCanvas(400, 400);
+</code>
-Beispiele für Interaktion sind:
+wird eine Zeichenfläche mit einer Größe von 400 × 400 Pixeln erzeugt.
-  * Zeichnen mit der Maus
-  * Reaktion auf Tastendruck
-  * Steuerung von Objekten
-  * audiovisuelle Installationen
-<code>
+Der Befehl
+<code javascript>
+circle(200, 200, 100);
+</code>
+zeichnet einen Kreis.
+===== Das Koordinatensystem =====
+p5.js verwendet ein zweidimensionales Koordinatensystem. Der Ursprung ''0,0'' befindet sich oben links.
+  * ''x'' bestimmt die Position von links nach rechts.
+  * ''y'' bestimmt die Position von oben nach unten.
+Bei
+<code javascript>
+circle(200, 200, 100);
+</code>
+liegt der Mittelpunkt des Kreises bei:
+  * ''x = 200''
+  * ''y = 200''
+Der Durchmesser beträgt ''100'' Pixel.
+Ändert die Werte und beobachtet, was passiert:
+<code javascript>
+circle(100, 300, 50);
+</code>
+<WRAP center round box 100%>
+**Grundprinzip des Creative Coding**
+Code verändern → Ergebnis beobachten → vergleichen → weiter verändern
+</WRAP>
+===== Form gestalten =====
+p5.js stellt verschiedene grundlegende geometrische Formen zur Verfügung.
+<code javascript>
+circle(200, 200, 100);
+rect(50, 50, 100, 100);
+line(50, 350, 350, 50);
+</code>
+Die Formen können miteinander kombiniert werden.
+Weitere grundlegende Zeichenfunktionen findet ihr in der [[https://p5js.org/reference/|p5.js Reference]].
+===== Farbe gestalten =====
+Mit ''background()'', ''fill()'' und ''stroke()'' können Farben verändert werden.
+<code javascript>
 function setup() {
   createCanvas(400, 400);
 }
 function draw() {
-background(240);
+  background(240);
-if (mouseIsPressed) {
-fill(255, 0, 0);
+  fill(255, 100, 80);
-} else {
+  stroke(0);
-fill(0, 100, 255);
-}
+  circle(200, 200, 100);
-rect(150, 150, 100, 100);
 }
 </code>
+''background()'' definiert die Hintergrundfarbe.
-==== 6. Arbeiten mit dem Canvas ====
+''fill()'' bestimmt die Füllfarbe.
-Die sichtbare Fläche in p5.js wird meist mit ‘‘createCanvas()’’ erzeugt. Auf diesem Canvas können Formen, Linien, Farben, Texte und Bilder dargestellt werden.
+''stroke()'' bestimmt die Konturfarbe.
-Wichtige Grundfunktionen sind zum Beispiel:
+Eine Kontur kann mit
-  * ‘‘background()’’ für den Hintergrund
-  * ‘‘fill()’’ für Füllfarben
-  * ‘‘stroke()’’ für Linienfarben
-  * ‘‘line()’’, ‘‘rect()’’, ‘‘circle()’’ und ‘‘ellipse()’’ für Formen
-  * ‘‘text()’’ für Schrift
-Diese klare Struktur unterstützt das gestalterische Arbeiten mit grafischen Elementen.
+<code javascript>
+noStroke();
+</code>
-===== Zentrale Konzepte =====
+ausgeschaltet werden.
-==== Koordinatensystem ====
-p5.js verwendet in der Regel ein zweidimensionales Koordinatensystem. Der Ursprung liegt oben links auf der Zeichenfläche.
+===== Parameter verändern =====
-  * ‘‘x’’ wächst nach rechts
-  * ‘‘y’’ wächst nach unten
-Dieses System ist wichtig, um Objekte gezielt zu platzieren und zu bewegen.
+Viele Eigenschaften eines Sketches werden durch Zahlen definiert.
-==== Farbe ====
+Bei
-Farben können in p5.js auf verschiedene Weise beschrieben werden, häufig über RGB-Werte. Damit lassen sich sehr gezielt visuelle Stimmungen erzeugen.
+<code javascript>
+circle(200, 200, 100);
+</code>
-<code>
+sind beispielsweise Position und Größe Parameter.
-fill(255, 0, 0);
-circle(100, 100, 50);
+Genau hier beginnt die gestalterische Arbeit mit Code.
+<WRAP center round box 100%>
+**Experiment**
+Verändert jeweils nur einen Parameter und beobachtet die Wirkung.
+  * Position
+  * Größe
+  * Farbe
+  * Anzahl
+  * Abstand
+  * Verhältnis der Formen zueinander
+Erstellt mehrere Varianten statt direkt nach einer vermeintlich „richtigen“ Lösung zu suchen.
+</WRAP>
+===== Die Maus als Input =====
+Bisher haben wir feste Zahlen verwendet.
+p5.js kann Werte aber auch aus einer Interaktion beziehen.
+Dafür stehen beispielsweise
+<code javascript>
+mouseX
+mouseY
 </code>
-Obiger Code zeichnet einen roten Kreis.
+zur Verfügung.
-==== Bewegung ====
+Wir ersetzen die feste Position des Kreises:
-Bewegung entsteht meist dadurch, dass Positionen oder andere Eigenschaften in jedem Durchlauf von ‘‘draw()’’ verändert werden.
+<code javascript>
+circle(200, 200, 100);
+</code>
-<code>
+durch:
-let x = 0;
+<code javascript>
+circle(mouseX, mouseY, 100);
+</code>
+Der Kreis folgt jetzt der Maus.
+<code javascript>
 function setup() {
-createCanvas(400, 200);
+  createCanvas(400, 400);
 }
 function draw() {
-background(255);
+  background(240);
-circle(x, 100, 30);
-x = x + 2;
-}
+  circle(mouseX, mouseY, 100);
+}
 </code>
-So bewegt sich ein Kreis schrittweise nach rechts.
+Damit haben wir aus einer statischen Grafik bereits ein sehr einfaches interaktives System entwickelt.
-==== Zufall ====
+===== Input → Process → Output =====
-Zufall ist ein zentrales Mittel im kreativen Programmieren. Mit zufälligen Werten können organische, überraschende oder generative Ergebnisse erzeugt werden.
+Interaktive Systeme können zunächst sehr einfach gedacht werden:
-Typische Einsatzbereiche sind:
+<WRAP center round box 100%>
-  * zufällige Positionen
+**INPUT → PROCESS → OUTPUT**
-  * wechselnde Farben
+</WRAP>
-  * generative Muster
-  * simulierte natürliche Prozesse
-==== Wiederholung und Muster ====
+Zum Beispiel:
-Durch Schleifen und systematische Veränderungen lassen sich komplexe Muster aus einfachen Regeln erzeugen. Das ist ein wesentliches Prinzip algorithmischer Gestaltung.
+<WRAP center round box 100%>
+Mausposition → Berechnung im Code → Position eines Kreises
+</WRAP>
-<code>
+oder:
+<WRAP center round box 100%>
+Mausklick → Bedingung im Code → Farbe verändert sich
+</WRAP>
+Dieses Prinzip begegnet uns in sehr unterschiedlichen interaktiven Systemen immer wieder.
+===== Bedingungen =====
+Mit einer Bedingung kann ein Sketch unterschiedlich auf eine Situation reagieren.
+Ein einfaches Beispiel:
+<code javascript>
 function setup() {
   createCanvas(400, 400);
-  background(255);
+}
+function draw() {
+  background(240);
-for (let x = 20; x < width; x += 40) {
+  if (mouseIsPressed) {
-for (let y = 20; y < height; y += 40) {
+    fill(255, 100, 80);
-circle(x, y, 20);
+  } else {
+    fill(50, 120, 255);
+  }
+  circle(200, 200, 120);
 }
+</code>
+Solange die Maustaste gedrückt wird, verändert sich die Farbe des Kreises.
+Die grundlegende Struktur lautet:
+<code javascript>
+if (BEDINGUNG) {
+  // etwas passiert
+} else {
+  // etwas anderes passiert
 }
+</code>
+===== Bewegung und Zeit =====
+Die Funktion ''draw()'' wird kontinuierlich wiederholt. Dadurch können Werte über die Zeit verändert werden.
+<code javascript>
+let x = 0;
+function setup() {
+  createCanvas(400, 200);
+}
+function draw() {
+  background(240);
+  circle(x, 100, 40);
+  x = x + 2;
 }
 </code>
+Die Variable ''x'' verändert sich bei jedem Durchlauf.
+Dadurch bewegt sich der Kreis.
+Interessant sind dabei nicht nur technische, sondern vor allem gestalterische Fragen:
+  * Wie schnell bewegt sich etwas?
+  * In welche Richtung?
+  * Ist die Bewegung gleichmäßig?
+  * Wie wirkt eine schnelle oder langsame Bewegung?
+  * Wann beginnt oder endet eine Bewegung?
+  * Wie beeinflusst Bewegung die Aufmerksamkeit?
+===== Wiederholung =====
+Eine besondere Stärke von Code besteht darin, Regeln wiederholt ausführen zu können.
+<code javascript>
+function setup() {
+  createCanvas(400, 400);
+}
+function draw() {
+  background(240);
+  for (let x = 20; x < width; x += 40) {
+    circle(x, 200, 20);
+  }
+}
+</code>
+Die Schleife wiederholt den Kreis automatisch.
+Aus einer einfachen Regel kann dadurch ein visuelles System entstehen.
+===== Generative Gestaltung =====
+Interessant wird Creative Coding, wenn Regeln, Wiederholung und Variation miteinander verbunden werden.
+Beispielsweise können Eigenschaften verändert werden wie:
+  * Position
+  * Größe
+  * Farbe
+  * Rotation
+  * Abstand
+  * Geschwindigkeit
+  * Anzahl
+  * Zufall
+  * Reaktion auf Eingaben
+Dadurch wird nicht mehr jedes einzelne Element gestaltet.
+Stattdessen gestalten wir die **Regeln, nach denen ein visuelles oder interaktives System entsteht**.
+===== Arbeiten mit KI =====
+<WRAP center round tip 100%>
+**KI-Tools dürfen verwendet werden.**
+Für die Arbeit mit p5.js sollen in Felix Kursen KI-Tools eurer Wahl verwendet werden, um Code zu generieren, zu erklären, zu verändern oder Fehler zu finden.
+Ziel ist in Felix Kursen nicht, möglichst viel Code selbst schreiben zu können. Ziel ist, Code als Werkzeug für gestalterische Experimente einsetzen zu können.
+</WRAP>
+Ein möglicher Prompt könnte beispielsweise lauten:
+<code>
+Create a simple p5.js sketch.
+Canvas size: 600 × 600 pixels.
+Create 20 circles that react to the position of the mouse.
+Use only black, white and one additional color.
+Keep the code simple.
+Explain which parameters I can change to modify the visual appearance.
+</code>
+Das Ergebnis der KI ist dabei nicht das Ende des Gestaltungsprozesses.
+<WRAP center round box 100%>
+**Idee → Prompt → Code → Experiment → Beobachtung → Veränderung → Variante**
+</WRAP>
+Probiert den erzeugten Code aus.
+Verändert einzelne Werte.
+Entfernt Teile.
+Fügt neue Regeln hinzu.
+Erzeugt Varianten.
+Vergleicht die Ergebnisse.
+===== KI als Coding Assistant =====
+KI kann auch dabei helfen, bestehenden Code zu verstehen.
+Beispiel:
+<code>
+Explain this p5.js code to me.
+I am a design student and have never programmed before.
+Explain what each section does in simple language.
+Then show me three parameters that I can change without changing
+the basic structure of the program.
+</code>
+Auch bei Fehlern kann KI unterstützen:
+<code>
+This p5.js sketch produces an error.
+Explain the error in simple language.
+Do not rewrite the complete sketch.
+Show me which line I need to change and explain why.
+</code>
+===== Code verstehen statt auswendig lernen =====
+Auch bei der Arbeit mit KI ist es hilfreich, einige grundlegende Strukturen wiederzuerkennen.
+^**Element** ^**Bedeutung** ^
+|''setup()''|Wird beim Start einmal ausgeführt.|
+|''draw()''|Wird kontinuierlich wiederholt.|
+|''let x = 100;''|Eine Variable speichert einen Wert.|
+|''circle(x, y, size);''|Eine Funktion führt eine bestimmte Aktion aus.|
+|''mouseX / mouseY''|Die Mausposition liefert Werte für eine Interaktion.|
+|''if (...)''|Eine Bedingung entscheidet, was passiert.|
+|''for (...)''|Eine Schleife wiederholt etwas.|
+|''random()''|Erzeugt zufällige Werte.|
+===== Vom Kreis zum interaktiven System =====
+Wir haben mit einem einzelnen statischen Kreis begonnen:
+<code javascript>
+circle(200, 200, 100);
+</code>
+Im Verlauf der Einführung haben wir gesehen, dass dieselbe Grundidee schrittweise erweitert werden kann:
+<WRAP center round box 100%>
+**Form → Farbe → Parameter → Input → Bedingungen → Bewegung → Wiederholung → Interaktion**
+</WRAP>
+Aus wenigen einfachen Regeln kann dadurch ein dynamisches und interaktives System entstehen.
+===== Endergebnis: ein interaktiver Sketch =====
+Das folgende Beispiel verbindet mehrere der zuvor eingeführten Prinzipien.
+Bewegt zunächst die Maus über die Zeichenfläche und beobachtet, wie das System reagiert. Klickt anschließend an unterschiedliche Positionen.
+<WRAP center round box 100%>
+{{url>https://editor.p5js.org/hardmood/full/3tySlARH_ 100%,650px noborder}}
+</WRAP>
-===== Pädagogische Bedeutung =====
+[[https://editor.p5js.org/hardmood/sketches/3tySlARH_|Sketch im p5.js Editor öffnen]]
-p5.js wird häufig in der Lehre eingesetzt, weil es Programmierkonzepte anschaulich vermittelt. Lernende sehen schnell, wie sich Logik, Variablen, Bedingungen, Schleifen und Funktionen auf ein sichtbares Ergebnis auswirken.
+<WRAP center round tip 100%>
+**Jetzt seid ihr dran.**
-Besonders hilfreich ist p5.js für das Verständnis von:
+Öffnet den Sketch im p5.js Web Editor und entwickelt daraus eine eigene Variante.
-  * Variablen und Zuständen
-  * Funktionen
-  * Bedingungen
-  * Schleifen
-  * Ereignissen
-  *
-  * algorithmischem Denken
-===== Typische Anwendungsbereiche =====
+Verändert nicht einfach nur einzelne Farben. Überlegt, welche Regeln das Verhalten und die visuelle Wirkung des Systems bestimmen.
-==== Kunst und Design ====
+Was könnt ihr verändern?
-p5.js eignet sich hervorragend für generative Kunst, visuelle Experimente und interaktive Installationen. Gestalterische Ideen können schnell als Prototyp umgesetzt werden.
+  * Form
+  * Anzahl
+  * Position
+  * Farbe
+  * Größe
+  * Bewegung
+  * Geschwindigkeit
+  * Reaktion auf die Maus
+  * Reaktion auf einen Klick
+  * Regeln und Bedingungen
-==== Datenvisualisierung ====
+Das Ziel ist nicht, den Beispiel-Sketch nachzubauen, sondern aus seinen Prinzipien ein **eigenes visuelles und interaktives System** zu entwickeln.
+</WRAP>
-Daten können mit Formen, Farben und Bewegung sichtbar gemacht werden. Dadurch lassen sich Zusammenhänge verständlich und ansprechend darstellen.
-==== Interaktive Medien ====
+===== Creative Coding als Designprozess =====
-Webbasierte Anwendungen, Lernumgebungen oder kreative Tools profitieren von der einfachen Integration interaktiver Elemente.
+In //Creative Technologies// interessiert uns weniger die Frage:
-==== Prototyping ====
+<WRAP center round box 100%>
+**„Kann ich programmieren?“**
+</WRAP>
-Ideen für Benutzeroberflächen, Animationen oder medienbasierte Experimente können schnell getestet werden, bevor eine umfassendere technische Umsetzung erfolgt.
+Interessanter ist die Frage:
-===== Vorteile von p5.js =====
+<WRAP center round box 100%>
-  - einfacher Einstieg in kreative Programmierung
+**„Kann ich mit Code gestalten?“**
-  - direkte Ausführung im Browser
+</WRAP>
-  - schnelle sichtbare Ergebnisse
-  - gute Eignung für Lehre und Workshops
-  - starke Ausrichtung auf Interaktion und Gestaltung
-  - große Nähe zu künstlerischen und experimentellen Arbeitsweisen
-===== Grenzen von p5.js =====
+p5.js ermöglicht dafür einen experimentellen Arbeitsprozess:
-Trotz seiner Stärken ist p5.js nicht für jede Aufgabe die beste Wahl. Für sehr große, hochoptimierte oder spezialisierte Anwendungen können andere Werkzeuge besser geeignet sein.
+<WRAP center round box 100%>
+**Regel definieren → Ergebnis beobachten → Parameter verändern → Varianten erzeugen → vergleichen → weiterentwickeln**
+</WRAP>
-Mögliche Grenzen sind:
+Code wird damit zu einem weiteren Gestaltungsmaterial innerhalb der //Creative Technologies//.
-  - geringere Performance bei sehr komplexen Projekten
-  -
-  - weniger geeignet für große Softwarearchitekturen
-  - Fokus liegt eher auf Kreativität und Prototyping als auf klassischen Geschäftsanwendungen
-===== Fazit =====
-p5.js ist ein zugängliches und leistungsfähiges Werkzeug für kreative Programmierung im Browser. Die Bibliothek verbindet technische Grundlagen mit gestalterischer Freiheit und fördert experimentelles Lernen. Gerade für den Einstieg in visuelles und interaktives Programmieren bietet p5.js einen besonders anschaulichen und motivierenden Zugang.
+===== Weiterführende Links =====
-===== Siehe auch =====
+  * [[https://p5js.org/|p5.js]]
-  * [[https://p5js.org/|Offizielle p5.js-Webseite]]
   * [[https://editor.p5js.org/|p5.js Web Editor]]
-  * [[https://processing.org/|Processing]]
+  * [[https://p5js.org/reference/|p5.js Reference]]
+  * [[https://p5js.org/examples/|p5.js Examples]]