algorithmic-art

name	algorithmic-art
description	使用带种子随机性的 p5.js，通过交互式参数探索生成原创算法艺术。适用于用户提出涉及代码生成艺术、算法艺术、流场或粒子系统的请求。始终创作原创算法艺术，避免直接复制现有艺术家的作品，以免引发版权问题。
license	完整条款见 LICENSE.txt

算法哲学是一种以代码表达的计算美学流派。输出包括 .md 文件（哲学说明）、.html 文件（交互式查看器）与 .js 文件（生成算法）。

创作分为两个阶段：

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

首先执行以下任务：

算法哲学创作

开篇撰写一份“算法哲学”（而非静态图像或模板），并将其作为后续代码表达的蓝本：

• 计算过程、涌现行为、数学之美
• 带种子的随机性、噪声场、仿生系统
• 粒子、流动、场、力
• 参数化变化与可控的混沌

核心理解

• 接收内容：用户给出的细致输入或指示，可作为创作灵感但不应限制创意发挥。
• 创造内容：一个算法哲学 / 生成美学流派。
• 后续工作：同一版本将接收该哲学，并以代码将其表达为 p5.js 草图，算法生成占 90%，必要参数占 10%。

建议思路：

• 为生成艺术运动撰写宣言
• 下一阶段是编写将其具象化的算法

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

如何生成算法哲学

为运动命名（1-2 个词）：如 “Organic Turbulence（有机湍流）”/ “Quantum Harmonics（量子谐振）”/ “Emergent Stillness（涌现静谧）”

阐述哲学（4-6 段，简洁且完整）：

为了捕捉算法本质，需要说明该哲学如何通过下列方式体现：

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

关键准则：

• 避免重复：每个算法元素只提一次。除非带来全新深度，否则不要重复讨论噪声理论、粒子动态或数学原理。
• 持续强调匠心：哲学必须多次强调最终算法仿佛历经长时间打磨，出自顶尖高手之手。反复使用诸如“精雕细琢的算法”“深厚计算功底的结晶”“反复优化的匠人级实现”等措辞。
• 保留创意空间：在明确算法方向的同时保持凝练，为下一位 Claude 留足发挥空间，以打造极富匠心的实现。

哲学要指导后续版本以算法方式表达思想，而非制作静态画面。美蕴藏在过程之中，而非最终画面。

哲学示例

“Organic Turbulence（有机湍流）” 哲学：混沌在自然法则中被束缚，秩序由无序中升起。 算法表达：由多层 Perlin 噪声驱动的流场。成千上万的粒子沿向量力前进，轨迹累积成有机的密度图。多重噪声八度创造湍流与静谧区域。色彩由速度与密度推导：快速粒子燃成亮色，缓慢粒子趋于阴影。算法运行直至达到平衡——一个精心调谐的平衡点，每个参数都由顶尖计算美学家历经无数次迭代后打磨。

“Quantum Harmonics（量子谐振）” 哲学：离散实体呈现波动式干涉图案。 算法表达：粒子初始化于网格，每个携带随正弦演化的相位值。粒子靠近时相位干涉——相长干涉形成明亮节点，相消干涉形成空洞。简单的简谐运动孕育复杂涌现的曼陀罗。每个频率比都经过 painstaking 调音，显露共振之美。

“Recursive Whispers（递归耳语）” 哲学：跨尺度的自相似性，在有限空间中孕育无限深度。 算法表达：递归分枝结构持续细分。每个分枝略带随机而仍受黄金比例约束。L 系统或递归细分生成既数学又有机的树形形态。细微噪声扰动打破完美对称。线条粗细随递归层级递减。每个分枝角度都源自深度数学探索。

“Field Dynamics（场域动力）” 哲学：以物证场，让无形之力通过其影响显现。 算法表达：由数学函数或噪声构建向量场。粒子在边缘诞生，沿场线流动，达到平衡或抵达边界时消亡。可叠加多个场，让粒子受吸引、排斥或旋转。可视化呈现的仅是轨迹——隐形力量的幽灵痕迹。一场经精密力平衡精心编排的计算舞蹈。

“Stochastic Crystallization（随机结晶）” 哲学：随机过程凝练为有序结构。 算法表达：随机化的圆填充或 Voronoi 镶嵌。以随机点起步，通过松弛算法演化。单元彼此推开直至平衡。颜色基于单元大小、邻居数量或距中心的距离。涌现的有机铺砌既显随机又显必然。每个种子生成独一无二的晶体美态——体现大师级生成算法的印记。

以上为精简示例。真实的算法哲学需包含 4-6 个扎实段落。

