algorithmic-art

Algorithmische Kunst

Algorithmische Philosophien sind computergestützte ästhetische Bewegungen, die dann durch Code ausgedrückt werden. Gib .md-Dateien (Philosophie), .html-Dateien (interaktiver Viewer) und .js-Dateien (generative Algorithmen) aus.

Dies geschieht in zwei Schritten:

1. Erstellung der algorithmischen Philosophie (.md-Datei)
2. Umsetzung durch p5.js-generative Kunst (.html + .js-Dateien)

Führe zuerst diese Aufgabe aus:

ERSTELLUNG DER ALGORITHMISCHEN PHILOSOPHIE

Erstelle zunächst eine ALGORITHMISCHE PHILOSOPHIE (keine statischen Bilder oder Vorlagen), die interpretiert wird durch:

• Computergestützte Prozesse, emergentes Verhalten, mathematische Schönheit
• Gesetzte Zufälligkeit, Rauschfelder, organische Systeme
• Partikel, Strömungen, Felder, Kräfte
• Parametrische Variation und kontrolliertes Chaos

DAS WESENTLICHE VERSTÄNDNIS

• Was empfangen wird: Eine subtile Eingabe oder Anweisung des Benutzers, die als Grundlage dient, aber die kreative Freiheit nicht einschränken soll.
• Was erstellt wird: Eine algorithmische Philosophie / generative ästhetische Bewegung.
• Was als Nächstes passiert: Dieselbe Version empfängt die Philosophie und SETZT SIE IN CODE UM – erstellt p5.js-Skizzen, die zu 90% algorithmische Generierung und zu 10% wesentliche Parameter sind.

Betrachte diesen Ansatz:

• Schreibe ein Manifest für eine generative Kunstbewegung
• Die nächste Phase beinhaltet das Schreiben des Algorithmus, der sie zum Leben erweckt

Die Philosophie muss betonen: Algorithmischer Ausdruck. Emergentes Verhalten. Rechnerische Schönheit. Gesetzte Variation.

WIE MAN EINE ALGORITHMISCHE PHILOSOPHIE ERSTELLT

Benenne die Bewegung (1-2 Wörter): „Organische Turbulenz“ / „Quantenharmonik“ / „Emergente Stille“

Formuliere die Philosophie (4-6 Absätze – prägnant aber vollständig):

Um das ALGORITHMISCHE Wesen einzufangen, drücke aus, wie sich diese Philosophie manifestiert durch:

• Computergestützte Prozesse und mathematische Beziehungen?
• Rauschfunktionen und Zufälligkeitsmuster?
• Partikelverhalten und Felddynamiken?
• Zeitliche Entwicklung und Systemzustände?
• Parametrische Variation und emergente Komplexität?

WICHTIGE RICHTLINIEN:

• Vermeide Redundanz: Jeder algorithmische Aspekt sollte einmal erwähnt werden. Vermeide es, Konzepte über Rauschtheorie, Partikeldynamik oder mathematische Prinzipien zu wiederholen, es sei denn, du fügst neue Tiefe hinzu.
• Betonen HANDWERKLICHE EXZELLENZ WIEDERHOLT: Die Philosophie MUSS mehrmals betonen, dass der finale Algorithmus so wirken soll, als hätte er unzählige Stunden der Entwicklung benötigt, mit Sorgfalt verfeinert wurde und von jemandem stammt, der absolut an der Spitze seines Fachgebiets steht. Diese Rahmung ist essentiell – wiederhole Phrasen wie „sorgfältig ausgearbeiteter Algorithmus“, „das Produkt tiefgreifender computerwissenschaftlicher Expertise“, „schmerzhafte Optimierung“, „Implementierung auf Meisterniveau“.
• Lasse kreativen Freiraum: Sei spezifisch in der algorithmischen Richtung, aber prägnant genug, dass die nächste Instanz interpretatorische Implementierungsentscheidungen auf einem extrem hohen handwerklichen Niveau treffen kann.

Die Philosophie muss die nächste Version dazu führen, Ideen ALGORITHMISCH auszudrücken, nicht durch statische Bilder. Schönheit lebt im Prozess, nicht im finalen Bild.

PHILOSOPHIE-BEISPIELE

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

