Erste Schritte mit p5.js

Ein kompaktes Tutorial für den Einstieg in die kreative Programmierung

Basierend auf dem Tutorial von Layla Quiñones und Jaleesa Trapp

In diesem Tutorial lernst du die Grundlagen von p5.js kennen und erstellst deine erste interaktive Grafik. Du wirst lernen:

Voraussetzungen: Du solltest bereits den p5.js Web Editor nutzen können oder p5.js in VS Code eingerichtet haben.

Öffne den p5.js Web Editor und gib deinem Projekt einen Namen. Klicke dazu auf "My Sketch" oben links und gib einen aussagekräftigen Namen ein, zum Beispiel "Meine erste Grafik".

Speichere deine Arbeit regelmäßig! Im Web Editor wird automatisch gespeichert, aber es ist trotzdem gut, dir anzugewöhnen, Projekte zu benennen und zu organisieren.

Das Canvas ist die Zeichenfläche, auf der deine Grafik erscheint. Standardmäßig ist es 400×400 Pixel groß. Lass uns die Größe auf 600×400 Pixel ändern:

function setup() { createCanvas(600, 400); } function draw() { background(220); }

Zur Erklärung:

Kommentare helfen dir und anderen, deinen Code zu verstehen. Sie werden vom Computer ignoriert und sind nur für Menschen lesbar. In JavaScript nutzt du // für einzeilige Kommentare:

