algorithmic-art

Algorithmische Philosophien sind Bewegungen der computergestützten Ästhetik, die mittels Code zum Ausdruck gebracht werden. Als Ergebnisse entstehen .md-Dateien (Philosophie), .html-Dateien (interaktiver Viewer) und .js-Dateien (generative Algorithmen).

Dies geschieht in zwei Schritten:

1. Erstellung einer algorithmischen Philosophie (.md-Datei)
2. Umsetzung durch die Erstellung generativer Kunst mit p5.js (.html- und .js-Dateien)

Führen Sie zunächst folgende Aufgabe durch:

ERSTELLUNG EINER ALGORITHMISCHEN PHILOSOPHIE

Erstellen Sie zunächst eine ALGORITHMISCHE PHILOSOPHIE (keine statischen Bilder oder Vorlagen), die wie folgt interpretiert wird:

• Rechenprozesse, emergentes Verhalten, mathematische Schönheit
• Gezielte Zufälligkeit, Rauschfelder, organische Systeme
• Teilchen, Strömungen, Felder, Kräfte
• Parametrische Variation und kontrolliertes Chaos

DAS KRITISCHE VERSTÄNDNIS

• Was als Grundlage dient: Einige subtile Eingaben oder Anweisungen des Nutzers, die berücksichtigt werden sollen, aber als Grundlage dienen; sie sollten die kreative Freiheit nicht einschränken.
• Was entsteht: Eine algorithmische Philosophie bzw. eine generative ästhetische Bewegung.
• Was als Nächstes geschieht: Dieselbe Version nimmt die Philosophie auf und DRÜCKT SIE IN CODE AUS – wodurch p5.js-Skizzen entstehen, die zu 90 % aus algorithmischer Generierung und zu 10 % aus wesentlichen Parametern bestehen.

Betrachten Sie diesen Ansatz:

• Verfassen Sie ein Manifest für eine Bewegung der generativen Kunst
• In der nächsten Phase geht es darum, den Algorithmus zu schreiben, der das Manifest zum Leben erweckt

Die Philosophie muss folgende Aspekte betonen: Algorithmischer Ausdruck. Emergentes Verhalten. Computergestützte Schönheit. Durch Initialwerte ausgelöste Variation.

WIE MAN EINE ALGORITHMISCHE PHILOSOPHIE ENTWICKELT

Geben Sie der Bewegung einen Namen (1–2 Wörter): „Organische Turbulenz“ / „Quantenharmonien“ / „Emergenter Stillstand“

Formulieren Sie die Philosophie (4–6 Absätze – prägnant, aber vollständig):

Um das ALGORITHMISCHE Wesen zu erfassen, beschreiben Sie, wie sich diese Philosophie manifestiert durch:

• Rechenprozesse und mathematische Beziehungen?
• Rauschfunktionen und Zufallsmustern?
• Partikelverhalten und Felddynamik?
• Zeitliche Entwicklung und Systemzustände?
• Parametrische Variation und emergente Komplexität?

WICHTIGE RICHTLINIEN:

• Redundanz vermeiden: Jeder algorithmische Aspekt sollte nur einmal erwähnt werden. Wiederholungen von Konzepten aus der Rauschtheorie, der Teilchendynamik oder mathematischen Prinzipien sind zu vermeiden, es sei denn, sie verleihen dem Text zusätzliche Tiefe.
• Betonen Sie WIEDERHOLT die handwerkliche Qualität: Die Philosophie MUSS mehrfach hervorheben, dass der endgültige Algorithmus den Eindruck vermitteln sollte, als hätte seine Entwicklung unzählige Stunden in Anspruch genommen, als sei er mit Sorgfalt verfeinert worden und stamme von jemandem, der auf seinem Gebiet zur absoluten Spitze gehört. Diese Darstellung ist unerlässlich – wiederholen Sie Formulierungen wie „sorgfältig ausgearbeiteter Algorithmus“, „das Ergebnis fundierter Fachkenntnisse im Bereich der Informatik“, „sorgfältige Optimierung“ und „Implementierung auf Meisterebene“.
• Lassen Sie kreativen Spielraum: Seien Sie konkret in Bezug auf die algorithmische Ausrichtung, aber prägnant genug, damit der nächste Claude Raum hat, interpretative Implementierungsentscheidungen auf einem extrem hohen handwerklichen Niveau zu treffen.

Die Philosophie muss die nächste Version leiten, Ideen ALGORITHMISCH auszudrücken, nicht durch statische Bilder. Die Schönheit liegt im Prozess, nicht im endgültigen Bild.

BEISPIELE FÜR DIE PHILOSOPHIE