„Quantenharmonik“ Philosophie: Diskrete Einheiten, die wellenartige Interferenzmuster zeigen. Algorithmischer Ausdruck: Partikel, die auf einem Gitter initialisiert werden, jedes mit einem Phasenwert, der sich durch Sinuswellen entwickelt. Wenn Partikel nahe sind, interferieren ihre Phasen – konstruktive Interferenz erzeugt helle Knoten, destruktive erzeugt Lücken. Einfache harmonische Bewegung erzeugt komplexe emergente Mandalas. Das Ergebnis einer schmerzhaften Frequenzkalibrierung, bei der jedes Verhältnis sorgfältig ausgewählt wurde, um resonante Schönheit zu erzeugen.

„Flüsternde Rekursion“ Philosophie: Selbstähnlichkeit über Skalen hinweg, unendliche Tiefe in endlichem Raum. Algorithmischer Ausdruck: Verzweigungsstrukturen, die sich rekursiv unterteilen. Jeder Zweig leicht randomisiert, aber durch goldene Schnitte eingeschränkt. L-Systeme oder rekursive Unterteilung erzeugen baumartige Formen, die sich sowohl mathematisch als auch organisch anfühlen. Subtile Rauschstörungen brechen die perfekte Symmetrie. Die Linienstärken nehmen mit jeder Rekursionsebene ab. Jeder Verzweigungswinkel ist das Produkt tiefgreifender mathematischer Erkundung.

„Felddynamik“ Philosophie: Unsichtbare Kräfte, die durch ihre Wirkung auf Materie sichtbar werden. Algorithmischer Ausdruck: Vektorfelder, die aus mathematischen Funktionen oder Rauschen konstruiert werden. Partikel entstehen an den Rändern, fließen entlang der Feldlinien und sterben, wenn sie Gleichgewicht oder Grenzen erreichen. Mehrere Felder können Partikel anziehen, abstoßen oder drehen. Die Visualisierung zeigt nur die Spuren – geisterhafte Beweise unsichtbarer Kräfte. Ein rechnerischer Tanz, sorgfältig durch Kräftegleichgewicht choreografiert.

„Stochastische Kristallisation“ Philosophie: Zufällige Prozesse, die zu geordneten Strukturen kristallisieren. Algorithmischer Ausdruck: Randomisierte Kreispackung oder Voronoi-Tesselierung. Beginne mit zufälligen Punkten, lasse sie durch Relaxationsalgorithmen evolvieren. Zellen drücken sich auseinander, bis Gleichgewicht erreicht ist. Farbe basierend auf Zellgröße, Nachbarzahl oder Entfernung vom Zentrum. Die organische Kachelung, die entsteht, fühlt sich sowohl zufällig als auch unvermeidlich an. Jeder Samen erzeugt einzigartige kristalline Schönheit – das Kennzeichen eines generativen Algorithmus auf Meisterniveau.

Dies sind komprimierte Beispiele. Die tatsächliche algorithmische Philosophie sollte 4-6 substantielle Absätze umfassen.

WESENTLICHE PRINZIPIEN

• ALGORITHMISCHE PHILOSOPHIE: Erstellung eines rechnerischen Weltbilds, das durch Code ausgedrückt wird
• PROZESS VOR PRODUKT: Betone immer, dass Schönheit aus der Ausführung des Algorithmus entsteht – jeder Durchlauf ist einzigartig
• PARAMETRISCHER AUSDRUCK: Ideen kommunizieren durch mathematische Beziehungen, Kräfte, Verhaltensweisen – nicht durch statische Komposition
• KÜNSTLERISCHE FREIHEIT: Die nächste Instanz interpretiert die Philosophie algorithmisch – gebe Raum für kreative Implementierung
• REINE GENERATIVE KUNST: Es geht darum, LEBENDIGE ALGORITHMEN zu erschaffen, nicht statische Bilder mit Zufälligkeit
• EXPERTEN-HANDWERK: Betone wiederholt, dass sich der finale Algorithmus sorgfältig ausgearbeitet, durch unzählige Iterationen verfeinert und als Produkt tiefer Expertise von jemandem an der absoluten Spitze seines Fachgebiets in computergestützter Ästhetik anfühlen muss

Die algorithmische Philosophie sollte 4-6 Absätze lang sein. Fülle sie mit poetischer, rechnerischer Philosophie, die die beabsichtigte Vision zusammenbringt. Vermeide es, dieselben Punkte zu wiederholen. Gib diese algorithmische Philosophie als .md-Datei aus.

---

HERLEITUNG DES KONZEPTIONELLEN SAMENS

