Algorithmische Kunst

Quelle: Inhalt angepasst von Anthropics/Skills (MIT).

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

Dies geschieht in zwei Schritten:

1. Algorithmische Philosophieerstellung (.md-Datei)
2. Drücken Sie aus, indem Sie generative p5.js-Kunst (.html +.js-Dateien) erstellen.

Führen Sie zunächst diese Aufgabe durch:

ALGORITHMISCHE PHILOSOPHIE-ERSTELLUNG

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

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

DAS KRITISCHE VERSTÄNDNIS

• Was erhalten wird: Einige subtile Eingaben oder Anweisungen des Benutzers, die berücksichtigt werden müssen, aber als Grundlage dienen; es sollte die kreative Freiheit nicht einschränken.
• Was entsteht: Eine algorithmische Philosophie/generative ästhetische Bewegung.
• Was als nächstes passiert: Dieselbe Version erhält die Philosophie und DRÜCKT SIE IM CODE AUS – sie erstellt p5.js-Skizzen, die zu 90 % aus algorithmischer Generierung und zu 10 % aus wesentlichen Parametern bestehen.

Betrachten Sie diesen Ansatz:

• Schreiben Sie ein Manifest für eine generative Kunstbewegung
• In der nächsten Phase wird der Algorithmus geschrieben, der ihn zum Leben erweckt

Die Philosophie muss betonen: Algorithmischer Ausdruck. Aufkommendes Verhalten. Computerschönheit. Gesäte Variante.

WIE MAN EINE ALGORITHMISCHE PHILOSOPHIE ENTWICKELT

Nennen Sie die Bewegung (1-2 Wörter): „Organische Turbulenz“ / „Quantenharmonik“ / „Emergent Stillness“

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

Um die algorithmische Essenz zu erfassen, drücken Sie aus, wie sich diese Philosophie manifestiert durch:

• Rechenprozesse und mathematische Zusammenhänge?
• Rauschfunktionen und Zufallsmuster?
• Partikelverhalten und Felddynamik?
• Zeitliche Entwicklung und Systemzustände?
• Parametrische Variation und entstehende Komplexität?

KRITISCHE RICHTLINIEN:

• Redundanz vermeiden: Jeder algorithmische Aspekt sollte einmal erwähnt werden. Vermeiden Sie es, Konzepte zur Rauschtheorie, Teilchendynamik oder mathematischen Prinzipien zu wiederholen, es sei denn, Sie verleihen ihnen neue Tiefe.
• Betonen Sie die Handwerkskunst WIEDERHOLT: Die Philosophie MUSS mehrfach betonen, dass der endgültige Algorithmus so aussehen sollte, als ob die Entwicklung unzählige Stunden gedauert hätte, er mit Sorgfalt verfeinert worden wäre und von jemandem stammte, der auf seinem Gebiet absolut führend ist. Diese Formulierung ist unerlässlich – wiederholen Sie Formulierungen wie „sorgfältig ausgearbeiteter Algorithmus“, „das Produkt umfassender Rechenkompetenz“, „sorgfältige Optimierung“, „Implementierung auf Meisterniveau“.
• Lassen Sie kreativen Spielraum: Geben Sie die Richtung des Algorithmus genau an, aber prägnant genug, dass der nächste Claude Spielraum hat, interpretative Implementierungsentscheidungen auf einem extrem hohen handwerklichen Niveau zu treffen.

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

PHILOSOPHIE-BEISPIELE

"Organische Turbulenz" Philosophie: Durch Naturgesetze eingeschränktes Chaos, Ordnung, die aus Unordnung entsteht. Algorithmischer Ausdruck: Strömungsfelder, die durch geschichtetes Perlin-Rauschen angetrieben werden. Tausende von Partikeln folgen Vektorkräften und ihre Spuren sammeln sich in organischen Dichtekarten an. Mehrere Rauschoktaven erzeugen turbulente Regionen und ruhige Zonen. Farbe entsteht durch Geschwindigkeit und Dichte – schnelle Teilchen brennen 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 Computerästhetik verfeinert wurde.

"Quantenharmonik" Philosophie: Diskrete Einheiten, die wellenartige Interferenzmuster aufweisen. Algorithmischer Ausdruck: Auf einem Gitter initialisierte Partikel, von denen jedes einen Phasenwert trägt, der sich durch Sinuswellen entwickelt. Wenn sich Teilchen in der Nähe befinden, interferieren ihre Phasen – konstruktive Interferenz erzeugt helle Knoten, destruktive erzeugt Hohlräume. Einfache harmonische Bewegungen erzeugen komplexe entstehende Mandalas. Das Ergebnis einer sorgfältigen Frequenzkalibrierung, bei der jedes Verhältnis sorgfältig ausgewählt wurde, um resonante Schönheit zu erzeugen.

