Algorithmic Art Skill 详解

使用 p5.js 创建种子可重现的生成式艺术

基本信息

属性	值
名称	`algorithmic-art`
类别	创意设计
输出格式	HTML (p5.js 交互式)
许可证	Apache 2.0

yaml

name: algorithmic-art
description: Creating algorithmic art using p5.js with seeded randomness
and interactive parameter exploration. Use this when users request creating
art using code, generative art, algorithmic art, flow fields, or particle systems.
Create original algorithmic art rather than copying existing artists' work
to avoid copyright violations.

1. 核心概念

1.1 什么是算法艺术

通俗比喻：这不是让 AI 画一幅画，而是让 AI 写一个"会自己画画的程序"。每次运行，相同的种子产生相同的艺术品；不同的种子产生无限变化。

1.2 两步创作流程

mermaid

graph LR
    A[用户请求] --> B[创建算法哲学]
    B --> C[p5.js 代码实现]
    C --> D[交互式 HTML Artifact]

算法哲学创建：定义美学运动宣言（.md 文件）
代码表达：用 p5.js 实现哲学（.html + .js 文件）

2. 算法哲学

2.1 什么是算法哲学

在编码前，先定义一个"美学运动宣言"——这是 Skill 最独特的设计。

2.2 哲学结构

markdown

**命名运动** (1-2 词): 如 "有机湍流" / "量子谐波" / "递归低语"

**阐述哲学** (4-6 段落):
- 计算过程与数学关系
- 噪声函数与随机模式
- 粒子行为与场动力学
- 时间演化与系统状态
- 参数变化与涌现复杂性

2.3 哲学示例

名称	核心理念	算法表达
有机湍流	被自然法则约束的混沌	分层 Perlin 噪声驱动的流场，粒子跟随向量力，轨迹累积成密度图
量子谐波	离散实体的波浪干涉	网格粒子携带相位值，相位干涉产生明暗节点
递归低语	有限空间中的无限深度	L-系统递归分支，黄金比例约束，线条粗细随递归递减
场动力学	可见的隐形力量	向量场构造，粒子沿场线流动，可视化力的痕迹
随机结晶	随机过程的有序结构	Voronoi 镶嵌，弛豫算法，颜色基于单元大小

2.4 哲学写作要点

markdown

**关键指南**：
- 避免冗余：每个算法方面只提及一次
- 强调工艺：反复强调最终算法应显得精心打磨
- 留有空间：具体但简洁，给实现留有创意空间

3. 技术实现

3.1 种子随机性（Art Blocks 模式）

javascript

// 始终使用种子确保可重现性
let seed = 12345; // 或从用户输入生成哈希
randomSeed(seed);
noiseSeed(seed);

// 相同种子 = 相同输出（这是关键！）

3.2 参数结构

javascript

let params = {
  seed: 12345,              // 必须：用于可重现性

  // 数量参数
  particleCount: 1000,      // 多少个？

  // 尺度参数
  noiseScale: 0.01,         // 多大？
  speed: 2,                 // 多快？

  // 概率参数
  spawnProbability: 0.1,    // 多可能？

  // 比例参数
  aspectRatio: 1.5,         // 什么比例？

  // 阈值参数
  velocityThreshold: 5,     // 何时改变行为？
};

3.3 基本画布设置

javascript

function setup() {
  createCanvas(1200, 1200);
  // 初始化系统
}

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

4. 交互式 HTML 结构

4.1 必须使用模板

关键：必须先读取 templates/viewer.html 作为起点，而非从头创建。

4.2 固定部分 vs 可变部分

类型	内容	是否修改
固定	布局结构（头部、侧边栏、画布区域）	❌ 保持不变
固定	Anthropic 品牌（颜色、字体、渐变）	❌ 保持不变
固定	种子控制（上一个/下一个/随机/跳转）	❌ 保持不变
固定	操作按钮（重新生成/重置/下载）	❌ 保持不变
可变	p5.js 算法（setup/draw/类）	✅ 完全自定义
可变	参数对象	✅ 根据艺术需要定义
可变	参数控制滑块	✅ 为每个参数创建
可选	颜色选择器	✅ 如果需要可调颜色

4.3 侧边栏结构

html

<div class="sidebar">
  <!-- 1. 种子 (固定) -->
  <div class="section">
    <h3>Seed</h3>
    <!-- 种子显示、上一个/下一个/随机/跳转 -->
  </div>

  <!-- 2. 参数 (可变) -->
  <div class="section">
    <h3>Parameters</h3>
    <div class="control-group">
      <label>Parameter Name</label>
      <input type="range" id="param" min="..." max="..."
             oninput="updateParam('param', this.value)">
      <span class="value-display" id="param-value">...</span>
    </div>
    <!-- 为每个参数添加控制组 -->
  </div>

  <!-- 3. 颜色 (可选) -->
  <div class="section">
    <h3>Colors</h3>
    <!-- 如果艺术需要可调颜色 -->
  </div>

  <!-- 4. 操作 (固定) -->
  <div class="section">
    <h3>Actions</h3>
    <!-- 重新生成、重置、下载 PNG -->
  </div>
