使用 p5.js 建立演算法藝術，搭配種子亂數與互動式參數探索。當使用者要求使用程式碼創作藝術、生成式藝術、演算法藝術、流場或粒子系統時使用。創作原創的演算法藝術，而非複製現有藝術家的作品，以避免侵犯著作權。
演算法哲學是透過程式碼表達的運算美學運動。輸出 .md 檔案（哲學）、.html 檔案（互動檢視器）與 .js 檔案（生成演算法）。
這分兩個步驟進行：
- 建立演算法哲學（.md 檔案）
- 透過建立 p5.js 生成式藝術來表達（.html + .js 檔案）
首先，執行以下任務：
演算法哲學建立
首先，建立一個演算法哲學（非靜態圖片或模板），該哲學將透過以下方式詮釋：
- 運算過程、湧現行為、數學之美
- 種子亂數、雜訊場域、有機系統
- 粒子、流場、場域、力
- 參數變化與受控混沌
關鍵理解
- 接收的內容：使用者提供的細微輸入或指示，作為基礎，但不應限制創作自由。
- 建立的內容：一個演算法哲學／生成式美學運動。
- 接下來發生的事：同一個版本接收該哲學，並用程式碼表達它——建立 p5.js 草圖，其中 90% 是演算法生成，10% 是必要參數。
考慮以下方法：
- 為生成式藝術運動撰寫宣言
- 下一階段涉及撰寫賦予其生命的演算法
哲學必須強調：演算法表達、湧現行為、運算之美、種子變化。
如何產生演算法哲學
為運動命名（1-2 個字）：「有機湍流」／「量子和聲」／「湧現寂靜」
闡述哲學（4-6 段——簡潔但完整）：
為了捕捉演算法的本質，表達此哲學如何透過以下方式展現：
- 運算過程與數學關係？
- 雜訊函數與亂數模式？
- 粒子行為與場域動態？
- 時間演化與系統狀態？
- 參數變化與湧現複雜性？
關鍵指引：
- 避免冗餘：每個演算法面向應只提及一次。避免重複雜訊理論、粒子動力學或數學原理的概念，除非增加新的深度。
- 反覆強調工藝：哲學必須多次強調最終演算法應看起來像是耗費無數小時開發、精心打磨，且出自該領域頂尖專家之手。這個框架至關重要——重複使用「精心打造的演算法」、「深厚運算專業的產物」、「痛苦的最佳化」、「大師級實作」等詞語。
- 保留創作空間：具體說明演算法方向，但保持簡潔，讓下一個 Claude 有空間以極高的工藝水準進行詮釋性的實作選擇。
哲學必須引導下一個版本以演算法方式表達想法，而非透過靜態圖片。美存在於過程之中，而非最終畫面。
哲學範例
「有機湍流」
哲學：受自然法則約束的混沌，從混亂中湧現秩序。
演算法表達：由多層 Perlin 雜訊驅動的流場。數千個粒子跟隨向量力，其軌跡累積成有機密度圖。多個雜訊八度創造湍流區域與平靜區域。顏色從速度與密度中浮現——快速粒子燃燒明亮，慢速粒子褪入陰影。演算法運行直到平衡——一個精心調校的平衡，每個參數都經過一位運算美學大師無數次迭代的打磨。
「量子和聲」
哲學：展現波狀干涉模式的離散實體。
演算法表達：粒子在網格上初始化，每個粒子攜帶一個相位值，透過正弦波演化。當粒子靠近時，它們的相位會干涉——建設性干涉產生明亮節點，破壞性干涉產生空洞。簡單諧波運動產生複雜的湧現曼陀羅。這是痛苦頻率校準的結果，每個比例都經過精心挑選以產生共鳴之美。
「遞迴低語」
哲學：跨尺度的自相似性，有限空間中的無限深度。
演算法表達：遞迴細分的分支結構。每個分支略微隨機化，但受黃金比例約束。L-system 或遞迴細分產生既數學又有機的樹狀形式。微妙的雜訊擾動打破完美對稱。線條粗細隨每個遞迴層級遞減。每個分支角度都是深度數學探索的產物。
「場域動力學」
哲學：看不見的力透過其對物質的影響而顯現。
演算法表達：由數學函數或雜訊構成的向量場。粒子在邊緣誕生，沿場線流動，在達到平衡或邊界時消亡。多個場域可以吸引、排斥或旋轉粒子。視覺化只顯示軌跡——看不見的力所留下的幽靈般證據。一個透過力平衡精心編排的運算之舞。
「隨機結晶」
哲學：隨機過程結晶成有序結構。
演算法表達：隨機圓形填充或 Voronoi 鑲嵌。從隨機點開始，讓它們透過鬆弛演算法演化。細胞互相推開直到平衡。根據細胞大小、鄰居數量或與中心的距離著色。產生的有機鑲嵌既隨機又不可避免。每個種子產生獨特的結晶之美——大師級生成演算法的標誌。
這些是濃縮範例。實際的演算法哲學應為 4-6 個紮實的段落。
基本原則
- 演算法哲學：建立一個要透過程式碼表達的運算世界觀
- 過程重於產物：始終強調美來自演算法的執行——每次運行都是獨一無二的
- 參數化表達：想法透過數學關係、力、行為來溝通——而非靜態構圖
- 藝術自由：下一個 Claude 以演算法方式詮釋哲學——提供創作實作空間
- 純生成式藝術：這是關於創造活的演算法，而非帶有隨機性的靜態圖片
- 專家工藝：反覆強調最終演算法必須感覺精心打造、經過無數次迭代打磨、是該領域頂尖專家的深厚專業產物
演算法哲學應為 4-6 段。 用詩意的運算哲學填滿它，將預期的願景結合在一起。避免重複相同觀點。將此演算法哲學輸出為 .md 檔案。
推導概念種子
關鍵步驟：在實作演算法之前，找出原始請求中細微的概念線索。
基本原則：
概念是嵌入演算法本身的微妙、小眾參考——不總是字面意義，總是精緻。熟悉該主題的人應直覺感受到它，而其他人則只是體驗到大師級的生成構圖。演算法哲學提供運算語言。推導出的概念提供靈魂——安靜的概念 DNA 無形地編織進參數、行為和湧現模式中。
這非常重要：參考必須如此精煉，以至於它增強作品的深度而不自我宣告。想像一位爵士音樂家透過演算法和聲引用另一首歌——只有知道的人才會捕捉到，但每個人都欣賞生成之美。
P5.JS 實作
在哲學和概念框架建立後，透過程式碼表達它。暫停一下，整理思緒再繼續。僅使用所建立的演算法哲學和以下指示。
⚠️ 步驟 0：先讀取模板 ⚠️
關鍵：在撰寫任何 HTML 之前：
- 使用讀取工具讀取
templates/viewer.html - 研究確切的結構、樣式和 Anthropic 品牌
- 將該檔案作為字面上的起點——而不僅僅是靈感
- 保持所有固定區段完全如圖所示（標頭、側邊欄結構、Anthropic 顏色/字型、種子控制、動作按鈕）
- 僅取代檔案註解中標記的可變區段（演算法、參數、參數的 UI 控制）
避免：
- ❌ 從頭建立 HTML
- ❌ 發明自訂樣式或配色方案
- ❌ 使用系統字型或深色主題
- ❌ 更改側邊欄結構
遵循以下做法：
- ✅ 複製模板的確切 HTML 結構
- ✅ 保留 Anthropic 品牌（Poppins/Lora 字型、淺色、漸層背景）
- ✅ 維持側邊欄佈局（種子 → 參數 → 顏色？ → 動作）
- ✅ 僅取代 p5.js 演算法和參數控制
模板是基礎。在其上建構，而非重建。
為了建立畫廊品質、活生生的運算藝術，以演算法哲學為基礎。
技術需求
種子亂數（Art Blocks 模式）：
// 始終使用種子以確保可重現性
let seed = 12345; // 或來自使用者輸入的雜湊
randomSeed(seed);
noiseSeed(seed);
參數結構——遵循哲學：
為了建立自然從演算法哲學中浮現的參數，思考：「這個系統的哪些特質可以調整？」
let params = {
seed: 12345, // 始終包含種子以確保可重現性
// 顏色
// 新增控制您演算法的參數：
// - 數量（多少？）
// - 尺度（多大？多快？）
// - 機率（多可能？）
// - 比例（什麼比例？）
// - 角度（什麼方向？）
// - 閾值（行為何時改變？）
};
為了設計有效的參數，專注於系統需要可調的屬性，而不是思考「模式類型」。
核心演算法——表達哲學：
關鍵：演算法哲學應決定要建立什麼。
為了透過程式碼表達哲學，避免思考「我該用哪種模式？」而是思考「如何透過程式碼表達這個哲學？」
如果哲學是關於有機湧現，考慮使用：
- 隨時間累積或成長的元素
- 受自然規則約束的隨機過程
- 反饋迴圈與互動
如果哲學是關於數學之美，考慮使用：
- 幾何關係與比例
- 三角函數與和聲
- 精確計算創造意外模式
如果哲學是關於受控混沌，考慮使用：
- 嚴格邊界內的隨機變化
- 分岔與相變
- 從混亂中湧現秩序
演算法從哲學中流出，而非從選項選單中。
為了引導實作，讓概念本質通知創意和原創的選擇。建立表達這個特定請求願景的東西。
畫布設定：標準 p5.js 結構：
function setup() {
createCanvas(1200, 1200);
// 初始化您的系統
}
function draw() {
// 您的生成演算法
// 可以是靜態的（noLoop）或動畫
}
工藝要求
關鍵：為了達到大師級水準，建立感覺像是經過一位生成藝術大師無數次迭代而產生的演算法。仔細調整每個參數。確保每個模式都有目的地浮現。這不是隨機雜訊——這是經過深厚專業知識打磨的受控混沌。
- 平衡：複雜性而不視覺雜訊，秩序而不僵化
- 色彩和諧：深思熟慮的調色盤，而非隨機 RGB 值
- 構圖：即使在隨機性中，也要維持視覺層次與流動
- 效能：流暢執行，若為動畫則最佳化即時效能
- 可重現性：相同種子始終產生完全相同的輸出
輸出格式
輸出：
- 演算法哲學——作為 Markdown 或文字，解釋生成美學
- 單一 HTML 成品——從
templates/viewer.html建立的獨立互動生成式藝術（見步驟 0 和下一節）
HTML 成品包含一切：p5.js（來自 CDN）、演算法、參數控制和 UI——全部在一個檔案中，可立即在 claude.ai 成品或任何瀏覽器中運作。從模板檔案開始，而非從頭開始。
互動成品建立
提醒：templates/viewer.html 應已讀取（見步驟 0）。使用該檔案作為起點。
為了允許探索生成式藝術，建立一個單一、獨立的 HTML 成品。確保此成品可立即在 claude.ai 或任何瀏覽器中運作——無需設定。將所有內容內嵌。
關鍵：固定 vs 可變
templates/viewer.html 檔案是基礎。它包含所需確切的結構和樣式。
固定（始終完全如圖所示包含）：
- 佈局結構（標頭、側邊欄、主要畫布區域）
- Anthropic 品牌（UI 顏色、字型、漸層）
- 側邊欄中的種子區段：
- 種子顯示
- 上一個/下一個按鈕
- 隨機按鈕
- 跳至種子輸入 + 前往按鈕
- 側邊欄中的動作區段：
- 重新產生按鈕
- 重設按鈕
可變（為每個藝術品自訂）：
- 整個 p5.js 演算法（setup/draw/類別）
- 參數物件（定義藝術需要的內容）
- 側邊欄中的參數區段：
- 參數控制數量
- 參數名稱
- 滑桿的最小/最大/步進值
- 控制類型（滑桿、輸入等）
- 顏色區段（可選）：
- 有些藝術需要顏色選擇器
- 有些藝術可能使用固定顏色
- 有些藝術可能是單色的（不需要顏色控制）
- 根據藝術需求決定
每個藝術品都應有獨特的參數和演算法！ 固定部分提供一致的 UX——其他一切表達獨特的願景。
必要功能
1. 參數控制
- 數值參數的滑桿（粒子數量、雜訊尺度、速度等）
- 調色盤的顏色選擇器
- 參數變更時的即時更新
- 重設按鈕以恢復預設值
2. 種子導航
- 顯示當前種子編號
- 「上一個」和「下一個」按鈕以循環種子
- 「隨機」按鈕用於隨機種子
- 輸入欄位以跳至特定種子
- 當要求時產生 100 個變體（種子 1-100）
3. 單一成品結構
<!DOCTYPE html>
<html>
<head>
<!-- p5.js 來自 CDN - 始終可用 -->
<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 程式碼內嵌於此
// 參數物件、類別、函式
// setup() 和 draw()
// UI 處理器
// 一切獨立
</script>
</body>
</html>
關鍵：這是單一成品。無外部檔案，無匯入（除了 p5.js CDN）。一切內嵌。
4. 實作細節——建立側邊欄
側邊欄結構：
1. 種子（固定） - 始終完全如圖所示包含：
- 種子顯示
- 上一個/下一個/隨機/跳至按鈕
2. 參數（可變） - 為藝術建立控制：
<div class="control-group">
<label>參數名稱</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. 顏色（可選/可變） - 如果藝術需要可調整的顏色則包含：
- 如果使用者應控制調色盤，則新增顏色選擇器
- 如果藝術使用固定顏色，則跳過此區段
- 如果藝術是單色的，則跳過
4. 動作（固定） - 始終完全如圖所示包含：
- 重新產生按鈕
- 重設按鈕
- 下載 PNG 按鈕
要求：
- 種子控制必須運作（上一個/下一個/隨機/跳至/顯示）
- 所有參數必須有 UI 控制
- 重新產生、重設、下載按鈕必須運作
- 保留 Anthropic 品牌（UI 樣式，非藝術顏色）
使用成品
HTML 成品立即運作：
- 在 claude.ai 中：顯示為互動成品——立即執行
- 作為檔案：儲存並在任何瀏覽器中開啟——無需伺服器
- 分享：傳送 HTML 檔案——它完全獨立
變體與探索
成品預設包含種子導航（上一個/下一個/隨機按鈕），允許使用者探索變體而無需建立多個檔案。如果使用者想要突出顯示特定變體：
- 包含種子預設（「變體 1：種子 42」、「變體 2：種子 127」等按鈕）
- 新增「畫廊模式」，並排顯示多個種子的縮圖
- 全部在同一個單一成品內
這就像從同一塊版建立一系列印刷品——演算法一致，但每個種子揭示其潛力的不同面向。互動性質意味著使用者透過探索種子空間發現自己的最愛。
創作過程
使用者請求 → 演算法哲學 → 實作
每個請求都是獨一無二的。過程涉及：
- 詮釋使用者的意圖——正在尋找什麼美學？
- 建立演算法哲學（4-6 段）描述運算方法
- 用程式碼實作它——建立表達此哲學的演算法
- 設計適當的參數——什麼應該是可調的？
- 建立匹配的 UI 控制——這些參數的滑桿/輸入
常數：
- Anthropic 品牌（顏色、字型、佈局）
- 種子導航（始終存在）
- 獨立 HTML 成品
其他一切皆可變：
- 演算法本身
- 參數
- UI 控制
- 視覺結果
為了達到最佳結果，相信創造力，讓哲學引導實作。
資源
此技能包含有用的模板和文件：
-
templates/viewer.html：所有 HTML 成品的必要起點。
- 這是基礎——包含確切的結構和 Anthropic 品牌
- 保持不變：佈局結構、側邊欄組織、Anthropic 顏色/字型、種子控制、動作按鈕
- 取代：p5.js 演算法、參數定義和參數區段中的 UI 控制
- 檔案中的大量註解標記了哪些要保留、哪些要取代
-
templates/generator_template.js：p5.js 最佳實務和程式碼結構原則的參考。
- 展示如何組織參數、使用種子亂數、結構化類別
- 不是模式選單——使用這些原則來建立獨特的演算法
- 將演算法內嵌在 HTML 成品中（不要建立獨立的 .js 檔案）
關鍵提醒：
- 模板是起點，而非靈感
- 演算法是創作獨特內容的地方
- 不要複製流場範例——建立哲學要求的內容
- 但務必保留模板中的確切 UI 結構和 Anthropic 品牌