„Organische Turbulenz“ Philosophie: Durch Naturgesetze gebändigtes Chaos, Ordnung, die aus Unordnung entsteht. Algorithmischer Ausdruck: Strömungsfelder, angetrieben von geschichtetem Perlin-Rauschen. Tausende von Partikeln folgen Vektorkräften, ihre Spuren summieren sich zu organischen Dichtekarten. Mehrere Rauschoktaven erzeugen turbulente Bereiche und ruhige Zonen. Farbe entsteht aus Geschwindigkeit und Dichte – schnelle Partikel leuchten hell, langsame verblassen zu Schatten. Der Algorithmus läuft bis zum Gleichgewicht – einem sorgfältig abgestimmten Gleichgewicht, bei dem jeder Parameter durch unzählige Iterationen von einem Meister der computergestützten Ästhetik verfeinert wurde.

„Quantum Harmonics“ Philosophie: Diskrete Einheiten, die wellenartige Interferenzmuster aufweisen. Algorithmischer Ausdruck: Partikel, die auf einem Gitter initialisiert werden und jeweils einen Phasenwert tragen, der sich durch Sinuswellen entwickelt. Wenn sich Partikel nahekommen, interferieren ihre Phasen – konstruktive Interferenz erzeugt helle Knoten, destruktive Interferenz erzeugt Leerstellen. Einfache harmonische Schwingungen erzeugen komplexe, emergent entstehende Mandalas. Das Ergebnis einer akribischen Frequenzkalibrierung, bei der jedes Verhältnis sorgfältig ausgewählt wurde, um resonante Schönheit zu erzeugen.

„Recursive Whispers“ Philosophie: Selbstähnlichkeit über verschiedene Skalen hinweg, unendliche Tiefe in endlichem Raum. Algorithmischer Ausdruck: Verzweigungsstrukturen, die sich rekursiv unterteilen. Jeder Zweig ist leicht zufällig angeordnet, unterliegt jedoch den Beschränkungen des Goldenen Schnitts. L-Systeme oder rekursive Unterteilung erzeugen baumartige Formen, die sowohl mathematisch als auch organisch wirken. Subtile Rauschstörungen durchbrechen die perfekte Symmetrie. Die Strichstärken nehmen mit jeder Rekursionsstufe ab. Jeder Verzweigungswinkel ist das Ergebnis tiefgreifender mathematischer Erforschung.

„Field Dynamics“ Philosophie: Unsichtbare Kräfte, die durch ihre Auswirkungen auf Materie sichtbar werden. Algorithmischer Ausdruck: Vektorfelder, die aus mathematischen Funktionen oder Rauschen konstruiert werden. Teilchen entstehen an Kanten, fließen entlang von Feldlinien und vergehen, wenn sie ein Gleichgewicht oder Grenzen erreichen. Mehrere Felder können Teilchen anziehen, abstoßen oder rotieren lassen. Die Visualisierung zeigt nur die Spuren – geisterhafte Zeugnisse unsichtbarer Kräfte. Ein computergenerierter Tanz, akribisch choreografiert durch Kraftgleichgewicht.

„Stochastische Kristallisation“ Philosophie: Zufällige Prozesse, die zu geordneten Strukturen kristallisieren. Algorithmischer Ausdruck: Zufällige Kreispackung oder Voronoi-Tessellation. Man beginnt mit zufälligen Punkten und lässt sie sich durch Relaxationsalgorithmen entwickeln. Die Zellen drängen sich auseinander, bis ein Gleichgewicht erreicht ist. Die Farbgebung basiert auf Zellgröße, Nachbaranzahl oder Abstand zum Zentrum. Die organische Kachelung, die dabei entsteht, wirkt zugleich zufällig und unvermeidlich. Jeder Startwert erzeugt eine einzigartige kristalline Schönheit – das Kennzeichen eines generativen Algorithmus auf Meisterebene.

Dies sind verkürzte Beispiele. Die eigentliche algorithmische Philosophie sollte 4–6 ausführliche Absätze umfassen.

GRUNDPRINZIPIEN

