<!-- zh-only -->

# 算法艺术（p5.js）

用 **p5.js**、**有种子随机** 与 **可交互参数** 创作算法艺术。用户要「用代码画画 / 生成艺术 / 流场 / 粒子系统」等时使用。**勿抄袭** 在世艺术家作品以免版权问题。

产出：**哲学 `.md`**、**交互查看 `.html`**、**生成逻辑 `.js`**（或内联在 HTML 中）。

分两步：

1. **算法哲学**（`.md`）  
2. **用 p5.js 落实**（`.html` + `.js` / 内联）  

---

## 一、算法哲学

建立 **算法哲学**（不是静态图模板），通过 **计算过程、涌现行为、数学美感、有种子随机、噪声场、有机系统、粒子/流场/力、参数化变化与受控混沌** 来表达。

### 关键理解

- **输入**：用户提示作 **基础**，不束缚创意。  
- **产出**：**生成式美学运动** 的宣言。  
- **下一步**：用代码 **落实哲学**——约 **九成算法生成、一成必要参数**。

### 如何写算法哲学

**命名**（1–2 词）：如「有机湍流」「量子谐波」「涌现寂静」。

**正文**（4–6 段）：覆盖 **计算过程与数学关系、噪声与随机模式、粒子与场、时间演化与系统状态、参数与涌现复杂度** 等；每类点子 **不重复堆砌**。

**反复强调：** 最终算法应像经 **无数迭代**、由 **计算美学顶尖实践者** **精心调校** 的结果（「一丝不苟的算法」「深厚计算功底」「殚精竭虑优化」「大师级实现」等）。

哲学要引导 **用过程表达**，美在 **运行中**，不在单帧截图。

### 示例（压缩，正式稿需 4–6 段长文）

- **有机湍流**：分层 Perlin 噪声驱动流场；大量粒子沿矢量场运动，轨迹堆积成密度图；速度/密度映射色彩；多八度噪声形成湍流与平静区。  
- **量子谐波**：网格粒子带相位，近距干涉；建设性干涉为亮斑，相消为暗区；频率比经精细校准。  
- **递归低语**：分支递归、黄金比例约束、噪声扰动打破对称；线宽随层级递减。  
- **场动力学**：数学或噪声矢量场；粒子从边缘诞生，沿流线运动至平衡或边界；可视化多为轨迹「幽灵」。  
- **随机结晶**：随机圆堆叠或 Voronoi，松弛至平衡；按单元大小、邻居数等着色；多种子即多样「晶体」美。  

### 原则

- **算法哲学**：计算世界观，用代码表达。  
- **过程重于单帧**：美来自 **执行过程**，每次运行可不同。  
- **参数化表达**：思想在 **数学关系、力、行为**，不在静态摆拍。  
- **艺术自由**：给实现者诠释空间。  
- **纯生成艺术**：要做 **活的算法**，不是「带随机的静图」。  
- **专家工艺**：反复强调代码级打磨与专业深度。  

输出为 `.md` 文件。

---

## 二、概念种子

实现前从用户请求中抽出 **含蓄概念线**：像画布技能一样，概念 **嵌在参数与行为里**，不喊口号；懂的人能感到，不懂的人仍见 **高水准生成构图**。哲学提供 **计算语言**，概念提供 **灵魂**。

---

## 三、p5.js 实现

### ⚠ 步骤 0：先读模板 ⚠️

**写任何 HTML 之前：**

1. 用 Read 工具阅读 `templates/viewer.html`  
2. 弄清 **结构、样式、Anthropic 品牌固定区**  
3. 以该文件为 **字面起点**，不是「参考灵感」  
4. **固定区块保持不动**：页眉、侧栏结构、品牌色/字体、种子控件、操作按钮  
5. **只替换** 注释标出的 **变量区**（算法、参数、参数 UI）  

**避免：** 从零写 HTML；自造配色/暗色主题；改侧栏结构。  
**要做：** 复制模板结构；保留品牌；只换 p5 算法与参数控件。

### 技术要求

**有种子随机（Art Blocks 思路）：**

```javascript
let seed = 12345;
randomSeed(seed);
noiseSeed(seed);
```

**参数对象** 应自然从哲学生长：数量、尺度、速度、概率、比例、角度、阈值等。

**核心算法** 由哲学驱动，不是从「菜单选题」。有机涌现 → 累积/反馈/受约束随机；数学之美 → 几何、三角、精确计算；受控混沌 → 边界内随机、分岔、有序自无序涌现等。

**画布：** 标准 p5 `setup`/`draw`；可静态 `noLoop()` 或动画 `draw`。

### 工艺

算法应像经无数迭代调校：**受控混沌** 而非乱噪声；色彩和谐；随机中仍有 **构图与动线**；动画要流畅；**同一 seed 必须可复现**。

### 输出物

1. 算法哲学（Markdown 或说明文本）  
2. **单一 HTML artifact**：以 `templates/viewer.html` 为起点，内联 p5（CDN）、算法、控件，开箱即用。  

---

## 四、交互 Artifact

**再次强调：** 模板已读，以之为基础。

**固定（始终原样保留）：** 布局（页眉、侧栏、主画布区）、Anthropic 品牌样式、侧栏 **Seed** 区（显示、上一条/下一条/随机/跳转）、**Actions**（Regenerate、Reset 等按模板）。

**可变：** 全部 p5 算法、`params`、侧栏 **Parameters** 区控件数量与范围、**Colors** 区（可选：取色器或固定色或单色省略）。

每件作品应有 **独特参数与算法**；固定部分保证 **一致 UX**。

**必备能力：**

1. **参数控件**：滑条、取色等，改动即刷新  
2. **种子导航**：显示当前 seed、Prev/Next/Random、输入跳转；若要求可扫 seed 1–100  
3. **单文件结构**：除 p5 CDN 外无外部依赖，内联样式与脚本  

侧栏顺序：**Seed（固定）→ Parameters（可变）→ Colors（可选）→ Actions（固定）**。种子与下载等按钮须 **真实可用**。

### 使用方式

- claude.ai 中作为交互 artifact 直接运行  
- 存成文件用浏览器打开，无需服务器  
- 单文件即可分享  

---

## 五、变体与探索

默认用种子按钮探索变体。若用户要突出某些变体：可加 seed 预设按钮、「画廊模式」多缩略图等，仍放在 **同一 artifact** 内——同一「版」，不同 seed 呈现不同面貌。

---

## 六、创作流程

用户请求 → **算法哲学** → **实现** → **设计可调参数** → **匹配 UI**。常量：品牌、种子导航、单文件 artifact；其余：算法、参数、控件、视觉结果。

---

## 资源

- **`templates/viewer.html`**：**必须** 作为 HTML 起点；注释标明保留/替换范围。  
- **`templates/generator_template.js`**：参数组织、有种子随机、类结构等参考；**不是**图案菜单——算法仍应由哲学决定；通常 **内联进 HTML**，不单独丢一个无关联的 `.js` 文件了事。

**切记：** 模板是 **地基**；**算法** 才是独创所在；不要照搬流场示例若哲学指向别处；**UI 骨架与品牌** 必须与模板一致。