agencelutie/LP-lutie

Algorithmische Philosophien sind rechnergestü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 die Erstellung von p5.js-generativer 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:

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

DAS KRITISCHE VERSTÄNDNIS

• Was empfangen wird: Eine subtile Eingabe oder Anweisungen des Benutzers, die als Grundlage dienen; sie sollte die kreative Freiheit nicht einschränken.
• Was erstellt wird: Eine algorithmische Philosophie/generative ästhetische Bewegung.
• Was als Nächstes passiert: Dieselbe Version empfängt die Philosophie und DRÜCKT SIE IN CODE AUS – indem sie p5.js-Skizzen erstellt, 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. Rechnergestützte Schönheit. Gesäte Variation.

WIE MAN EINE ALGORITHMISCHE PHILOSOPHIE ERSTELLT

Benenne die Bewegung (1-2 Wörter): „Organische Turbulenz“ / „Quantenharmonien“ / „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:

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

KRITISCHE RICHTLINIEN:

• Vermeide Redundanz: Jeder algorithmische Aspekt sollte nur einmal erwähnt werden. Wiederhole Konzepte über Rauschtheorie, Partikeldynamik oder mathematische Prinzipien nicht, es sei denn, du fügst neue Tiefe hinzu.
• Betonen Sie handwerkliches Können WIEDERHOLT: Die Philosophie MUSS mehrmals betonen, dass der finale Algorithmus so aussehen soll, als hätte er unzählige Stunden Entwicklungszeit benötigt, mit Sorgfalt verfeinert wurde und von jemandem an der absoluten Spitze seines Fachgebiets stammt. Diese Rahmung ist essentiell – wiederhole Formulierungen wie „akribisch ausgearbeiteter Algorithmus“, „das Produkt tiefer rechnergestützter Expertise“, „schmerzhafte Optimierung“, „Implementierung auf Meisterniveau.“
• Lass kreativen Raum: Sei spezifisch hinsichtlich der algorithmischen Richtung, aber prägnant genug, dass der nächste Claude Spielraum für interpretative Implementierungsentscheidungen auf einem extrem hohen handwerklichen Niveau hat.

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

BEISPIELE FÜR PHILOSOPHIEN

„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 Zonen und ruhige Bereiche. Farbe entsteht aus Geschwindigkeit und Dichte – schnelle Partikel brennen hell, langsame verblassen im Schatten. Der Algorithmus läuft bis zum Gleichgewicht – eine akribisch abgestimmte Balance, bei der jeder Parameter durch unzählige Iterationen eines Meisters der rechnergestützten Ästhetik verfeinert wurde.

„Quantenharmonien“ Philosophie: Diskrete Einheiten, die wellenartige Interferenzmuster zeigen. Algorithmischer Ausdruck: Partikel, die auf einem Gitter initialisiert werden, jedes trägt einen Phasenwert, der sich durch Sinuswellen entwickelt. Wenn Partikel nahe sind, interferieren ihre Phasen – konstruktive Interferenz erzeugt helle Knoten, destruktive erzeugt Leerräume. 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.

„Rekursive Flüstern“ Philosophie: Selbstähnlichkeit über Skalen hinweg, unendliche Tiefe im endlichen 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. Linienstärken nehmen mit jeder Rekursionsebene ab. Jeder Verzweigungswinkel ist das Produkt tiefer mathematischer Erkundung.

„Felddynamik“ Philosophie: Unsichtbare Kräfte, die durch ihre Auswirkungen auf Materie sichtbar gemacht werden. Algorithmischer Ausdruck: Vektorfelder, die aus mathematischen Funktionen oder Rauschen konstruiert werden. Partikel entstehen an Rändern, folgen Feldlinien, 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 rechnergestützter Tanz, akribisch durch Kräftegleichgewicht choreografiert.