"Rekursives Flüstern" Philosophie: Selbstähnlichkeit über Skalen hinweg, unendliche Tiefe im endlichen Raum. Algorithmischer Ausdruck: Verzweigte Strukturen, die rekursiv unterteilen. Jeder Zweig ist leicht randomisiert, aber durch goldene Schnitte eingeschränkt. L-Systeme oder rekursive Unterteilung erzeugen baumartige Formen, die sowohl mathematisch als auch organisch wirken. Subtile Geräuschstörungen stören die perfekte Symmetrie. Die Linienstärke nimmt mit jeder Rekursionsstufe ab. Jeder Verzweigungswinkel ist das Produkt tiefgreifender mathematischer Forschung.

"Felddynamik" Philosophie: Unsichtbare Kräfte werden durch ihre Wirkung auf die Materie sichtbar. Algorithmischer Ausdruck: Vektorfelder, die aus mathematischen Funktionen oder Rauschen erstellt werden. An Kanten entstehende Teilchen, die entlang der Feldlinien fließen und sterben, wenn sie das 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 computergesteuerter Tanz, der sorgfältig durch Kräftegleichgewicht choreografiert wurde.

"Stochastische Kristallisation" Philosophie: Zufällige Prozesse, die sich zu geordneten Strukturen kristallisieren. Algorithmischer Ausdruck: Randomisierte Kreispackung oder Voronoi-Tessellation. Beginnen Sie mit zufälligen Punkten und lassen Sie sie durch Entspannungsalgorithmen weiterentwickeln. Zellen schieben sich auseinander, bis das Gleichgewicht erreicht ist. Farbe basierend auf Zellengröße, Anzahl der Nachbarn oder Abstand von der Mitte. Die organischen Kacheln, die entstehen, wirken sowohl zufällig als auch unvermeidlich. Jeder Samen erzeugt eine einzigartige kristalline Schönheit – das Zeichen eines generativen Algorithmus auf Meisterniveau.

Dies sind komprimierte Beispiele. Die eigentliche algorithmische Philosophie sollte 4-6 wesentliche Absätze umfassen.

WESENTLICHE GRUNDSÄTZE

• ALGORITHMISCHE PHILOSOPHIE: Erstellen einer computergestützten Weltanschauung, die durch Code ausgedrückt werden soll
• PROZESS VOR PRODUKT: Betonen Sie immer, dass Schönheit aus der Ausführung des Algorithmus entsteht – jeder Lauf ist einzigartig
• PARAMETRISCHER AUSDRUCK: Ideen kommunizieren durch mathematische Beziehungen, Kräfte, Verhaltensweisen – nicht durch statische Zusammensetzung
• KÜNSTLERISCHE FREIHEIT: Der nächste Claude interpretiert die Philosophie algorithmisch – kreativen Umsetzungsraum schaffen
• REINE GENERATIVE KUNST: Hier geht es um die Erstellung LEBENDER ALGORITHMEN, nicht um statische Bilder mit Zufälligkeit
• EXPERTEN-HANDWERKSKUNST: Betonen Sie immer wieder, dass sich der endgültige Algorithmus akribisch ausgearbeitet und durch unzählige Iterationen verfeinert anfühlen muss, das Produkt tiefgreifender Fachkenntnisse von jemandem, der auf dem Gebiet der Computerästhetik absolut an der Spitze seines Fachs steht

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

Den konzeptionellen Samen ableiten

KRITISCHER SCHRITT: Identifizieren Sie vor der Implementierung des Algorithmus den subtilen konzeptionellen Thread der ursprünglichen Anfrage.

DAS WESENTLICHE PRINZIP: Das Konzept ist eine subtile Nischenreferenz, die in den Algorithmus selbst eingebettet ist – nicht immer wörtlich, immer raffiniert. Jemand, der sich mit der Materie auskennt, sollte es intuitiv spüren, während andere einfach eine meisterhafte generative Komposition erleben. Die algorithmische Philosophie liefert die Rechensprache. Das abgeleitete Konzept liefert die Seele – die stille konzeptuelle DNA, die unsichtbar in Parameter, Verhaltensweisen und Entstehungsmuster verwoben ist.

Das ist SEHR WICHTIG: Die Referenz muss so raffiniert sein, dass sie die Tiefe des Werks erhöht, ohne sich selbst zu bemerken. Denken Sie wie ein Jazzmusiker, der ein anderes Lied durch algorithmische Harmonie zitiert – nur wer es weiß, wird es verstehen, aber jeder schätzt die erschaffende Schönheit.