• ALGORITHMISCHE PHILOSOPHIE: Schaffung einer computergestützten Weltanschauung, die durch Code zum Ausdruck kommt
• PROZESS VOR ERGEBNIS: Betonen Sie stets, dass Schönheit aus der Ausführung des Algorithmus entsteht – jeder Durchlauf ist einzigartig
• PARAMETRISCHER AUSDRUCK: Ideen werden durch mathematische Beziehungen, Kräfte und Verhaltensweisen vermittelt – nicht durch statische Komposition
• KÜNSTLERISCHE FREIHEIT: Der nächste Claude interpretiert die Philosophie algorithmisch – schaffe Raum für kreative Umsetzung
• REINE GENERATIVE KUNST: Hier geht es darum, LEBENDIGE ALGORITHMEN zu schaffen, nicht statische Bilder mit Zufallselementen
• MEISTERHAFTE HANDWERKSKUNST: Betonen Sie immer wieder, dass der endgültige Algorithmus den Eindruck vermitteln muss, sorgfältig ausgearbeitet und durch unzählige Iterationen verfeinert worden zu sein – das Ergebnis fundierter Fachkenntnis von jemandem, der in der computergestützten Ästhetik zur absoluten Spitze seines Fachgebiets gehört

Die algorithmische Philosophie sollte 4–6 Absätze umfassen. Füllen Sie sie mit poetischer Computerphilosophie, die die beabsichtigte Vision zum Ausdruck bringt. Vermeiden Sie es, dieselben Punkte zu wiederholen. Geben Sie diese algorithmische Philosophie als .md-Datei aus.

ABLEITUNG DES KONZEPTUELLEN KERNES

ENTSCHEIDENDER SCHRITT: Identifizieren Sie vor der Implementierung des Algorithmus den subtilen konzeptionellen roten Faden aus der ursprünglichen Anfrage.

DAS WESENTLICHE PRINZIP: Das Konzept ist ein subtiler, nischenbezogener Bezug, der in den Algorithmus selbst eingebettet ist – nicht immer wörtlich, aber stets raffiniert. Jemand, der mit dem Thema vertraut ist, sollte es intuitiv spüren, während andere einfach eine meisterhafte generative Komposition erleben. Die algorithmische Philosophie liefert die rechnerische Sprache. Das abgeleitete Konzept liefert die Seele – die stille konzeptionelle DNA, die unsichtbar in Parameter, Verhaltensweisen und Emergenzmuster eingewoben ist.

Das ist SEHR WICHTIG: Der Bezug muss so raffiniert sein, dass er die Tiefe des Werks verstärkt, ohne sich selbst zu offenbaren. Stellen Sie sich das wie einen Jazzmusiker vor, der durch algorithmische Harmonien ein anderes Lied zitiert – nur diejenigen, die es kennen, werden es erkennen, aber jeder schätzt die generative Schönheit.

P5.JS-IMPLEMENTIERUNG

Nachdem die Philosophie UND der konzeptionelle Rahmen festgelegt sind, setzen Sie diese durch Code um. Halten Sie inne, um Ihre Gedanken zu ordnen, bevor Sie fortfahren. Verwenden Sie ausschließlich die entwickelte algorithmische Philosophie und die folgenden Anweisungen.

⚠️ SCHRITT 0: LESEN SIE ZUERST DIE VORLAGE ⚠️

WICHTIG: BEVOR Sie HTML schreiben:

1. Lies die Datei „templates/viewer.html“ mit dem Read-Tool
2. Macht euch mit der genauen Struktur, dem Styling und dem Anthropic-Brandingvertraut
3. Verwenden Sie diese Datei als WÖRTLICHEN AUSGANGSPUNKT – nicht nur als Inspiration
4. Behalten Sie alle FESTGELEGTEN Abschnitte genau so bei, wie sie dargestellt sind (Kopfzeile, Struktur der Seitenleiste, Anthropic-Farben/-Schriftarten, Seed-Steuerelemente, Aktionsschaltflächen)
5. Ersetzen Sie nur die in den Kommentaren der Datei markiertenVARIABLEN Abschnitte (Algorithmus, Parameter, UI-Steuerelemente für Parameter)

Vermeiden Sie:

• ❌ HTML von Grund auf neu erstellen
• ❌ Eigene Stile oder Farbschemata erfinden
• ❌ Verwendung von Systemschriftarten oder dunklen Designs
• ❌ Die Struktur der Seitenleiste ändern

Beachten Sie folgende Vorgehensweisen:

• ✅ Kopieren Sie die HTML-Struktur der Vorlage exakt
• ✅ Behalten Sie das Anthropic-Branding bei (Schriftarten „Poppins“ und „Lora“, helle Farben, Hintergrund mit Farbverlauf)
• ✅ Behalten Sie das Layout der Seitenleiste bei (Seed → Parameter → Farben? → Aktionen)
• ✅ Ersetzen Sie nur den p5.js-Algorithmus und die Parametersteuerelemente

Die Vorlage ist die Grundlage. Bauen Sie darauf auf, statt sie neu zu erstellen.

Um computergestützte Kunst in Galeriequalität zu schaffen, die lebt und atmet, nutze die algorithmische Philosophie als Grundlage.

TECHNISCHE ANFORDERUNGEN

