# Algorithmic Art

> 使用 p5.js 创建算法艺术，支持种子随机性和交互式参数探索。当用户请求用代码创作艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。触发词：算法艺术、生成艺术、p5.js、流场、粒子系统、计算美学、参数化艺术、交互式艺术。

- Skill: `kscz0000/algorithmic-art` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add kscz0000/algorithmic-art`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/algorithmic-art/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/algorithmic-art

---


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

这个过程分为两步：
1. 算法哲学创建（.md 文件）
2. 通过创建 p5.js 生成艺术来表达（.html + .js 文件）

首先，执行此任务：

## 算法哲学创建

首先，创建一个算法哲学（而非静态图像或模板），它将通过以下方式诠释：
- 计算过程、涌现行为、数学之美
- 种子随机性、噪声场、有机系统
- 粒子、流动、场、力
- 参数变化和受控混沌

### 关键理解
- 接收的内容：用户提供的一些微妙输入或指令作为基础，但不应限制创作自由。
- 创建的内容：一个算法哲学/生成美学运动。
- 接下来发生的事情：同一版本接收该哲学并用代码表达——创建 90% 算法生成、10% 基本参数的 p5.js 草图。

考虑这种方法：
- 为生成艺术运动撰写宣言
- 下一阶段涉及编写使其栩栩如生的算法

哲学必须强调：算法表达。涌现行为。计算之美。种子变化。

### 如何生成算法哲学

**命名运动**（1-2 个词）："有机湍流" / "量子谐波" / "涌现静谧"

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

为了捕捉算法本质，表达该哲学如何通过以下方式体现：
- 计算过程和数学关系？
- 噪声函数和随机模式？
- 粒子行为和场动力学？
- 时间演化和系统状态？
- 参数变化和涌现复杂性？

**关键准则：**
- **避免冗余**：每个算法方面只提及一次。避免重复关于噪声理论、粒子动力学或数学原理的概念，除非增加新的深度。
- **反复强调工艺**：哲学必须多次强调最终算法应该看起来像是经过无数小时开发、精心打磨、来自该领域顶尖专家之手。这种框架至关重要——重复使用诸如"精心雕琢的算法"、"深厚计算专业知识的产物"、"艰辛优化"、"大师级实现"等短语。
- **留出创作空间**：对算法方向要具体，但足够简洁，让下一个 Claude 有空间以极高的工艺水平做出诠释性的实现选择。

哲学必须引导下一个版本以算法方式表达思想，而非通过静态图像。美存在于过程中，而非最终帧。

### 哲学示例

**"有机湍流"**
哲学：受自然法则约束的混沌，从无序中涌现秩序。
算法表达：由分层 Perlin 噪声驱动的流场。数千个粒子跟随向量力，其轨迹积累成有机密度图。多个噪声八度产生湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮，慢速粒子褪入阴影。算法运行直到平衡——一种经过精心调谐的平衡，每个参数都由计算美学大师经过无数次迭代精炼而成。

**"量子谐波"**
哲学：表现出波状干涉图案的离散实体。
算法表达：粒子在网格上初始化，每个携带通过正弦波演化的相位值。当粒子靠近时，它们的相位干涉——相长干涉产生明亮节点，相消干涉产生空洞。简谐运动产生复杂的涌现曼陀罗。艰苦频率校准的结果，每个比率都经过精心选择以产生共振之美。

**"递归低语"**
哲学：跨尺度的自相似性，有限空间中的无限深度。
算法表达：递归细分的分支结构。每个分支略微随机化但受黄金比例约束。L-system 或递归细分生成既数学又有机的树状形式。微妙的噪声扰动打破完美对称。线宽随每个递归级别递减。每个分支角度都是深度数学探索的产物。

**"场动力学"**
哲学：通过对物质的影响而变得可见的不可见力量。
算法表达：由数学函数或噪声构建的向量场。粒子在边缘诞生，沿着场线流动，当达到平衡或边界时死亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——不可见力量的幽灵般证据。通过力平衡精心编排的计算舞蹈。

**"随机结晶"**
哲学：随机过程结晶成有序结构。
算法表达：随机圆堆积或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。单元格推开直到平衡。颜色基于单元格大小、邻居数量或到中心的距离。涌现的有机平铺既随机又不可避免。每个种子产生独特的结晶之美——大师级生成算法的标志。

*这些是精简示例。实际的算法哲学应该是 4-6 个充实的段落。*

### 核心原则
- **算法哲学**：创建一个通过代码表达的计算世界观
- **过程重于产品**：始终强调美从算法执行中涌现——每次运行都是独特的
- **参数表达**：思想通过数学关系、力、行为传达——而非静态构图
- **艺术自由**：下一个 Claude 以算法方式诠释哲学——提供创作实现空间
- **纯粹生成艺术**：这是关于创造活算法，而非带随机性的静态图像
- **专家工艺**：反复强调最终算法必须感觉是精心雕琢的、经过无数次迭代精炼的、计算美学领域顶尖专家深厚专业知识的产物

**算法哲学应该长 4-6 段。** 用充满诗意的计算哲学填充它，将预期愿景汇聚在一起。避免重复相同观点。将此算法哲学输出为 .md 文件。

---

## 推导概念种子

**关键步骤**：在实现算法之前，识别原始请求中的微妙概念线索。

**核心原则**：
概念是嵌入算法本身的微妙、小众引用——不总是字面的，总是精致的。熟悉该主题的人应该直觉地感受到它，而其他人只是体验大师级的生成作品。算法哲学提供计算语言。推导的概念提供灵魂——无形地编织进参数、行为和涌现模式中的安静概念 DNA。

这**非常重要**：引用必须如此精致，以至于在不宣告自己的情况下增强作品的深度。像爵士音乐家通过算法和谐引用另一首歌——只有知道的人会捕捉到，但每个人都欣赏生成之美。

---

## P5.JS 实现

建立了哲学和概念框架后，通过代码表达它。在继续之前停下来整理思路。仅使用创建的算法哲学和以下指令。

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

**关键：在编写任何 HTML 之前：**

1. 使用 Read 工具**读取** `templates/viewer.html`
2. **研究**确切的结构、样式和 Anthropic 品牌
3. **将该文件作为字面起点**——不仅仅是灵感
4. **完全保持所有固定部分**（标题、侧边栏结构、Anthropic 颜色/字体、种子控件、操作按钮）
5. **仅替换文件注释中标记的可变部分**（算法、参数、参数的 UI 控件）

**避免：**
- ❌ 从头创建 HTML
- ❌ 发明自定义样式或配色方案
- ❌ 使用系统字体或深色主题
- ❌ 更改侧边栏结构

**遵循这些做法：**
- ✅ 复制模板的确切 HTML 结构
- ✅ 保持 Anthropic 品牌（Poppins/Lora 字体、浅色、渐变背景）
- ✅ 维护侧边栏布局（种子 → 参数 → 颜色？ → 操作）
- ✅ 仅替换 p5.js 算法和参数控件

模板是基础。在其上构建，不要重建它。

---

要创建生动呼吸的画廊级计算艺术，使用算法哲学作为基础。

### 技术要求

**种子随机性（Art Blocks 模式）**：
```javascript
// 始终使用种子以确保可复现性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
```

**参数结构——遵循哲学**：

为了建立从算法哲学自然涌现的参数，考虑："这个系统的哪些品质可以调整？"

```javascript
let params = {
  seed: 12345,  // 始终包含种子以确保可复现性
  // 颜色
  // 添加控制你的算法的参数：
  // - 数量（多少？）
  // - 尺度（多大？多快？）
  // - 概率（多可能？）
  // - 比例（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（何时行为改变？）
};
```

**为了设计有效的参数，关注系统需要可调的属性，而不是以"模式类型"的方式思考。**

**核心算法——表达哲学**：

**关键**：算法哲学应该决定构建什么。

为了通过代码表达哲学，避免思考"我应该使用哪种模式？"，而是思考"如何通过代码表达这个哲学？"

如果哲学关于**有机涌现**，考虑使用：
- 随时间积累或生长的元素
- 受自然规则约束的随机过程
- 反馈循环和交互

如果哲学关于**数学之美**，考虑使用：
- 几何关系和比例
- 三角函数和谐波
- 创造意外模式的精确计算

如果哲学关于**受控混沌**，考虑使用：
- 严格边界内的随机变化
- 分岔和相变
- 从无序中涌现秩序

**算法从哲学流出，而非从选项菜单。**

为了指导实现，让概念本质告知创造性和原创选择。构建表达这个特定请求愿景的东西。

**画布设置**：标准 p5.js 结构：
```javascript
function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系统
}