P5.JS-IMPLEMENTIERUNG

Wenn die Philosophie UND der konzeptionelle Rahmen festgelegt sind, drücken Sie sie durch Code aus. Machen Sie eine Pause, um Gedanken zu sammeln, bevor Sie fortfahren. Verwenden Sie ausschließlich die erstellte algorithmische Philosophie und die folgenden Anweisungen.

SCHRITT 0: LESEN SIE ZUERST DIE VORLAGE

KRITISCH: BEVOR Sie HTML schreiben:

1. Lesentemplates/viewer.htmlmit dem Lesetool
2. Studieren Sie die genaue Struktur, das Styling und das Anthropic-Branding
3. Verwenden Sie diese Datei als buchstäblichen Ausgangspunkt – nicht nur als Inspiration
4. Behalten Sie alle FIXED-Abschnitte genau wie gezeigt bei (Kopfzeile, Seitenleistenstruktur, Anthropic-Farben/Schriftarten, Seed-Steuerelemente, Aktionsschaltflächen)
5. Ersetzen Sie nur die VARIABLE-Abschnitte, die in den Kommentaren der Datei markiert sind (Algorithmus, Parameter, UI-Steuerelemente für Parameter)

Vermeiden:

• HTML von Grund auf erstellen
• Erfinden Sie individuelle Stil- oder Farbschemata
• Verwendung von Systemschriftarten oder dunklen Designs
• Ändern der Seitenleistenstruktur

Befolgen Sie diese Vorgehensweisen:

• Kopieren Sie die genaue HTML-Struktur der Vorlage
• Behalten Sie das Anthropic-Branding bei (Poppins/Lora-Schriftarten, 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, bauen Sie es nicht neu auf.

Um Computerkunst in Galeriequalität zu schaffen, die lebt und atmet, nutzen Sie die algorithmische Philosophie als Grundlage.

TECHNISCHE ANFORDERUNGEN

Gesäte Zufälligkeit (Art Blocks Pattern):

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

Parameterstruktur – FOLGEN SIE DER PHILOSOPHIE:

Um Parameter festzulegen, die sich auf natürliche Weise aus der algorithmischen Philosophie ergeben, überlegen Sie: „Welche Eigenschaften dieses Systems können angepasst werden?“

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?)
};

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

Kernalgorithmus – DRÜCKEN SIE DIE PHILOSOPHIE AUS:

KRITISCH: Die algorithmische Philosophie sollte vorgeben, was erstellt werden soll.

Um die Philosophie durch Code auszudrücken, sollten Sie nicht darüber nachdenken: „Welches Muster soll ich verwenden?“ und denken Sie stattdessen: „Wie kann man diese Philosophie durch Code ausdrücken?“

Wenn es bei der Philosophie um organische Entstehung geht, sollten Sie die Verwendung von Folgendem in Betracht ziehen:

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

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 erzeugen unerwartete Muster

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

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

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

Um die Umsetzung zu leiten, lassen Sie die konzeptionelle Essenz kreative und originelle Entscheidungen beeinflussen. Bauen Sie etwas, das die Vision für diese spezielle Anfrage zum Ausdruck bringt.

Canvas-Setup: Standardstruktur von p5.js:

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

HANDWERKLICHE ANFORDERUNGEN

KRITISCH: Um die Meisterschaft zu erlangen, erstellen Sie Algorithmen, die sich anfühlen, als wären sie durch unzählige Iterationen eines Meisters des generativen Künstlers entstanden. Stellen Sie jeden Parameter sorgfältig ein. Stellen Sie sicher, dass jedes Muster mit Absicht entsteht. Das ist KEIN zufälliges Rauschen – das ist KONTROLLIERTES CHAOS, verfeinert durch tiefes Fachwissen.

• Balance: Komplexität ohne visuelles Rauschen, Ordnung ohne Starrheit
• Farbharmonie: Durchdachte Paletten, keine zufälligen RGB-Werte
• Komposition: Behalten Sie auch bei Zufälligkeit die visuelle Hierarchie und den Fluss bei
• Leistung: Reibungslose Ausführung, bei Animationen für Echtzeit optimiert
• Reproduzierbarkeit: Das gleiche Saatgut erzeugt IMMER den gleichen Output

AUSGABEFORMAT

Ausgabe:

1. Algorithmische Philosophie – Als Markdown oder Text zur Erläuterung der generativen Ästhetik
2. Einzelnes HTML-Artefakt – Eigenständige interaktive generative Kunst, erstellt austemplates/viewer.html(siehe SCHRITT 0 und nächster Abschnitt)

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