Zufallsgenerierung mit Startwert (Art Blocks-Muster):

// Verwende IMMER einen Startwert für die Reproduzierbarkeit
let seed = 12345; // oder einen Hashwert aus der Benutzereingabe
randomSeed(seed);
noiseSeed(seed);

Parameterstruktur – BEACHTEN SIE DIE PHILOSOPHIE:

Um Parameter festzulegen, die sich natürlich aus der algorithmischen Philosophie ergeben, überlege dir: „Welche Eigenschaften dieses Systems lassen sich anpassen?“

let params = {
  seed: 12345,  // Füge immer einen Startwert für die Reproduzierbarkeit ein
  // Farben
  // Füge Parameter hinzu, die DEINEN Algorithmus steuern:
  // - Mengen (wie viele?)
  // - Skalen (wie groß? wie schnell?)
  // – Wahrscheinlichkeiten (wie wahrscheinlich?)
  // – Verhältnisse (in welchem Verhältnis?)
  // – Winkel (in welche Richtung?)
  // – Schwellenwerte (wann ändert sich das Verhalten?)
};

Um effektive Parameter zu entwerfen, konzentrieren Sie sich auf die Eigenschaften, die das System anpassen muss, anstatt in „Mustertypen“ zu denken.

Kernalgorithmus – BRINGEN SIE DIE PHILOSOPHIE ZUM AUSDRUCK:

WICHTIG: Die algorithmische Philosophie sollte vorgeben, was entwickelt werden soll.

Um die Philosophie durch Code zum Ausdruck zu bringen, sollte man nicht fragen: „Welches Muster soll ich verwenden?“, sondern stattdessen: „Wie kann ich diese Philosophie durch Code zum Ausdruck bringen?“

Wenn es bei der Philosophie um organische Entstehung geht, sollten Sie Folgendes in Betracht ziehen:

• Elemente, die sich im Laufe der Zeit ansammeln oder wachsen
• Zufallsprozesse, die durch natürliche Regeln begrenzt sind
• Rückkopplungsschleifen und Wechselwirkungen

Wenn es bei der Philosophie um mathematische Schönheit geht, sollten Sie Folgendes in Betracht ziehen:

• Geometrische Beziehungen und Verhältnisse
• Trigonometrische Funktionen und Harmonische
• Präzise Berechnungen, die unerwartete Muster erzeugen

Wenn es bei der Philosophie um kontrolliertes Chaos geht, sollten Sie Folgendes in Betracht ziehen:

• Zufällige Schwankungen innerhalb strenger Grenzen
• Bifurkation und Phasenübergänge
• Ordnung, die aus Unordnung entsteht

Der Algorithmus entspringt der Philosophie, nicht einem Menü mit Optionen.

Lassen Sie bei der Umsetzung kreative und originelle Entscheidungen von der konzeptionellen Essenz leiten. Entwickeln Sie etwas, das die Vision für diese spezielle Anforderung zum Ausdruck bringt.

Canvas-Einrichtung: Standard-p5.js-Struktur:

function setup() {
  createCanvas(1200, 1200);
  // Initialisiere dein System
}

function draw() {
  // Dein generativer Algorithmus
  // Kann statisch (noLoop) oder animiert sein
}

ANFORDERUNGEN AN DIE HANDWERKLICHE AUSFÜHRUNG

WICHTIG: Um Meisterschaft zu erlangen, erstellen Sie Algorithmen, die den Eindruck erwecken, als seien sie durch unzählige Iterationen eines meisterhaften generativen Künstlers entstanden. Passen Sie jeden Parameter sorgfältig an. Stellen Sie sicher, dass jedes Muster mit Absicht entsteht. Dies ist KEIN zufälliges Rauschen – dies ist KONTROLLIERTES CHAOS, verfeinert durch tiefgreifende Fachkenntnis.

• Ausgewogenheit: Komplexität ohne visuelles Rauschen, Ordnung ohne Starrheit
• Farbharmonie: Durchdachte Farbpaletten, keine zufälligen RGB-Werte
• Komposition: Auch bei Zufälligkeit visuelle Hierarchie und Fluss bewahren
• Leistung: Reibungslose Ausführung, bei Animationen für Echtzeit optimiert
• Reproduzierbarkeit: Derselbe Startwert erzeugt IMMER identische Ergebnisse

AUSGABEFORMAT

Ausgabe:

1. Algorithmische Philosophie – Als Markdown oder Text zur Erläuterung der generativen Ästhetik
2. Einzelnes HTML-Artefakt – In sich geschlossenes, interaktives generatives Kunstwerk, erstellt anhand von „templates/viewer.html“ (siehe SCHRITT 0 und den nächsten Abschnitt)

