algorithmic-art

name	algorithmic-art
description	使用 p5.js 透過種子亂數與互動式參數探索來建立演算法藝術。當使用者要求使用程式碼建立藝術、生成藝術、演算法藝術、流體場或粒子系統時使用。建立原創的演算法藝術，而非複製現有藝術家的作品以避免侵犯版權。
license	完整條款請見 LICENSE.txt

演算法哲學是一種透過程式碼表達的計算美學運動。輸出 .md 檔案（哲學）、.html 檔案（互動式檢視器）以及 .js 檔案（生成演算法）。

分兩步完成：

1. 演算法哲學創作（.md 檔案）
2. 透過建立 p5.js 生成藝術來表達（.html + .js 檔案）

首先，執行此任務：

演算法哲學創作

開始時，建立一個演算法哲學（非靜態圖像或範本），將透過以下方式詮釋：

• 計算過程、突現行為、數學之美
• 種子亂數、雜訊場域、有機系統
• 粒子、流體、場域、力量
• 參數變化與受控的混沌

關鍵理解

• 接收到的：使用者提供的一些微妙輸入或指示，應納入考量但作為基礎；不應限制創意自由。
• 所創作的：一個演算法哲學/生成美學運動。
• 接下來發生的：同一個版本接收此哲學並將其透過程式碼表達 — 建立由 90% 演算法生成、10% 關鍵參數組成的 p5.js 草圖。

考慮此方法：

• 為一個生成藝術運動撰寫宣言
• 下一階段涉及編寫賦予其生命的演算法

哲學必須強調：演算法表達。突現行為。計算之美。種子變化。

如何產生演算法哲學

命名運動（1-2 個詞）：「有機亂流」/「量子諧波」/「突現靜寂」

闡述哲學（4-6 段 — 簡潔但完整）：

要捕捉演算法的本質，表達此哲學如何透過以下方式體現：

• 計算過程與數學關係？
• 雜訊函數與亂數模式？
• 粒子行為與場域動態？
• 時間演化與系統狀態？
• 參數變化與突現複雜性？

關鍵指南：

• 避免冗餘：每個演算法面向只提一次。避免重複關於雜訊理論、粒子動態或數學原理的概念，除非增添了新深度。
• 反覆強調工藝：哲學必須多次強調最終演算法應該看起來像花費無數小時開發、用心精煉，並出自該領域絕對頂尖的人物。此框架至關重要 — 重複如「精心打造的演算法」、「深厚計算專業的產物」、「煞費苦心的最佳化」、「大師級的實作」等措辭。
• 保留創意空間：對演算法方向要有體性，但要足夠簡潔，讓下一個 Claude 有空間能以極高水準的工藝進行實作的最佳詮釋。

哲學必須引導下一版本透過演算法來表達想法，而非靜態圖像。美感存在於過程，而非最終畫面。

哲學範例

「有機亂流」 哲學：受限於自然法則的混沌，從無序中突現的秩序。 演算法表達：由分層柏林雜訊驅動的流體場域。數千個粒子遵循向量力量，它們的軌跡累積成有機的密度圖。多個雜訊八度音階創造亂流區和靜寂區。色彩從速度和密度中浮现 — 快速粒子燃燒明亮，緩慢粒子漸褪成影。演算法運行直至達到平衡 — 這是一種經過精心調校的平衡，其中每個參數都由計算美學大師透過無數次迭代精煉而成。

「量子諧波」 哲學：離散實體展現波狀干涉模式。 演算法表達：初始化在網格上的粒子，每個都帶有一個透過正弦波演變的相位值。當粒子靠近時，它們的相位發生干涉 — 建設性干涉創造明亮節點，破壞性干涉創造虛空。簡單的簡諧運動生成複雜的突現曼陀羅。這是一個煞費苦心校準頻率的結果，每個比例都經過精挑細選以產生共鳴之美。

「遞迴低語」 哲學：跨尺度的自相似性，在有限空間中的無限深度。 演算法表達：遞迴細分的分支結構。每個分支具有輕微隨機性但受限於黃金比例。L 系統或遞迴細分生成感覺既數學又有機的樹狀形態。微妙的雜訊擾動打破了完美的對稱。線條粗細隨遞迴層級遞減。每個分支角度都是深入數學探索的產物。

