p5.js Produktionspipeline

Was macht p5.js Produktionspipeline?

Wann verwenden

Verwenden, wenn Benutzer nach Folgendem fragen: p5.js Skizzen, kreatives Programmieren, generative Kunst, interaktive Visualisierungen, Canvas-Animationen, browserbasierte visuelle Kunst, Datenvisualisierung, Shader-Effekte oder jedes p5.js-Projekt.

Was enthalten ist

Produktionspipeline für interaktive und generative visuelle Kunst mit p5.js. Erstellt browserbasierte Skizzen, generative Kunst, Datenvisualisierungen, interaktive Erlebnisse, 3D-Szenen, audio-reaktive Visuals und Bewegungsgrafiken – exportiert als HTML, PNG, GIF, MP4 oder SVG. Umfasst: 2D-/3D-Rendering, Rauschen- und Partikelsysteme, Strömungsfelder, Shader (GLSL), Pixelmanipulation, kinetische Typografie, WebGL-Szenen, Audioanalyse, Maus-/Tastaturinteraktion und Headless-Highres-Export.

Kreativstandard

Dies ist visuelle Kunst, die im Browser gerendert wird. Die Leinwand ist das Medium; der Algorithmus ist der Pinsel.

Bevor eine einzige Zeile Code geschrieben wird, das kreative Konzept klar formulieren. Was kommuniziert dieses Werk? Was bringt den Betrachter zum Innehalten? Was unterscheidet es von einem Code-Tutorial-Beispiel? Die Benutzeranfrage ist ein Ausgangspunkt – interpretiere sie mit kreativem Anspruch.

Exzellenz beim ersten Rendern ist nicht verhandelbar. Die Ausgabe muss beim ersten Laden visuell beeindruckend sein. Wenn sie wie eine p5.js-Tutorialübung, eine Standardkonfiguration oder „KI-generiertes kreatives Programmieren“ aussieht, ist sie falsch. Überdenken, bevor ausgeliefert wird.

Über das Referenzvokabular hinausgehen. Die Rauschfunktionen, Partikelsysteme, Farbpaletten und Shader-Effekte in den Referenzen sind ein Startvokabular. Für jedes Projekt kombinieren, schichten und erfinden. Der Katalog ist eine Farbpalette – du malst das Bild.

Proaktiv kreativ sein. Wenn der Benutzer nach „einem Partikelsystem“ fragt, ein Partikelsystem mit emergentem Schwarmverhalten, nachlaufenden Geisterechos, paletteverschobenem Tiefennebel und einem atmenden Hintergrundrauschfeld liefern. Mindestens ein visuelles Detail einbauen, das der Benutzer nicht gefordert hat, aber schätzen wird.

Dicht, geschichtet, durchdacht. Jeder Frame sollte das Betrachten belohnen. Niemals flache weiße Hintergründe. Immer kompositorische Hierarchie. Immer absichtsvolle Farbe. Immer Mikro-Details, die erst bei genauer Betrachtung sichtbar werden.

Kohärente Ästhetik über Funktionsanzahl. Alle Elemente müssen einer einheitlichen visuellen Sprache dienen – gemeinsame Farbtemperatur, konsistente Strichstärken-Vokabular, harmonische Bewegungsgeschwindigkeiten. Eine Skizze mit zehn zusammenhanglosen Effekten ist schlechter als eine mit drei, die zusammengehören.

Modi

Modus	Eingabe	Ausgabe	Referenz
Generative Kunst	Seed / Parameter	Prozedurale visuelle Komposition (stehend oder animiert)	references/visual-effects.md
Datenvisualisierung	Datensatz / API	Interaktive Diagramme, Graphen, benutzerdefinierte Datenanzeigen	references/interaction.md
Interaktives Erlebnis	Keine (Benutzer steuert)	Maus-/Tastatur-/Touch-gesteuerte Skizze	references/interaction.md
Animation / Bewegungsgrafiken	Timeline / Storyboard	Zeitgesteuerte Sequenzen, kinetische Typografie, Übergänge	references/animation.md
3D-Szene	Konzeptbeschreibung	WebGL-Geometrie, Beleuchtung, Kamera, Materialien	references/webgl-and-3d.md
Bildverarbeitung	Bilddatei(en)	Pixelmanipulation, Filter, Mosaik, Pointillismus	references/visual-effects.md § Pixel Manipulation
Audio-reaktiv	Audiodatei / Mikrofon	Klanggesteuerte generative Visuals	references/interaction.md § Audio Input