Das HTML-Artefakt enthält alles: p5.js (aus dem CDN), den Algorithmus, die Parametersteuerung und die Benutzeroberfläche – alles in einer einzigen Datei, die sofort in claude.ai-Artefakten oder jedem beliebigen Browser funktioniert. Beginnen Sie mit der Vorlagendatei, nicht bei Null.

ERSTELLUNG INTERAKTIVER ARTEFAKTE

HINWEIS: Die Datei „templates/viewer.html“ sollte bereits gelesen worden sein (siehe SCHRITT 0). Verwenden Sie diese Datei als Ausgangspunkt.

Um die Erkundung der generativen Kunst zu ermöglichen, erstellen Sie ein einzelnes, in sich geschlossenes HTML-Artefakt. Stellen Sie sicher, dass dieses Artefakt sofort in claude.ai oder jedem beliebigen Browser funktioniert – ohne dass eine Einrichtung erforderlich ist. Betten Sie alles inline ein.

WICHTIG: WAS IST FEST UND WAS IST VARIABEL?

Die Datei „templates/viewer.html“ bildet die Grundlage. Sie enthält genau die erforderliche Struktur und das benötigte Styling.

FEST (immer genau wie angegeben einbinden):

• Layoutstruktur (Kopfzeile, Seitenleiste, Hauptanzeigebereich)
• Anthropic-Branding (UI-Farben, Schriftarten, Farbverläufe)
• „Seed“-Bereich in der Seitenleiste:
  • Seed-Anzeige
  • Schaltflächen „Zurück“/„Weiter“
  • Schaltfläche „Zufällig“
  • Springe zur Startwert-Eingabe + „Go“-Schaltfläche
• Aktionsbereich in der Seitenleiste:
  • Schaltfläche „Neu generieren“
  • Schaltfläche „Zurücksetzen“

VARIABLE (für jedes Kunstwerk individuell anpassen):

• Der gesamte p5.js-Algorithmus (Setup/Draw/Klassen)
• Das Parameter-Objekt (definiert, was das Kunstwerk benötigt)
• Der Abschnitt „Parameter“ in der Seitenleiste:
  • Anzahl der Parameterregler
  • Parameternamen
  • Min-/Max-/Schrittwerte für Schieberegler
  • Steuerelementtypen (Schieberegler, Eingabefelder usw.)
• Abschnitt „Farben“ (optional):
  • Für manche Grafiken werden Farbauswahlfelder benötigt
  • Manche Grafiken verwenden möglicherweise feste Farben
  • Manche Grafiken sind möglicherweise einfarbig (keine Farbsteuerelemente erforderlich)
  • Entscheiden Sie sich je nach den Anforderungen des Bildmaterials

Jedes Kunstwerk sollte über einzigartige Parameter und einen eigenen Algorithmus verfügen! Die festgelegten Teile sorgen für eine einheitliche Benutzererfahrung – alles andere bringt die einzigartige Vision zum Ausdruck.

ERFORDERLICHE FUNKTIONEN

1. Parametersteuerung

• Schieberegler für numerische Parameter (Partikelanzahl, Rauschskala, Geschwindigkeit usw.)
• Farbauswahl für Palettenfarben
• Echtzeit-Aktualisierungen bei Änderungen der Parameter
• „Zurücksetzen“-Schaltfläche zum Wiederherstellen der Standardeinstellungen

2. Startwert-Navigation

• Anzeige der aktuellen Seed-Nummer
• Schaltflächen „Zurück“ und „Weiter“ zum Durchblättern der Startwerte
• Schaltfläche „Zufällig“ für einen zufälligen Startwert
• Eingabefeld zum Springen zu einem bestimmten Startwert
• Auf Wunsch 100 Varianten generieren (Startwerte 1–100)

3. Struktur mit einem einzelnen Artefakt

WICHTIG: Dies ist ein einzelnes Artefakt. Keine externen Dateien, keine Importe (außer p5.js-CDN). Alles inline.

4. Implementierungsdetails – DIE SEITENLEISTE ERSTELLEN

Die Struktur der Seitenleiste:

1. Seed (FIXED) – Immer genau wie gezeigt einfügen:

• Anzeige des Startwerts
• Schaltflächen „Zurück/Weiter/Zufällig/Springen“