„Stochastische Kristallisation“ Philosophie: Zufällige Prozesse, die in geordnete Strukturen kristallisieren. Algorithmischer Ausdruck: Randomisiertes Circle Packing oder Voronoi-Tesselierung. Beginne mit zufälligen Punkten, lasse sie durch Relaxationsalgorithmen evolvieren. Zellen stoßen sich ab, bis Gleichgewicht erreicht ist. Farbe basierend auf Zellgröße, Nachbarzahl oder Entfernung vom Zentrum. Die organische Kachelung, die entsteht, wirkt sowohl zufällig als auch unvermeidlich. Jeder Samen erzeugt einzigartige kristalline Schönheit – das Markenzeichen eines algorithmischen Algorithmus auf Meisterniveau.

Dies sind verkürzte Beispiele. Die tatsächliche algorithmische Philosophie sollte 4-6 umfangreiche Absätze umfassen.

WESENTLICHE PRINZIPIEN

• ALGORITHMISCHE PHILOSOPHIE: Erschaffe ein rechnergestütztes Weltbild, das durch Code ausgedrückt wird
• PROZESS VOR PRODUKT: Betone immer, dass Schönheit aus der Ausführung des Algorithmus entsteht – jeder Lauf ist einzigartig
• PARAMETRISCHER AUSDRUCK: Ideen kommunizieren durch mathematische Beziehungen, Kräfte, Verhalten – nicht durch statische Komposition
• KÜNSTLERISCHE FREIHEIT: Der nächste Claude interpretiert die Philosophie algorithmisch – schaffe Raum für kreative Umsetzung
• REINE GENERATIVE KUNST: Es geht darum, LEBENDIGE ALGORITHMEN zu erschaffen, nicht statische Bilder mit Zufälligkeit
• EXPERTENHANDWERK: Betone wiederholt, dass der finale Algorithmus sich akribisch ausgearbeitet anfühlen muss, verfeinert durch unzählige Iterationen, das Produkt tiefer Expertise von jemandem an der absoluten Spitze seines Fachgebiets in rechnergestützter Ästhetik

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

---

ABLEITEN 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 eine subtile, nischenhafte Referenz, die in den 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 rechnergestützte Sprache. Das abgeleitete Konzept liefert die Seele – die leise konzeptionelle DNA, die unsichtbar in Parameter, Verhalten und Entstehungsmuster eingewoben ist.

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

---

P5.JS-IMPLEMENTIERUNG

Mit der etablierten Philosophie UND dem konzeptionellen Rahmen, drücke sie 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: ZUERST DIE VORLAGE LESEN ⚠️

KRITISCH: Bevor du HTML schreibst:

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

Vermeide:

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

Befolge diese Praktiken:

• ✅ Kopiere die exakte HTML-Struktur der Vorlage
• ✅ Behalte das Anthropic-Branding bei (Poppins/Lora-Schriftarten, helle Farben, Farbverlaufshintergrund)
• ✅ 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 galleriefähige rechnergestützte Kunst zu schaffen, die lebt und atmet, verwende die algorithmische Philosophie als Grundlage.

TECHNISCHE ANFORDERUNGEN

Gesäte 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 hervorgehen, überlege: „Welche Eigenschaften dieses Systems können angepasst werden?“

let params = {
  seed: 12345,  // Immer Samen für Reproduzierbarkeit einschließen
  // Farben
  // Füge Parameter hinzu, die DEINEN Algorithmus steuern:
  // - Mengen (wie viele?)
  // - Skalierungen (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 benötigt, um abstimmbar zu sein, anstatt in Begriffen von „Musterarten“ zu denken.

Kernalgorithmus – DRÜCKE DIE PHILOSOPHIE AUS:

KRITISCH: Die algorithmische Philosophie sollte vorgeben, was zu bauen ist.

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

Wenn die Philosophie über organische Emergenz ist, erwäge:

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

Wenn die Philosophie über mathematische Schönheit ist, erwäge:

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

Wenn die Philosophie über kontrolliertes Chaos ist, 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 Menü von Optionen.

Um die Implementierung zu leiten, lass das konzeptionelle Wesen kreative und originelle Entscheidungen informieren. 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 sein (noLoop) oder animiert
}

