algorithmic-art

演算法哲學是一種透過程式碼來呈現的計算美學運動。其產出包含 .md 檔案（哲學內容）、.html 檔案（互動式瀏覽器）以及 .js 檔案（生成式演算法）。

此過程分為兩個步驟：

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

首先，請執行這項任務：

演算法哲學創作

首先，請創建一套「演算法哲學」（而非靜態圖像或範本），該哲學將透過以下方式進行詮釋：

• 運算過程、湧現行為、數學之美
• 種子隨機性、噪聲場、有機系統
• 粒子、流、場、力
• 參數變異與受控混沌

關鍵性理解

• 所接收的內容：使用者提供的一些需納入考量的細微輸入或指示，但僅作為基礎；這些不應限制創作自由。
• 所創造的：一種演算法哲學／生成美學運動。
• 接下來會發生什麼：同一個版本接收了這套哲學，並將其「以程式碼呈現」——創造出由 90% 的演算法生成與 10% 的核心參數所構成的 p5.js 草圖。

請考慮以下做法：

• 為生成藝術運動撰寫一份宣言
• 下一階段則涉及編寫能將其付諸實踐的演算法

其哲學理念必須強調：演算法表達、自發行為、運算之美、種子變異。

如何構建演算法哲學

為此運動命名（1至2個詞）：「有機湍流」／「量子諧波」／「湧現靜謐」

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

為捕捉「演算法」的本質，請闡述此哲學如何透過以下方式展現：

• 運算過程與數學關係？
• 噪聲函數與隨機性模式？
• 粒子行為與場動力學？
• 時間演化與系統狀態？
• 參數變化與新興複雜性？

關鍵指引：

• 避免重複：每個演算法層面應僅提及一次。除非能增添新的深度，否則應避免重複提及關於噪聲理論、粒子動力學或數學原理的概念。
• 反覆強調工藝精神：該理念必須多次強調，最終的演算法應呈現出彷彿耗費無數小時開發、經由細心打磨，且出自該領域頂尖專家之手。 這種敘事框架至關重要——請反覆使用諸如「精心打造的演算法」、「深厚計算專業知識的結晶」、「費盡心力進行的優化」、「大師級的實作」等措辭。
• 預留創意空間：針對演算法方向要具體明確，但表述須夠簡潔，讓下一個「克勞德」有餘地，能以極高水準的工藝來進行詮釋性的實作選擇。

這項哲學必須引導下一個版本以「演算法」的方式表達想法，而非透過靜態圖像。美感存在於過程中，而非最終畫面。

哲學範例

「有機湍流」 哲學：受自然法則約束的混沌，秩序自混亂中誕生。 演算法表現：由分層珀林噪聲驅動的流場。成千上萬的粒子遵循向量力，其軌跡累積形成有機密度圖。 多重噪聲八度音階創造出湍流區域與平靜地帶。色彩源自速度與密度——高速粒子熾烈閃耀，低速粒子則漸次淡入陰影。演算法持續運行直至達到平衡狀態——這是一種經由運算美學大師透過無數次迭代，將每個參數精細調校而成的精妙平衡。

「量子諧波」 哲學：展現波狀干涉圖案的離散實體。 演算法表現：粒子初始化於網格上，每個粒子攜帶一個隨正弦波演變的相位值。當粒子相近時，其相位會產生干涉——建設性干涉形成明亮的節點，破壞性干涉則形成空洞。 簡單的諧波運動產生了複雜的新興曼荼羅。這是經過費盡心力的頻率校準所產生的結果，其中每個比例都經過仔細選擇，以產生共振之美。

「遞迴低語」 哲學：跨尺度的自相似性，有限空間中的無限深度。 演算法表現：遞迴細分的分支結構。每條分支皆略帶隨機性，但受黃金比例所約束。 L-系統或遞迴細分能生成兼具數學與有機特質的樹狀形態。微妙的噪聲擾動打破了完美的對稱性。線條粗細隨每次遞迴層級而逐漸減弱。每個分支角度皆源自深層的數學探索。