Stack

Einzelne in sich geschlossene HTML-Datei pro Projekt. Kein Build-Schritt erforderlich.

Ebene	Werkzeug	Zweck
Kern	p5.js 1.11.3 (CDN)	Canvas-Rendering, Mathematik, Transformationen, Ereignisbehandlung
3D	p5.js WebGL-Modus	3D-Geometrie, Kamera, Beleuchtung, GLSL-Shader
Audio	p5.sound.js (CDN)	FFT-Analyse, Amplitude, Mikrofoneingabe, Oszillatoren
Export	Integrierte saveCanvas() / saveGif() / saveFrames()	PNG, GIF, Bildsequenzausgabe
Aufnahme	CCapture.js (optional)	Deterministische Framerate-Videoaufnahme (WebM, GIF)
Headless	Puppeteer + Node.js (optional)	Automatisiertes Highres-Rendering, MP4 via ffmpeg
SVG	p5.js-svg 1.6.0 (optional)	Vektorausgabe für Druck – erfordert p5.js 1.x
Natürliche Medien	p5.brush (optional)	Aquarell, Kohle, Stift – erfordert p5.js 2.x + WEBGL
Textur	p5.grain (optional)	Filmkorn, Texturüberlagerungen
Schriftarten	Google Fonts / loadFont()	Benutzerdefinierte Typografie via OTF/TTF/WOFF2

Versionshinweis

p5.js 1.x (1.11.3) ist die Standardeinstellung – stabil, gut dokumentiert, breiteste Bibliothekskompatibilität. Dies verwenden, es sei denn, ein Projekt erfordert 2.x-Funktionen.

p5.js 2.x (2.2+) fügt hinzu: async setup() als Ersatz für preload(), OKLCH/OKLAB-Farbmodi, splineVertex(), Shader .modify()-API, variable Schriftarten, textToContours(), Zeigerereignisse. Erforderlich für p5.brush. Siehe references/core-api.md § p5.js 2.0.

Pipeline

Jedes Projekt durchläuft denselben 6-stufigen Pfad:

KONZEPT → DESIGN → CODE → VORSCHAU → EXPORT → VERIFIKATION

1. KONZEPT – Die kreative Vision artikulieren: Stimmung, Farbwelt, Bewegungsvokabular, was dieses Projekt einzigartig macht
2. DESIGN – Modus, Leinwandgröße, Interaktionsmodell, Farbsystem, Exportformat wählen. Konzept in technische Entscheidungen übersetzen
3. CODE – Einzelne HTML-Datei mit Inline-p5.js schreiben. Struktur: Globale → preload() → setup() → draw() → Hilfsfunktionen → Klassen → Ereignisbehandler
4. VORSCHAU – Im Browser öffnen, visuelle Qualität prüfen. Bei Zielauflösung testen. Performance prüfen
5. EXPORT – Ausgabe erfassen: saveCanvas() für PNG, saveGif() für GIF, saveFrames() + ffmpeg für MP4, Puppeteer für Headless-Batch
6. VERIFIKATION – Entspricht die Ausgabe dem Konzept? Ist sie in der beabsichtigten Anzeigegröße visuell beeindruckend? Würde man sie rahmen?

Kreative Richtung

Ästhetische Dimensionen

