P5.js
P5.js
p5.js (Programmieren lernen)
Einleitung
Hinweis: In diesem aiMOOC wird die Eingabe „ps.js“ als p5.js verstanden. p5.js ist eine freie JavaScript-Bibliothek, mit der Du Programmieren besonders anschaulich lernen kannst. Der Schwerpunkt liegt auf Creative Coding, also auf dem kreativen Einsatz von Code, um Bilder, Animationen, Interaktionen, Simulationen, kleine Spiele, Datenvisualisierungen oder audiovisuelle Experimente zu gestalten. p5.js eignet sich deshalb besonders gut für Schule, Ausbildung und Studium, weil Du sofort im Webbrowser sichtbare Ergebnisse erzeugst.
Mit p5.js lernst Du zentrale Grundlagen der Informatik: Variablen, Funktionen, Algorithmen, Schleifen, Bedingungen, Koordinatensysteme, Ereignisse, objektorientiertes Denken, Debugging und Modularisierung. Gleichzeitig arbeitest Du mit gestalterischen Fragen: Wie entstehen Formen? Wie beeinflussen Farben eine Wirkung? Wie reagiert ein Programm auf Maus, Tastatur oder Zufall? Wie lässt sich Bewegung programmieren?
Was ist p5.js?
p5.js ist eine JavaScript-Bibliothek für Creative Coding. Eine Bibliothek stellt fertige Funktionen bereit, damit Du nicht alles selbst von Grund auf programmieren musst. Bei p5.js betrifft das vor allem das Zeichnen auf einer digitalen Zeichenfläche, die häufig als Canvas bezeichnet wird. Du kannst Linien, Kreise, Rechtecke, Texte, Farben, Bilder, Klänge und interaktive Elemente verwenden.
Der Name p5.js steht in der Tradition von Processing. Processing wurde entwickelt, um Menschen aus Kunst, Design, Bildung und Medien einen einfachen Zugang zum Programmieren zu ermöglichen. p5.js überträgt diese Idee in den Webbrowser und nutzt dafür JavaScript, HTML und häufig auch CSS.
Warum eignet sich p5.js zum Programmierenlernen?
p5.js ist besonders lernfreundlich, weil Programmierkonzepte sofort sichtbar werden. Wenn Du eine Variable veränderst, kann sich die Position eines Kreises ändern. Wenn Du eine Schleife verwendest, entstehen Muster. Wenn Du eine Bedingte Anweisung formulierst, reagiert Dein Programm unterschiedlich auf Eingaben. Dadurch wird Abstraktion greifbar.
Ein weiterer Vorteil ist der schnelle Einstieg. Du kannst im p5.js Web Editor direkt im Webbrowser programmieren. Dadurch brauchst Du am Anfang keine komplizierte Entwicklungsumgebung. Du schreibst Deinen Code, startest das Programm und siehst sofort das Ergebnis. Fehler werden im Editor oder in der Konsole sichtbar, wodurch Du Debugging üben kannst.
Die Grundstruktur eines p5.js-Programms
Ein einfaches p5.js-Programm besteht häufig aus zwei wichtigen Funktionen: setup und draw. Die Funktion setup wird einmal zu Beginn ausgeführt. Dort richtest Du zum Beispiel die Zeichenfläche ein. Die Funktion draw wird danach immer wieder ausgeführt. Dadurch entstehen Animationen.
function setup() {
createCanvas(400, 400);
background(240);
}
function draw() {
circle(mouseX, mouseY, 50);
}In diesem Beispiel wird eine Zeichenfläche erstellt. Danach zeichnet das Programm immer wieder einen Kreis an die aktuelle Mausposition. Die Werte mouseX und mouseY sind eingebaute Variablen von p5.js. Sie speichern die aktuelle Position der Maus im Koordinatensystem der Zeichenfläche.
Das Koordinatensystem verstehen
Die Zeichenfläche in p5.js verwendet ein Koordinatensystem. Der Punkt oben links hat die Koordinaten 0 und 0. Die x-Achse verläuft nach rechts, die y-Achse nach unten. Das ist anders als in vielen mathematischen Darstellungen, bei denen die y-Achse nach oben zeigt. Dieses Wissen ist wichtig, wenn Du Formen gezielt platzieren, Animationen planen oder Bewegungen berechnen möchtest.
Ein Kreis kann zum Beispiel mit einer x-Position, einer y-Position und einem Durchmesser beschrieben werden. Wenn Du die x-Position in jedem Durchlauf von draw erhöhst, bewegt sich der Kreis nach rechts. Wenn Du die y-Position erhöhst, bewegt er sich nach unten. Aus solchen einfachen Veränderungen entstehen Animationen.
Formen, Farben und Gestaltung
Mit p5.js kannst Du geometrische Grundformen erzeugen. Dazu gehören Punkte, Linien, Dreiecke, Rechtecke, Ellipsen und Kreise. Diese Formen sind die Bausteine für komplexere Bilder. Farben werden häufig durch Zahlenwerte beschrieben, etwa für Rot, Grün und Blau. Dieses Modell nennt man RGB-Farbraum.
function setup() {
createCanvas(500, 300);
background(220);
fill(255, 120, 80);
stroke(30);
rect(80, 70, 160, 100);
circle(330, 120, 90);
}Hier lernst Du, dass Gestaltung und Programmierung zusammenhängen. Eine Form ist nicht nur ein Bildobjekt, sondern auch eine strukturierte Anweisung an den Computer: Wo soll sie erscheinen? Welche Größe soll sie haben? Welche Farbe soll sie tragen? Soll sie eine Kontur besitzen?
Variablen als Gedächtnis eines Programms
Eine Variable ist ein benannter Speicherplatz. Sie kann zum Beispiel eine Position, eine Geschwindigkeit, eine Farbe oder einen Punktestand enthalten. Wenn Du programmieren lernst, sind Variablen besonders wichtig, weil Programme ohne Speicher kaum flexibel reagieren können.
let x = 50;
function setup() {
createCanvas(400, 200);
}
function draw() {
background(240);
circle(x, 100, 40);
x = x + 1;
}Die Variable x beginnt mit dem Wert 50. In jedem Durchlauf wird ein Kreis an der x-Position gezeichnet. Danach wird x um eins erhöht. Dadurch wandert der Kreis nach rechts. Dieses Beispiel zeigt, wie aus einer einfachen Wertveränderung eine Bewegung entsteht.
Bedingungen: Programme entscheiden lassen
Eine Bedingte Anweisung ermöglicht Entscheidungen. Ein Programm kann prüfen, ob etwas zutrifft, und dann unterschiedlich reagieren. In p5.js kann das zum Beispiel bedeuten: Wenn die Maus auf der linken Seite ist, soll der Hintergrund hell sein. Wenn die Maus auf der rechten Seite ist, soll der Hintergrund dunkel sein.
function setup() {
createCanvas(400, 200);
}
function draw() {
if (mouseX < 200) {
background(230);
} else {
background(80);
}
circle(mouseX, mouseY, 40);
}Bedingungen sind ein Kernkonzept der Informatik. Sie kommen in Spielen, Apps, Webseiten, Robotik, Simulationen und Datenverarbeitung vor. Mit p5.js kannst Du sie visuell und interaktiv ausprobieren.
Schleifen: Wiederholung als Gestaltungsmittel
Eine Schleife wiederholt Anweisungen. In p5.js lassen sich damit Muster, Raster, Ornamente, Animationen oder Datenbilder erzeugen. Statt hundert Kreise einzeln zu schreiben, formulierst Du eine Regel. Der Computer führt diese Regel wiederholt aus.
function setup() {
createCanvas(500, 200);
background(245);
for (let x = 40; x < 480; x = x + 40) {
circle(x, 100, 25);
}
}Dieses Beispiel zeichnet viele Kreise in regelmäßigen Abständen. Du erkennst daran einen wichtigen Gedanken des Programmierens: Ein guter Algorithmus beschreibt nicht jedes Ergebnis einzeln, sondern die Regel, nach der Ergebnisse entstehen.
Funktionen: Code ordnen und wiederverwenden
Eine Funktion fasst Anweisungen zusammen. Dadurch wird ein Programm übersichtlicher. Wenn Du eine eigene Funktion schreibst, kannst Du eine Aufgabe benennen und wiederverwenden. Das ist ein Schritt zur Modularisierung.
function setup() {
createCanvas(400, 300);
}
function draw() {
background(240);
zeichneGesicht(200, 150);
}
function zeichneGesicht(x, y) {
circle(x, y, 120);
circle(x - 25, y - 20, 15);
circle(x + 25, y - 20, 15);
arc(x, y + 15, 60, 40, 0, PI);
}Die eigene Funktion zeichneGesicht macht den Code verständlicher. Du kannst später weitere Werte übergeben, zum Beispiel Größe, Farbe oder Stimmung. So entstehen flexible Bausteine für größere Projekte.
Interaktion: Maus, Tastatur und Ereignisse
Interaktion bedeutet, dass ein Programm auf Eingaben reagiert. In p5.js kannst Du die Mausposition verwenden, Mausklicks erkennen oder Tastatureingaben auswerten. Dadurch entstehen einfache Zeichenprogramme, Spiele, Simulationen oder Lernanwendungen.
Ein Ereignis ist etwas, das während der Laufzeit passiert: ein Klick, ein Tastendruck, eine Bewegung, ein geladener Klang oder ein berührter Bildschirm. In p5.js kannst Du spezielle Ereignisfunktionen nutzen, um darauf zu reagieren.
let farbwert = 200;
function setup() {
createCanvas(400, 250);
}
function draw() {
background(farbwert);
circle(200, 125, 80);
}
function mousePressed() {
farbwert = 120;
}Wenn Du mit der Maus klickst, ändert sich der Hintergrund. Dieses einfache Beispiel zeigt das Prinzip vieler interaktiver Programme: Eine Eingabe verändert einen Zustand, und der veränderte Zustand verändert die Ausgabe.
Zufall und generative Gestaltung
Zufall ist in p5.js ein wichtiges Gestaltungsmittel. Mit zufälligen Werten kannst Du Bilder erzeugen, die bei jedem Start anders aussehen. Das führt zur generativen Kunst. Dabei legt der Mensch Regeln fest, während der Computer viele mögliche Ergebnisse erzeugt.
function setup() {
createCanvas(500, 300);
background(250);
for (let i = 0; i < 80; i = i + 1) {
let x = random(width);
let y = random(height);
let d = random(10, 50);
circle(x, y, d);
}
}Hier entscheidet der Zufall über Position und Größe der Kreise. Trotzdem ist das Ergebnis nicht völlig beliebig, denn Du bestimmst die Regeln: Anzahl, Bereich, Form und mögliche Größen. Genau darin liegt der Reiz von Creative Coding.
Debugging: Fehler finden und verstehen
Debugging bedeutet, Fehler im Programm zu finden, zu verstehen und zu beheben. Fehler sind beim Programmieren normal. Sie zeigen Dir, an welcher Stelle Dein Denken, Deine Schreibweise oder Deine Programmstruktur noch nicht zum gewünschten Ergebnis passt.
Typische Fehler beim Einstieg in p5.js sind fehlende Klammern, falsch geschriebene Funktionsnamen, verwechselte Groß- und Kleinschreibung, nicht definierte Variablen oder falsche Koordinaten. Ein wichtiger Lernschritt besteht darin, Fehlermeldungen nicht als Scheitern zu sehen, sondern als Hinweise.
Hilfreiche Strategien sind: Lies die Fehlermeldung genau. Prüfe die Zeile, die genannt wird. Suche auch in den Zeilen davor. Vereinfache Dein Programm. Gib Zwischenwerte in der Konsole aus. Verändere immer nur eine Sache auf einmal. Dokumentiere, was Du geändert hast.
Projektideen mit p5.js
Mit p5.js kannst Du sehr unterschiedliche Projekte umsetzen. Für den Einstieg eignen sich kleine Projekte, die ein klares Ziel haben und trotzdem Raum für Gestaltung lassen. Beispiele sind ein digitales Namensschild, ein interaktives Farbenspiel, ein einfacher Ball, ein Zeichenprogramm, ein Muster-Generator, eine Wettervisualisierung, ein Mini-Spiel, eine Simulation von Teilchen oder eine Klangreaktion.
Für fortgeschrittene Lernende kann p5.js mit HTML, CSS, Web Audio API, Webcam, Sensoren, Datenvisualisierung, Maschinelles Lernen oder WebGL verbunden werden. Dadurch wird aus einem einfachen Zeichenprogramm eine vielseitige Umgebung für digitale Medienprojekte.
Kompetenzen, die Du in diesem Kurs entwickelst
- Algorithmisches Denken: Du formulierst klare Schrittfolgen und Regeln, die ein Computer ausführen kann.
- Problemlösen: Du zerlegst ein größeres Projekt in kleinere Teilprobleme.
- Kreativität: Du nutzt Code als Werkzeug für Gestaltung, Ausdruck und Experiment.
- Medienkompetenz: Du verstehst, wie interaktive digitale Medien technisch entstehen.
- Fehlerkultur: Du lernst, Fehler systematisch zu untersuchen und produktiv zu nutzen.
- Projektarbeit: Du planst, entwickelst, testest und präsentierst eigene digitale Produkte.
Interaktive Aufgaben
Quiz: Teste Dein Wissen
Wofür wird p5.js besonders häufig eingesetzt? (Kreatives Programmieren mit JavaScript) (!Textverarbeitung ohne Internet) (!Tabellenkalkulation im Betriebssystem) (!Datenbankverwaltung ohne Code)
Welche Funktion wird in einem typischen p5.js-Programm einmal zu Beginn ausgeführt? (setup) (!draw) (!mouseX) (!background)
Welche Funktion wird in p5.js normalerweise fortlaufend wiederholt? (draw) (!setup) (!createCanvas) (!fill)
Was beschreibt der Begriff Canvas im Kontext von p5.js? (Eine digitale Zeichenfläche) (!Eine externe Festplatte) (!Ein Passwortspeicher) (!Eine Programmiersprache)
Welche Programmiersprache nutzt p5.js? (JavaScript) (!Python) (!C) (!Ruby)
Was speichert die Variable mouseX in p5.js? (Die horizontale Mausposition) (!Die Hintergrundfarbe) (!Die Kreisgröße) (!Die Tastaturhöhe)
Was bewirkt eine Schleife beim Programmieren? (Sie wiederholt Anweisungen) (!Sie löscht automatisch Fehler) (!Sie beendet jedes Programm) (!Sie ersetzt alle Variablen)
Was ist Debugging? (Fehler im Programm finden und beheben) (!Bilder automatisch vergrößern) (!Programme ohne Test veröffentlichen) (!Eine Datei komprimieren)
Was ermöglicht eine bedingte Anweisung? (Eine Entscheidung im Programm) (!Eine zufällige Installation) (!Eine feste Bildschirmgröße) (!Eine automatische Übersetzung)
Warum ist p5.js für Anfängerinnen und Anfänger geeignet? (Weil Code schnell sichtbare Ergebnisse erzeugt) (!Weil man keine Logik verstehen muss) (!Weil es nur auf Spezialcomputern läuft) (!Weil es keine Fehler geben kann)
Memory
| setup | Startfunktion |
| draw | Wiederholfunktion |
| Canvas | Zeichenfläche |
| Variable | Speicherwert |
| Bedingung | Entscheidung |
| Schleife | Wiederholung |
| Debugging | Fehlersuche |
Drag and Drop
| Ordne die richtigen Begriffe zu. | Thema |
|---|---|
| setup | Einmaliger Programmstart |
| draw | Fortlaufende Programmausführung |
| Canvas | Digitale Zeichenfläche |
| Variable | Veränderbarer Speicherwert |
| Bedingung | Entscheidung im Programm |
| Schleife | Wiederholung von Anweisungen |
| Debugging | Systematische Fehlersuche |
Kreuzworträtsel
| Canvas | Wie heißt die digitale Zeichenfläche in p5.js? |
| Variable | Wie nennt man einen benannten Speicherwert? |
| Schleife | Welches Konzept wiederholt Anweisungen? |
| Funktion | Wie nennt man einen wiederverwendbaren Codeblock? |
| Maus | Welches Eingabegerät liefert mouseX und mouseY? |
| Debugging | Wie nennt man die systematische Fehlersuche? |
LearningApps
Lückentext
Offene Aufgaben
Leicht
- Erstes p5.js-Bild: Erstelle ein digitales Bild aus mindestens fünf geometrischen Formen. Beschreibe anschließend, welche Funktionen Du verwendet hast und welche Koordinaten besonders wichtig waren.
- Farben erkunden: Programmiere drei Varianten desselben Motivs mit unterschiedlichen Farben. Vergleiche, wie sich die Wirkung durch den RGB-Farbraum verändert.
- Maus-Kreis: Erstelle ein Programm, bei dem ein Kreis der Maus folgt. Ergänze eine kurze Erklärung zu mouseX und mouseY.
- Fehler-Tagebuch: Baue absichtlich drei kleine Fehler in einen p5.js-Sketch ein, behebe sie und notiere, welche Fehlermeldungen oder Beobachtungen Dir geholfen haben.
Standard
- Interaktives Plakat: Gestalte ein digitales Plakat, das auf Mausbewegungen oder Mausklicks reagiert. Achte auf eine klare gestalterische Aussage.
- Muster-Generator: Entwickle mit einer Schleife ein Muster aus Formen. Erkläre, welche Regel Dein Muster erzeugt.
- Mini-Animation: Programmiere eine animierte Figur oder ein bewegtes Objekt. Verwende mindestens eine Variable für Position oder Geschwindigkeit.
- Entscheidungsprogramm: Erstelle einen Sketch, der mit einer Bedingung auf verschiedene Mausbereiche reagiert. Beschreibe, warum Bedingungen für interaktive Programme wichtig sind.
Schwer
- Generative Kunst: Entwickle ein generatives Kunstwerk, das bei jedem Start anders aussieht. Begründe, welche Rolle Zufall und Regeln in Deinem Projekt spielen.
- Einfaches Spiel: Programmiere ein kleines Reaktionsspiel mit Punktestand, Bewegung und einer Gewinn- oder Verlustbedingung.
- Datenvisualisierung mit p5.js: Wähle eine kleine Datensammlung, zum Beispiel Temperaturen, Lieblingsfächer oder Umfragewerte, und visualisiere sie mit Formen, Farben oder Größen.
- Projektpräsentation: Plane, entwickle und präsentiere ein eigenes p5.js-Projekt. Dokumentiere Ziel, Entwurf, wichtigste Codebestandteile, Probleme, Lösungen und mögliche Erweiterungen.
|
|
Lernkontrolle
- Code erklären: Erkläre an einem selbst gewählten p5.js-Sketch, wie setup, draw, Variablen und Funktionen zusammenwirken.
- Algorithmus übertragen: Beschreibe einen Alltagsvorgang als Algorithmus und übertrage das Prinzip anschließend auf eine p5.js-Animation.
- Fehleranalyse: Du siehst ein Programm, bei dem ein Kreis nicht an der erwarteten Stelle erscheint. Entwickle eine Strategie, mit der Du mögliche Ursachen systematisch überprüfst.
- Gestaltung begründen: Vergleiche zwei interaktive p5.js-Bilder. Beurteile, wie Farben, Bewegung, Eingaben und Formen die Wirkung verändern.
- Projekt verbessern: Nimm ein einfaches p5.js-Programm und entwickle drei sinnvolle Erweiterungen. Begründe, welche Erweiterung den größten Lerngewinn bietet.
- Transfer auf Webseiten: Erkläre, wie p5.js mit HTML, CSS und JavaScript zusammenhängt und warum dieses Wissen auch für andere Webprojekte nützlich ist.
- Ethik digitaler Gestaltung: Diskutiere, welche Verantwortung Programmierende haben, wenn interaktive Medien Menschen beeinflussen, Daten nutzen oder Aufmerksamkeit lenken.
OERs zum Thema
Links