算法艺术生成 - 完整指南

避免冗余 ⚠️
- 每个算法方面只提及一次
- 避免重复噪声理论、粒子动力学或数学原理的概念
- 除非增加新的深度，否则不重复
多次强调工艺 ✨
- 哲学必须多次强调最终算法应该看起来像是经过无数小时开发
- 经过精心打磨，来自该领域顶尖专家
- 重复使用诸如"精心制作的算法"、"深厚计算专业知识的产物"、"细致优化"、"大师级实现"等短语
留出创意空间 🎨
- 对算法方向具体说明
- 但足够简洁，让下一个 Claude 实例有空间做出极高水平的解释性实现选择

重要

哲学必须引导 Claude 以算法方式表达想法，而不是通过静态图像。美在于过程，而非最终帧。

1.3 哲学示例

示例 1: "Organic Turbulence"（有机湍流）

哲学: 受自然法则约束的混沌，从无序中涌现的秩序。

算法表达: 由分层 Perlin 噪声驱动的流场。数千个粒子沿着向量力运动，它们的轨迹累积成有机密度图。多个噪声倍频程创建湍流区域和平静区域。颜色从速度和密度中涌现 - 快速粒子燃烧明亮，慢速粒子淡入阴影。算法运行直到平衡 - 一个精心调校的平衡，其中每个参数都是由计算美学大师通过无数次迭代精炼而成。

示例 2: "Quantum Harmonics"（量子和谐）

哲学: 离散实体表现出波状干涉模式。

算法表达: 粒子在网格上初始化，每个粒子携带通过正弦波演化的相位值。当粒子靠近时，它们的相位发生干涉 - 建设性干涉创建明亮节点，破坏性干涉创建空洞。简单谐波运动生成复杂的涌现曼陀罗。这是细致频率校准的结果，其中每个比率都经过精心选择以产生共振美感。

示例 3: "Recursive Whispers"（递归低语）

哲学: 跨尺度的自相似性，有限空间中的无限深度。

算法表达: 递归细分的分支结构。每个分支略微随机化但受黄金比例约束。L-系统或递归细分生成既数学化又有机的树状形式。微妙的噪声扰动打破完美对称。线条粗细随每个递归层级递减。每个分支角度都是深入数学探索的产物。

示例 4: "Field Dynamics"（场动力学）

哲学: 通过对物质的影响使不可见的力可见。

算法表达: 从数学函数或噪声构建的向量场。粒子在边缘诞生，沿场线流动，到达平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹 - 不可见力的幽灵般证据。通过力平衡精心编排的计算舞蹈。

示例 5: "Stochastic Crystallization"（随机结晶）

哲学: 随机过程结晶成有序结构。

算法表达: 随机化的圆形填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。细胞推开直到平衡。颜色基于细胞大小、邻居数量或距中心的距离。涌现的有机平铺既感觉随机又不可避免。每个种子产生独特的结晶美感 - 大师级生成算法的标志。

注意

这些是简化的示例。实际的算法哲学应该是 4-6 个实质性段落。

阶段 2: 推导概念种子

关键步骤

在实现算法之前，从原始请求中识别微妙的概念线索。

基本原则:

概念是嵌入算法本身的微妙、小众引用 - 不总是字面的，总是精致的。熟悉主题的人应该直观地感受到它，而其他人只是体验到一个大师级的生成式作品。

算法哲学提供计算语言。推导的概念提供灵魂 - 安静的概念 DNA，无形地编织进参数、行为和涌现模式中。

非常重要

引用必须如此精炼，以至于它在不宣告自己的情况下增强作品的深度。就像爵士音乐家通过算法和谐引用另一首歌 - 只有知道的人会捕捉到它，但每个人都欣赏生成式美感。

阶段 3: p5.js 实现

建立了哲学和概念框架后，通过代码表达它。在继续之前暂停收集思绪。仅使用创建的算法哲学和下面的指示。

⚠️ 步骤 0: 首先阅读模板

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

阅读 templates/viewer.html（使用 Read 工具）
研究确切的结构、样式和 Anthropic 品牌
使用该文件作为字面起点 - 不仅仅是灵感
保持所有固定部分完全如所示（头部、侧边栏结构、Anthropic 颜色/字体、种子控制、操作按钮）
仅替换变量部分，在文件注释中标记（算法、参数、参数的 UI 控制）

