algorithmic-art

算法哲学是一种计算美学运动，随后通过代码表达。输出 .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. 使用 Read 工具读取 templates/viewer.html
2. 仔细研究其确切结构、样式和模板样式（根据用户的品牌进行调整；不得暗示与 Anthropic 存在关联）
3. 将该文件作为字面意义上的起点，而不只是灵感来源
4. 默认保留可用控件，但根据用户需求调整布局、字体排版和样式（页眉、侧边栏结构、模板颜色／字体、种子控件、操作按钮）
5. 仅替换文件注释中标记的可变部分（算法、参数、参数 UI 控件）

避免以下做法：

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

请遵循以下做法：

• ✅ 原样复制模板的 HTML 结构
• ✅ 保留模板样式（根据用户的品牌进行调整；不得暗示与 Anthropic 存在关联）（Poppins／Lora 字体、浅色调、渐变背景）
• ✅ 保持侧边栏布局（Seed → Parameters → Colors? → Actions）
• ✅ 仅替换 p5.js 算法和参数控件

模板是基础。应在此基础上构建，而不是重新制作。

---

若要创作有生命力、呼吸感十足的画廊级计算艺术作品，请以算法哲学为根基。

技术要求

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

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

参数结构——遵循理念：

要建立能从算法理念中自然产生的参数，请思考：“这个系统的哪些特性可以调整？”

let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};

设计有效参数时，应关注系统需要具备哪些可调节的属性，而不是从“图案类型”的角度思考。

核心算法——表达理念：

重要：算法理念应决定要构建什么。

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

如果理念关乎有机涌现，可以考虑使用：

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

如果理念关乎数学之美，可以考虑使用：

• 几何关系与比例
• 三角函数与谐波
• 能创造出意外图案的精确计算

如果理念关乎受控混沌，可以考虑使用：

• 严格边界内的随机变化
• 分岔与相变
• 从无序中涌现的秩序

算法源自理念，而非选项菜单。

为指导实现，请让概念的本质启发富有创意且独到的选择。构建能够表达此请求特定愿景的作品。

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

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}

工艺要求

重要：要达到精湛水准，请创建具有大师级生成艺术家历经无数次迭代打磨之感的算法。仔细调整每个参数，确保每种图案的涌现都富有目的。这不是随机噪声，而是经过深厚专业打磨的受控混沌。

• 平衡：复杂而不杂乱，有序而不僵化
• 色彩和谐：精心设计的调色板，而非随机的 RGB 值
• 构图：即便存在随机性，也要保持视觉层次与流动感
• 性能：执行流畅；如果包含动画，则针对实时运行进行优化
• 可复现性：相同的种子、参数、代码、p5 版本和模拟步数应重现相同状态；浏览器／设备的栅格化结果可能有所不同

输出格式

输出：

1. 算法理念——以 Markdown 或文本形式说明生成美学
2. 单个 HTML 成品——基于 templates/viewer.html 构建的自包含交互式生成艺术（参见步骤 0 和下一节）

HTML 成品包含所有内容：p5.js（来自 CDN）、算法、参数控件和 UI——全部集中在一个文件中，设计为实现并测试后可在 claude.ai 成品或任何浏览器中运行。请从模板文件开始，而非从头编写。

---

交互式成品创作

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

为便于探索生成艺术，请创建一个单文件 HTML 成品。确保该成品设计为实现并测试后可在 claude.ai 或任何浏览器中运行，无需进行任何设置。将所有内容内嵌。

关键：固定内容与可变内容

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

固定内容（始终按所示内容原样包含）：

• 布局结构（页眉、侧边栏、主画布区域）
• 模板样式（适配用户的品牌；不要暗示与 Anthropic 有关联）（UI 颜色、字体、渐变）
• 侧边栏中的 Seed 区域：
  • Seed 显示
  • 上一个／下一个按钮
  • 随机按钮
  • 跳转到 Seed 输入框 + Go 按钮
• 侧边栏中的操作区域：
  • 重新生成按钮
  • 重置按钮

可变内容（针对每件艺术作品进行自定义）：

• 完整的 p5.js 算法（setup/draw/类）
• 参数对象（根据艺术作品的需要定义）
• 侧边栏中的参数区域：
  • 参数控件的数量
  • 参数名称
  • 滑块的最小值／最大值／步长
  • 控件类型（滑块、输入框等）
• 颜色区域（可选）：
  • 有些艺术作品需要颜色选取器
  • 有些艺术作品可能使用固定颜色
  • 有些艺术作品可能是单色的（不需要颜色控件）
  • 根据艺术作品的需要决定

**每件艺术作品都应该有独特的参数和算法！**固定部分提供一致的用户体验——其他一切都用来展现独特构想。

必需功能

1. 参数控件

• 用于数值参数的滑块（粒子数量、噪声比例、速度等）
• 用于调色板颜色的颜色选取器
• 参数变化时实时更新
• 重置按钮用于恢复默认值