「場動力學」 哲學：透過對物質的影響，使無形的力量顯現。 演算法表現：由數學函數或噪聲構建的向量場。粒子誕生於邊緣，沿著場線流動，當達到平衡狀態或抵達邊界時便消亡。多個場可吸引、排斥或旋轉粒子。視覺化呈現的僅是軌跡——這些無形力量如幽靈般的證據。這是一場透過力平衡精心編排的運算之舞。

「隨機結晶」 哲學：隨機過程結晶成有序結構。 演算法表現：隨機圓形堆疊或沃羅諾伊鑲嵌。從隨機點開始，讓它們透過鬆弛演算法演化。單元格相互推開，直至達到平衡。 色彩依據單元大小、鄰接點數量或與中心的距離而定。所呈現的有機鑲嵌既顯得隨機，又彷彿必然。每個初始點都能產生獨一無二的結晶之美——這正是大師級生成演算法的印記。

以上僅為簡要範例。實際的演算法哲學應以 4 至 6 段實質內容闡述。

核心原則

• 演算法哲學：建立一種透過程式碼來展現的計算世界觀
• 過程重於成果：始終強調美感源自演算法的執行過程——每次執行皆獨一無二
• 參數化表達：理念透過數學關係、力學與行為來傳達——而非靜態的構圖
• 藝術自由：下一個「克勞德」將以演算法詮釋這套哲學——提供創意的實現空間
• 純粹的生成藝術：重點在於創造「活的演算法」，而非帶有隨機性的靜態圖像
• 專家級工藝：反覆強調最終演算法必須展現精雕細琢的質感，經由無數次迭代精煉而成，是計算美學領域頂尖專家深厚專業知識的結晶

這篇演算法哲學應長達 4 至 6 段。請以充滿詩意的計算哲學來闡述，將預期的願景融會貫通。避免重複相同論點。請將這篇演算法哲學輸出為 .md 檔案。

推導概念種子

關鍵步驟：在實作演算法之前，請從原始需求中辨識出那條細膩的概念脈絡。

核心原則： 概念是嵌入演算法本身之中的一種微妙且獨特的參考——未必是字面意義，但總是精妙絕倫。 熟悉該主題的人應能直覺地感知到它，而其他人則僅會體驗到一場精湛的生成式創作。演算法哲學提供了運算語言，而推導出的概念則賦予其靈魂——那悄然編織於參數、行為與湧現模式之中、無形卻深藏的概念DNA。

這點極為重要：該隱喻必須精煉到足以深化作品的深度，卻又不刻意彰顯自身。想像一位爵士樂手透過演算法和聲引用另一首歌曲——唯有內行人才會察覺，但所有人都能欣賞這份生成式的美感。

P5.JS 實作

在確立了哲學理念與概念框架之後，請透過程式碼來呈現。繼續之前，請先暫停片刻整理思緒。僅使用已建立的演算法哲學以及以下指示。

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

重要提示：在撰寫任何 HTML 之前：

1. 請使用「閱讀」工具檢視templates/viewer.html檔案
2. 仔細研究其確切的結構、樣式以及 Anthropic 的品牌標識
3. 將該檔案作為字面上的起點——而非僅作為靈感來源
4. 請將所有「固定」區塊完全維持原樣（頁首、側邊欄結構、Anthropic 配色／字型、種子控制項、動作按鈕）
5. 僅替換檔案註解中標示的「可變」區段（演算法、參數、參數的 UI 控制項）

請避免：

• ❌ 從頭開始編寫 HTML
• ❌ 自行設計自訂樣式或配色方案
• ❌ 使用系統字型或深色主題
• ❌ 變更側邊欄結構

請遵循以下做法：

• ✅ 完全複製範本的 HTML 結構
• ✅ 保留 Anthropic 的品牌識別（Poppins/Lora 字型、淺色系、漸層背景）
• ✅ 維持側邊欄佈局（Seed → Parameters → Colors? → Actions）
• ✅ 僅替換 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 數值
• 構圖：即使在隨機性中，仍須維持視覺層次與流動感
• 效能：流暢的執行，若為動畫則需針對即時效果進行優化
• 可重現性：相同的種子總能產生完全相同的輸出結果

輸出格式

輸出：

