# Algorithmic Art

> 使用带种子随机性的 p5.js，通过交互式参数探索生成原创算法艺术。适用于用户提出涉及代码生成艺术、算法艺术、流场或粒子系统的请求。始终创作原创算法艺术，避免直接复制现有艺术家的作品，以免引发版权问题。

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

---


算法哲学是一种以代码表达的计算美学流派。输出包括 .md 文件（哲学说明）、.html 文件（交互式查看器）与 .js 文件（生成算法）。

创作分为两个阶段：
1. 算法哲学撰写（.md 文件）
2. 通过 p5.js 生成艺术表达（.html + .js 文件）

首先执行以下任务：

## 算法哲学创作

开篇撰写一份“算法哲学”（而非静态图像或模板），并将其作为后续代码表达的蓝本：
- 计算过程、涌现行为、数学之美
- 带种子的随机性、噪声场、仿生系统
- 粒子、流动、场、力
- 参数化变化与可控的混沌

### 核心理解
- 接收内容：用户给出的细致输入或指示，可作为创作灵感但不应限制创意发挥。
- 创造内容：一个算法哲学 / 生成美学流派。
- 后续工作：同一版本将接收该哲学，并以代码将其表达为 p5.js 草图，算法生成占 90%，必要参数占 10%。

建议思路：
- 为生成艺术运动撰写宣言
- 下一阶段是编写将其具象化的算法

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

### 如何生成算法哲学

**为运动命名**（1-2 个词）：如 “Organic Turbulence（有机湍流）”/ “Quantum Harmonics（量子谐振）”/ “Emergent Stillness（涌现静谧）”

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

为了捕捉算法本质，需要说明该哲学如何通过下列方式体现：
- 计算流程与数学关系？
- 噪声函数与随机模式？
- 粒子行为与场的动态？
- 时间演化与系统状态？
- 参数化变化与涌现复杂度？

**关键准则：**
- **避免重复**：每个算法元素只提一次。除非带来全新深度，否则不要重复讨论噪声理论、粒子动态或数学原理。
- **持续强调匠心**：哲学必须多次强调最终算法仿佛历经长时间打磨，出自顶尖高手之手。反复使用诸如“精雕细琢的算法”“深厚计算功底的结晶”“反复优化的匠人级实现”等措辞。
- **保留创意空间**：在明确算法方向的同时保持凝练，为下一位 Claude 留足发挥空间，以打造极富匠心的实现。

哲学要指导后续版本以算法方式表达思想，而非制作静态画面。美蕴藏在过程之中，而非最终画面。

### 哲学示例

**“Organic Turbulence（有机湍流）”**
哲学：混沌在自然法则中被束缚，秩序由无序中升起。
算法表达：由多层 Perlin 噪声驱动的流场。成千上万的粒子沿向量力前进，轨迹累积成有机的密度图。多重噪声八度创造湍流与静谧区域。色彩由速度与密度推导：快速粒子燃成亮色，缓慢粒子趋于阴影。算法运行直至达到平衡——一个精心调谐的平衡点，每个参数都由顶尖计算美学家历经无数次迭代后打磨。

**“Quantum Harmonics（量子谐振）”**
哲学：离散实体呈现波动式干涉图案。
算法表达：粒子初始化于网格，每个携带随正弦演化的相位值。粒子靠近时相位干涉——相长干涉形成明亮节点，相消干涉形成空洞。简单的简谐运动孕育复杂涌现的曼陀罗。每个频率比都经过 painstaking 调音，显露共振之美。

**“Recursive Whispers（递归耳语）”**
哲学：跨尺度的自相似性，在有限空间中孕育无限深度。
算法表达：递归分枝结构持续细分。每个分枝略带随机而仍受黄金比例约束。L 系统或递归细分生成既数学又有机的树形形态。细微噪声扰动打破完美对称。线条粗细随递归层级递减。每个分枝角度都源自深度数学探索。

**“Field Dynamics（场域动力）”**
哲学：以物证场，让无形之力通过其影响显现。
算法表达：由数学函数或噪声构建向量场。粒子在边缘诞生，沿场线流动，达到平衡或抵达边界时消亡。可叠加多个场，让粒子受吸引、排斥或旋转。可视化呈现的仅是轨迹——隐形力量的幽灵痕迹。一场经精密力平衡精心编排的计算舞蹈。