Dimension	Optionen	Referenz
Farbsystem	HSB/HSL, RGB, benannte Paletten, prozedurale Harmonie, Gradienteninterpolation	references/color-systems.md
Rauschvokabular	Perlin-Rauschen, Simplex, fraktal (oktaviert), Domain Warping, Curl-Rauschen	references/visual-effects.md § Noise
Partikelsysteme	Physikbasiert, Schwarmverhalten, Spur zeichnend, Attraktor-getrieben, Strömungsfeld folgend	references/visual-effects.md § Particles
Formensprache	Geometrische Primitive, benutzerdefinierte Vertizes, Bézierkurven, SVG-Pfade	references/shapes-and-geometry.md
Bewegungsstil	Eased, federbasiert, rauschgetrieben, Physiksimulation, lerped, gestuft	references/animation.md
Typografie	Systemschriftarten, geladene OTF, textToPoints()-Partikeltext, kinetisch	references/typography.md
Shader-Effekte	GLSL Fragment/Vertex, Filtershader, Nachbearbeitung, Feedback-Loops	references/webgl-and-3d.md § Shaders
Komposition	Raster, radial, goldener Schnitt, Drittelregel, organisches Streuen, gekachelt	references/core-api.md § Composition
Interaktionsmodell	Maus folgen, Klicken erzeugen, Ziehen, Tastaturzustand, scrollgesteuert, Mikrofoneingabe	references/interaction.md
Mischmodi	BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY	references/color-systems.md § Blend Modes
Schichtung	createGraphics()-Offscreen-Puffer, Alpha-Compositing, Maskierung	references/core-api.md § Offscreen Buffers
Textur	Perlin-Oberfläche, Punktierung, Schraffur, Halbton, Pixel-Sorting	references/visual-effects.md § Texture Generation

Projektbezogene Variationsregeln

Niemals Standardkonfigurationen verwenden. Für jedes Projekt:

• Benutzerdefinierte Farbpalette – niemals rohes fill(255, 0, 0). Immer eine entworfene Palette mit 3–7 Farben
• Benutzerdefiniertes Strichstärken-Vokabular – dünne Akzente (0,5), mittlere Struktur (1–2), fette Hervorhebung (3–5)
• Hintergrundbehandlung – niemals schlichtes background(0) oder background(255). Immer texturiert, verlaufend oder geschichtet
• Bewegungsvielfalt – unterschiedliche Geschwindigkeiten für verschiedene Elemente. Primär mit 1x, sekundär mit 0,3x, Umgebung mit 0,1x
• Mindestens ein erfundenes Element – ein benutzerdefiniertes Partikelverhalten, eine neuartige Rauschanwendung, eine einzigartige Interaktionsreaktion

Projektspezifische Erfindung

Für jedes Projekt mindestens eines erfinden:

• Eine benutzerdefinierte Farbpalette passend zur Stimmung (keine Voreinstellung)
• Eine neuartige Rauschfeldkombination (z. B. Curl-Rauschen + Domain Warp + Feedback)
• Ein einzigartiges Partikelverhalten (benutzerdefinierte Kräfte, benutzerdefinierte Spuren, benutzerdefiniertes Spawning)
• Ein Interaktionsmechanismus, den der Benutzer nicht angefordert hat, der das Stück aber aufwertet
• Eine Kompositionstechnik, die visuelle Hierarchie schafft

Parameterdesign-Philosophie

Parameter sollten aus dem Algorithmus hervorgehen, nicht aus einem generischen Menü. Frage: „Welche Eigenschaften dieses Systems sollten einstellbar sein?“

Gute Parameter legen den Charakter des Algorithmus offen:

• Mengen – wie viele Partikel, Äste, Zellen (steuert Dichte)
• Skalen – Rauschfrequenz, Elementgröße, Abstand (steuert Textur)
• Raten – Geschwindigkeit, Wachstumsrate, Abklingen (steuert Energie)
• Schwellenwerte – wann ändert sich das Verhalten? (steuert Dramatik)
• Verhältnisse – Proportionen, Gleichgewicht zwischen Kräften (steuert Harmonie)

Schlechte Parameter sind generische Steuerelemente, die nichts mit dem Algorithmus zu tun haben:

• „Farbe1“, „Farbe2“, „Größe“ – bedeutungslos ohne Kontext
• Kippschalter für zusammenhanglose Effekte
• Parameter, die nur das Aussehen ändern, nicht das Verhalten