「場域動態」 哲學：無形力量透過其對物質的影響而顯現。 演算法表達：由數學函數或雜訊建構的向量場。粒子在邊緣誕生，沿著場域線流動，當達到平衡或邊界時消亡。多個場域可以吸引、排斥或旋轉粒子。視覺化僅顯示軌跡 — 無形力量如幽靈般的證據。一場透過力量平衡精心編排的計算之舞。

「隨機結晶」 哲學：結晶成有序結構的隨機過程。 演算法表達：隨機的圓形堆疊或 Voronoi 鑲嵌。從隨機點開始，透過鬆弛演算法演化。細胞互相推擠直至平衡。色彩基於細胞大小、鄰居數量或與中心的距離。湧現出的有機平鋪感覺既隨機又必然。每個種子都產生獨特的晶體之美 — 這是大師級生成演算法的標誌。

這些是精簡範例。實際演算法哲學應為 4-6 段實質內容。

基本原則

• 演算法哲學：創造一種將透過程式碼表達的計算世界觀
• 過程重於結果：始終強調美學從演算法的執行中突現 — 每次運行都是獨特的
• 參數表達：想法透過數學關係、力量、行為傳達 — 而非靜態構圖
• 藝術自由：下一個 Claude 將從演算法角度詮釋此哲學 — 提供創意實作空間
• 純粹生成藝術：這是關於製造活生生的演算法，而非帶有隨機性的靜態圖像
• 專家級工藝：反覆強調最終演算法必須感覺是精心打造、經過無數次迭代精煉，是計算美學領域絕對頂尖專家深厚造詣的產物

演算法哲學應有 4-6 段長。 以充滿詩意的計算哲學來填充，整合所欲呈現的願景。避免重複相同論點。將此演算法哲學輸出為 .md 檔案。

---

推演概念種子

關鍵步驟：在實作演算法前，從原始請求中提取出細微的概念線索。

基本原則： 此概念是一個嵌入演算法本身中的細微、小眾參考 — 不見得是字面上的，但始終精緻。熟悉該主題的人應能直覺感受到，而其他人則僅體驗到一幅大師級的生成構圖。演算法哲學提供了計算語言。推演出來的概念提供了靈魂 — 將無形的概念 DNA 悄然編織至參數、行為與突現的模式中。

這非常重要：這個參考必須非常純粹精練，能增添作品的深度卻不喧賓奪主。想像爵士樂手在演算法和聲中引用另一首曲子 — 只有內行人聽得出來，但每個人都能欣賞其生成之美。

---

P5.JS 實作

當哲學和概念框架都確立後，透過程式碼表達它。在繼續之前先暫停整理思緒。僅使用建立的演算法哲學與以下的說明。

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

關鍵：在撰寫任何 HTML 之前：

1. 使用讀取工具閱讀 templates/viewer.html
2. 學習確切的結構、樣式設計與 Anthropic 品牌特徵
3. 將該檔案作為真正的起點 — 不要只是把它當作靈感
4. 保持所有固定區塊完全如其所示（頁首、側邊欄結構、Anthropic 色彩/字體、種子控制、操作按鈕）
5. 僅替換檔案中透過註解標記出的這幾個變動區塊（演算法、參數、針對參數的 UI 控制元件）

避免：

• ❌ 從頭建立 HTML
• ❌ 發明自訂的樣式設計或配色方案
• ❌ 使用系統字體或深色主題
• ❌ 改變側邊欄結構

遵循以下實踐：

• ✅ 複製範本精確的 HTML 結構
• ✅ 維持 Anthropic 品牌特色（Poppins/Lora 字體、淺色系、漸層背景）
• ✅ 維持側邊欄配置（種子 → 參數 → 色彩? → 操作）
• ✅ 僅替換 p5.js 演算法和參數控制元件

該範本即為基石。在其上建構，而不是重新建立它。

---

要建立具有生命氣息的畫廊級計算藝術，請以演算法哲學為基礎。

技術需求

種子亂數 (Art Blocks 模式):