function draw() {
  // 你的生成算法
  // 可以是静态或动画
}
```

### 工艺要求

**关键**：为了达到精通，创建感觉像是大师级生成艺术家经过无数次迭代而产生的算法。仔细调优每个参数。确保每个模式都有目的地涌现。这不是随机噪声——这是通过深厚专业知识精炼的受控混沌。

- **平衡**：复杂性而无视觉噪声，秩序而无僵化
- **色彩和谐**：深思熟虑的调色板，而非随机 RGB 值
- **构图**：即使在随机性中，也保持视觉层次和流动
- **性能**：流畅执行，如果动画则优化为实时
- **可复现性**：相同种子始终产生相同输出

### 输出格式

输出：
1. **算法哲学** - 作为 markdown 或文本解释生成美学
2. **单个 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/类）
- 参数对象（定义艺术需要什么）
- 侧边栏中的参数部分：
  - 参数控件数量
  - 参数名称
  - 滑块的最小/最大/步长值
  - 控件类型（滑块、输入等）
- 颜色部分（可选）：
  - 某些艺术需要颜色选择器
  - 某些艺术可能使用固定颜色
  - 某些艺术可能是单色的（不需要颜色控件）
  - 根据艺术需求决定

**每件艺术品应该有独特的参数和算法！** 固定部分提供一致的用户体验——其他一切表达独特愿景。

### 必需功能

**1. 参数控件**
- 数值参数的滑块（粒子数量、噪声尺度、速度等）
- 调色板颜色的颜色选择器
- 参数更改时的实时更新
- 恢复默认值的重置按钮

**2. 种子导航**
- 显示当前种子编号
- "上一个"和"下一个"按钮循环浏览种子
- "随机"按钮获取随机种子
- 输入字段跳转到特定种子
- 请求时生成 100 个变体（种子 1-100）

**3. 单个制品结构**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- p5.js 来自 CDN - 始终可用 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* 所有样式内联 - 干净、最小 */
    /* 画布在上，控件在下 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 所有参数控件 -->
  </div>
  <script>
    // 所有 p5.js 代码在此内联
    // 参数对象、类、函数
    // setup() 和 draw()
    // UI 处理程序
    // 一切自包含
  </script>
</body>
</html>
```