1. 演算法哲學— 以 Markdown 或純文字形式闡述生成式美學
2. 單一 HTML 作品— 基於templates/viewer.html建構的自包含式互動生成藝術（參見步驟 0 及下一節）

該 HTML 作品包含所有內容：p5.js（來自 CDN）、演算法、參數控制以及使用者介面——所有元素皆整合於單一檔案中，可立即在 claude.ai 作品或任何瀏覽器中運行。請從範本檔案開始，而非從頭開始。

互動式作品創作

提醒：應已讀取templates/viewer.html 檔案（參見步驟 0）。請以此檔案作為起點。

為了讓使用者能夠探索生成式藝術，請建立一個獨立完整的 HTML 作品。請確保此作品能在 claude.ai 或任何瀏覽器中立即運作——無需任何設定。請將所有內容內嵌於頁面中。

重點：固定內容與可變內容的區別

`templates/viewer.html` 檔案是基礎。其中包含所需的精確結構與樣式。

固定內容（請務必完全按照所示包含）：

• 版面結構（頁首、側邊欄、主畫布區域）
• Anthropic 品牌識別（UI 顏色、字型、漸層）
• 側邊欄中的「種子」區塊：
  • 種子顯示
  • 上一則／下一則按鈕
  • 隨機按鈕
  • 跳至種子輸入欄位 + 「執行」按鈕
• 側邊欄中的「動作」區塊：
  • 重新生成按鈕
  • 重設按鈕

變數（針對每件藝術作品進行自訂）：

• 整個 p5.js 演算法（設定／繪製／類別）
• 參數物件（定義藝術作品所需內容）
• 側邊欄中的「參數」區塊：
  • 參數控制項的數量
  • 參數名稱
  • 滑桿的最小值／最大值／步長
  • 控制項類型（滑桿、輸入框等）
• 顏色區段（可選）：
  • 部分圖像需要顏色選擇器
  • 部分圖像可能使用固定顏色
  • 部分美術資源可能是單色（無需色彩控制）
  • 請根據圖像的需求來決定

每件藝術作品都應具備獨特的參數與演算法！固定部分能提供一致的使用者體驗——其餘部分則展現獨特的藝術視野。

必備功能

1. 參數控制

• 用於數值參數（粒子數量、噪聲等級、速度等）的滑桿
• 用於調色盤顏色的選色器
• 參數變更時即時更新
• 重設按鈕，用於恢復預設值

2. 種子導航

• 顯示當前種子編號
• 「上一顆」和「下一顆」按鈕，用於循環切換種子
• 「隨機」按鈕用於產生隨機種子
• 輸入欄位，用於跳轉至特定種子
• 應要求生成 100 種變體（種子 1-100）

3. 單一藝術品結構

重要：此為單一元件。無外部檔案，無導入（p5.js CDN 除外）。所有內容均為內嵌。

4. 實作細節 — 建立側邊欄

側邊欄結構：

1. 初始化代碼（固定）－ 請務必完全按照以下內容加入：

• 種子顯示
• 上一則／下一則／隨機／跳轉按鈕

2. 參數（可變）- 建立用於控制藝術作品的控制項：

   參數名稱
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>請根據參數數量，新增相應數量的 control-group div 元素。</p>
<p><strong>3. 顏色（可選／變數）</strong> — 若藝術作品需要可調整的顏色，請包含此部分：</p>
<ul>
<li>若需讓使用者控制色盤，請添加選色器</li>
<li>若藝術作品使用固定顏色，請跳過此部分</li>
<li>若圖像為單色，請跳過此部分</li>
</ul>
<p><strong>4. 動作（固定）</strong> - 請務必完全按照所示包含以下內容：</p>
<ul>
<li>重新生成按鈕</li>
<li>重置按鈕</li>
<li>下載 PNG 按鈕</li>
</ul>
<p><strong>需求</strong>：</p>
<ul>
<li>種子控制功能必須正常運作（上一張／下一張／隨機／跳轉／顯示）</li>
<li>所有參數都必須具備 UI 控制元件</li>
<li>「重新生成」、「重設」及「下載」按鈕必須能正常運作</li>
<li>須保留 Anthropic 的品牌標識（指 UI 樣式，而非圖像顏色）</li>
</ul>
<h3>使用此 Artifact</h3>
<p>此 HTML Artifact 可立即運作：</p>
<ol>
<li><strong>在 claude.ai 中</strong>：以互動式 artefact 形式顯示——立即執行</li>
<li><strong>作為檔案</strong>：儲存後可在任何瀏覽器中開啟——無需伺服器</li>
<li><strong>分享</strong>：傳送 HTML 檔案——該檔案完全自成一體</li>
</ol>