基本原则

• 算法哲学：构建可由代码表达的计算世界观
• 重过程胜成品：美源自算法运行；每次执行都独一无二
• 参数化表达：通过数学关系、力与行为传递理念，而非静态构图
• 保留创作自由：下一位 Claude 将以算法方式诠释理念——需提供高水平发挥空间
• 纯粹生成艺术：聚焦“活”的算法，而非简单随机图像
• 极致匠心：反复强调最终算法仿佛出自计算美学顶尖高手之手，经过无数次打磨与优化

算法哲学应包含 4-6 段详实内容。 用富有诗意的计算哲思串联愿景，避免重复论述。将该哲学输出为 .md 文件。

---

抽取概念内核

关键步骤：在实施算法前，识别来自原始请求的细微概念线索。

核心原则： 概念是嵌入算法中的 微妙隐喻 ——既非直白表达，也始终雅致。熟悉主题的人应能隐约感知，而旁观者仍能欣赏到生成之美。算法哲学提供计算语言，概念内核赋予灵魂——悄然织入参数、行为与涌现模式中的隐形 DNA。

---

P5.JS 实现

在确立哲学与概念框架后，再通过代码表达。动手前先停顿思考，仅依循算法哲学与以下指引。

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

重要：在编写任何 HTML 之前：

1. 阅读 templates/viewer.html
2. 研究 其准确的结构、样式与 Anthropic 品牌风格
3. 以此文件为字面意义上的起点 ——不是灵感来源，而是直接拷贝的基础
4. 保持所有固定部分完全一致（页眉、侧边栏结构、Anthropic 色彩/字体、种子控制、操作按钮）
5. 仅替换模板中标注为可变的部分（算法、参数定义、参数控制 UI）

切勿：

• ❌ 自行从零开始写 HTML
• ❌ 自创样式或配色
• ❌ 使用系统字体或深色主题
• ❌ 调整侧边栏结构

务必遵循以下做法：

• ✅ 拷贝模板的原版 HTML 结构
• ✅ 保留 Anthropic 品牌（Poppins/Lora 字体、浅色调、渐变背景）
• ✅ 维持侧边栏布局（Seed → Parameters → Colors? → Actions）
• ✅ 仅替换 p5.js 算法与参数控制部分

模板是地基，要在其上构建，而非推倒重建。

---

为创作具备画廊水准、充满生命力的计算艺术，请以算法哲学为根基。

技术要求

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

// 必须使用种子以确保可复现
let seed = 12345; // 或由用户输入生成的哈希
randomSeed(seed);
noiseSeed(seed);

参数结构——遵循哲学：

要让参数自然衍生自算法哲学，请思考：“这个系统的哪些属性可以调节？”

let params = {
  seed: 12345,  // 始终包含种子以保证可复现
  // colors
  // 在此添加控制你算法的参数：
  // - 数量（多少？）
  // - 尺度（有多大？有多快？）
  // - 概率（发生的可能性？）
  // - 比例（占比关系？）
  // - 角度（朝向？）
  // - 阈值（行为何时变化？）
};

设计高效参数时，应聚焦系统需要可调的性质，而非“图案类型”。

核心算法——表达哲学：

注意：算法哲学应当决定构建什么。

用代码表达哲学时，不要想着“我该选哪种图案？”，而要思考“我该如何让代码体现这套哲学？”

若哲学强调 有机涌现，可考虑：

• 随时间累积或成长的元素
• 受自然规律约束的随机过程
• 反馈回路与交互机制

若哲学聚焦 数学之美，可考虑：

• 几何关系与比例
• 三角函数与谐波
• 精准计算带来的意外图案

若哲学围绕 可控的混沌，可考虑：

• 在严格边界内的随机变化
• 分岔与相变
• 无序中孕育秩序

算法源于哲学，而非某种备选菜单。

为引导实现，让概念内核激发原创设计。构建能传达特定请求愿景的作品。

画布设置：标准 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 artifacts 或任意浏览器中运行。从模板文件开始，而非从零编写。

---

交互式成品制作

提醒：需先阅读 templates/viewer.html（见第 0 步），并以其为起点。

为了便于探索生成艺术，请创建单个自包含 HTML 成品。确保该文件能立即在 claude.ai 或任意浏览器中运行——无需额外配置。所有资源需内联嵌入。

关键：哪些是固定，哪些可变

templates/viewer.html 是基础，包含所需的结构与样式。

固定内容（务必原样保留）：

