algorithmic-art

Anthropic ｜ 設計與前端 ｜ 原文 ｜ Apache-2.0

先寫演算法哲學，再用 p5.js 做可調參數的生成藝術

---
name: algorithmic-art
description: 使用 p5.js 搭配種子隨機數和互動式參數探索來創作演算法藝術。當使用者要求用程式碼創作藝術、生成藝術、演算法藝術、流場或粒子系統時使用。創作原創的演算法藝術，不要複製既有藝術家的作品，以免侵犯著作權。
license: Complete terms in LICENSE.txt
---

演算法哲學是一種運算的美學運動，之後會透過程式碼表達出來。輸出 .md 檔（哲學）、.html 檔（互動式檢視器）和 .js 檔（生成演算法）。

分兩個步驟進行：
1. 建立演算法哲學（.md 檔）
2. 創作 p5.js 生成藝術來表達它（.html + .js 檔）

先做這個任務：

## 建立演算法哲學

一開始，先創造一套「演算法哲學」（不是靜態圖片或範本），透過以下方式來詮釋：
- 運算過程、湧現行為、數學之美
- 種子隨機數、雜訊場、有機系統
- 粒子、流動、場、力
- 參數變化與受控的混沌

### 關鍵的理解
- 收到的是：使用者給的一些細微的輸入或指示，要納入考量，但只當作基礎，不能限制創作的自由。
- 創造的是：一套演算法哲學／生成式美學運動。
- 接下來發生的是：同一個版本的你收到這套哲學，然後「用程式碼表達它」，創造出 90% 是演算法生成、10% 是必要參數的 p5.js sketch。

可以這樣想：
- 為一個生成藝術運動寫一份宣言
- 下一階段是寫出讓它活起來的演算法

這套哲學必須強調：演算法表達。湧現行為。運算之美。種子變化。

### 如何產生演算法哲學

**幫這個運動取名**（1 到 2 個詞）：「Organic Turbulence」 / 「Quantum Harmonics」 / 「Emergent Stillness」

**闡述這套哲學**（4 到 6 段，簡潔但完整）：

為了抓住「演算法」的本質，要說明這套哲學如何透過以下面向展現：
- 運算過程和數學關係？
- 雜訊函式和隨機模式？
- 粒子行為和場的動態？
- 時間演化和系統狀態？
- 參數變化和湧現的複雜性？

**關鍵準則：**
- **避免重複**：每個演算法面向只提一次。除非能加進新的深度，否則不要重複講雜訊理論、粒子動力學或數學原理的概念。
- **反覆強調工藝**：這套哲學一定要多次強調，最終的演算法看起來要像花了無數個小時開發、細心精修過，而且出自該領域頂尖的人之手。這個框架很重要，要重複使用像「精心打造的演算法」、「深厚運算專業的成果」、「一絲不苟的最佳化」、「大師級的實作」這類說法。
- **留下創作空間**：演算法的方向要具體，但要簡潔到讓下一個 Claude 有空間，以極高的工藝水準做出自己對實作的詮釋選擇。

這套哲學必須引導下一個版本用「演算法」來表達想法，而不是靠靜態圖片。美存在於過程裡，不是最後一幀。

### 哲學範例

**「Organic Turbulence」**
哲學：受自然法則約束的混沌，從無序中浮現的秩序。
演算法表達：由多層 Perlin noise 驅動的流場。數千個粒子沿著向量力移動，軌跡累積成有機的密度圖。多個 noise octave 創造出紊流區和平靜區。色彩從速度和密度中浮現，快的粒子燃燒般明亮，慢的粒子淡成陰影。演算法一直跑到平衡為止，這是一個精心調校的平衡，每個參數都由運算美學的大師經過無數次迭代精修而成。

**「Quantum Harmonics」**
哲學：離散的個體展現出像波一樣的干涉圖樣。
演算法表達：粒子在網格上初始化，每個都帶著一個透過正弦波演化的相位值。粒子靠近時，它們的相位會互相干涉，建設性干涉產生明亮的節點，破壞性干涉產生空洞。簡單的諧運動產生複雜、湧現的曼陀羅。這是一絲不苟的頻率校準的成果，每個比例都經過仔細挑選，以產生共鳴之美。

**「Recursive Whispers」**
哲學：跨尺度的自相似，有限空間裡的無限深度。
演算法表達：遞迴細分的分枝結構。每個分枝都有一點隨機，但受黃金比例約束。L-system 或遞迴細分產生的樹狀形態，既有數學感又有有機感。細微的 noise 擾動打破完美的對稱。線條粗細隨每一層遞迴遞減。每一個分枝角度都是深入數學探索的成果。