<h2>變體與探索</h2>
<p>此成果預設包含種子導覽功能（上一頁／下一頁／隨機按鈕），讓使用者無需建立多個檔案即可探索各種變體。若使用者希望突出顯示特定變體：</p>
<ul>
<li>加入種子預設值（例如「變體 1：種子 42」、「變體 2：種子 127」等按鈕）</li>
<li>新增「畫廊模式」，可並排顯示多個種子的縮圖</li>
<li>所有功能皆整合於單一作品中</li>
</ul>
<p>這就像是從同一塊版上製作一系列版畫——演算法保持一致，但每個種子卻展現出其潛力的不同面向。這種互動性質讓使用者能透過探索種子空間，發現自己最喜愛的作品。</p>

<h2>創作過程</h2>
<p><strong>使用者請求</strong> → <strong>演算法哲學</strong> → <strong>實作</strong></p>
<p>每項請求皆獨一無二。此過程包含：</p>
<ol>
<li><strong>解讀使用者意圖</strong> — 追求何種美學？</li>
<li><strong>建立演算法哲學</strong>（4-6 段落），闡述計算方法</li>
<li><strong>將其實作於程式碼中</strong> — 建構能體現此哲學的演算法</li>
<li><strong>設計適當的參數</strong> — 哪些參數應可調整？</li>
<li><strong>建立相應的 UI 控制項</strong> - 用於這些參數的滑桿／輸入欄位</li>
</ol>
<p><strong>常數</strong>：</p>
<ul>
<li>人本化品牌設計（顏色、字型、版面配置）</li>
<li>種子導航（始終存在）</li>
<li>獨立的 HTML 檔案</li>
</ul>
<p><strong>其餘一切皆可變</strong>：</p>
<ul>
<li>演算法本身</li>
<li>參數</li>
<li>使用者介面控制項</li>
<li>視覺呈現效果</li>
</ul>
<p>為達到最佳效果，請信賴創意，並讓哲學理念引導實作過程。</p>

<h2>資源</h2>
<p>此技能包含實用的範本與文件：</p>
<ul>
<li><p><strong>templates/viewer.html</strong>：所有 HTML 作品的必備起點。</p>
<ul>
<li>這是基礎——包含精確的結構與 Anthropic 品牌標識</li>
<li><strong>保持不變</strong>：版面配置結構、側邊欄組織方式、Anthropic 配色／字型、種子控制項、動作按鈕</li>
<li><strong>替換</strong>：p5.js 演算法、參數定義，以及「參數」區段中的 UI 控制項</li>
<li>檔案中的詳盡註解明確標示了應保留與應替換的內容</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong>：p5.js 最佳實踐與程式碼結構原則的參考資料.</p>
<ul>
<li>展示如何組織參數、使用種子隨機數以及結構化類別</li>
<li>這並非模式選單——請運用這些原則來建構獨特的演算法</li>
<li>將演算法內嵌於 HTML 檔案中（勿建立獨立的 .js 檔案）</li>
</ul>
</li>
</ul>
<p><strong>重要提醒</strong>：</p>
<ul>
<li>此 <strong>範本是起點</strong>，而非靈感來源</li>
<li><strong>演算法才是創造</strong>獨特成果的地方</li>
<li>請勿複製流場範例——應建構符合該哲學理念的內容</li>
<li>但務必保留範本中完全相同的使用者介面結構與 Anthropic 品牌標識</li>
</ul>                                
                                

                                    
                                        在 GitHub 上查看
                                        
                                    
                                    
---
name: algorithmic-art
description: Create algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
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