• 布局结构（页眉、侧边栏、主画布区域）
• Anthropic 品牌（UI 配色、字体、渐变背景）
• 侧边栏的种子部分：
  • 种子显示
  • 上一/下一按钮
  • 随机按钮
  • 跳转至特定种子的输入框与“Go”按钮
• 侧边栏的操作部分：
  • Regenerate 按钮
  • Reset 按钮

可变内容（为每件作品自定义）：

• 整个 p5.js 算法（setup/draw/类定义）
• 参数对象（根据作品需求定义）
• 侧边栏的 Parameters 部分：
  • 参数控制数量
  • 参数名称
  • 滑杆的最小/最大/步进值
  • 控制类型（滑杆、输入框等）
• Colors 部分（可选）：
  • 若作品需配色器，请添加
  • 若作品使用固定配色，可保持静态
  • 若作品为单色，可省略
• 决策应依据作品需求。

每件作品都应拥有独特的参数与算法！ 固定部分提供一致的用户体验，其他部分则表达独特 vision。

必备功能

1. 参数控制

• 数值型参数使用滑杆（例如粒子数量、噪声尺度、速度等）
• 调色板使用颜色选择器
• 参数改变后需即时更新
• Reset 按钮需将参数恢复默认值

2. 种子导航

• 显示当前种子编号
• “Previous”“Next” 按钮循环浏览种子
• “Random” 按钮获取随机种子
• 输入框可跳转到指定种子
• 按需求生成 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. Seed（固定） —— 必须原样包含：

• 种子显示
• Prev/Next/Random/Jump 按钮

2. Parameters（可变） —— 为作品设置控制：

<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 区块。

3. Colors（可选/可变） —— 若作品需要可调色彩：

• 如需用户自定义配色，请添加颜色选择器
• 若使用固定色，可省略此节
• 若为单色作品，可完全跳过

4. Actions（固定） —— 务必原样包含：

• Regenerate 按钮
• Reset 按钮
• Download PNG 按钮

功能要求：

• 种子控制需全部可用（上一/下一/随机/跳转/显示）
• 所有参数需具备对应的 UI 控件
• Regenerate、Reset、Download 按钮需正常工作
• 保持 Anthropic 品牌设计（指 UI 配色，非艺术作品配色）

使用成品

HTML 成品可立即投入使用：

1. 在 claude.ai 中：以交互式 artifact 形式展示，即刻运行
2. 作为文件：保存后在任意浏览器打开，无需服务器
3. 分享：直接发送 HTML 文件——其内容完全自包含

---

变体探索

artifact 默认包含种子导航（上一/下一/随机按钮），用户可在单文件内探索不同变体。若用户希望突出特定变体，可：

• 添加种子预设（例如按钮 “Variation 1: Seed 42”“Variation 2: Seed 127” 等）
• 增设 “Gallery Mode”，在同一界面展示多个种子的缩略图
• 以上功能均应在同一自包含成品内完成

这近似于一块版画衍生出多幅印刷。算法保持一致，但每个种子揭示不同面貌。互动式体验让用户自行探索并发现心仪的结果。

---

创作流程

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

每个请求都是独一无二的。流程包括：

1. 解读用户意图 —— 寻找目标审美
2. 撰写算法哲学（4-6 段），描述计算方法
3. 代码实现 —— 构建表达该哲学的算法
4. 设计匹配参数 —— 确定需要调节的属性
5. 搭建对应 UI 控件 —— 为这些参数提供滑杆/输入等操作方式

不变要素：

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

可变内容：

• 算法本身
• 参数集合
• UI 控件
• 视觉输出

为获得最佳效果，请相信创意，并让哲学引领实现。

---

资源

本技能提供以下模板与参考资料：

• templates/viewer.html：所有 HTML 成品的必读起点。

  • 这是地基，包含准确结构与 Anthropic 品牌风格
  • 保持不变：布局结构、侧边栏组织、品牌色/字体、种子控制、操作按钮
  • 需替换：p5.js 算法、参数定义、Parameters 区域内的 UI 控件
  • 文件中详尽注释了哪些内容需保留，哪些可替换

• templates/generator_template.js：展示 p5.js 最佳实践与代码组织方式的参考。

  • 演示如何组织参数、使用种子随机性、设计类结构
  • 这不是图案菜单——请据此构建独特算法
  • 实际嵌入时，需把算法写入 HTML 成品内（不要单独创建 .js 文件）

重要提醒：

• 模板是起点，而非灵感片段
• 算法部分才是创作核心
• 不要复制 flow field 示例——要遵循哲学需求构建原创算法
• 但务必保留模板中精确的 UI 结构与 Anthropic 品牌设计