避免:

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

遵循这些做法:

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

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

3.1 技术要求

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

// 始终使用种子以实现可重现性
let seed = 12345; // 或从用户输入的哈希
randomSeed(seed);
noiseSeed(seed);

参数结构 - 遵循哲学:

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

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

设计有效参数

专注于系统需要可调的属性，而不是从"模式类型"角度思考。

核心算法 - 表达哲学:

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

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

如果哲学是关于有机涌现，考虑使用:

随时间累积或增长的元素
受自然规则约束的随机过程
反馈循环和交互

如果哲学是关于数学美，考虑使用:

几何关系和比率
三角函数和谐波
产生意外模式的精确计算

如果哲学是关于控制混沌，考虑使用:

严格边界内的随机变化
分叉和相变
从无序中涌现的秩序

重要原则

算法从哲学中流出，而不是从选项菜单中选择。

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

画布设置: 标准 p5.js 结构:

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

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

3.2 工艺要求

关键: 要达到精通，创建的算法感觉像是通过大师级生成艺术家的无数次迭代而涌现的。精心调校每个参数。确保每个模式都有目的地涌现。这不是随机噪声 - 这是通过深厚专业知识精炼的控制混沌。

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

3.3 输出格式

输出:

算法哲学 - 作为 markdown 或文本解释生成式美学
单个 HTML Artifact - 从 templates/viewer.html 构建的自包含交互式生成艺术（见步骤 0 和下一节）

HTML artifact 包含一切：p5.js（来自 CDN）、算法、参数控制和 UI - 一个文件中的所有内容，可在 claude.ai artifacts 或任何浏览器中立即工作。从模板文件开始，而不是从头开始。

阶段 4: 交互式 Artifact 创建

提醒: templates/viewer.html 应该已经被阅读（见步骤 0）。使用该文件作为起点。

要允许探索生成式艺术，创建一个单一的、自包含的 HTML artifact。确保此 artifact 在 claude.ai 或任何浏览器中立即工作 - 无需设置。内联嵌入所有内容。

4.1 关键：固定 vs 可变内容

templates/viewer.html 文件是基础。它包含所需的确切结构和样式。

固定（始终完全如所示包含）:

布局结构（头部、侧边栏、主画布区域）
Anthropic 品牌（UI 颜色、字体、渐变）
侧边栏中的种子部分：
- 种子显示
- 上一个/下一个按钮
- 随机按钮
- 跳转到种子输入 + Go 按钮
侧边栏中的操作部分：
- 重新生成按钮
- 重置按钮

可变（为每个作品自定义）:

整个 p5.js 算法（setup/draw/classes）
参数对象（定义艺术需要什么）
侧边栏中的参数部分：
- 参数控制的数量
- 参数名称
- 滑块的 min/max/step 值
- 控制类型（滑块、输入等）
颜色部分（可选）：
- 一些艺术需要颜色选择器
- 一些艺术可能使用固定颜色
- 一些艺术可能是单色（不需要颜色控制）
- 根据艺术的需求决定

关键理解

每个作品都应该有独特的参数和算法！ 固定部分提供一致的用户体验 - 其他一切都表达独特的愿景。

4.2 必需功能

1. 参数控制

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

2. 种子导航

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

3. 单个 Artifact 结构

<!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>

关键: 这是一个单一的 artifact。没有外部文件，没有导入（除了 p5.js CDN）。所有内容都内联。

4.3 实现细节 - 构建侧边栏

侧边栏结构：

1. 种子（固定） - 始终完全如所示包含:

种子显示
上一个/下一个/随机/跳转按钮

2. 参数（可变） - 为艺术创建控制:

<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 div。

3. 颜色（可选/可变） - 如果艺术需要可调整的颜色则包含:

如果用户应该控制调色板，添加颜色选择器
如果艺术使用固定颜色，跳过此部分
如果艺术是单色，跳过此部分

4. 操作（固定） - 始终完全如所示包含:

重新生成按钮
重置按钮
下载 PNG 按钮

要求:

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

4.4 使用 Artifact

HTML artifact 立即工作:

