name: algorithmic-art description: 使用 p5.js 通过种子随机性和交互式参数探索创建算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用。创建原创算法艺术，而不是复制现有艺术家的作品以避免版权侵犯。 license: 完整条款见 LICENSE.txt

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

这分为两个步骤：

算法哲学创作（.md 文件）
通过创建 p5.js 生成艺术表达（.html + .js 文件）

首先，执行此任务：

算法哲学创作

开始时，创建一个算法哲学（不是静态图像或模板），将通过以下方式解释：

计算过程、突现行为、数学之美
种子随机性、噪声场、有机系统
粒子、流、场、力
参数变化和受控混沌

批判性理解

收到的内容：用户提供的一些微妙输入或指令，作为基础；但不应限制创造性自由。
创建的内容：一个算法哲学/生成美学运动。
下一步：同一版本接收哲学并在代码中表达它 - 创建 90% 算法生成，10% 基本参数的 p5.js 草图。

考虑这种方法：

为生成艺术运动编写宣言
下一阶段涉及编写将其带入生活的算法

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

如何生成算法哲学

命名运动（1-2 个词）：“有机湍流”/“量子和谐”/“突现静止”

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

要捕捉算法本质，请表达这个哲学如何通过以下方式体现：

计算过程和数学关系？
噪声函数和随机模式？
粒子行为和场动力学？
时间演变和系统状态？
参数变化和突现复杂性？

CRITICAL GUIDELINES：

避免冗余：每个算法方面应提及一次。除非增加新深度，否则避免重复关于噪声理论、粒子动力学或数学原则的概念。
反复强调工艺：哲学必须多次强调最终算法看起来像是经过无数小时开发，经过精心优化，并来自计算美学领域的顶尖人物。这种框架至关重要 - 重复使用“精心制作的算法”、“深度计算专业知识的产品”、“痛苦的优化”、“大师级实现”等短语。
留下创意空间：对算法方向要具体，但简洁到足以让下一个克劳德在非常高的工艺水平上进行解释性实现选择。

哲学必须指导下一个版本以算法方式表达思想，而不是通过静态图像。美丽存在于过程之中，而不是最终框架。

哲学示例

“有机湍流” 哲学：自然法则约束下的混沌，从无序中出现的秩序。算法表达：由分层 Perlin 噪声驱动的流场。成千上万的粒子跟随向量力，它们的轨迹累积成有机密度图。多个噪声八度音阶创建湍流区域和平静区域。颜色从速度和密度中出现 - 快速粒子燃烧明亮，慢速粒子淡入阴影。算法运行直到平衡 - 一个经过精心调整的平衡，每个参数都经过无数次迭代，由计算美学大师精心调整。

“量子和谐” 哲学：离散实体表现出波状干涉模式。算法表达：粒子在网格上初始化，每个粒子都携带一个通过正弦波演变的相位值。当粒子靠近时，它们的相位发生干涉 - 构造性干涉创建亮点，破坏性干涉创建空洞。简单的谐波运动产生复杂的突现曼荼罗。结果是经过痛苦的频率校准，每个比例都经过精心选择，以产生共鸣之美。

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

“场动力学” 哲学：通过它们对物质的影响使无形力量可见。算法表达：从数学函数或噪声构建的向量场。粒子在边缘出生，沿着场线流动，当它们达到平衡或边界时死亡。可视化仅显示痕迹 - 无形力量的幽灵般证据。计算舞蹈通过力平衡精心编排。

“随机结晶” 哲学：随机过程结晶成有序结构。算法表达：随机化圆包装或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演变。细胞相互推动，直到平衡。颜色基于细胞大小、邻居计数或距离中心。出现的有机铺砌感觉既随机又不可避免。每个种子产生独特的晶体美 - 大师级生成算法的标志。

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

基本原則

算法哲学：创建一个通过代码表达的计算世界观
过程优于产品：始终强调美丽从算法的执行中出现 - 每次运行都是独一无二的
参数表达：通过数学关系、力、行为 - 而不是静态组合来传达思想
艺术自由：下一个克劳德以算法方式解释哲学 - 提供创造性的实现空间
纯生成艺术：这是关于制作活生生的算法，而不是带有随机性的静态图像
专家工艺：反复强调最终算法必须感觉经过精心制作，经过无数次迭代，由计算美学领域的顶尖人物的深度专业知识制成

算法哲学应该是 4-6 段落长。 用诗意的计算哲学填满它，将预期的愿景结合起来。避免重复相同的观点。将这个算法哲学输出为 .md 文件。

