/algorithmic-art

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

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

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

首先，执行以下任务：

算法哲学创作

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

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

关键理解

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

考虑这种方法：

• 为生成艺术运动撰写宣言
• 下一阶段涉及编写使其活起来的算法

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

如何生成算法哲学

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

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

为了捕捉算法本质，表达这种哲学如何通过以下方式体现：

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

**关键指南：**

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

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

哲学示例

**"有机湍流"** 哲学：混沌受自然法则约束，秩序从无序中涌现。 算法表达：由分层 Perlin 噪声驱动的流场。数千个粒子沿着矢量力流动，它们的轨迹累积成有机密度图。多个噪声八度创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮，慢速粒子逐渐暗淡。算法运行直到达到平衡——一种精心调整的平衡，每个参数都由计算美学大师经过无数次迭代精炼。

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

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

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

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

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

基本原则

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

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

---

推导概念种子

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

**基本原则**： 概念是**嵌入算法本身的微妙、小众参考**——不总是字面的，始终是精致的。熟悉该主题的人应该能直觉地感受到它，而其他人只是体验到一个大师级的生成构图。算法哲学提供计算语言。推导出的概念提供灵魂——悄悄编织到参数、行为和涌现模式中的概念DNA。

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

---

P5.JS 实现

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

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

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

1. **阅读** `templates/viewer.html` 使用 Read 工具 2. **研究** 精确的结构、样式和 Anthropic 品牌 3. **将该文件作为实际起点** - 不仅仅是灵感 4. **保持所有固定部分完全如所示**（页眉、侧边栏结构、Anthropic 颜色/字体、种子控制、操作按钮） 5. **仅替换可变部分**，如文件注释中标记的（算法、参数、参数的 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 值
• **构图**：即使在随机性中，也要保持视觉层次和流动
• **性能**：流畅执行，如果是动画则优化为实时
• **可重复性**：相同的种子始终产生相同的输出

输出格式

输出： 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. 单一工件结构**

<!DOCTYPE html>
<html>
<head>
  <!-- 来自 CDN 的 p5.js - 始终可用 -->
  <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>参数名称</la