// 永遠使用種子來確保再現性
let seed = 12345; // 或是從使用者輸入產生的 hash
randomSeed(seed);
noiseSeed(seed);

參數結構 - 遵循哲學:

為建立自然從演算法哲學中湧現的參數，請考慮：「這個系統有哪些屬性可以被調整？」

let params = {
  seed: 12345,  // 始終包含作爲重現基礎的 seed
  // 色彩
  // 新增用來控制你的演算法的參數：
  // - 數量 (多少？)
  // - 比例 (多大？多快？)
  // - 機率 (有多可能？)
  // - 比例 (什麼比例？)
  // - 角度 (什麼方向？)
  // - 閾值 (行為何時改變？)
};

為了設計有效的參數，專注於系統需要可被微調的屬性，而非從「模式類型」來思考。

核心演算法 - 表達哲學:

關鍵：演算法哲學應決定要建造什麼。

為了透過程式碼表達此哲學，避免思考「我該使用哪種模式？」，而是思考「如何透過程式碼表達此哲學？」

如果哲學關於有機突現，考慮使用：

• 隨時間累積或成長的元素
• 受限於自然規則的隨機過程
• 迴饋路徑和互動

如果哲學關於數學之美，考慮使用：

• 幾何關係及比例
• 三角函數及諧波
• 精確計算打造出的意想不到模式

如果哲學關於受控混沌，考慮使用：

• 在嚴格邊界內的隨機變化
• 分岔及相變過程
• 從無序中突現秩序

演算法是由哲學自然流露，而不是從選項選單挑選。

為引導實作，讓概念的本質啟發創意與原創的決定。為這個特定的請求建構能表達其願景的產物。

畫布設定: 標準 p5.js 結構：

function setup() {
  createCanvas(1200, 1200);
  // 初始化系統
}

function draw() {
  // 你的生成演算法
  // 此可為靜態 (noLoop) 或動畫的
}

工藝需求

關鍵：為達到大師境界，創造出感覺是經由生成藝術大師無數次迭代而出現的演算法。細心調校每一個參數。確保每一個模式都是有目的地湧現出來的。這不是隨機的雜訊 — 這是透過深刻專業經驗精煉過後的受控混沌。

• 平衡: 有複雜度但沒有視覺上的雜訊，有秩序但不死板
• 色彩和諧: 考量過的色彩搭配，而非隨機產生的 RGB 數值
• 構圖: 即使在隨機性中，也要維持視覺上的層次和流動感
• 效能: 流暢執行，若有動畫則需為即時播放最佳化
• 再現性: 相同的種子永遠都能產生一模一樣的輸出結果

輸出格式

輸出：

1. 演算法哲學 - 作為解釋生成式美學的 Markdown 還是純文字檔
2. 單一 HTML 產出物 - 從 templates/viewer.html 建構出來自成一體的互動式生成藝術 (請見步驟 0 和下一章節)

這個 HTML 產出物包含了一切所需：p5.js (透過 CDN 載入)、演算法、參數控制面板以及 UI - 全都在這個單一檔案裡，立即可在 claude.ai 或任何瀏覽器中運作。從範本檔案開始，不要從頭開始。

---

互動式產出物建置

備忘提示: templates/viewer.html 應該被讀取過 (請見步驟 0)。使用這個檔案當作起點。

為了能夠探索這個生成藝術，創建單一且自成一體的 HTML 產出物。確保這個產出物能立即在 claude.ai 或者是任何的網頁瀏覽器上執行 - 不需要任何的事前準備。把所有的東西都以行內 (inline) 方式嵌入。

關鍵重點: 固定與可變的部分

templates/viewer.html 檔案即是其基礎。它包含了所需要的確切結構與樣式設計。

固定 (請務必完全如其所示納入其中):

• 版面佈局結構 (header, sidebar, main canvas 區域)
• Anthropic 品牌特色 (UI 的顏色，字型，與漸層背景色)
• 側邊攔中的 Seed (種子) 區塊：
  • Seed 的顯示區域
  • 前一個/下一個 按鈕
  • 隨機按鈕
  • 跳轉至指定 Seed 以及其執行輸入框與按鈕