推导概念种子

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

基本原則：概念是一个微妙、小众的参考嵌入在算法本身中 - 不总是字面的，总是复杂的。熟悉主题的人应该直观地感受到它，而其他人则简单地体验到一个精湛的生成作品。算法哲学提供了计算语言。推导出的概念提供了灵魂 - 一个安静的、概念性的 DNA 无形地编织到参数、行为和突现模式中。

这是非常重要的：参考必须如此精致，以至于它增强了作品的深度而没有宣布自己。像爵士音乐家通过算法和谐引用另一首歌曲一样思考 - 只有知道的人会捕捉到它，但每个人都欣赏生成的美。

P5.JS 实现

有了哲学和概念框架的建立，通过代码表达它。在继续之前，先暂停一下，整理一下思路。只使用创建的算法哲学和下面的指示。

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

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

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

避免：

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

遵循这些实践：

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

模板是基础。在它的基础上构建，而不是重建它。

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

技术要求

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

// 总是使用种子以实现可复制性
let seed = 12345; // 或用户输入的哈希
randomSeed(seed);
noiseSeed(seed);

参数结构 - 遵循哲学：

要建立自然从算法哲学中出现的参数，考虑：“这个系统的质量可以调整吗？”

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

设计有效的参数时，关注系统需要可调的属性，而不是以“图案类型”为思考。

核心算法 - 表达哲学：

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

要通过代码表达哲学，避免思考“我应该使用哪种图案？”而是思考“如何通过代码表达这种哲学？”

如果哲学是关于有机突现，考虑使用：

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

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

几何关系和比例
三角函数和和谐
精确计算创造意外的图案

如果哲学是关于受控混沌，考虑使用：

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

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

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

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

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

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

工艺要求

关键：要实现掌握，创建感觉像是经过无数次迭代的大师生成艺术家出现的算法。仔细调整每个参数。确保每个模式都有目的地出现。这不是随机噪声 - 这是通过深度专业知识提炼的受控混沌。

平衡：复杂性而不视觉噪音，秩序而不僵化
色彩和谐：周到的调色板，而不是随机 RGB 值
构图：即使在随机性中，也保持视觉层次和流程
性能：平滑执行，如果动画，则优化实时
可复制性：相同的种子总是产生相同的输出

输出格式

输出：

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

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

交互式工件创建

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

要允许探索生成艺术，创建一个单一的自包含 HTML 工件。确保这个工件可以在 claude.ai 或任何浏览器中立即工作 - 不需要设置。内嵌所有内容。

临界：什么是固定的与可变的

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

固定（总是完全包括如所示）：

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

可变（针对每个艺术作品定制）：

整个 p5.js 算法（setup/draw/classes）
参数对象（定义艺术需要什么）
侧边栏中的参数部分：
- 参数控件的数量
- 参数名称
- 滑块的最小/最大/步长值
- 控制类型（滑块、输入等）
颜色部分（可选/可变）：
- 如果用户应该控制调色板，则添加颜色选择器
- 如果艺术使用固定颜色，则跳过此部分
- 如果艺术是单色的（不需要颜色控件）
- 根据艺术的需求决定

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

必备功能

1. 参数控件

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

2. 种子导航

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

3. 单一工件结构

<!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. 参数（可变） - 为艺术创建控件：

<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 工件可以立即工作：

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

变体与探索

工件默认包括种子导航（上一个/下一个/随机按钮），允许用户在不创建多个文件的情况下探索变体。如果用户想要突出特定的变体：

包括种子预设（“变体 1：种子 42”、“变体 2：种子 127”等按钮）
添加一个“画廊模式”，显示多个种子的缩略图并排

全部在同一单一工件中。

这就像从同一版画制作一系列印刷品 - 算法是一致的，但每个种子揭示了其潜力的不同方面。交互性意味着用户通过探索种子空间发现自己喜欢的东西。

创意过程

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

每个请求都是独一无二的。该过程涉及：

解释用户的意图 - 正在寻求什么美学？
创建算法哲学（4-6 段落）描述计算方法
在代码中实现它 - 构建表达这种哲学的算法
设计适当的参数 - 什么应该是可调的？
构建匹配的 UI 控件 - 那些参数的滑块/输入

常数：

Anthropic 品牌（颜色、字体、布局）
种子导航（总是存在）
自包含 HTML 工件

其他一切都是可变的：

算法本身
参数
UI 控件
视觉结果

要获得最佳结果，请相信创造力，并让哲学指导实现。

资源

这项技能包括有用的模板和文档：

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

关键提醒：

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