INTERAKTIVE ARTEFAKT-ERSTELLUNG

ERINNERUNG:templates/viewer.htmlsollte 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, eigenständiges HTML-Artefakt. Stellen Sie sicher, dass dieses Artefakt sofort in claude.ai oder einem beliebigen Browser funktioniert – keine Einrichtung erforderlich. Betten Sie alles inline ein.

KRITISCH: WAS IST FEST UND VARIABLE

Dietemplates/viewer.html-Datei ist die Grundlage. Es enthält genau die Struktur und das Styling, die benötigt werden.

BEHOBEN (immer genau wie gezeigt einschließen):

• Layoutstruktur (Kopfzeile, Seitenleiste, Hauptbereich der Leinwand)
• Anthropisches Branding (UI-Farben, Schriftarten, Verläufe)
• Seed-Bereich in der Seitenleiste:
  • Samenpräsentation
  • Schaltflächen „Zurück/Weiter“.
  • Zufallstaste
  • Zur Sameneingabe springen + Go-Taste
• Abschnitt „Aktionen“ in der Seitenleiste:
  • Schaltfläche „Neu generieren“.
  • Reset-Taste

VARIABLE (für jedes Kunstwerk individuell anpassen):

• Der gesamte p5.js-Algorithmus (Setup/Draw/Classes)
• Das Parameterobjekt (definiert, was die Kunst benötigt)
• Der Abschnitt „Parameter“ in der Seitenleiste:
  • Anzahl der Parametersteuerungen
  • Parameternamen
  • Min./Max./Schrittwerte für Schieberegler
  • Steuerungstypen (Schieberegler, Eingänge usw.)
• Abschnitt „Farben“ (optional):
  • Manche Kunstwerke brauchen Farbwähler
  • Einige Kunstwerke verwenden möglicherweise feste Farben
  • Einige Kunstwerke sind möglicherweise monochrom (keine Farbkontrolle erforderlich).
  • Entscheiden Sie basierend auf den Bedürfnissen der Kunst

Jedes Kunstwerk sollte einzigartige Parameter und Algorithmen haben! Die festen Teile sorgen für eine konsistente UX – alles andere drückt die einzigartige Vision aus.

ERFORDERLICHE FUNKTIONEN

1. Parametersteuerung

• Schieberegler für numerische Parameter (Partikelanzahl, Lärmskala, Geschwindigkeit usw.)
• Farbwähler für Palettenfarben
• Echtzeitaktualisierungen, wenn sich Parameter ändern
• Schaltfläche „Zurücksetzen“, um die Standardeinstellungen wiederherzustellen

2. Seed-Navigation

• Aktuelle Samennummer anzeigen
• Schaltflächen „Zurück“ und „Weiter“, um durch die Samen zu blättern
• Schaltfläche „Zufällig“ für zufälligen Startwert
• Eingabefeld zum Springen zu einem bestimmten Startwert
• Generieren Sie auf Anfrage 100 Variationen (Seeds 1–100).

3. Einzelartefaktstruktur

<!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>

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

4. Implementierungsdetails – ERSTELLEN DER SIDEBAR

Die Seitenleistenstruktur:

1. Samen (FEST) – Fügen Sie immer genau wie gezeigt hinzu:

• Samenpräsentation
• Schaltflächen „Zurück/Weiter/Zufällig/Springen“.

2. Parameter (VARIABLE) – Steuerelemente für die Grafik erstellen:

<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>

Fügen Sie so viele Kontrollgruppen-Divs hinzu, wie Parameter vorhanden sind.

3. Farben (OPTIONAL/VARIABLE) – Geben Sie an, ob für die Grafik anpassbare Farben erforderlich sind:

• Fügen Sie Farbwähler hinzu, wenn Benutzer die Palette steuern sollen
• Überspringen Sie diesen Abschnitt, wenn das Bild feste Farben verwendet
• Überspringen Sie, wenn das Bild monochrom ist

4. Aktionen (BEHOBEN) – Immer genau wie gezeigt einschließen:

• Schaltfläche „Neu generieren“.
• Reset-Taste
• PNG-Schaltfläche herunterladen

Anforderungen:

• Die Seed-Steuerung muss funktionieren (vorher/nächst/zufällig/springen/anzeigen)
• Alle Parameter müssen über UI-Steuerelemente verfügen
• Die Schaltflächen „Neu generieren“, „Zurücksetzen“ und „Herunterladen“ müssen funktionieren
• Behalten Sie das Anthropic-Branding bei (UI-Stil, keine Kunstfarben)

VERWENDUNG DES ARTEFAKTS

