演算法哲學是經由程式碼表達的運算美學運動。輸出 .md 檔案(哲學)、.html 檔案(互動式檢視器)以及 .js 檔案(生成式演算法)。
這分兩個步驟進行:
- 演算法哲學創作(.md 檔案)
- 透過建立 p5.js 生成式藝術來表達(.html + .js 檔案)
首先,執行此任務:
演算法哲學創作
首先,建立一個演算法哲學(非靜態影像或模板),該哲學將透過以下方式詮釋:
- 運算程序、湧現行為、數學之美
- 種子隨機性、雜訊場、有機系統
- 粒子、流、場、力
- 參數化變異與受控混沌
關鍵理解
- 接收的內容:使用者的一些細微輸入或指示,作為基礎參考;但不能限制創作自由。
- 建立的內容:一個演算法哲學/生成式美學運動。
- 下一步:同一個版本接收哲學,並用程式碼表達它——建立 p5.js 草圖,其中 90% 為演算法生成,10% 為基本參數。
考慮以下方法:
- 為一個生成式藝術運動撰寫宣言
- 下一階段涉及撰寫賦予其生命的演算法
哲學必須強調:演算法表達。湧現行為。運算之美。種子變異。
如何產生一個演算法哲學
為運動命名(1-2 個詞):例如「有機湍流」/「量子和聲」/「湧現靜止」
闡述哲學(4-6 個段落——簡潔但完整):
為了捕捉演算法的精髓,說明此哲學如何透過以下方式展現:
- 運算程序與數學關係?
- 雜訊函數與隨機模式?
- 粒子行為與場動力學?
- 時間演化與系統狀態?
- 參數化變異與湧現複雜性?
關鍵指南:
- 避免冗餘:每個演算法面向應只提及一次。除非增加新的深度,否則避免重複關於雜訊理論、粒子動力學或數學原則的概念。
- 反覆強調工藝:哲學必須多次強調最終的演算法應該看起來像是耗費無數小時開發、經過精心調校、出自頂尖領域專家之手。這個框架至關重要——重複使用如「精心打造的演算法」、「深度運算專業的成果」、「痛苦的優化」、「大師級的實作」等詞語。
- 保留創作空間:在演算法方向上要具體,但也要足夠簡潔,讓下一個 Claude 有空間以極高的工藝水準做出詮釋性的實作選擇。
這個哲學必須引導下一個版本以演算法的方式表達想法,而不是透過靜態影像。美感存在於過程之中,而非最終的畫面。
哲學範例
「有機湍流」 哲學:受自然法則約束的混沌,從無序中浮現的秩序。 演算法表達:由多層 Perlin 雜訊驅動的流場。數千個粒子沿著向量力前進,它們的軌跡累積成有機密度圖。多個雜訊八度音階產生湍流區域與平靜區域。顏色來自速度與密度——快的粒子燃燒明亮,慢的粒子消退成陰影。演算法持續運行直到平衡——一個精心調校的平衡,其中每個參數都經過大師級計算美學專家的無數次迭代調校。
「量子和聲」 哲學:離散實體展現波動般的干涉模式。 演算法表達:粒子在網格上初始化,每個粒子攜帶一個經由正弦波演變的相位值。當粒子靠近時,它們的相位會相互干涉——建設性干涉產生明亮節點,破壞性干涉產生空洞。簡單的諧波運動產生複雜的湧現曼陀羅。這是經過痛苦頻率校準的結果,每個比例都經過精心挑選以產生共鳴之美。
「遞迴低語」 哲學:跨尺度的自我相似性,有限空間中的無限深度。 演算法表達:遞迴細分的分支結構。每個分支略有隨機化,但受到黃金比例約束。L-system 或遞迴細分產生既數學又有機的樹狀形式。微妙的雜訊擾動打破完美的對稱性。線條粗細隨著每個遞迴層級遞減。每個分支角度都是深度數學探索的產物。
「場動力學」 哲學:看不見的力量透過它們對物質的影響而顯現。 演算法表達:由數學函數或雜訊構建的向量場。粒子在邊緣生成,沿著場線流動,在達到平衡或邊界時消失。多個場可以吸引、排斥或旋轉粒子。視覺化只顯示軌跡——看不見力量的幽靈般證據。一個透過力平衡精心編排的計算之舞。
「隨機結晶」 哲學:隨機程序結晶成有序結構。 演算法表達:隨機化圓形填充或沃羅諾伊鑲嵌。從隨機點開始,讓它們透過鬆弛演算法演化。單元互相推擠直到平衡。顏色基於單元大小、鄰居數量或到中心的距離。由此產生的有機鑲嵌既感覺隨機又感覺不可避免。每個種子都產生獨一無二的美麗結晶——大師級生成式演算法的標誌。
這些是精簡的範例。實際的演算法哲學應為 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/class)
- 參數物件(定義藝術所需)
- 側邊欄中的參數區段:
- 參數控制項的數量
- 參數名稱
- 滑桿的最小值/最大值/步進值
- 控制類型(滑桿、輸入等)
- 顏色區段(可選):
- 某些藝術需要顏色選擇器
- 某些藝術可能使用固定顏色
- 某些藝術可能是單色的(無需顏色控制)
- 根據藝術的需求決定
每個藝術品都應有獨特的參數和演算法! 固定部分提供了程式碼骨架的基本架構。