Jeder Parameter sollte ändern, wie der Algorithmus denkt, nicht nur, wie er aussieht. Ein „Turbulenz“-Parameter, der die Rauschoctaven ändert, ist gut. Ein „Partikelgröße“-Schieberegler, der nur den ellipse()-Radius ändert, ist oberflächlich.

Arbeitsablauf

Schritt 1: Kreative Vision

Vor jedem Code artikulieren:

• Stimmung / Atmosphäre: Was soll der Betrachter fühlen? Nachdenklich? Energiegeladen? Verstörend? Verspielt?
• Visuelle Geschichte: Was passiert im Laufe der Zeit (oder bei Interaktion)? Aufbau? Verfall? Transformation? Oszillation?
• Farbwelt: Warm/kühl? Monochrom? Komplementär? Was ist der dominierende Farbton? Der Akzent?
• Formensprache: Organische Kurven? Scharfe Geometrie? Punkte? Linien? Gemischt?
• Bewegungsvokabular: Langsames Gleiten? Explosiver Ausbruch? Atmender Puls? Mechanische Präzision?
• Was macht DIESES anders: Was ist das eine, das diese Skizze einzigartig macht?

Die Benutzeranfrage auf ästhetische Entscheidungen abbilden. „Entspannender generativer Hintergrund“ erfordert ganz andere Dinge als „Glitch-Datenvisualisierung“.

Schritt 2: Technisches Design

• Modus – welcher der 7 Modi aus der obigen Tabelle
• Leinwandgröße – Querformat 1920×1080, Hochformat 1080×1920, quadratisch 1080×1080 oder responsiv windowWidth/windowHeight
• Renderer – P2D (Standard) oder WEBGL (für 3D, Shader, erweiterte Mischmodi)
• Bildrate – 60 fps (interaktiv), 30 fps (Umgebungsanimation) oder noLoop() (statisch generativ)
• Exportziel – Browseranzeige, PNG-Standbild, GIF-Schleife, MP4-Video, SVG-Vektor
• Interaktionsmodell – passiv (keine Eingabe), mausgesteuert, tastaturgesteuert, audio-reaktiv, scrollgesteuert
• Betrachter-UI – für interaktive generative Kunst, von templates/viewer.html ausgehen, das Seed-Navigation, Parameterschieberegler und Download bietet. Für einfache Skizzen oder Videoexport nacktes HTML verwenden

Schritt 3: Codieren der Skizze

Für interaktive generative Kunst (Seed-Erkundung, Parametereinstellung): von templates/viewer.html ausgehen. Die Vorlage zuerst lesen, die festen Abschnitte (Seed-Navigation, Aktionen) behalten, den Algorithmus und die Parametersteuerung ersetzen. Dies gibt dem Benutzer Seed vor/zurück/zufällig/springen, Parameterschieberegler mit Live-Update und PNG-Download – alles verdrahtet.

Für Animationen, Videoexport oder einfache Skizzen: nacktes HTML verwenden:

Einzelne HTML-Datei. Struktur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Projektname</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/[email protected]"></script> -->  <!-- SVG-Export -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- Videoaufnahme -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Konfiguration ===
const CONFIG = {
  seed: 42,
  // ... projektspezifische Parameter
};

// === Farbpalette ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === Globaler Zustand ===
let particles = [];

// === Preload (Schriftarten, Bilder, Daten) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Zustand initialisieren...
}

// === Draw-Schleife ===
function draw() {
  // Frame rendern...
}

// === Hilfsfunktionen ===
// ...

// === Klassen ===
class Particle {
  // ...
}

// === Ereignisbehandler ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

Wichtige Implementierungsmuster:

• Seeded-Zufall: Immer randomSeed() + noiseSeed() für Reproduzierbarkeit
• Farbmodus: colorMode(HSB, 360, 100, 100, 100) für intuitive Farbsteuerung verwenden
• Zustandstrennung: CONFIG für Parameter, PALETTE für Farben, Globale für veränderlichen Zustand
• Klassenbasierte Entitäten: Partikel, Agenten, Formen als Klassen mit update() + display()-Methoden
• Offscreen-Puffer: createGraphics() für geschichtete Komposition, Spuren, Masken