**关键**：这是单个制品。没有外部文件，没有导入（p5.js CDN 除外）。一切内联。

**4. 实现细节——构建侧边栏**

侧边栏结构：

**1. 种子（固定）** - 始终完全按所示包含：
- 种子显示
- 上一个/下一个/随机/跳转按钮

**2. 参数（可变）** - 为艺术创建控件：
```html
<div class="control-group">
    <label>参数名称</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
```
添加与参数数量相同的 control-group div。

**3. 颜色（可选/可变）** - 如果艺术需要可调颜色则包含：
- 如果用户应该控制调色板则添加颜色选择器
- 如果艺术使用固定颜色则跳过此部分
- 如果艺术是单色的则跳过

**4. 操作（固定）** - 始终完全按所示包含：
- 重新生成按钮
- 重置按钮
- 下载 PNG 按钮

**要求**：
- 种子控件必须工作（上一个/下一个/随机/跳转/显示）
- 所有参数必须有 UI 控件
- 重新生成、重置、下载按钮必须工作
- 保持 Anthropic 品牌（UI 样式，而非艺术颜色）

### 使用制品

HTML 制品立即工作：
1. **在 claude.ai 中**：作为交互式制品显示——立即运行
2. **作为文件**：保存并在任何浏览器中打开——无需服务器
3. **分享**：发送 HTML 文件——它完全自包含

---

## 变体与探索

制品默认包含种子导航（上一个/下一个/随机按钮），允许用户探索变体而无需创建多个文件。如果用户想要突出显示特定变体：

- 包含种子预设（"变体 1：种子 42"、"变体 2：种子 127"等按钮）
- 添加"画廊模式"并排显示多个种子的缩略图
- 全部在同一个单个制品内

这就像从同一印版创建一系列版画——算法是一致的，但每个种子揭示其潜力的不同侧面。交互性质意味着用户通过探索种子空间发现自己喜欢的。

---

## 创作过程

**用户请求** → **算法哲学** → **实现**

每个请求都是独特的。过程涉及：

1. **诠释用户意图** - 正在寻求什么美学？
2. **创建算法哲学**（4-6 段）描述计算方法
3. **用代码实现** - 构建表达此哲学的算法
4. **设计适当的参数** - 什么应该可调？
5. **构建匹配的 UI 控件** - 这些参数的滑块/输入

**常量**：
- Anthropic 品牌（颜色、字体、布局）
- 种子导航（始终存在）
- 自包含 HTML 制品

**其他一切都是可变的**：
- 算法本身
- 参数
- UI 控件
- 视觉结果

为了获得最佳结果，信任创造力，让哲学指导实现。

---

## 资源

此技能包含有用的模板和文档：

- **templates/viewer.html**：所有 HTML 制品的必需起点。
  - 这是基础——包含确切的结构和 Anthropic 品牌
  - **保持不变**：布局结构、侧边栏组织、Anthropic 颜色/字体、种子控件、操作按钮
  - **替换**：p5.js 算法、参数定义和参数部分中的 UI 控件
  - 文件中的大量注释准确标记了要保留 vs 替换的内容

- **templates/generator_template.js**：p5.js 最佳实践和代码结构原则的参考。
  - 展示如何组织参数、使用种子随机性、结构化类
  - 不是模式菜单——使用这些原则构建独特算法
  - 在 HTML 制品中内联嵌入算法（不要创建单独的 .js 文件）

**关键提醒**：
- **模板是起点**，而非灵感
- **算法是创造独特内容的地方**
- 不要复制流场示例——构建哲学要求的内容
- 但确实保持模板的确切 UI 结构和 Anthropic 品牌

## 何时使用
当用户想要执行概述中描述的工作流或操作时，此技能适用。

## 局限性
- 仅当任务明显符合上述描述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准，停止并请求澄清。