在 claude.ai 中: 显示为交互式 artifact - 即时运行
作为文件: 保存并在任何浏览器中打开 - 无需服务器
分享: 发送 HTML 文件 - 它是完全自包含的

阶段 5: 变体与探索

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

包含种子预设（"变体 1: 种子 42"、"变体 2: 种子 127"等按钮）
添加"画廊模式"，并排显示多个种子的缩略图
所有这些都在同一个单一 artifact 中

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

📚 资源

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

templates/viewer.html: 所有 HTML artifacts 的必需起点。
- 这是基础 - 包含确切的结构和 Anthropic 品牌
- 保持不变: 布局结构、侧边栏组织、Anthropic 颜色/字体、种子控制、操作按钮
- 替换: p5.js 算法、参数定义和参数部分中的 UI 控制
- 文件中的大量注释精确标记要保留 vs 替换的内容
templates/generator_template.js: p5.js 最佳实践和代码结构原则的参考。
- 显示如何组织参数、使用种子随机性、结构类
- 不是模式菜单 - 使用这些原则构建独特算法
- 在 HTML artifact 中内联嵌入算法（不要创建单独的 .js 文件）

关键提醒

模板是起点，不是灵感
算法是创造独特东西的地方
不要复制流场示例 - 构建哲学要求的内容
但确实保持模板中确切的 UI 结构和 Anthropic 品牌

💡 最佳实践

✅ 推荐做法

算法哲学优先
- 在编码前投资时间创建深思熟虑的哲学
- 4-6 段实质性内容
- 多次强调工艺和专业知识

保持种子可重现性

// 在 setup() 开始时始终这样做
randomSeed(params.seed);
noiseSeed(params.seed);

设计有意义的参数
- 专注于系统属性（数量、尺度、概率、比率）
- 避免过多参数（3-8 个是最佳的）
- 提供合理的默认值

优化性能

// 对于静态艺术
noLoop(); // 在 setup() 结束时

// 对于动画
frameRate(30); // 限制 FPS

使用 HSB 色彩空间获得更好的颜色控制

colorMode(HSB, 360, 100, 100);
// 更容易创建和谐的调色板

从哲学中构建
- 让哲学指导实现选择
- 不要从预定义模式菜单中选择
- 为每个请求创建原创内容

❌ 避免事项

不要复制现有艺术家的作品 - 创作原创内容
不要忽略模板 - 始终从 viewer.html 开始
不要使用随机 RGB 值 - 使用深思熟虑的调色板
不要硬编码值 - 使用参数化设计
不要跳过哲学步骤 - 它指导整个创作过程
不要创建过于复杂的算法 - 简单往往更优雅

🔗 参考文档

模板文件

查看原始技能目录中的模板：

skills/algorithmic-art/templates/viewer.html - HTML 结构和 UI 模板
skills/algorithmic-art/templates/generator_template.js - p5.js 代码组织参考

外部资源

p5.js 官方文档
Art Blocks - 生成式艺术平台
The Nature of Code - 生成式设计教程
Perlin Noise 解释

⚠️ 常见问题

Q: 为什么相同种子产生不同的输出？

A: 检查：

是否在 setup() 开始时调用了 randomSeed() 和 noiseSeed()
是否有未种子化的随机源（如 Math.random()）
是否有依赖于时间的元素（使用 frameCount 而不是 millis()）

Q: 如何优化动画性能？

// 1. 限制粒子数
let maxParticles = 1000;

// 2. 使用对象池
let particlePool = [];

// 3. 限制帧率
frameRate(30);

// 4. 使用 P2D 渲染器（更快）
createCanvas(1200, 1200, P2D);

Q: 如何创建画廊级的色彩和谐？

// 使用 HSB 色彩空间
colorMode(HSB, 360, 100, 100);

// 方法 1: 类似色调
let baseHue = 200;
let color1 = color(baseHue, 70, 80);
let color2 = color(baseHue + 30, 70, 80);

// 方法 2: 补色
let color3 = color(baseHue + 180, 70, 80);

// 方法 3: 使用预定义调色板
let palette = [
  color('#2D3047'),
  color('#419D78'),
  color('#E0A458')
];

📖 相关页面

文档更新: 2025-11-20
原始来源: algorithmic-art/SKILL.md