Schritt 4: Vorschau & Iteration

• HTML-Datei direkt im Browser öffnen – für grundlegende Skizzen ist kein Server erforderlich
• Für loadImage()/loadFont() von lokalen Dateien: scripts/serve.sh oder python3 -m http.server verwenden
• Chrome DevTools Performance-Tab, um 60 fps zu überprüfen
• In der Zielexportauflösung testen, nicht nur in der Fenstergröße
• Parameter anpassen, bis die Optik dem Konzept aus Schritt 1 entspricht

Schritt 5: Export

Exportmethoden nach Format:

Format	Methode	Anmerkungen
PNG	saveCanvas('name', 'png')	Schnellster Workflow. Löst Browser-Download aus
GIF	saveGif('name', 5, {})	5 Sekunden Schleife; drittes Argument für Optionen (unit: 's' oder 'f')
MP4	saveFrames() + ffmpeg	saveFrames() erzeugt PNG-Sequenz; scripts/encode.sh → ffmpeg für MP4
SVG	p5.js-svg Bibliothek	createCanvas() mit SVG-Renderer; dann save('name.svg')
TIFF / PNG (Headless)	Puppeteer + Node.js	Automatisierter Batch-Export mit hoher Auflösung

Headless-Batch-Export: node scripts/batch-export.js -i sketch.html -o output/ -n 50 -s 4x

• -i: Pfad zur HTML-Datei
• -o: Ausgabeverzeichnis
• -n: Anzahl der Durchläufe (verschiedene Seeds)
• -s: Supersampling-Faktor (z. B. 4x für 4× Auflösung)

Schritt 6: Verifikation

• Visuelle Qualität: Ist die Ausgabe visuell beeindruckend? Ist sie auf den ersten Blick fesselnd? Gibt es Mikro-Details?
• Konzepttreue: Entspricht die Ausgabe der kreativen Vision aus Schritt 1?
• Technische Korrektheit: Läuft sie mit 60 fps? Gibt es Rendering-Artefakte? Funktioniert die Interaktion wie beabsichtigt?
• Einzigartigkeit: Überschreitet sie das Tutorial-Niveau? Enthält sie mindestens ein erfundenes Element?
• Bereitschaft zur Veröffentlichung: Würde man sie signieren und teilen?

Referenzen

Die Referenzen in references/ enthalten ausführliche API-, Algorithmus- und Ästhetikanleitungen:

• references/core-api.md – p5.js grundlegende API, Offscreen-Puffer, Ereignisse, Konfiguration
• references/color-systems.md – HSB vs. RGB, benutzerdefinierte Paletten, Farbharmonien, Mischmodi
• references/visual-effects.md – Rauschen, Partikel, Texturgenerierung, Pixelmanipulation
• references/shapes-and-geometry.md – Vertizes, Kurven, Boole'sche Operationen, komplexe Formen
• references/animation.md – Zeitsteuerung, Übergänge, Kurven, kinetische Systeme, Timing
• references/interaction.md – Maus, Tastatur, Touch, Audioeingabe, Gamepads
• references/typography.md – Schriftarten laden, Textrendering, Partikeltext, Schriftkonturen
• references/webgl-and-3d.md – WebGL, Schattierung, GLSL-Shader, Kamerasteuerung
• references/math-utilities.md – Vektormathematik, lineare Algebra, geometrische Hilfsfunktionen
• templates/viewer.html – Voll funktionsfähige Vorlage mit Seed-Navigation, Parameterschiebereglern, Download-Schaltfläche
• scripts/batch-export.js – Node.js-Skript für automatisierten Headless-Export
• scripts/encode.sh – Shell-Skript für ffmpeg-Videokodierung aus Bildsequenzen
• scripts/serve.sh – Einfacher lokaler Entwicklungsserver