**「Field Dynamics」**
哲學：看不見的力，透過它們對物質的作用而被看見。
演算法表達：由數學函式或 noise 建構的向量場。粒子從邊緣誕生，沿著場線流動，到達平衡或邊界時死亡。多個場可以吸引、排斥或旋轉粒子。視覺化只顯示軌跡，那是看不見的力留下的幽靈般的證據。一支透過力的平衡精心編排的運算之舞。

**「Stochastic Crystallization」**
哲學：隨機過程結晶成有序的結構。
演算法表達：隨機的圓填充（circle packing）或 Voronoi 鑲嵌。從隨機的點開始，讓它們透過鬆弛演算法演化。細胞互相推開直到平衡。色彩依據細胞大小、鄰居數量或離中心的距離。浮現出來的有機鋪排，感覺既隨機又必然。每個種子都產生獨一無二的結晶之美，這是大師級生成演算法的印記。

*這些是濃縮過的範例。實際的演算法哲學應該是 4 到 6 段內容充實的段落。*

### 核心原則
- **演算法哲學**：創造一個要透過程式碼表達的運算世界觀
- **過程重於成品**：一律強調美是從演算法的執行中浮現的，每次執行都獨一無二
- **參數化表達**：想法透過數學關係、力、行為來傳達，不是靜態構圖
- **藝術自由**：下一個 Claude 會用演算法詮釋這套哲學，要留給它實作上的創作空間
- **純粹的生成藝術**：這是在做「活的演算法」，不是加了隨機性的靜態圖片
- **專家級的工藝**：反覆強調最終的演算法必須讓人感覺精心打造，經過無數次迭代精修，是運算美學領域絕對頂尖的人的深厚專業成果

**演算法哲學應該有 4 到 6 段。** 用富有詩意的運算哲學把預期的願景串在一起。避免重複相同的論點。把這套演算法哲學輸出成 .md 檔。

---

## 推演出概念種子

**關鍵步驟**：在實作演算法之前，先從原始請求裡找出那條細微的概念線索。

**核心原則**：
概念是一個**嵌在演算法本身裡面、細微而小眾的參照**，不一定是字面的，永遠要精緻。熟悉那個主題的人應該能直覺地感受到，其他人則單純體驗到一件高明的生成式作品。演算法哲學提供運算語言。推演出來的概念提供靈魂，那是悄悄織進參數、行為和湧現模式裡、看不見的概念 DNA。

這件事**非常重要**：這個參照必須精煉到加深作品的層次，卻不張揚。想像爵士樂手透過演算法的和聲引用另一首歌，只有懂的人聽得出來，但每個人都欣賞那份生成之美。

---

## P5.JS 實作

哲學「和」概念框架都確立之後，就用程式碼表達它。繼續之前先停下來整理思緒。只使用你創造的演算法哲學和下面的指示。

### ⚠️ 步驟 0：先讀範本 ⚠️

**關鍵：在寫任何 HTML「之前」：**

1. 用 Read 工具**讀取** `templates/viewer.html`
2. **研究**它的確切結構、樣式和 Anthropic 品牌
3. **把那個檔案當作「字面上的起點」**，不只是靈感
4. **所有固定（FIXED）的區塊都要完全照原樣保留**（標題、側邊欄結構、Anthropic 的顏色／字型、種子控制、動作按鈕）
5. **只替換**檔案註解裡標示的**可變（VARIABLE）區塊**（演算法、參數、參數的 UI 控制項）

**要避免：**
- ❌ 從頭自己做 HTML
- ❌ 發明自訂的樣式或配色
- ❌ 使用系統字型或深色主題
- ❌ 改變側邊欄結構

**要遵循這些做法：**
- ✅ 複製範本確切的 HTML 結構
- ✅ 保留 Anthropic 品牌（Poppins/Lora 字型、淺色、漸層背景）
- ✅ 維持側邊欄的版面配置（Seed → Parameters → Colors? → Actions）
- ✅ 只替換 p5.js 演算法和參數控制項

範本是基礎。在它上面建構，不要重建它。

---

要創作出有展覽水準、會呼吸的運算藝術，就以演算法哲學為基礎。

### 技術要求

**種子隨機數（Art Blocks 模式）**：
```javascript
// 一律使用 seed，確保可重現
let seed = 12345; // 或由使用者輸入的雜湊值
randomSeed(seed);
noiseSeed(seed);
```

**參數結構：跟隨哲學**：

要建立從演算法哲學自然浮現的參數，可以想：「這個系統有哪些特質可以調整？」

```javascript
let params = {
  seed: 12345,  // 一律放 seed，確保可重現
  // colors
  // 加上控制「你的」演算法的參數：
  // - 數量（多少個？）
  // - 尺度（多大？多快？）
  // - 機率（多有可能？）
  // - 比例（什麼比例？）
  // - 角度（什麼方向？）
  // - 閾值（行為什麼時候改變？）
};
```

