算法艺术Skill algorithmic-art

---

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

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

首先，执行此任务：

算法哲学创建

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

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

关键理解

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

考虑此方法：

• 为生成艺术运动撰写宣言
• 下一阶段涉及编写将其变为现实的算法

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

如何生成算法哲学

命名运动（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算法和参数控件

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

---

为了创建画廊质量的、活生生的计算艺术，使用算法哲学作为基础。

技术要求

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

// 始终使用种子以确保可重现性
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颜色、字体、渐变）
• 侧边栏中的种子部分：
  • 种子显示
  • 上一个/下一个按钮
  • 随机按钮
  • 跳转到种子输入 + Go按钮
• 侧边栏中的操作部分：
  • 重新生成按钮
  • 重置按钮

变量（为每个艺术品自定义）：

• 整个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 divs。

3. 颜色（可选/变量） - 如果艺术需要可调颜色则包括：

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

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

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

要求：

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

使用工件

HTML工件立即工作：

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

---

变体和探索

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

• 包括种子预设（“变体1：种子42”、"变体2：种子127"等按钮）
• 添加"画廊模式"，显示多个种子的缩略图并排
• 所有都在同一个单个工件内

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

---

创意过程

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

每个请求都是独特的。过程涉及：

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

常量：

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

其他一切是变量：

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

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

---

资源

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

• templates/viewer.html：所有HTML工件的必需起点。

  • 这是基础 - 包含确切的结构和Anthropic品牌
  • 保持不变：布局结构、侧边栏组织、Anthropic颜色/字体、种子控件、操作按钮
  • 替换：p5.js算法、参数定义和参数部分中的UI控件
  • 文件中的广泛注释标记确切保留 vs 替换的内容

• templates/generator_template.js：p5.js最佳实践和代码结构原则的参考。

  • 显示如何组织参数、使用种子随机性、结构类
  • 不是模式菜单 - 使用这些原则构建独特算法
  • 在HTML工件中内嵌算法（不要创建单独的.js文件）

关键提醒：

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