Samin12/skills

p5.js Produktionspipeline

Wann verwenden

Verwenden, wenn Benutzer anfordern: 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-Hochauflösungsexport.

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 formulieren. Was kommuniziert dieses Werk? Was bringt den Betrachter zum Innehalten? Was unterscheidet es von einem Code-Tutorial-Beispiel? Die Eingabe des Benutzers ist ein Ausgangspunkt – interpretiere 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 Programmieren“ aussieht, ist es falsch. Vor dem Ausliefern neu überdenken.

Ü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 Palette von Farben – du schreibst das Gemälde.

Proaktiv kreativ sein. Wenn der Benutzer nach „einem Partikelsystem“ fragt, ein Partikelsystem mit emergentem Schwarmverhalten, nachlaufenden Geisterechos, palettenverschobener Tiefennebel und einem atmenden Hintergrundrauschfeld liefern. Mindestens ein visuelles Detail enthalten, 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 eine kompositorische Hierarchie. Immer durchdachte Farben. Immer Mikrodetails, die erst bei genauer Betrachtung sichtbar werden.

Kohärente Ästhetik über Feature-Anzahl. Alle Elemente müssen einer einheitlichen visuellen Sprache dienen – gemeinsame Farbtemperatur, konsistente Strichstärken-Vokabular, harmonische Bewegungsgeschwindigkeiten. Eine Skizze mit zehn unzusammenhängenden 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, Grafiken, 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 § Pixelmanipulation
Audio-reaktiv	Audiodatei / Mikrofon	Klanggesteuerte generative Visuals	references/interaction.md § Audio-Eingabe

Technologie-Stack

Eine einzige 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	Integriert saveCanvas() / saveGif() / saveFrames()	PNG, GIF, Bildsequenz-Ausgabe
Aufnahme	CCapture.js (optional)	Deterministische Bildrate-Videoaufnahme (WebM, GIF)
Headless	Puppeteer + Node.js (optional)	Automatisiertes hochauflösendes Rendern, 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, Holzkohle, Feder – 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 der Standard – 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() ersetzt 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 folgt dem gleichen 6-stufigen Pfad:

KONZEPT → DESIGN → CODE → VORSCHAU → EXPORT → VERIFIZIERUNG

1. KONZEPT — Die kreative Vision formulieren: Stimmung, Farbwelt, Bewegungsvokabular, was dieses Werk einzigartig macht
2. DESIGN — Modus wählen, Leinwandgröße, Interaktionsmodell, Farbsystem, Exportformat. Konzept auf technische Entscheidungen abbilden
3. CODE — Einzelne HTML-Datei mit Inline-p5.js schreiben. Struktur: Globale Variablen → preload() → setup() → draw() → Hilfsfunktionen → Klassen → Ereignisbehandler
4. VORSCHAU — Im Browser öffnen, visuelle Qualität prüfen. In Zielauflösung testen. Leistung 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. VERIFIZIERUNG — Entspricht die Ausgabe dem Konzept? Ist sie in der beabsichtigten Anzeigegröße visuell beeindruckend? Würdest du sie rahmen?

Kreative Leitung

Ä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 Primitive, benutzerdefinierte Vertices, Bezier-Kurven, SVG-Pfade	references/shapes-and-geometry.md
Bewegungsstil	Easing, Federbasiert, Rauschgesteuert, Physiksimulation, Lerp, Gestaffelt	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, Drittelregel, organisches Streuen, gekachelt	references/core-api.md § Komposition
Interaktionsmodell	Maus folgen, Klick erzeugen, ziehen, Tastaturzustand, Scroll-gesteuert, Mikrofoneingabe	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-Sorting	references/visual-effects.md § Texturenerzeugung

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

Projektspezifische Erfindung

Für jedes Projekt mindestens eines erfinden:

• 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)
• Eine Interaktionsmechanik, die der Benutzer nicht verlangt hat, die das Werk aber aufwertet
• Eine Kompositionstechnik, die eine visuelle Hierarchie schafft

Philosophie der Parameterauslegung

Parameter sollten aus dem Algorithmus entstehen, 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, Zweige, 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:

• „color1“, „color2“, „size“ – bedeutungslos ohne Kontext
• Kippschalter für unzusammenhängende 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 Rausch-Oktaven ändert, ist gut. Ein Schieberegler „Partikelgröße“, der nur den Radius von ellipse() ändert, ist oberflächlich.

Arbeitsablauf

Schritt 1: Kreative Vision

Vor jedem Code formulieren:

• Stimmung / Atmosphäre: Was soll der Betrachter fühlen? Nachdenklich? Energisch? Beunruhigt? 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 Gleiten? Explosiver Ausbruch? Atmender Puls? Mechanische Präzision?
• Was macht DIESES anders: Was ist das eine, das diese Skizze einzigartig macht?

Die Eingabe des Benutzers auf ästhetische Entscheidungen abbilden. „Entspannender generativer Hintergrund“ erfordert eine völlig andere Herangehensweise als „Glitch-Datenvisualisierung“.

Schritt 2: Technisches Design

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

Schritt 3: Die Skizze codieren

Für interaktive generative Kunst (Seed-Erkundung, Parameteroptimierung): von templates/viewer.html ausgehen. Die Vorlage zuerst lesen, die festen Abschnitte (Seed-Navigation, Aktionen) behalten, den Algorithmus und die Parametersteuerungen ersetzen. Dies gibt dem Benutzer Seed-Vorher/Nächster/Zufällig/Springen, Parameter-Schieberegler 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:

• Seed-basierter 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 & Iterieren

• HTML-Datei direkt im Browser öffnen – kein Server für einfache Skizzen erforderlich
• Für loadImage()/loadFont() von lokalen Dateien: scripts/serve.sh oder python3 -m http.server verwenden
• Chrome DevTools Leistung-Tab, um 60fps zu prüfen
• In der Ziel-Exportauflösung testen, nicht nur in der Fenstergröße
• Parameter anpassen, bis das Visuelle dem Konzept aus Schritt …

[truncated for translation]