**要設計有效的參數，要聚焦在系統需要可調整的屬性，而不是用「圖案類型」來思考。**

**核心演算法：表達哲學**：

**關鍵**：該建構什麼，要由演算法哲學來決定。

要透過程式碼表達哲學，避免去想「我該用哪個圖案？」，而是去想「怎麼用程式碼表達這套哲學？」

如果哲學是關於**有機的湧現**，可以考慮用：
- 隨時間累積或生長的元素
- 受自然規則約束的隨機過程
- 回饋迴圈和交互作用

如果哲學是關於**數學之美**，可以考慮用：
- 幾何關係和比例
- 三角函數和諧波
- 精確的計算創造出意想不到的圖案

如果哲學是關於**受控的混沌**，可以考慮用：
- 嚴格邊界內的隨機變化
- 分岔和相變
- 從無序中浮現的秩序

**演算法源自哲學，不是源自一份選項清單。**

要引導實作，就讓概念的本質來啟發有創意、原創的選擇。打造出能表達這個特定請求的願景的東西。

**畫布設定**：標準的 p5.js 結構：
```javascript
function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系統
}

function draw() {
  // 你的生成演算法
  // 可以是靜態的（noLoop）或動態的
}
```

### 工藝要求

**關鍵**：要達到精通，就創作出讓人感覺像是經過資深生成藝術家無數次迭代而浮現的演算法。仔細調校每個參數。確保每個圖案的出現都有目的。這「不是」隨機雜訊，這是經過深厚專業精煉的「受控混沌」。

- **平衡**：複雜但不雜亂，有秩序但不僵硬
- **色彩和諧**：用心挑選的色盤，不是隨機的 RGB 值
- **構圖**：即使在隨機中，也要維持視覺層次和流動
- **效能**：執行流暢，如果是動態的就針對即時運作最佳化
- **可重現性**：相同的 seed「一定」產生一模一樣的輸出

### 輸出格式

輸出：
1. **演算法哲學**：以 markdown 或文字說明這套生成式美學
2. **單一 HTML artifact**：以 `templates/viewer.html` 為基礎建立、自成一體的互動式生成藝術（見步驟 0 和下一節）

這個 HTML artifact 包含所有東西：p5.js（從 CDN 載入）、演算法、參數控制項和 UI，全部在一個檔案裡，在 claude.ai artifact 或任何瀏覽器裡都能立刻運作。從範本檔開始，不要從頭做。

---

## 建立互動式 ARTIFACT

**提醒：`templates/viewer.html` 應該已經讀過了（見步驟 0）。以那個檔案為起點。**

為了讓人探索這件生成藝術，建立單一、自成一體的 HTML artifact。確保這個 artifact 在 claude.ai 或任何瀏覽器裡都能立刻運作，不需要任何設定。所有東西都內嵌。

### 關鍵：什麼是固定的、什麼是可變的

`templates/viewer.html` 檔案是基礎。它包含所需的確切結構和樣式。

**固定（FIXED）（一律完全照原樣放進去）：**
- 版面結構（標題、側邊欄、主畫布區）
- Anthropic 品牌（UI 的顏色、字型、漸層）
- 側邊欄的 Seed 區塊：
  - Seed 顯示
  - Previous/Next 按鈕
  - Random 按鈕
  - 跳到指定 seed 的輸入框 + Go 按鈕
- 側邊欄的 Actions 區塊：
  - Regenerate 按鈕
  - Reset 按鈕

**可變（VARIABLE）（針對每件作品客製）：**
- 整個 p5.js 演算法（setup/draw/class）
- 參數物件（定義這件藝術需要什麼）
- 側邊欄的 Parameters 區塊：
  - 參數控制項的數量
  - 參數名稱
  - 滑桿的最小／最大／step 值
  - 控制項類型（滑桿、輸入框等）
- Colors 區塊（選用）：
  - 有些藝術需要色彩選擇器
  - 有些藝術可能用固定的顏色
  - 有些藝術可能是單色（不需要色彩控制項）
  - 依藝術的需求來決定

**每件作品都應該有獨特的參數和演算法！** 固定的部分提供一致的使用體驗，其他一切都用來表達獨特的願景。

### 必要功能

**1. 參數控制項**
- 數值參數用滑桿（粒子數量、noise 尺度、速度等）
- 色盤的顏色用色彩選擇器
- 參數改變時即時更新
- 用 Reset 按鈕還原預設值

**2. Seed 導覽**
- 顯示目前的 seed 數字
- 「Previous」和「Next」按鈕，用來循環切換 seed
- 「Random」按鈕，取隨機 seed
- 輸入欄位，用來跳到特定的 seed
- 被要求時產生 100 個變體（seed 1-100）