</div>

4.4 完整 HTML 结构

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>
    /* 所有样式内联 - 干净、最小化 */
    /* Anthropic 品牌颜色和字体 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 所有参数控制 -->
  </div>
  <script>
    // 所有 p5.js 代码内联
    // 参数对象、类、函数
    // setup() 和 draw()
    // UI 处理器
    // 一切自包含
  </script>
</body>
</html>

5. 工艺标准

5.1 品质要求

markdown

**关键**：创建看起来像经过无数次迭代打磨的算法

- **平衡**：复杂但不杂乱，有序但不僵硬
- **色彩和谐**：深思熟虑的调色板，不是随机 RGB
- **构图**：即使在随机中也保持视觉层次和流动
- **性能**：流畅执行，动画时优化实时性能
- **可重现**：相同种子必须产生相同输出

5.2 从哲学到实现

markdown

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

如果哲学是关于**数学之美**：
- 几何关系和比例
- 三角函数和谐波
- 精确计算创造意外图案

如果哲学是关于**可控混沌**：
- 严格边界内的随机变化
- 分叉和相变
- 从无序中涌现有序

6. 变体探索

6.1 种子导航

Artifact 默认包含种子导航（上一个/下一个/随机按钮），允许用户探索变体而无需创建多个文件。

6.2 预设变体

如果用户想要突出特定变体：

javascript

// 种子预设按钮
const presets = [
  { name: "变体 1", seed: 42 },
  { name: "变体 2", seed: 127 },
  { name: "变体 3", seed: 256 },
];

6.3 画廊模式

在同一个 Artifact 中显示多个种子的缩略图：

javascript

// 3x3 画廊网格
function drawGallery() {
  for (let i = 0; i < 9; i++) {
    let seed = i + 1;
    // 绘制小版本
  }
}

7. 资源文件

文件	用途
`templates/viewer.html`	必须的起点：HTML 结构和 Anthropic 品牌
`templates/generator_template.js`	参考：p5.js 最佳实践和代码结构原则

8. 使用示例

8.1 触发方式

"创建一个流场生成艺术"
"用 p5.js 做一个粒子系统艺术"
"生成式艺术，主题是海洋波浪"
"algorithmic art about urban chaos"

8.2 输出示例

算法哲学 (Markdown)
交互式 HTML Artifact - 自包含，可在 claude.ai 或任何浏览器中运行

9. 本节小结

要点	说明
哲学先行	先定义美学方向，再实现代码
种子可重现	相同种子必须产生相同输出
使用模板	从 viewer.html 开始，保持品牌一致
交互探索	用户可调参数、浏览种子
工艺标准	作品应看起来像专家级打磨

返回：Skills 目录

Algorithmic Art Skill 详解 ​

基本信息 ​

1. 核心概念 ​

1.1 什么是算法艺术 ​

1.2 两步创作流程 ​

2. 算法哲学 ​

2.1 什么是算法哲学 ​

2.2 哲学结构 ​

2.3 哲学示例 ​

2.4 哲学写作要点 ​

3. 技术实现 ​

3.1 种子随机性（Art Blocks 模式） ​

3.2 参数结构 ​

3.3 基本画布设置 ​

4. 交互式 HTML 结构 ​

4.1 必须使用模板 ​

4.2 固定部分 vs 可变部分 ​

4.3 侧边栏结构 ​

4.4 完整 HTML 结构 ​

5. 工艺标准 ​

5.1 品质要求 ​

5.2 从哲学到实现 ​

6. 变体探索 ​

6.1 种子导航 ​

6.2 预设变体 ​

6.3 画廊模式 ​

7. 资源文件 ​

8. 使用示例 ​

8.1 触发方式 ​

8.2 输出示例 ​

9. 本节小结 ​

Algorithmic Art Skill 详解

基本信息

1. 核心概念

1.1 什么是算法艺术

1.2 两步创作流程

2. 算法哲学

2.1 什么是算法哲学

2.2 哲学结构

2.3 哲学示例

2.4 哲学写作要点

3. 技术实现

3.1 种子随机性（Art Blocks 模式）

3.2 参数结构

3.3 基本画布设置

4. 交互式 HTML 结构

4.1 必须使用模板

4.2 固定部分 vs 可变部分

4.3 侧边栏结构

4.4 完整 HTML 结构

5. 工艺标准

5.1 品质要求

5.2 从哲学到实现

6. 变体探索

6.1 种子导航

6.2 预设变体

6.3 画廊模式

7. 资源文件

8. 使用示例

8.1 触发方式

8.2 输出示例

9. 本节小结