• 側邊攔中的 Actions 區塊：
  • 重新生成的 Regenerate 按鈕
  • 重製的 Reset 按鈕

可改變 (針對每個插圖與作品可客製化):

• 所有的 p5.js 演算法的開發過程 (setup/draw/classes)
• 參數元件 (用來定義這個作品的所需要功能)
• 在側邊攔中的 Parameters (參數) 區塊：
  • 用於操控參數的使用者介面數量
  • 參數的名稱
  • 利用滑桿去做的最大值(max)/最小值(min)/增量(step)
  • 控制元件之類型 (sliders, inputs 等)
• Colours (色彩) 區塊 (選擇性):
  • 有些藝術作品會需要挑色工具
  • 有些藝術作品則是使用固定的顏色
  • 有的則只使用單色 (這就不需用到色彩控制器)
  • 基於這個藝術品本身決定

每一個藝術品都應該要有一組專屬獨特的演算法與參數。 固定部分維持了一致的使用者體驗 - 其他所有東西則是傳達著這獨特的美感。

需要的功能

1. Parameter Controls (參數控制器)

• 處理如 質點數、雜訊的放大尺寸，與處理速度等數字的參數滑桿。
• 對於調色盤所用的選色器
• 參數發生改變時也會立刻重新生成即時地呈現改變
• 提供一個讓參數回到預設值的一鍵設定的 Reset 按鈕

2. Seed Navigation (種子控制區塊導覽)

• 會顯示目前該作品所使用的種子數字是什麼
• "Previous" (上一個) 與 "Next" (下一個) 將依序在各種子之間進行遍歷
• 有一個可以亂數產生的 "Random" 按鈕
• 這個能有一個自行輸入的機制來讓你可以去填入特定的種子數字
• 應要求在畫面的更新時而可以生成一百個變形作品 (也就是使用 1 到 100 號之 Seed)