KRITISCHER SCHRITT: Bevor du den Algorithmus implementierst, identifiziere den subtilen konzeptionellen Faden aus der ursprünglichen Anfrage.

DAS WESENTLICHE PRINZIP: Das Konzept ist ein subtiler, nuancierter Verweis, der im Algorithmus selbst eingebettet ist – nicht immer wörtlich, immer anspruchsvoll. 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 leise konzeptionelle DNA, die unsichtbar in Parameter, Verhaltensweisen und Emergenzmuster eingewoben ist.

Dies ist SEHR WICHTIG: Der Verweis muss so raffiniert sein, dass er die Tiefe des Werks erhöht, ohne sich anzukündigen. Denke wie ein Jazzmusiker, der ein anderes Lied durch algorithmische Harmonie zitiert – nur diejenigen, die es wissen, werden es bemerken, aber alle schätzen die generative Schönheit.

---

P5.JS-IMPLEMENTIERUNG

Mit der etablierten Philosophie UND dem konzeptionellen Rahmen, drücke es durch Code aus. Halte inne, um Gedanken zu sammeln, bevor du fortfährst. Verwende nur die erstellte algorithmische Philosophie und die folgenden Anweisungen.

⚠️ SCHRITT 0: LIES ZUERST DIE VORLAGE ⚠️

KRITISCH: Bevor du HTML schreibst:

1. Lies templates/viewer.html mit dem Read-Tool
2. Studiere die genaue Struktur, das Styling und die Anthropic-Markenidentität
3. Verwende diese Datei als WÖRTLICHEN AUSGANGSPUNKT – nicht nur als Inspiration
4. Behalte alle FIXEN Abschnitte genau so bei, wie gezeigt (Kopfzeile, Seitenleistenstruktur, Anthropic-Farben/Schriftarten, Samensteuerung, Aktionsschaltflächen)
5. Ersetze nur die VARIABLEN Abschnitte, die in den Kommentaren der Datei markiert sind (Algorithmus, Parameter, UI-Steuerelemente für Parameter)

Vermeide:

• ❌ HTML von Grund auf neu erstellen
• ❌ Eigene Styling- oder Farbschemata erfinden
• ❌ Systemschriftarten oder dunkle Designs verwenden
• ❌ Die Seitenleistenstruktur ändern

Befolge diese Praktiken:

• ✅ Kopiere die genaue HTML-Struktur der Vorlage
• ✅ Behalte die Anthropic-Markenidentität bei (Poppins/Lora-Schriftarten, helle Farben, Verlaufshintergrund)
• ✅ Behalte das Seitenleistenlayout bei (Samen → Parameter → Farben? → Aktionen)
• ✅ Ersetze nur den p5.js-Algorithmus und die Parametersteuerungen

Die Vorlage ist die Grundlage. Baue darauf auf, baue sie nicht neu.

---

Um galleriewürdige rechnerische Kunst zu schaffen, die lebt und atmet, verwende die algorithmische Philosophie als Grundlage.

TECHNISCHE ANFORDERUNGEN

Gesetzte Zufälligkeit (Art Blocks-Muster) :

// Verwende IMMER einen Samen für Reproduzierbarkeit
let seed = 12345; // oder Hash aus Benutzereingabe
randomSeed(seed);
noiseSeed(seed);

Parameterstruktur – FOLGE DER PHILOSOPHIE :

Um Parameter zu etablieren, die natürlich aus der algorithmischen Philosophie entstehen, frage: „Welche Qualitäten dieses Systems können angepasst werden?“

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

Um effektive Parameter zu entwerfen, konzentriere dich auf die Eigenschaften, die das System abstimmbar machen muss, anstatt in „Musterarten“ zu denken.

Kernalgorithmus – DRÜCKE DIE PHILOSOPHIE AUS :

KRITISCH: Die algorithmische Philosophie sollte bestimmen, was gebaut wird.

Um die Philosophie durch Code auszudrücken, vermeide das Denken „welches Muster soll ich verwenden?“ und denke stattdessen „wie drücke ich diese Philosophie durch Code aus?“

Wenn die Philosophie von organischer Emergenz handelt, erwäge:

• Elemente, die sich im Laufe der Zeit ansammeln oder wachsen
• Zufällige Prozesse, die durch natürliche Regeln eingeschränkt werden
• Rückkopplungsschleifen und Interaktionen

Wenn die Philosophie von mathematischer Schönheit handelt, erwäge:

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

