algorithmic-art

算法哲学是一种通过代码来表达的计算美学运动。其输出包括 .md 文件（哲学内容）、.html 文件（交互式查看器）和 .js 文件（生成算法）。

这一过程分为两个步骤：

1. 算法哲学创作（.md 文件）
2. 通过创建 p5.js 生成式艺术进行呈现（.html + .js 文件）

首先，请完成以下任务：

算法哲学创作

首先，创建一种“算法哲学”（而非静态图像或模板），它将通过以下方式进行诠释：

• 计算过程、涌现行为、数学之美
• 种子随机性、噪声场、有机系统
• 粒子、流、场、力
• 参数变异与受控混沌

关键性理解

• 接收的内容：用户提供的某些细微输入或指令，需予以考虑，但仅作为基础；它们不应限制创作自由。
• 所创造的：一种算法哲学/生成美学运动。
• 后续发展：同一版本吸收了这一哲学理念，并将其“以代码形式表达出来”——从而生成 p5.js 草图，其中 90% 由算法生成，10% 为基本参数。

不妨考虑以下方法：

• 为生成艺术运动撰写一份宣言
• 下一阶段则涉及编写使之焕发生机的算法

其哲学理念必须强调：算法表达、涌现行为、计算之美、种子变异。

如何构建算法哲学

为这一思潮命名（1-2个词）：“有机湍流” / “量子谐波” / “涌现的静谧”

阐述该哲学（4-6段——简洁但完整）：

为捕捉其“算法”本质，请阐述这一哲学理念如何通过以下方面体现：

• 计算过程和数学关系？
• 噪声函数与随机性模式？
• 粒子行为与场动力学？
• 时间演化与系统状态？
• 参数变化与涌现的复杂性？

关键指南：

• 避免冗余：每个算法方面只需提及一次。除非能增添新的深度，否则应避免重复关于噪声理论、粒子动力学或数学原理的概念。
• 反复强调匠心：哲学阐述必须多次强调，最终算法应给人一种仿佛耗费了无数小时开发、经过精心打磨、且出自该领域顶尖专家之手的印象。 这种表述至关重要——请反复使用诸如“精心打造的算法”、“深厚计算专业知识的结晶”、“费尽心血的优化”、“大师级实现”等短语。
• 留出创造空间：在算法方向上要具体明确，但表述需足够简洁，以便下一位“克劳德”能够以极高的工艺水准，在实现过程中进行富有创造性的选择。

这一理念必须引导下一版本通过“算法”而非静态图像来表达思想。美存在于过程之中，而非最终的画面。

哲学理念示例

“有机湍流” 哲学理念：受自然法则约束的混沌，无序中孕育的秩序。 算法表现：由分层珀林噪声驱动的流场。成千上万的粒子遵循矢量力，其轨迹累积形成有机密度图。 多重噪声八度音程营造出湍流区域与平静区域。色彩源于速度与密度——高速粒子光芒四射，低速粒子则逐渐淡入阴影。算法持续运行直至达到平衡状态——这是一种经过精心调校的平衡，其中每个参数都由一位计算美学大师通过无数次迭代反复打磨而成。

“量子谐波” 哲学：离散实体展现出波状干涉图案。 算法表现：粒子初始化于网格上，每个粒子携带一个随正弦波演化的相位值。当粒子相邻时，其相位会发生干涉—— constructive interference 产生明亮的节点，destructive interference 则形成空洞。 简单的谐振运动催生出复杂的曼荼罗图案。这是经过艰苦频率校准的结果，每个比例都经过精心选择，以呈现共振之美。

“递归低语” 哲学理念：跨尺度的自相似性，有限空间中的无限深度。 算法表现：递归细分的分支结构。每个分支均略带随机性，但受黄金比例约束。 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>根据参数数量添加相应数量的控制组 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>使用该生成物</h3>
<p>该 HTML 生成物可立即运行：</p>
<ol>
<li><strong>在 claude.ai 中</strong>：以交互式艺术品形式显示——即时运行</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>构建匹配的用户界面控件</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>UI 控件</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>但请务必保留模板中完全一致的 UI 结构和 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