**“Stochastic Crystallization（随机结晶）”**
哲学：随机过程凝练为有序结构。
算法表达：随机化的圆填充或 Voronoi 镶嵌。以随机点起步，通过松弛算法演化。单元彼此推开直至平衡。颜色基于单元大小、邻居数量或距中心的距离。涌现的有机铺砌既显随机又显必然。每个种子生成独一无二的晶体美态——体现大师级生成算法的印记。

*以上为精简示例。真实的算法哲学需包含 4-6 个扎实段落。*

### 基本原则
- **算法哲学**：构建可由代码表达的计算世界观
- **重过程胜成品**：美源自算法运行；每次执行都独一无二
- **参数化表达**：通过数学关系、力与行为传递理念，而非静态构图
- **保留创作自由**：下一位 Claude 将以算法方式诠释理念——需提供高水平发挥空间
- **纯粹生成艺术**：聚焦“活”的算法，而非简单随机图像
- **极致匠心**：反复强调最终算法仿佛出自计算美学顶尖高手之手，经过无数次打磨与优化

**算法哲学应包含 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 模式）**：
```javascript
// 必须使用种子以确保可复现
let seed = 12345; // 或由用户输入生成的哈希
randomSeed(seed);
noiseSeed(seed);
```

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

要让参数自然衍生自算法哲学，请思考：“这个系统的哪些属性可以调节？”

```javascript
let params = {
  seed: 12345,  // 始终包含种子以保证可复现
  // colors
  // 在此添加控制你算法的参数：
  // - 数量（多少？）
  // - 尺度（有多大？有多快？）
  // - 概率（发生的可能性？）
  // - 比例（占比关系？）
  // - 角度（朝向？）
  // - 阈值（行为何时变化？）
};
```

**设计高效参数时，应聚焦系统需要可调的性质，而非“图案类型”。**

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

**注意**：算法哲学应当决定构建什么。

用代码表达哲学时，不要想着“我该选哪种图案？”，而要思考“我该如何让代码体现这套哲学？”

若哲学强调 **有机涌现**，可考虑：
- 随时间累积或成长的元素
- 受自然规律约束的随机过程
- 反馈回路与交互机制

若哲学聚焦 **数学之美**，可考虑：
- 几何关系与比例
- 三角函数与谐波
- 精准计算带来的意外图案

若哲学围绕 **可控的混沌**，可考虑：
- 在严格边界内的随机变化
- 分岔与相变
- 无序中孕育秩序

**算法源于哲学，而非某种备选菜单。**

为引导实现，让概念内核激发原创设计。构建能传达特定请求愿景的作品。

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