2. Parameter (VARIABEL) – Erstelle Steuerelemente für das Bild:

   Parametername
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>Fügen Sie so viele „control-group“-Divs hinzu, wie es Parameter gibt.</p>
<p><strong>3. Farben (OPTIONAL/VARIABLE)</strong> – Einfügen, wenn die Grafik anpassbare Farben benötigt:</p>
<ul>
<li>Farbauswahlfelder hinzufügen, wenn Benutzer die Palette steuern sollen</li>
<li>Diesen Abschnitt überspringen, wenn die Grafik feste Farben verwendet</li>
<li>Überspringen, wenn das Bild einfarbig ist</li>
</ul>
<p><strong>4. Aktionen (FEST)</strong> – Immer genau wie abgebildet einfügen:</p>
<ul>
<li>Schaltfläche „Neu generieren“</li>
<li>Schaltfläche „Zurücksetzen“</li>
<li>Schaltfläche „PNG herunterladen“</li>
</ul>
<p><strong>Anforderungen</strong>:</p>
<ul>
<li>Die Steuerelemente für den Startwert müssen funktionieren (vorherige/nächste/zufällig/springen/anzeigen)</li>
<li>Alle Parameter müssen über UI-Steuerelemente verfügen</li>
<li>Die Schaltflächen „Neu generieren“, „Zurücksetzen“ und „Herunterladen“ müssen funktionieren</li>
<li>Behalte das Anthropic-Branding bei (UI-Design, nicht die Farben der Grafik)</li>
</ul>
<h3>VERWENDUNG DES ARTEFAKTS</h3>
<p>Das HTML-Artefakt funktioniert sofort:</p>
<ol>
<li><strong>In claude.ai</strong>: Wird als interaktives Artefakt angezeigt – läuft sofort</li>
<li><strong>Als Datei</strong>: Speichern und in einem beliebigen Browser öffnen – kein Server erforderlich</li>
<li><strong>Freigabe</strong>: Senden Sie die HTML-Datei – sie ist vollständig in sich geschlossen</li>
</ol>

<h2>VARIATIONEN & ERKUNDUNG</h2>
<p>Das Artefakt enthält standardmäßig eine Seed-Navigation (Schaltflächen „Zurück“, „Weiter“ und „Zufällig“), sodass Nutzer Variationen erkunden können, ohne mehrere Dateien erstellen zu müssen. Wenn der Nutzer bestimmte Variationen hervorheben möchte:</p>
<ul>
<li>Voreingestellte Startwerte einbinden (Schaltflächen für „Variation 1: Startwert 42“, „Variation 2: Startwert 127“ usw.)</li>
<li>Einen „Galerie-Modus“ hinzufügen, der Miniaturansichten mehrerer Startwerte nebeneinander anzeigt</li>
<li>Alles innerhalb desselben einzelnen Artefakts</li>
</ul>
<p>Dies ist vergleichbar mit der Erstellung einer Serie von Drucken von derselben Druckplatte – der Algorithmus ist konsistent, aber jeder Startwert offenbart unterschiedliche Facetten seines Potenzials. Durch den interaktiven Charakter entdecken Nutzer ihre eigenen Favoriten, indem sie den Startwert-Raum erkunden.</p>

<h2>DER KREATIVE PROZESS</h2>
<p><strong>Anfrage des Nutzers</strong> → <strong>Algorithmische Philosophie</strong> → <strong>Umsetzung</strong></p>
<p>Jede Anfrage ist einzigartig. Der Prozess umfasst:</p>
<ol>
<li><strong>Die Absicht des Nutzers interpretieren</strong> – Welche Ästhetik wird angestrebt?</li>
<li><strong>Entwicklung einer algorithmischen Philosophie</strong> (4–6 Absätze), die den rechnerischen Ansatz beschreibt</li>
<li><strong>Umsetzung in Code</strong> – Erstellung des Algorithmus, der diese Philosophie zum Ausdruck bringt</li>
<li><strong>Entwurf geeigneter Parameter</strong> – Was sollte einstellbar sein?</li>
<li><strong>Entwicklung passender UI-Steuerelemente</strong> – Schieberegler/Eingabefelder für diese Parameter</li>
</ol>
<p><strong>Die Konstanten</strong>:</p>
<ul>
<li>Anthropisches Branding (Farben, Schriftarten, Layout)</li>
<li>Seed-Navigation (immer vorhanden)</li>
<li>In sich geschlossenes HTML-Artefakt</li>
</ul>
<p><strong>Alles andere ist variabel</strong>:</p>
<ul>
<li>Der Algorithmus selbst</li>
<li>Die Parameter</li>
<li>Die UI-Steuerelemente</li>
<li>Das visuelle Ergebnis</li>
</ul>
<p>Um die besten Ergebnisse zu erzielen, vertrauen Sie auf Kreativität und lassen Sie sich bei der Umsetzung von der Philosophie leiten.</p>