Das HTML-Artefakt funktioniert sofort:

1. In claude.ai: Wird als interaktives Artefakt angezeigt – wird sofort ausgeführt
2. Als Datei: Speichern und in jedem Browser öffnen – kein Server erforderlich
3. Freigabe: Senden Sie die HTML-Datei – sie ist völlig eigenständig

VARIATIONEN & ENTDECKUNG

Das Artefakt umfasst standardmäßig die Seed-Navigation (Schaltflächen „Vorherige/Weitere/Zufällige“), sodass Benutzer Variationen erkunden können, ohne mehrere Dateien erstellen zu müssen. Wenn der Benutzer möchte, dass bestimmte Variationen hervorgehoben werden:

• Fügen Sie Seed-Voreinstellungen hinzu (Schaltflächen für „Variation 1: Seed 42“, „Variation 2: Seed 127“ usw.)
• Fügen Sie einen „Galeriemodus“ hinzu, der Miniaturansichten mehrerer Samen nebeneinander anzeigt
• Alles innerhalb desselben einzigen Artefakts

Das ist, als würde man eine Reihe von Drucken von derselben Platte erstellen – der Algorithmus ist konsistent, aber jeder Samen offenbart unterschiedliche Facetten seines Potenzials. Der interaktive Charakter bedeutet, dass Benutzer ihre eigenen Favoriten entdecken, indem sie den Saatraum erkunden.

DER KREATIVPROZESS

Benutzeranfrage -> Algorithmische Philosophie -> Implementierung

Jede Anfrage ist einzigartig. Der Prozess umfasst:

1. Interpretieren Sie die Absicht des Benutzers – Welche Ästhetik wird angestrebt?
2. Erstellen Sie eine algorithmische Philosophie (4–6 Absätze), die den rechnerischen Ansatz beschreibt
3. Im Code implementieren – Erstellen Sie den Algorithmus, der diese Philosophie zum Ausdruck bringt
4. Geeignete Parameter entwerfen – Was sollte einstellbar sein?
5. Erstellen Sie passende UI-Steuerelemente – Schieberegler/Eingaben für diese Parameter

Die Konstanten:

• Anthropisches Branding (Farben, Schriftarten, Layout)
• Seed-Navigation (immer vorhanden)
• Eigenständiges HTML-Artefakt

Alles andere ist variabel:

• Der Algorithmus selbst
• Die Parameter
• Die UI-Steuerelemente
• Das visuelle Ergebnis

Um die besten Ergebnisse zu erzielen, vertrauen Sie der Kreativität und lassen Sie sich bei der Umsetzung von der Philosophie leiten.

RESSOURCEN

Dieser Skill umfasst hilfreiche Vorlagen und Dokumentation:

• templates/viewer.html: ERFORDERLICHER AUSGANGSPUNKT für alle HTML-Artefakte.

  • Dies ist die Grundlage – enthält die genaue Struktur und das Anthropic-Branding
  • Unverändert bleiben: Layoutstruktur, Seitenleistenorganisation, Anthropic-Farben/Schriftarten, Seed-Steuerelemente, Aktionsschaltflächen
  • Ersetzen: Der p5.js-Algorithmus, Parameterdefinitionen und UI-Steuerelemente im Abschnitt „Parameter“.
  • Die ausführlichen Kommentare in der Datei geben genau an, was beibehalten oder ersetzt werden soll

• templates/generator_template.js: Referenz für p5.js Best Practices und Codestrukturprinzipien.

  • Zeigt, wie man Parameter organisiert, gesetzte Zufälligkeit verwendet und Klassen strukturiert
  • KEIN Mustermenü – nutzen Sie diese Prinzipien, um einzigartige Algorithmen zu erstellen
  • Betten Sie Algorithmen inline in das HTML-Artefakt ein (erstellen Sie keine separaten.js-Dateien).

Kritische Erinnerung:

• Die Vorlage ist der AUSGANGSPUNKT, nicht die Inspiration
• Der Algorithmus ist der Ort, an dem etwas Einzigartiges geschaffen werden kann
• Kopieren Sie nicht das Strömungsfeld-Beispiel, sondern bauen Sie, was die Philosophie verlangt
• Behalten Sie jedoch die genaue UI-Struktur und das Anthropic-Branding aus der Vorlage bei

Ressourcendateien

LIZENZ.txt

LICENSE.txt herunterladen

Binäre Ressource

templates/generator_template.js

Templates/generator_template.js herunterladen

Binäre Ressource

templates/viewer.html

Templates/viewer.html herunterladen

Binäre Ressource

Siehe in GitHub

Siehe in GitHub