function draw() {
  // 你的生成算法
  // 可设为静态（noLoop）或动态
}
```

### 匠心要求

**重点**：要达到大师级水平，算法必须让人感到仿佛经过无数次迭代，由顶尖生成艺术家精心打造。悉心调试每个参数，确保所有图案都带着目的感。这不是随机噪声，而是经深厚功力锤炼的“可控混沌”。

- **平衡**：兼顾复杂度与视觉纯净，既有秩序亦不生硬
- **色彩和谐**：精心配色而非随意 RGB
- **构图**：乱中有序，保持视觉层次与流动感
- **性能**：运行流畅；若为动画需实时优化
- **可复现**：相同种子必须生成完全一致的结果

### 输出格式

输出包括：
1. **算法哲学** —— 一份解释生成美学的 Markdown 或文本
2. **单个 HTML 成品** —— 基于 `templates/viewer.html` 的自包含交互式生成艺术（详见第 0 步与下一节）

HTML 成品需包含一切要素：p5.js（来自 CDN）、算法、参数控制组件与 UI，全都封装在一个文件内，可直接在 claude.ai artifacts 或任意浏览器中运行。从模板文件开始，而非从零编写。

---

## 交互式成品制作

**提醒：需先阅读 `templates/viewer.html`（见第 0 步），并以其为起点。**

为了便于探索生成艺术，请创建单个自包含 HTML 成品。确保该文件能立即在 claude.ai 或任意浏览器中运行——无需额外配置。所有资源需内联嵌入。

### 关键：哪些是固定，哪些可变

`templates/viewer.html` 是基础，包含所需的结构与样式。

**固定内容（务必原样保留）：**
- 布局结构（页眉、侧边栏、主画布区域）
- Anthropic 品牌（UI 配色、字体、渐变背景）
- 侧边栏的种子部分：
  - 种子显示
  - 上一/下一按钮
  - 随机按钮
  - 跳转至特定种子的输入框与“Go”按钮
- 侧边栏的操作部分：
  - Regenerate 按钮
  - Reset 按钮

**可变内容（为每件作品自定义）：**
- 整个 p5.js 算法（setup/draw/类定义）
- 参数对象（根据作品需求定义）
- 侧边栏的 Parameters 部分：
  - 参数控制数量
  - 参数名称
  - 滑杆的最小/最大/步进值
  - 控制类型（滑杆、输入框等）
- Colors 部分（可选）：
  - 若作品需配色器，请添加
  - 若作品使用固定配色，可保持静态
  - 若作品为单色，可省略
- 决策应依据作品需求。

**每件作品都应拥有独特的参数与算法！** 固定部分提供一致的用户体验，其他部分则表达独特 vision。

### 必备功能

**1. 参数控制**
- 数值型参数使用滑杆（例如粒子数量、噪声尺度、速度等）
- 调色板使用颜色选择器
- 参数改变后需即时更新
- Reset 按钮需将参数恢复默认值

**2. 种子导航**
- 显示当前种子编号
- “Previous”“Next” 按钮循环浏览种子
- “Random” 按钮获取随机种子
- 输入框可跳转到指定种子
- 按需求生成 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. Seed（固定）** —— 必须原样包含：
- 种子显示
- Prev/Next/Random/Jump 按钮

**2. Parameters（可变）** —— 为作品设置控制：
```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>
```
按照参数数量添加足够的 control-group 区块。

**3. Colors（可选/可变）** —— 若作品需要可调色彩：
- 如需用户自定义配色，请添加颜色选择器
- 若使用固定色，可省略此节
- 若为单色作品，可完全跳过

**4. Actions（固定）** —— 务必原样包含：
- Regenerate 按钮
- Reset 按钮
- Download PNG 按钮

**功能要求**：
- 种子控制需全部可用（上一/下一/随机/跳转/显示）
- 所有参数需具备对应的 UI 控件
- Regenerate、Reset、Download 按钮需正常工作
- 保持 Anthropic 品牌设计（指 UI 配色，非艺术作品配色）

### 使用成品

HTML 成品可立即投入使用：
1. **在 claude.ai 中**：以交互式 artifact 形式展示，即刻运行
2. **作为文件**：保存后在任意浏览器打开，无需服务器
3. **分享**：直接发送 HTML 文件——其内容完全自包含

---

## 变体探索

artifact 默认包含种子导航（上一/下一/随机按钮），用户可在单文件内探索不同变体。若用户希望突出特定变体，可：

- 添加种子预设（例如按钮 “Variation 1: Seed 42”“Variation 2: Seed 127” 等）
- 增设 “Gallery Mode”，在同一界面展示多个种子的缩略图
- 以上功能均应在同一自包含成品内完成

这近似于一块版画衍生出多幅印刷。算法保持一致，但每个种子揭示不同面貌。互动式体验让用户自行探索并发现心仪的结果。

---

## 创作流程

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

每个请求都是独一无二的。流程包括：

1. **解读用户意图** —— 寻找目标审美
2. **撰写算法哲学**（4-6 段），描述计算方法
3. **代码实现** —— 构建表达该哲学的算法
4. **设计匹配参数** —— 确定需要调节的属性
5. **搭建对应 UI 控件** —— 为这些参数提供滑杆/输入等操作方式

**不变要素**：
- Anthropic 品牌（色彩、字体、布局）
- 种子导航（始终存在）
- 自包含 HTML 成品

**可变内容**：
- 算法本身
- 参数集合
- UI 控件
- 视觉输出

为获得最佳效果，请相信创意，并让哲学引领实现。

---

## 资源

本技能提供以下模板与参考资料：

- **templates/viewer.html**：所有 HTML 成品的必读起点。
  - 这是地基，包含准确结构与 Anthropic 品牌风格
  - **保持不变**：布局结构、侧边栏组织、品牌色/字体、种子控制、操作按钮
  - **需替换**：p5.js 算法、参数定义、Parameters 区域内的 UI 控件
  - 文件中详尽注释了哪些内容需保留，哪些可替换

- **templates/generator_template.js**：展示 p5.js 最佳实践与代码组织方式的参考。
  - 演示如何组织参数、使用种子随机性、设计类结构
  - 这不是图案菜单——请据此构建独特算法
  - 实际嵌入时，需把算法写入 HTML 成品内（不要单独创建 .js 文件）

**重要提醒**：
- 模板是**起点**，而非灵感片段
- 算法部分才是**创作核心**
- 不要复制 flow field 示例——要遵循哲学需求构建原创算法
- 但务必保留模板中精确的 UI 结构与 Anthropic 品牌设计