<h2>RESSOURCEN</h2>
<p>Diese Fertigkeit umfasst hilfreiche Vorlagen und Dokumentation:</p>
<ul>
<li><p><strong>templates/viewer.html</strong>: ERFORDERLICHER AUSGANGSPUNKT für alle HTML-Artefakte.</p>
<ul>
<li>Dies ist die Grundlage – enthält die exakte Struktur und das Anthropic-Branding</li>
<li><strong>Unverändert belassen</strong>: Layoutstruktur, Anordnung der Seitenleiste, Anthropic-Farben/-Schriftarten, Seed-Steuerelemente, Aktionsschaltflächen</li>
<li><strong>Ersetzen</strong>: Den p5.js-Algorithmus, die Parameterdefinitionen und die UI-Steuerelemente im Abschnitt „Parameter“</li>
<li>Die ausführlichen Kommentare in der Datei kennzeichnen genau, was beibehalten und was ersetzt werden soll</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong>: Referenz für Best Practices bei p5.js und Prinzipien der Codestruktur.</p>
<ul>
<li>Zeigt, wie man Parameter organisiert, zufällige Startwerte verwendet und Klassen strukturiert</li>
<li>KEIN Mustermenü – nutze diese Prinzipien, um einzigartige Algorithmen zu erstellen</li>
<li>Algorithmen direkt in das HTML-Dokument einbetten (keine separaten .js-Dateien erstellen)</li>
</ul>
</li>
</ul>
<p><strong>Wichtiger Hinweis</strong>:</p>
<ul>
<li>Die <strong>Vorlage ist der AUSGANGSPUNKT</strong>, keine Inspiration</li>
<li>Der <strong>Algorithmus ist der Ort, an dem man</strong> etwas Einzigartiges erschafft</li>
<li>Kopieren Sie nicht das Beispiel zum Strömungsfeld – entwickeln Sie das, was die Philosophie erfordert</li>
<li>Behalten Sie jedoch die genaue UI-Struktur und das Anthropic-Branding aus der Vorlage bei</li>
</ul>                                
                                

                                    
                                        Auf GitHub ansehen
                                        
                                    
                                    
---
name: algorithmic-art
description: Create algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
license: Complete terms in LICENSE.txt
---

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:
1. Algorithmic Philosophy Creation (.md file)
2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

## ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
- Computational processes, emergent behavior, mathematical beauty
- Seeded randomness, noise fields, organic systems
- Particles, flows, fields, forces
- Parametric variation and controlled chaos

### THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
- What is created: An algorithmic philosophy/generative aesthetic movement.
- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:
- Write a manifesto for a generative art movement
- The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

**Articulate the philosophy** (4-6 paragraphs - concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:
- Computational processes and mathematical relationships?
- Noise functions and randomness patterns?
- Particle behaviors and field dynamics?
- Temporal evolution and system states?
- Parametric variation and emergent complexity?

**CRITICAL GUIDELINES:**
- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

### PHILOSOPHY EXAMPLES

**"Organic Turbulence"**
Philosophy: Chaos constrained by natural law, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.

**"Quantum Harmonics"**
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.

**"Recursive Whispers"**
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.

**"Field Dynamics"**
Philosophy: Invisible forces made visible through their effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.

**"Stochastic Crystallization"**
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.

*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*

### ESSENTIAL PRINCIPLES
- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics

**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

---

## DEDUCING THE CONCEPTUAL SEED

**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.

**THE ESSENTIAL PRINCIPLE**:
The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.

This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.

---

## P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.

### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️

**CRITICAL: BEFORE writing any HTML:**

1. **Read** `templates/viewer.html` using the Read tool
2. **Study** the exact structure, styling, and Anthropic branding
3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)

**Avoid:**
- ❌ Creating HTML from scratch
- ❌ Inventing custom styling or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure

**Follow these practices:**
- ✅ Copy the template's exact HTML structure
- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Replace only the p5.js algorithm and parameter controls

The template is the foundation. Build on it, don't rebuild it.

---

To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.

### TECHNICAL REQUIREMENTS