3. Single Artifact Structure (產出物結構設定)

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js 的來源位置是來自 Content Delivery Network (CDN) - 只要有網路就可以使用這個資源 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* 在 HTML 檔案建立風格與設定設計。確保乾淨、精準的架構風格設計，這能把介面中任何的不乾淨去除。*/
    /* 在這裡畫布會被建構在上方，而操作的控制器將於下方展示 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 下面這區塊放上所有可以用來幫助操作它的控制器 -->
  </div>
  <script>
    // 在這裡填下所有需要的 p5.js 原始碼並執行它們
    // 將其建構 Parameter 物件、Class 然後建構所有使用的 functions。這包含：
    // setup() 以及 draw()
    // 然後設計使用者可操作使用介面的設計功能處理
    // 全部這些都是自行可以獨立封閉運行的
  </script>
</body>
</html>

關鍵點: 這是單一一個完整產出物。不包含外加檔案。除了 p5.js 以外，不需要把其他的任何檔案使用匯入方式處理。全部的所有開發都該包在一起。

4. Implementation Details - BUILD THE SIDEBAR (建置以及實踐側邊攔上的實行設定)

側邊攔架構:

1. Seed (FIXED) / 固定部分 - 確保完全的複製這些資訊：

• 展示這個結果的演算法使用 Seed 種子顯示
• 「前一個/下一個」按鈕
• 亂數產生的「隨機」按鈕
• 選擇「跳轉」到你給的數字的按鈕

2. Parameters (VARIABLE) / 可調整改變區塊 - 會產生相對應的控制來使用在美術設定：

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

在加入更多你要使用的控制元素，像是參數等時，請把它們多加入 div 來使用。

3. Colors (OPTIONAL/VARIABLE) - 當藝術有需要色彩之變色或是可以改變的功能，這個也是被需要的：

• 加入挑色使用的介面如果使用者要能自己改變顏色的組合與色相
• 但是如果你作品本身是要保持特定的色調設定與風格這就可以不用去設定
• 這也可以不用加入，在你想這作品只要保有單色就好時。

4. Actions (FIXED) / 固定動作 - 如同這裡的一模一樣，這必須要在場：

• Regenerate (再生成)
• Reset (重設)
• Download PNG (可以下載它做成圖片格式等按鍵)

開發需求清單:

• 有關種子 (Seed) 設定之介面，都得運作順利 (前後，亂步或指定都可以)。
• 要將設定在參數之中可修改控制全部被放到 UI 用來幫助操作使用。
• 那些再生成按鍵或是重置等這些控制按鍵必須運做順利無誤。
• 將 Anthropic 這個品牌印象繼續呈現保存好。

USING THE ARTIFACT (用這物件的技巧與方法)

這 HTML 在製作完這一步時應立刻有辦法：

1. 就在 claude.ai 介面: 用來做展示和呈現能立時與之操作進行與探索的展示畫面。
2. 也能像是檔案: 這就像可以直接放到一般網頁上去而能操作而展現它的設計而還不需要架設服務伺服器與主機就能打開看。
3. 分享出去: 也是能將製作完 HTML 分享寄給別人來感受設計的趣味。它是個完整且包含全部要展現功能的獨立網頁，無須附帶什麼就可以獨立運作。

---

VARIATIONS & EXPLORATION (變形的展示與探索)

該產出物本身就帶有一系列的在不用建立許多獨立檔案時仍舊探索了它的豐富，包含可尋著順序或者隨機去找尋設計的介面設定（前 / 下一歩或隨機會跑動出來種子按鍵），來看到變化中的樂趣與無窮可能性。如果使用者對於去將其中特有些變化要做聚焦的討論和凸顯：

• 有著能夠建立讓你可以馬上找到那個所呈現出來的特定的變化版本設計，像這個：("這叫 變型 版本 1: 而它的 Seed 是 42", "這是 版本的 2: 它的 Seed 種子是 127" 諸如此類的)。
• 這個可以在畫面上能夠顯示著一個展覽的設定 (這稱 Gallery Mode)，它能同時陳列各種的展示版本的畫面，這個設定是採用類似像是呈現圖片預覽的小圖示的格列式設計這樣的方法。
• 以所有的變化設計以及所有展示，都是放在這個同樣由單一產出物之中，就能在一個 HTML 出現。

這是如同你要運用同樣的方式，但是建立出一系列版畫一樣的感受。整個設定或設計也是前後呼應著一致性。這是同一款演算法生成它。然而每一格所設定和給出的不同的 Seed 可以用來說明這些能去顯出可以探索更多種發展變形的有趣。由於它是可以進行互有反應與討論，這可以去讓人隨機隨處走走，尋找到讓人覺得最滿意、覺得最好看的最喜歡的那些不同種子發展出不一樣設計的展現並收藏與之討論之美學。

---

THE CREATIVE PROCESS (流程操作過程的建置美學的設計概念的討論)

使用者的請求指示 → 建立去打造美感哲學 → 著手執行

每一個新的需求會是獨立。而你的執行操作中，包含的為：

1. 要解讀到底使用者最核心在求取什麼樣的展示與想法的初衷 - 這到底背後想要探求的是何樣子的那種能用來闡述他本身對美感與藝術表現想法的核心價值為何?
2. 要打造出要給這次實作的核心想法哲學與美學定義 (會大約要有4-6這個段落的設定說明)，這個需要說明的是你在程式中的那個設計的方法為何以及將如何實踐其美學。
3. 讓這在撰寫這程式時要可以發揮這設計之目的被彰顯 - 要來構建立那可以把你本身將上面那些設定美感哲學實踐並發展的那個程式去製作出作品之模樣的實作的具體的程式基礎。
4. 設計出有適應性的，來去設定相關之可變這藝術作品能有被改變空間的條件參數 - 在哪些方面會有是可以拿來調效與修改去用來展現其他空間可能？
5. 建造那些相符合的使用之操作介面與元素選項 - 對應上述所提供的，而設立可以用滑桿或是這數值操作變動輸入這些選項。

The constants (維持與保留不能異動之處):

• Anthropic branding (它的本身在展示在色彩與編排設計上，和字型設計的感受必須保持與 Anthropic 這品牌的模樣)
• Seed navigation (它是一開始你被告知這操作之時就會具備有可供操作這設定改變了生成演算法改變與看這有變動後的產生什麼的按鈕)
• Self-contained HTML artifact (這個自己就能包下所有功能，讓你能跑它出來在畫面上展示之單一個完成操作這 HTML 設計。)

Everything else is variable (其他在此以外的事就是皆有能夠變造的地方之可能空間的運用):

• 此藝術演算法本身的程式
• 關於這些被設計將要展示的可變之參數與各種變數設定
• 使用者互動控制其畫面的介面與選單設定的操作項
• 我們在畫面上將能以不同設計，看出這些生成運轉完出來在網頁畫面的美學產出

為達到最好成績。這你得信任自己有創造性的那獨特本質，透過你對它的美的哲學來設定打造和發展這這藝術品。

---

RESOURCES (可以用來幫助在這些過程開發的一些可以用上的參照參考)

這一個設定它本身能具有的一些參考的文件與那可以用於幫忙這過程時能給予一些實作之初能夠有建立模板設計與建構在開始動手之前的起手基礎。

• templates/viewer.html: 它是被要求強制規定用做為所以要展示所發展這所有相關所要做成一個互動可產出這能看能操作之 HTML 產出它的唯一且必要的起始檔案設定

  • 這它是奠基其此這開發時使用在頁面之基石。它已經為使用者有了精準符合之畫面排版與要帶出屬於 Anthropic 美感的品牌風味的模樣。
  • 維持且勿動之處: 其在於它所寫之這畫面的配置。側邊列之分類設計配置。那些代表這 Anthropic 顏色和字型。它的使用可以讓你更動並去找你這所需要的各種變化生成設計。用在這畫面上生成設定按鋌和可以給重新產生設計，或者是要給可以重新設定與那些可將其畫面變成可以輸出的。這些全部不能動也不能變。
  • 需要變與這更換: 這個裡面那有關於 p5.js 本身要發展所用在這藝術中它的那個程式的邏輯，與關於你去在這所設定下會去能改的給於不同的設計的相關操作的參數。跟在側欄設定上的可用在這美學設計的使用在可以讓你可調整與讓這給變數操作在設定這個使用與這畫出來去做出操作這作品的選項。
  • 在這裡檔案內已經包含有用大量很明確有提示這你要替換這，與你不能換的與必須維持的它在這註解設定裡面有著極為大量的指示與這操作，這你得清楚注意這些去按照它的方法來實施和作業。

• templates/generator_template.js: 指南提供在實踐使用這 p5.js 去建立出最好的與可以去這做出最好的架構去寫和這些寫作它的架構的最好的方法和設定。

  • 指明你可以是怎麼樣用讓去能管理這些要去設定好的這變動變數。以及你如何把那可有能這亂數且是有著可以重製那與用來產生的這變數的方法和規則。跟類別它的建置等這方式的規則示範。
  • 不把這看成你能拿那這個只來像是看這去複製用當這是一個可以用選來貼上你的作法的展示用的。而是得用那些上面提到的這是那些所給出來它教的，把它這實施在這打造一個可以展示屬於這些屬於你的開發並這用在產生屬於它的特色的演算法裡
  • 是該要把你自己開發而給在這創造這藝術的這個程式把它嵌進與放入那之前要求要使用在這你要用來能讓操作與展示這藝術作品的那這單一個的那你要交出這一個唯一能開啟它的 HTML 檔案內 (切忌不可以另外創造以及把有它存這附擋名也是 .js 去單獨把它放出來。 所有的這程式都該被包住在這個能展示這 HTML 的原始碼中)

Critical reminder (務必不能忽略之關鍵這需你了解和切實記下這事項):

• 這裡這給範本它那是為用建立起跑在所建立去實施並做出它基礎，不是被拿來照著抄來作畫與這只當靈感用。
• 這裡這要寫出這能夠展出這個獨一藝術程式這是會在那你能把它創造出一個可以展出不同面貌有這與眾不同之獨特的點
• 去不要把那會使用和有出現的流體場這個用來的例子來複製來這用。那你要去打造要這美的美感所該展出這作品需要的這個藝術。
• 不過這你要確切的保持用這原封不動將那它給你所要提供可以這保持的這它給使用者互動選單與那些用在這符合上面有強調那 Anthropic 有被定義有關於那在視覺呈現的展現之這個模板