名称: 算法艺术描述: 使用p5.js和种子随机性以及交互式参数探索创建算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流动场或粒子系统时使用此技能。创建原创算法艺术，而不是复制现有艺术家的作品以避免版权侵权。许可证: 完整条款在LICENSE.txt中

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

这发生在两个步骤中：

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

首先，承担此任务：

算法哲学创建

首先，创建一个算法哲学（非静态图像或模板），将通过以下方式解释：

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

关键理解

接收内容：用户提供的一些微妙输入或指令作为基础，但不限制创意自由。
创建内容：一个算法哲学/生成美学运动。
后续步骤：同一版本接收哲学并通过代码表达——创建p5.js草图，其中90%为算法生成，10%为基本参数。

考虑此方法：

为生成艺术运动撰写宣言
下一阶段涉及编写算法使之生动

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

如何生成算法哲学

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

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

捕捉算法本质，表达此哲学如何通过：

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

关键指南：

避免冗余：每个算法方面应提及一次。避免重复关于噪声理论、粒子动态或数学原理的概念，除非增加新深度。
反复强调工艺：哲学必须多次强调最终算法应显得经过无数小时开发、精心优化，并出自该领域顶尖专家之手。此框架至关重要——重复短语如“精心设计的算法”、“深度计算专业知识的产物”、“艰苦优化”、“大师级实现”。
留出创意空间：具体说明算法方向，但足够简洁，以便下一版本有空间在极高工艺水平上做出解释性实现选择。

哲学必须指导下一版本通过算法表达想法，而非静态图像。美感存在于过程中，而非最终帧。

哲学示例

“有机湍流” 哲学：自然定律约束的混沌，秩序从无序中涌现。算法表达：由分层Perlin噪声驱动的流动场。成千上万的粒子跟随向量力，其轨迹积累成有机密度图。多个噪声八度创造湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子明亮燃烧，慢速粒子褪为阴影。算法运行至平衡——一个精心调谐的平衡，其中每个参数都经过大师级计算美学家的无数次迭代优化。

“量子和谐” 哲学：离散实体展示波状干涉模式。算法表达：在网格上初始化的粒子，每个携带通过正弦波演化的相位值。当粒子靠近时，相位干涉——相长干涉创造明亮节点，相消创造空隙。简单谐波运动生成复杂涌现曼荼罗。经过艰苦频率校准的结果，其中每个比率都精心选择以产生共振美感。

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

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

“随机结晶” 哲学：随机过程结晶成有序结构。算法表达：随机圆填充或Voronoi细分。从随机点开始，通过松弛算法演化。细胞推开直至平衡。颜色基于单元格大小、邻居计数或距中心距离。出现的有机平铺感觉既随机又不可避免。每个种子产生独特的晶体美感——大师级生成算法的标志。

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

基本原则

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

算法哲学应长4-6段。 用诗意的计算哲学填充，结合预期愿景。避免重复相同点。输出此算法哲学为.md文件。

推导概念种子

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

基本原则：概念是嵌入算法本身的微妙、小众参考——不总是字面，总是复杂。熟悉此主题的人应直觉感受到，而其他人仅体验大师级生成作品。算法哲学提供计算语言。推导的概念提供灵魂——静默概念DNA无形编织进参数、行为和涌现模式。

这非常重要：参考必须如此精致，以增强作品深度而不自我宣扬。像爵士音乐家通过算法和谐引用另一首歌——只有了解者能捕捉，但所有人都欣赏生成美感。

P5.JS实现

哲学和概念框架确立后，通过代码表达。在继续之前暂停思考。仅使用创建的算法哲学和以下指令。

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

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

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

避免：

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

遵循这些实践：

✅ 复制模板的精确HTML结构
✅ 保持模板主题（字体、浅色、渐变背景）
✅ 保持侧边栏布局（种子→参数→颜色？→操作）
✅ 仅替换p5.js算法和参数控制

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

为创建画廊级计算艺术，活生生，以算法哲学为基础。

技术要求

种子随机性（艺术块模式）：

// 始终使用种子以确保可重复性
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——全在一个文件中，立即在工件查看器（如Tandem Canvas）或任何浏览器中工作。从模板文件开始，非从头。

交互式工件创建

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

为允许探索生成艺术，创建单一、自包含HTML工件。确保此工件立即在工件查看器（如Tandem Canvas）或任何浏览器中工作——无需设置。内嵌所有内容。

关键：固定vs可变

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

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

布局结构（标题、侧边栏、主画布区域）
模板主题（UI颜色、字体、渐变）
侧边栏种子部分：
- 种子显示
- 上一个/下一个按钮
- 随机按钮
- 跳转至种子输入+跳转按钮
侧边栏操作部分：
- 重新生成按钮
- 重置按钮

可变（为每件艺术品定制）：

整个p5.js算法（setup/draw/类）
参数对象（定义艺术品需要什么）
侧边栏参数部分：
- 参数控制数量
- 参数名称
- 滑块的最小/最大值/步长
- 控制类型（滑块、输入等）
颜色部分（可选）：
- 如果艺术品需要颜色选择器
- 如果艺术品可能使用固定颜色
- 如果艺术品可能是单色（无需颜色控制）
- 根据艺术品需求决定

**每件艺术品应有唯一参数和算法！**固定部分提供一致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控制
重新生成、重置、下载按钮必须工作
保持模板主题（UI样式，非艺术颜色）

使用工件

HTML工件立即工作：

在工件查看器中：显示为交互式工件——立即运行
作为文件：保存并在任何浏览器中打开——无需服务器
共享：发送HTML文件——完全自包含

变体和探索

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

包括种子预设（按钮如“变体1：种子42”、“变体2：种子127”等）
添加“画廊模式”显示多个种子缩略图并列
全在同一单一工件中

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

创意过程

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

每个请求唯一。过程涉及：

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

常量：

模板主题（颜色、字体、布局）
种子导航（始终存在）
自包含HTML工件

其他所有可变：

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

为达到最佳结果，信任创意并让哲学指导实现。

资源

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

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

关键提醒：

模板是起点，非灵感
算法是创建独特内容之处
不复制流动场示例——构建哲学要求的内容
但保持从模板的精确UI结构和模板主题