**Seeded Randomness (Art Blocks Pattern)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```

**Parameter Structure - FOLLOW THE PHILOSOPHY**:

To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"

```javascript
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};
```

**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**

**Core Algorithm - EXPRESS THE PHILOSOPHY**:

**CRITICAL**: The algorithmic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"

If the philosophy is about **organic emergence**, consider using:
- Elements that accumulate or grow over time
- Random processes constrained by natural rules
- Feedback loops and interactions

If the philosophy is about **mathematical beauty**, consider using:
- Geometric relationships and ratios
- Trigonometric functions and harmonics
- Precise calculations creating unexpected patterns

If the philosophy is about **controlled chaos**, consider using:
- Random variation within strict boundaries
- Bifurcation and phase transitions
- Order emerging from disorder

**The algorithm flows from the philosophy, not from a menu of options.**

To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.

**Canvas Setup**: Standard p5.js structure:
```javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}
```

### CRAFTSMANSHIP REQUIREMENTS

**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.

- **Balance**: Complexity without visual noise, order without rigidity
- **Color Harmony**: Thoughtful palettes, not random RGB values
- **Composition**: Even in randomness, maintain visual hierarchy and flow
- **Performance**: Smooth execution, optimized for real-time if animated
- **Reproducibility**: Same seed ALWAYS produces identical output

### OUTPUT FORMAT

Output:
1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)

The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

---

## INTERACTIVE ARTIFACT CREATION

**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**

To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.

### CRITICAL: WHAT'S FIXED VS VARIABLE

The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed.

**FIXED (always include exactly as shown):**
- Layout structure (header, sidebar, main canvas area)
- Anthropic branding (UI colors, fonts, gradients)
- Seed section in sidebar:
  - Seed display
  - Previous/Next buttons
  - Random button
  - Jump to seed input + Go button
- Actions section in sidebar:
  - Regenerate button
  - Reset button

**VARIABLE (customize for each artwork):**
- The entire p5.js algorithm (setup/draw/classes)
- The parameters object (define what the art needs)
- The Parameters section in sidebar:
  - Number of parameter controls
  - Parameter names
  - Min/max/step values for sliders
  - Control types (sliders, inputs, etc.)
- Colors section (optional):
  - Some art needs color pickers
  - Some art might use fixed colors
  - Some art might be monochrome (no color controls needed)
  - Decide based on the art's needs

**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.

### REQUIRED FEATURES

**1. Parameter Controls**
- Sliders for numeric parameters (particle count, noise scale, speed, etc.)
- Color pickers for palette colors
- Real-time updates when parameters change
- Reset button to restore defaults

**2. Seed Navigation**
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- "Random" button for random seed
- Input field to jump to specific seed
- Generate 100 variations when requested (seeds 1-100)

**3. Single Artifact Structure**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>
```

**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.

**4. Implementation Details - BUILD THE SIDEBAR**

The sidebar structure:

**1. Seed (FIXED)** - Always include exactly as shown:
- Seed display
- Prev/Next/Random/Jump buttons

**2. Parameters (VARIABLE)** - Create controls for the art:
```html
<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
```
Add as many control-group divs as there are parameters.

**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
- Add color pickers if users should control palette
- Skip this section if the art uses fixed colors
- Skip if the art is monochrome

**4. Actions (FIXED)** - Always include exactly as shown:
- Regenerate button
- Reset button
- Download PNG button

**Requirements**:
- Seed controls must work (prev/next/random/jump/display)
- All parameters must have UI controls
- Regenerate, Reset, Download buttons must work
- Keep Anthropic branding (UI styling, not art colors)

### USING THE ARTIFACT

The HTML artifact works immediately:
1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
2. **As a file**: Save and open in any browser - no server needed
3. **Sharing**: Send the HTML file - it's completely self-contained

---

## VARIATIONS & EXPLORATION

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:

- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
- All within the same single artifact

This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.

---

## THE CREATIVE PROCESS

**User request** → **Algorithmic philosophy** → **Implementation**

Each request is unique. The process involves:

1. **Interpret the user's intent** - What aesthetic is being sought?
2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
3. **Implement it in code** - Build the algorithm that expresses this philosophy
4. **Design appropriate parameters** - What should be tunable?
5. **Build matching UI controls** - Sliders/inputs for those parameters

**The constants**:
- Anthropic branding (colors, fonts, layout)
- Seed navigation (always present)
- Self-contained HTML artifact

**Everything else is variable**:
- The algorithm itself
- The parameters
- The UI controls
- The visual outcome

To achieve the best results, trust creativity and let the philosophy guide the implementation.

---

## RESOURCES

This skill includes helpful templates and documentation:

- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
  - This is the foundation - contains the exact structure and Anthropic branding
  - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
  - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
  - The extensive comments in the file mark exactly what to keep vs replace

- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
  - Shows how to organize parameters, use seeded randomness, structure classes
  - NOT a pattern menu - use these principles to build unique algorithms
  - Embed algorithms inline in the HTML artifact (don't create separate .js files)

**Critical reminder**:
- The **template is the STARTING POINT**, not inspiration
- The **algorithm is where to create** something unique
- Don't copy the flow field example - build what the philosophy demands
- But DO keep the exact UI structure and Anthropic branding from the template