2. Seed 导航

• 显示当前 Seed 编号
• “上一个”和“下一个”按钮用于切换 Seed
• “随机”按钮用于生成随机 Seed
• 用于跳转到特定 Seed 的输入框
• 按需生成 100 个变体（Seed 1-100）

3. 单文件作品结构

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything single-file
  </script>
</body>
</html>

重要：这是一个单文件作品。不使用外部文件，不使用导入（p5.js CDN 除外）。所有内容都内嵌其中。

4. 实现细节——构建侧边栏

侧边栏结构：

1. Seed（固定）——始终按所示内容原样包含：

• Seed 显示
• 上一个／下一个／随机／跳转按钮

2. 参数（可变）——为艺术作品创建控件：

<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 div。

3. 颜色（可选／可变）——如果艺术作品需要可调整的颜色，则加入此区域：

• 如果用户应该能够控制调色板，则添加颜色选取器
• 如果艺术作品使用固定颜色，则跳过此区域
• 如果艺术作品是单色的，则跳过此区域

4. 操作（固定）——始终按所示内容原样包含：

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

要求：

• Seed 控件必须正常工作（上一个／下一个／随机／跳转／显示）
• 所有参数都必须有 UI 控件
• 重新生成、重置、下载按钮必须正常工作
• 保留模板样式（适配用户的品牌；不要暗示与 Anthropic 有关联）（UI 样式，而非艺术作品的颜色）

使用作品

HTML 作品在完成实现和测试后即可使用：

1. 在 claude.ai 中：显示为交互式作品，可立即运行
2. 作为文件：保存后可在任意浏览器中打开，无需服务器
3. 分享：发送 HTML 文件——它是单文件，但依赖网络

---

变体与探索

作品默认包含 Seed 导航（上一个／下一个／随机按钮），用户无需创建多个文件即可探索不同变体。如果用户希望突出展示特定变体：

• 添加 Seed 预设（例如“变体 1：Seed 42”“变体 2：Seed 127”等按钮）
• 添加“画廊模式”，并排显示多个 Seed 的缩略图
• 所有内容都在同一个单文件作品中

这就像用同一块版画版制作一系列版画——算法保持一致，但每个 Seed 都会展现其潜力的不同面向。交互式特性让用户能够通过探索 Seed 空间找到自己喜欢的作品。

创作流程

用户请求 → 算法理念 → 实现

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

1. 解读用户意图 - 用户追求怎样的审美？
2. 创作算法理念（4-6 个段落），描述计算方法
3. 用代码实现 - 构建表达这一理念的算法
4. 设计合适的参数 - 哪些内容应该可调？
5. 构建匹配的 UI 控件 - 为这些参数提供滑块/输入框

不变项：

• 模板样式（适配用户的品牌；不要暗示与 Anthropic 有关联）（颜色、字体、布局）
• Seed 导航（始终显示）
• 独立的 HTML 产物

其他内容均可变化：

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

要获得最佳效果，请信任创造力，并让理念引导实现。

---

资源

此技能包含实用的模板和文档：

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

  • 这是基础，包含精确的结构和模板样式（适配用户的品牌；不要暗示与 Anthropic 有关联）
  • 保持不变：布局结构、侧边栏组织方式、模板颜色/字体、Seed 控件、操作按钮
  • 替换：p5.js 算法、参数定义，以及 Parameters 部分中的 UI 控件
  • 文件中详尽的注释会明确标出哪些内容应保留，哪些内容应替换

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

  • 展示如何组织参数、使用带种子的随机性，以及构建类的结构
  • 这不是算法模式菜单——应运用这些原则构建独特的算法
  • 将算法内嵌在 HTML 产物中（不要创建单独的 .js 文件）

重要提醒：

• 模板是起点，不是灵感来源
• 算法是创作独特内容的地方
• 不要照搬流场示例——应根据理念构建所需内容
• 但务必保留模板中完全一致的 UI 结构和样式（适配用户的品牌；不要暗示与 Anthropic 有关联）

适用场景

当执行概述中描述的工作流或操作时，可使用此技能。

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为环境特定验证、测试或专家审核的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停止并请求澄清。

模板状态与验证

随附的 viewer 是未完成的脚手架：流场生成、绘制、粒子行为以及参数/颜色处理器都需要实现。添加并测试 Regenerate 和 Download PNG 操作（原始模板仅提供 Reset）。CDN p5.js 和 Google Fonts 需要网络连接；如需离线输出，请打包经批准的依赖项。遵守宿主脚本限制。限制粒子数量、递归深度和动画计算量；提供暂停和减少动态效果的选项。将产物描述为完成之前，请验证控件、固定模拟步数下的种子重放、移动端布局以及导出的 PNG。不要将用户数据放入 URL 或发送到外部请求。