V4TIME/V4SKILL

p5.js Produktions-Pipeline

Wann verwenden

Verwenden Sie diese, wenn Benutzer Folgendes anfordern: p5.js-Skizzen, kreatives Codieren, generative Kunst, interaktive Visualisierungen, Canvas-Animationen, browserbasierte visuelle Kunst, Datenvisualisierung, Shader-Effekte oder jedes p5.js-Projekt.

Was enthalten ist

Produktions-Pipeline für interaktive und generative visuelle Kunst mit p5.js. Erstellt browserbasierte Skizzen, generative Kunst, Datenvisualisierungen, interaktive Erlebnisse, 3D-Szenen, audio-reaktive Grafiken und Bewegtbilder – 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-High-Res-Export.

Kreativstandard

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

Bevor Sie eine einzige Zeile Code schreiben, artikulieren Sie das kreative Konzept. Was kommuniziert dieses Stück? Was bringt den Betrachter dazu, das Scrollen zu unterbrechen? Was unterscheidet es von einem Code-Tutorial-Beispiel? Die Eingabeaufforderung des Benutzers ist ein Ausgangspunkt – interpretieren Sie sie mit kreativem Ehrgeiz.

Exzellenz beim ersten Rendern ist nicht verhandelbar. Die Ausgabe muss beim ersten Laden visuell beeindruckend sein. Wenn es wie eine p5.js-Tutorial-Übung, eine Standardkonfiguration oder „KI-generiertes kreatives Codieren“ aussieht, ist es falsch. Denken Sie neu, bevor Sie ausliefern.

Gehen Sie über das Referenzvokabular hinaus. Die Rauschfunktionen, Partikelsysteme, Farbpaletten und Shader-Effekte in den Referenzen sind ein Startvokabular. Für jedes Projekt kombinieren, schichten und erfinden Sie. Der Katalog ist eine Palette von Farben – Sie schreiben das Gemälde.

Seien Sie proaktiv kreativ. Wenn der Benutzer nach „einem Partikelsystem“ fragt, liefern Sie ein Partikelsystem mit aufkommendem Schwarmverhalten, nachlaufenden Geisterechos, paletteverschobenem Tiefennebel und einem atmenden Hintergrund-Rauschfeld. Fügen Sie mindestens ein visuelles Detail hinzu, das der Benutzer nicht verlangt hat, aber zu schätzen wissen wird.

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