Wenn die Philosophie von kontrolliertem Chaos handelt, erwäge:

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

Der Algorithmus fließt aus der Philosophie, nicht aus einem Optionsmenü.

Um die Implementierung zu leiten, lass das konzeptionelle Wesen kreative und originelle Entscheidungen beeinflussen. Baue etwas, das die Vision für diese spezielle Anfrage ausdrückt.

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
}

HANDWERKLICHE ANFORDERUNGEN

KRITISCH: Um Meisterschaft zu erreichen, erstelle Algorithmen, die sich anfühlen, als wären sie durch unzählige Iterationen eines Meister-Generativkünstlers entstanden. Stimme jeden Parameter sorgfältig ab. Stelle sicher, dass jedes Muster mit Absicht entsteht. Dies ist NICHT zufälliges Rauschen – dies ist KONTROLLIERTES CHAOS, verfeinert durch tiefgreifende Expertise.

• Balance: Komplexität ohne visuelles Rauschen, Ordnung ohne Starrheit
• Farbharmonie: Durchdachte Paletten, keine zufälligen RGB-Werte
• Komposition: Selbst in der Zufälligkeit, bewahre visuelle Hierarchie und Fluss
• Leistung: Flüssige Ausführung, optimiert für Echtzeit, falls animiert
• Reproduzierbarkeit: Gleicher Samen erzeugt IMMER identische Ausgabe

AUSGABEFORMAT

Ausgabe:

1. Algorithmische Philosophie – Als Markdown oder Text, der die generative Ästhetik erklärt
2. Einzelnes HTML-Artifact – In sich geschlossene interaktive generative Kunst, erstellt aus templates/viewer.html (siehe SCHRITT 0 und nächster Abschnitt)

Das HTML-Artifact enthält alles: p5.js (von CDN), den Algorithmus, Parametersteuerungen und UI – alles in einer Datei, die sofort in claude.ai-Artefakten oder jedem Browser funktioniert. Beginne mit der Vorlagendatei, nicht von Grund auf.

---

INTERAKTIVE ARTIFAKTERSTELLUNG

ERINNERUNG: templates/viewer.html sollte bereits gelesen worden sein (siehe SCHRITT 0). Verwende diese Datei als Ausgangspunkt.

Um die Erkundung der generativen Kunst zu ermöglichen, erstelle ein einzelnes, in sich geschlossenes HTML-Artifact. Stelle sicher, dass dieses Artifact sofort in claude.ai oder jedem Browser funktioniert – keine Einrichtung erforderlich. Bette alles inline ein.

KRITISCH: WAS IST FIX VS. VARIABEL

Die Datei templates/viewer.html ist die Grundlage. Sie enthält die genaue Struktur und das Styling, die benötigt werden.

FIX (immer genau so einschließen):

• Layoutstruktur (Kopfzeile, Seitenleiste, Haupt-Canvas-Bereich)
• Anthropic-Markenidentität (UI-Farben, Schriftarten, Verläufe)
• Samen-Abschnitt in der Seitenleiste:
  • Samenanzeige
  • Vorherige/Nächste-Schaltflächen
  • Zufalls-Schaltfläche
  • Gehe-zu-Samen-Eingabe + Gehe-Schaltfläche
• Aktionen-Abschnitt in der Seitenleiste:
  • Neu generieren-Schaltfläche
  • Zurücksetzen-Schaltfläche

VARIABEL (für jedes Kunstwerk anpassen):

• Der gesamte p5.js-Algorithmus (setup/draw/Klassen)
• Das Parameterobjekt (definiere, was die Kunst braucht)
• Der Parameter-Abschnitt in der Seitenleiste:
  • Anzahl der Parametersteuerungen
  • Parameternamen
  • Min-/Max-/Schrittwerte für Schieberegler
  • Steuerungstypen (Schieberegler, Eingaben usw.)
• Farben-Abschnitt (optional):
  • Einige Kunstwerke benötigen Farbwähler
  • Einige Kunstwerke verwenden möglicherweise feste Farben
  • Einige Kunstwerke sind möglicherweise monochrom (keine Farbsteuerung erforderlich)
  • Entscheide basierend auf den Anforderungen des Kunstwerks

Jedes Kunstwerk sollte einzigartige Parameter und einen einzigartigen Algorithmus haben! Die fixen Teile bieten Konsistenz; die variablen Teile machen jedes Stück einzigartig.