function setup() { // Eine 600 Pixel breite und 400 Pixel hohe Zeichenfläche erstellen createCanvas(600, 400); } function draw() { background(220); // Der Hintergrund soll den Farbwert 220 (Grau) haben }

Mit den Farbangaben werden wir uns gleich beschäftigen.

Nutze Kommentare, um zu erklären warum du etwas tust, nicht nur was du tust. Gute Kommentare machen deinen Code übersichtlicher!

Die background()-Funktion setzt die Hintergrundfarbe. Du kannst Farben auf verschiedene Arten angeben:

RGB-Farben

Bei RGB-Farben wird die resultierende Farbe aus den drei Farben Rot (R), Grün (G) und Blau (B) gemischt. Der Anteil jeder dieser drei Farben wird durch einen Zahlenwert zwischen 0 und 255 angegeben:

function setup() { // Erstelle eine 600 Pixel breite und 400 Pixel hohe Zeichenfläche createCanvas(600, 400); } function draw() { // Der Hintergrund soll himmelblau sein background(135, 206, 235); }

Hinweis: Bei Grautönen sind alle drei Farbenwerte gleich, beispielsweise (220, 220, 220) für Hellgrau. Anstatt background(220, 220, 220) kannst du dann auch background(220) schreiben.

Nutze Online-Farbwähler wie Google Color Picker, um RGB-Werte zu finden!

Farbnamen

Du kannst auch Farbnamen (in Englisch) angeben:

background('skyblue'); // Himmelblau background('red'); // Rot background('green'); // Grün background('tomato'); // Tomatenrot Die Farbnamen kann man zum Beispiel auf W3Schools finden!
  • Variiere die Farbwerte in der background()-Funktion und beobachte die Veränderung.
  • Mit welchen Farbwerten kann man Gelb erzeugen?
  • Finde ausgefallene Farbnamen und setze sie in der background()-Funktion.

Lass uns einen Kreis zeichnen! Die circle()-Funktion benötigt drei Werte: x-Position, y-Position und Durchmesser.

function setup() { createCanvas(600, 400); } function draw() { background(135, 206, 235); // Zeichne einen Kreis bei (300, 200) mit 100 Pixel Durchmesser circle(300, 200, 100); }

Das Koordinatensystem

Jeden der Punkte (Pixel) auf der Zeichenfläche (Canvas) kann man durch zwei Koordinaten beschreiben: x und y. x gibt die waagerechte Position an (rechts/links), y die vertikale Position (hoch/tief).

Achtung: Entgegen dem Mathematikunterricht wächst die y-Koordinate hier nach unten.

Weitere nützliche Form-Funktionen:

  • Zeichne ein Rechteck mit der rect(x,y,breite,höhe)-Funktion, variiere die Position und die Größe.
  • Zeichne ein Dreieck mit der triangle(x1,y1,x2,y2,x3,y3)-Funktion, variiere die Position und die Größe.
  • Zeichne eine Ellipse mit der ellipse(x,y,breite,höhe)-Funktion, variiere die Position und die Größe.
  • Zeichne eine Linie mit der line(x1,y1,x2,y2)-Funktion, variiere die Position und die Größe.

Mit fill(farbe) kannst du die Füllfarbe einer Form ändern, mit stroke(farbe) die Randfarbe und mit strokeWeight(dicke) die Randdicke:

function setup() { createCanvas(600, 400); } function draw() { background(135, 206, 235); // Gelbe Sonne mit orangem Rand fill(255, 255, 0); stroke(255, 165, 0); strokeWeight(4); circle(500, 80, 80); // Weiße Wolke ohne Rand fill(255, 255, 255); noStroke(); // kein Rand zeichnen circle(150, 100, 60); circle(180, 90, 50); circle(200, 100, 60); }

Die Reihenfolge ist wichtig! Setze fill() und stroke() vor der Form, die du zeichnen möchtest.

noStroke() entfernt den Rand, noFill() entfernt die Füllung. So kannst du nur Umrisse oder nur gefüllte Formen zeichnen.

Kombinieren wir verschiedene Kreise, Rechtecke und Dreiecke zu einer kleinen Landschaft

Kombiniere aus den verschiedenen Formen und Farben eine einfache farbige Landschaft.

Beispielsweise könnte dies so aussehen:

function setup() { createCanvas(600, 400); } function draw() { background(135, 206, 235); // Sonne fill(255, 255, 0); stroke(255, 165, 0); strokeWeight(4); circle(500, 80, 80); // Wolken fill(255, 255, 255); noStroke(); circle(150, 100, 60); circle(180, 90, 50); circle(200, 100, 60); // Grasfläche fill(34, 139, 34); rect(0, 300, 600, 100); // Haus fill(160, 82, 45); rect(200, 220, 120, 100); // Dach fill(139, 69, 19); triangle(190, 220, 260, 160, 330, 220); }

Mit der text()-Funktion kannst du Text und sogar Emojis zu deiner Grafik hinzufügen:

// Text als Beschriftung einfügen fill(255, 255, 255); text("mit p5.js erstellt", 500, 380); // Blumen-Emojis als Text text("🌻", 20, 350); text("🌷", 30, 340); text("🌹", 42, 355);

Jetzt wird es spannend! Mit den Variablen mouseX und mouseY kannst du auf die Mausposition reagieren:

function setup() { createCanvas(600, 400); } function draw() { background(135, 206, 235); // Sonne fill(255, 255, 0); stroke(255, 165, 0); strokeWeight(4); circle(500, 80, 80); // Wolken fill(255, 255, 255); noStroke(); circle(150, 100, 60); circle(180, 90, 50); circle(200, 100, 60); // Grasfläche fill(34, 139, 34); rect(0, 300, 600, 100); // Haus fill(160, 82, 45); rect(200, 220, 120, 100); // Dach fill(139, 69, 19); triangle(190, 220, 260, 160, 330, 220); // Text fill(255, 255, 255); text("mit p5.js erstellt", 500, 380); // Blumen text("🌻", 20, 350); text("🌷", 30, 340); text("🌹", 42, 355); // Mauszeiger als Emoji - folgt der Maus! text("🪲", mouseX, mouseY); }

Versuche, die Größe des Kreises mit der Mausposition zu verändern, beispielsweise durch circle(mouseX, mouseY, mouseX/10) bei der Sonne.

Mit den Grundlagen aus diesem Tutorial kannst du schon viele interessante Grafiken erstellen. Hier sind einige Beispiele zur Inspiration:

Beispiel 1 - Gesicht mit Augen, die der Maus folgen

function setup() { createCanvas(600, 400); } function draw() { background(255, 220, 180); // Gesicht fill(255, 200, 150); stroke(200, 150, 100); strokeWeight(3); circle(300, 200, 250); // Linkes Auge (weiß) fill(255); stroke(0); strokeWeight(2); ellipse(240, 170, 60, 40); // Rechtes Auge (weiß) ellipse(360, 170, 60, 40); // Pupillen folgen der Maus (begrenzt auf Augenbereich) fill(80, 50, 20); noStroke(); // Linke Pupille circle(230 + mouseX/30, 165 + mouseY/40, 20); // Rechte Pupille circle(350 + mouseX/30, 165 + mouseY/40, 20); // Nase fill(255, 180, 130); stroke(200, 150, 100); strokeWeight(2); triangle(300, 190, 280, 240, 320, 240); // Mund - lächelt basierend auf Mausposition noFill(); stroke(200, 100, 100); strokeWeight(4); ellipse(300, 280, 80 + mouseX/10, 30); // Augenbrauen stroke(100, 70, 50); strokeWeight(5); line(210, 130, 270, 140); line(330, 140, 390, 130); }

Beispiel 2 - Abstrakte Kunst

function setup() { createCanvas(600, 400); } function draw() { background(20, 20, 40); // Große Kreise im Hintergrund noStroke(); fill(255, 100, 100, 100); circle(150, 200, 300); fill(100, 255, 100, 100); circle(450, 200, 300); fill(100, 100, 255, 100); circle(300, 300, 300); // Interaktives Rechteck fill(255, 255, 0, 150); rect(mouseX - 50, mouseY - 50, 100, 100); // Linien-Muster stroke(255, 255, 255, 80); strokeWeight(1); line(0, 0, mouseX, mouseY); line(600, 0, mouseX, mouseY); line(0, 400, mouseX, mouseY); line(600, 400, mouseX, mouseY); // Kleiner Kreis an Mausposition fill(255); noStroke(); circle(mouseX, mouseY, 20); }

Beispiel 3 - Emoji-Zoo

function setup() { createCanvas(600, 400); } function draw() { background(135, 206, 235); // Wiese fill(100, 200, 100); noStroke(); rect(0, 300, 600, 100); // Bäume im Hintergrund textSize(60); text("🌲", 50, 320); text("🌳", 150, 310); text("🌲", 500, 320); text("🌳", 400, 300); // Tiere (fest positioniert) textSize(40); text("🐄", 100, 370); text("🐑", 200, 380); text("🐔", 350, 375); text("🐷", 450, 370); // Sonne und Wolken textSize(50); text("☀️", 520, 70); textSize(40); text("☁️", 100, 80); text("☁️", 300, 60); // Schmetterling folgt der Maus textSize(30); text("🦋", mouseX, mouseY); // Zaun fill(139, 90, 43); rect(0, 350, 600, 5); rect(50, 320, 8, 35); rect(120, 320, 8, 35); rect(190, 320, 8, 35); rect(260, 320, 8, 35); rect(330, 320, 8, 35); rect(400, 320, 8, 35); rect(470, 320, 8, 35); rect(540, 320, 8, 35); }

Beispiel 4 - Interaktive Blume

function setup() { createCanvas(600, 400); } function draw() { background(200, 230, 255); // Boden fill(139, 90, 43); rect(0, 350, 600, 50); // Stängel stroke(50, 150, 50); strokeWeight(8); line(300, 350, 300, 200); // Blätter am Stängel fill(80, 180, 80); noStroke(); ellipse(290, 280, 40, 20); ellipse(310, 310, 40, 20); // Blütenblätter (Position beeinflusst von Maus) fill(255, 100, 150); noStroke(); // Die Blütenblätter "öffnen" sich basierend auf der Mausposition ellipse(300 - mouseX/15, 180, 50, 30); ellipse(300 + mouseX/15, 180, 50, 30); ellipse(300, 160 - mouseY/20, 30, 50); ellipse(300, 200 + mouseY/20, 30, 50); ellipse(270 - mouseX/20, 160, 40, 25); ellipse(330 + mouseX/20, 160, 40, 25); ellipse(270 - mouseX/20, 200, 40, 25); ellipse(330 + mouseX/20, 200, 40, 25); // Blütenmitte fill(255, 200, 0); circle(300, 180, 40); // Kleine Punkte in der Mitte fill(200, 150, 0); circle(295, 175, 5); circle(305, 175, 5); circle(300, 185, 5); circle(290, 182, 4); circle(310, 182, 4); // Sonne fill(255, 255, 100); noStroke(); circle(520, 60, 60); // Anleitung fill(100); textSize(12); text("Bewege die Maus um die Blume zu öffnen!", 10, 390); }

Beispiel 5 - Sternenhimmel

function setup() { createCanvas(600, 400); } function draw() { background(10, 10, 40); // Sterne (fest positioniert) fill(255, 255, 200); noStroke(); circle(50, 50, 3); circle(120, 80, 2); circle(200, 30, 4); circle(280, 90, 2); circle(350, 40, 3); circle(420, 70, 2); circle(500, 20, 3); circle(550, 60, 2); circle(80, 150, 2); circle(180, 120, 3); circle(320, 150, 2); circle(450, 130, 4); circle(520, 160, 2); circle(100, 200, 3); circle(250, 180, 2); circle(400, 200, 3); circle(550, 220, 2); // Mond fill(255, 255, 220); circle(480, 80, 80); // Krater fill(200, 200, 180); circle(470, 70, 15); circle(500, 90, 10); circle(460, 95, 8); // Berge/Silhouette fill(20, 20, 50); triangle(0, 400, 150, 280, 300, 400); triangle(200, 400, 400, 250, 600, 400); rect(0, 380, 600, 20); // Sternschnuppe an Mausposition stroke(255, 255, 150); strokeWeight(2); line(mouseX, mouseY, mouseX + 40, mouseY - 40); line(mouseX, mouseY, mouseX + 35, mouseY - 30); line(mouseX, mouseY, mouseX + 30, mouseY - 35); // Glühender Punkt fill(255, 255, 200); noStroke(); circle(mouseX, mouseY, 8); }

Diese Beispiele zeigen, was du schon mit den Grundlagen erstellen kannst:

  • Porträts: Gesichter mit beweglichen Elementen
  • Landschaften: Szenen mit Himmel, Boden und Objekten
  • Abstrakte Kunst: Geometrische Formen und Farben
  • Emoji-Szenen: Geschichten nur mit Emojis erzählen
  • Interaktive Bilder: Elemente, die auf die Maus reagieren

Tipp: Kombiniere verschiedene Techniken! Nutze mouseX und mouseY um Positionen, Größen oder sogar Farben zu beeinflussen.

Herzlichen Glückwunsch! Du hast die Grundlagen von p5.js gelernt:

Nächste Schritte