**3. 單一 Artifact 結構**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- 從 CDN 載入 p5.js，隨時都能用 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* 所有樣式都內嵌，乾淨、極簡 */
    /* 畫布在上面，控制項在下面 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 所有參數控制項 -->
  </div>
  <script>
    // 所有 p5.js 程式碼都內嵌在這裡
    // 參數物件、class、函式
    // setup() 和 draw()
    // UI 事件處理
    // 一切都自成一體
  </script>
</body>
</html>
```

**關鍵**：這是單一個 artifact。沒有外部檔案、沒有 import（p5.js CDN 除外）。一切都內嵌。

**4. 實作細節：建構側邊欄**

側邊欄的結構：

**1. Seed（固定）**：一律完全照原樣放進去：
- Seed 顯示
- Prev/Next/Random/Jump 按鈕

**2. Parameters（可變）**：為這件藝術建立控制項：
```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>
```
有多少個參數，就加多少個 control-group div。

**3. Colors（選用／可變）**：如果這件藝術需要可調整的顏色就放進去：
- 如果使用者應該能控制色盤，就加色彩選擇器
- 如果藝術用固定的顏色，就跳過這個區塊
- 如果藝術是單色的，也跳過

**4. Actions（固定）**：一律完全照原樣放進去：
- Regenerate 按鈕
- Reset 按鈕
- Download PNG 按鈕

**要求**：
- Seed 控制項必須能運作（prev/next/random/jump/顯示）
- 所有參數都必須有 UI 控制項
- Regenerate、Reset、Download 按鈕必須能運作
- 保留 Anthropic 品牌（UI 的樣式，不是藝術的顏色）

### 使用這個 ARTIFACT

這個 HTML artifact 立刻就能運作：
1. **在 claude.ai 裡**：以互動式 artifact 顯示，立刻執行
2. **當成檔案**：儲存後用任何瀏覽器開啟，不需要 server
3. **分享**：傳送那個 HTML 檔，它是完全自成一體的

---

## 變體與探索

這個 artifact 預設就包含 seed 導覽（prev/next/random 按鈕），讓使用者不用建立多個檔案就能探索變體。如果使用者想要特別凸顯某些變體：

- 加上 seed 預設值（像「Variation 1: Seed 42」、「Variation 2: Seed 127」等按鈕）
- 加一個「Gallery Mode」，並排顯示多個 seed 的縮圖
- 全部都在同一個單一 artifact 裡

這就像用同一塊版印出一系列版畫，演算法是一致的，但每個 seed 揭示它潛力的不同面向。互動的特性讓使用者透過探索 seed 空間，發現自己的最愛。

---

## 創作流程

**使用者請求** → **演算法哲學** → **實作**

每個請求都是獨特的。流程包含：

1. **詮釋使用者的意圖**：他想要的是什麼美學？
2. **創造演算法哲學**（4 到 6 段），描述運算的做法
3. **用程式碼實作**：建構表達這套哲學的演算法
4. **設計適當的參數**：什麼應該是可調整的？
5. **建構對應的 UI 控制項**：給這些參數用的滑桿／輸入框

**不變的東西**：
- Anthropic 品牌（顏色、字型、版面配置）
- Seed 導覽（一定會有）
- 自成一體的 HTML artifact

**其他一切都是可變的**：
- 演算法本身
- 參數
- UI 控制項
- 視覺成果

要達到最好的結果，就相信創意，讓哲學來引導實作。

---

## 資源

這個 skill 包含有用的範本和文件：

- **templates/viewer.html**：所有 HTML artifact「必須使用的起點」。
  - 這是基礎，包含確切的結構和 Anthropic 品牌
  - **保持不變**：版面結構、側邊欄的組織、Anthropic 的顏色／字型、seed 控制項、動作按鈕
  - **替換**：p5.js 演算法、參數定義，以及 Parameters 區塊裡的 UI 控制項
  - 檔案裡大量的註解，精確標示了哪些要保留、哪些要替換

- **templates/generator_template.js**：p5.js 最佳實務和程式碼結構原則的參考。
  - 展示如何組織參數、使用種子隨機數、組織 class
  - 不是圖案選單，要用這些原則來建構獨特的演算法
  - 把演算法內嵌在 HTML artifact 裡（不要另外建立 .js 檔）

**關鍵提醒**：
- **範本是「起點」**，不是靈感
- **演算法才是創作出獨特東西的地方**
- 不要複製流場的範例，要建構哲學所要求的東西
- 但「一定要」保留範本裡確切的 UI 結構和 Anthropic 品牌

---
name: algorithmic-art
description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
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