HANDWERKLICHE ANFORDERUNGEN

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

• Balance: Komplexität ohne visuelles Rauschen, Ordnung ohne Starrheit
• Farbharmonie: Durchdachte Paletten, keine zufälligen RGB-Werte
• Komposition: Selbst bei Zufälligkeit, bewahre visuelle Hierarchie und Fluss
• Leistung: Flüssige Ausführung, optimiert für Echtzeit, wenn 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-Artefakt – Eigenständige interaktive generative Kunst, erstellt aus templates/viewer.html (siehe SCHRITT 0 und nächster Abschnitt)

Das HTML-Artefakt enthält alles: p5.js (vom 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.

---

ERSTELLUNG DES INTERAKTIVEN ARTEFAKTS

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, eigenständiges HTML-Artefakt. Stelle sicher, dass dieses Artefakt sofort in claude.ai oder jedem Browser funktioniert – keine Einrichtung erforderlich. Bette alles inline ein.

KRITISCH: WAS FEST IST VS. VARIABEL

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

FEST (immer genau wie gezeigt einschließen):

• Layoutstruktur (Kopfzeile, Seitenleiste, Haupt-Canvas-Bereich)
• Anthropic-Branding (UI-Farben, Schriftarten, Farbverläufe)
• Samenabschnitt in der Seitenleiste:
  • Samenanzeige
  • Vorherige/Nächste-Schaltflächen
  • Zufällig-Schaltfläche
  • Sprung-zu-Samen-Eingabe + Los-Schaltfläche
• Aktionsabschnitt 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 benötigt)
• Der Parameterabschnitt in der Seitenleiste:
  • Anzahl der Parametersteuerungen
  • Parameternamen
  • Min-/Max-/Schrittwerte für Schieberegler
  • Steuerungstypen (Schieberegler, Eingaben usw.)
• Farbenabschnitt (optional):
  • Manche Kunst benötigt Farbwähler
  • Manche Kunst könnte feste Farben verwenden
  • Manche Kunst könnte monochrom sein (keine Farbsteuerungen erforderlich)
  • Entscheide basierend auf den Bedürfnissen der Kunst

Jedes Kunstwerk sollte einzigartige Parameter und einen einzigartigen Algorithmus haben! Die festen Teile bieten die konsistente Grundstruktur. Die variablen Teile machen jedes Stück originell.

---

UMGANG MIT KONZEPTIONELLEN KONTAKTEN

Manchmal erwähnt ein Benutzer ein bestimmtes Konzept, eine Referenz oder ein Thema. Wenn dies der Fall ist, folge diesem Ansatz:

ERSTE PHASE: Das Konzept verstehen

• Was ist der konzeptionelle Kontakt?
• Warum resoniert er mit generativer Kunst?
• Was sind seine essentiellen algorithmischen Qualitäten?
• Wie kann er in Parameter, Verhalten und Regeln übersetzt werden?

ZWEITE PHASE: Die algorithmische Philosophie entwerfen

• Starte vom Konzept aus, nicht von einer vorgegebenen Struktur
• Übersetze die Essenz des Konzepts in rechnergestützte Begriffe
• Schreibe die Philosophie so, dass sie sich wie eine natürliche Folge des Konzepts anfühlt
• Verwende die Beispielstrukturen als REFERENZ, nicht als SCHABLONE

DRITTE PHASE: Die konzeptionelle DNA codieren

• Implementiere auf eine Weise, die jemand mit Kenntnis des Themas erkennen würde
• Mache die Referenz subtil, tief und im Verhalten des Algorithmus eingebettet
• Konzentriere dich darauf, das GEFÜHL des Konzepts zu extrahieren
• Lass die algorithmische Interpretation die primäre Erfahrung sein

Dieser Ansatz stellt sicher, dass die Arbeit sowohl als eigenständige generative Kunst als auch als Hommage an das ursprüngliche Konzept für diejenigen, die den konzeptionellen Berührungspunkt teilen, funktioniert.