Kohärente Ästhetik vor Funktionsanzahl. Alle Elemente müssen einer einheitlichen visuellen Sprache dienen – gemeinsame Farbtemperatur, konsistentes 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 (Standbild 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 / Bewegtbilder	Zeitleiste / 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 § Pixelmanipulation
Audio-reaktiv	Audiodatei / Mikrofon	Klanggesteuerte generative Grafiken	references/interaction.md § Audio-Eingabe

Stack

Eine 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, Mikrofoneingang, Oszillatoren
Export	Integriertes saveCanvas() / saveGif() / saveFrames()	PNG-, GIF-, Frame-Sequenz-Ausgabe
Aufnahme	CCapture.js (optional)	Deterministische Framerate-Videoaufnahme (WebM, GIF)
Headless	Puppeteer + Node.js (optional)	Automatisiertes High-Res-Rendering, MP4 via ffmpeg
SVG	p5.js-svg 1.6.0 (optional)	Vektorausgabe für den 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 Standardversion – stabil, gut dokumentiert, breiteste Bibliothekskompatibilität. Verwenden Sie diese, es sei denn, ein Projekt erfordert Funktionen von 2.x.

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 die gleiche 6-stufige Phase:

KONZEPT → DESIGN → CODE → VORSCHAU → EXPORT → VERIFIZIERUNG

1. KONZEPT – Artikulieren Sie die kreative Vision: Stimmung, Farbwelt, Bewegungsvokabular, was dies einzigartig macht
2. DESIGN – Wählen Sie Modus, Leinwandgröße, Interaktionsmodell, Farbsystem, Exportformat. Ordnen Sie das Konzept technischen Entscheidungen zu
3. CODE – Schreiben Sie eine einzelne HTML-Datei mit integriertem p5.js. Struktur: Globale → preload() → setup() → draw() → Helfer → Klassen → Ereignisbehandler
4. VORSCHAU – Öffnen Sie im Browser, überprüfen Sie die visuelle Qualität. Testen Sie in der Zielauflösung. Überprüfen Sie die Leistung
5. EXPORT – Erfassen Sie die Ausgabe: saveCanvas() für PNG, saveGif() für GIF, saveFrames() + ffmpeg für MP4, Puppeteer für headless Batch
6. VERIFIZIERUNG – Entspricht die Ausgabe dem Konzept? Ist sie visuell beeindruckend in der beabsichtigten Anzeigegröße? Würden Sie sie rahmen?

Kreative Richtung

Ästhetische Dimensionen

Dimension	Optionen	Referenz
Farbsystem	HSB/HSL, RGB, benannte Paletten, prozedurale Harmonie, Verlaufsinterpolation	references/color-systems.md
Rauschvokabular	Perlin-Rauschen, Simplex, fraktal (oktaviert), Domain-Warping, Curl-Noise	references/visual-effects.md § Rauschen
Partikelsysteme	Physikbasiert, Schwarmverhalten, Spurzeichnung, Attraktor-gesteuert, Strömungsfeld-folgend	references/visual-effects.md § Partikel
Formensprache	Geometrische Grundkörper, benutzerdefinierte Eckpunkte, Bezier-Kurven, SVG-Pfade	references/shapes-and-geometry.md
Bewegungsstil	Easing, federbasiert, rauschgesteuert, Physiksimulation, gelert, abgestuft	references/animation.md
Typografie	Systemschriftarten, geladene OTF, textToPoints()-Partikeltext, kinetisch	references/typography.md
Shader-Effekte	GLSL-Fragment/Vertex, Filter-Shader, Nachbearbeitung, Rückkopplungsschleifen	references/webgl-and-3d.md § Shader
Komposition	Raster, radial, goldener Schnitt, Drittel-Regel, organisches Streuen, gekachelt	references/core-api.md § Komposition
Interaktionsmodell	Maus folgen, Klicken erzeugen, Ziehen, Tastaturzustand, scrollgesteuert, Mikrofoneingang	references/interaction.md
Mischmodi	BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY	references/color-systems.md § Mischmodi
Schichtung	createGraphics()-Offscreen-Puffer, Alpha-Compositing, Maskierung	references/core-api.md § Offscreen-Puffer
Textur	Perlin-Oberfläche, Punktierung, Schraffur, Halbton, Pixel-Sortierung	references/visual-effects.md § Texturgenerierung

Projektbezogene Variationsregeln

Verwenden Sie niemals Standardkonfigurationen. 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 Betonung (3–5)
• Hintergrundbehandlung – niemals einfaches background(0) oder background(255). Immer texturiert, verlaufend oder geschichtet
• Bewegungsvielfalt – unterschiedliche Geschwindigkeiten für verschiedene Elemente. Primär bei 1x, sekundär bei 0,3x, Umgebungsgeschwindigkeit bei 0,1x
• Mindestens ein erfundenes Element – ein benutzerdefiniertes Partikelverhalten, eine neuartige Rauschanwendung, eine einzigartige Interaktionsreaktion

Projektspezifische Erfindung

Erfinden Sie für jedes Projekt mindestens eines der folgenden:

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

Philosophie des Parameterdesigns

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

Gute Parameter legen den Charakter des Algorithmus offen:

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

Schlechte Parameter sind generische Steuerungen, 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 verändern, nicht das Verhalten

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

Arbeitsablauf

Schritt 1: Kreative Vision

Artikulieren Sie vor jeglichem Code:

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

Ordnen Sie die Eingabeaufforderung des Benutzers ästhetischen Entscheidungen zu. „Entspannender, generativer Hintergrund“ erfordert ganz andere Entscheidungen als „Glitch-Datenvisualisierung“.

Schritt 2: Technisches Design

• Modus – welcher der 7 Modi aus der obigen Tabelle
• Leinwandgröße – Querformat 1920x1080, Hochformat 1080x1920, Quadrat 1080x1080 oder responsiv windowWidth/windowHeight
• Renderer – P2D (Standard) oder WEBGL (für 3D, Shader, erweiterte Mischmodi)
• Bildrate – 60fps (interaktiv), 30fps (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 beginnen Sie mit templates/viewer.html, das Seed-Navigation, Parameterschieberegler und Download bereitstellt. Für einfache Skizzen oder Videoexport verwenden Sie einfaches HTML

Schritt 3: Codieren der Skizze

Für interaktive generative Kunst (Seed-Erkundung, Parameteroptimierung): beginnen Sie mit templates/viewer.html. Lesen Sie die Vorlage zuerst, behalten Sie die festen Abschnitte (Seed-Navigation, Aktionen) bei, ersetzen Sie den Algorithmus und die Parametersteuerungen. Dies gibt dem Benutzer Seed-Vorher/Nächster/Zufall/Springen, Parameterschieberegler mit Live-Update und PNG-Download – alles verdrahtet.

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

Einzelne HTML-Datei. Struktur:

<!DOCTYPE html>
<html lang="de">
<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);
  // Initialisieren Sie den Zustand...
}

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

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

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

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

Wichtige Implementierungsmuster:

• Geseedete Zufälligkeit: Immer randomSeed() + noiseSeed() für Reproduzierbarkeit
• Farbmodus: Verwenden Sie colorMode(HSB, 360, 100, 100, 100) für intuitive Farbsteuerung
• Zustandstrennung: CONFIG für Parameter, PALETTE für Farben, globale Variablen 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

• Öffnen Sie die HTML-Datei direkt im Browser – für grundlegende Skizzen ist kein Server erforderlich
• Für loadImage()/loadFont() aus lokalen Dateien: verwenden Sie scripts/serve.sh oder python -m http.server
• Chrome DevTools Leistung-Tab, um 60fps zu überprüfen
• Testen Sie in der Ziel-Exportauflösung, nicht nur in der Fenstergröße
• Passen Sie Parameter an, bis die visuelle Darstellung mit dem Konzept aus Schritt 1 übereinstimmt