算法艺术

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

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

首先，执行以下任务：

算法哲学创建

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

• 计算过程、涌现行为、数学之美

• 种子随机性、噪声场、有机系统

• 粒子、流体、场、力

• 参数化变化与受控混沌

核心理解

• 接收内容：用户提供的一些微妙输入或指令，将其作为基础，但不应限制创作自由。

• 创建内容：一种算法哲学/生成式美学运动。

• 后续步骤：同一版本的模型接收该哲学并将其【用代码表达】——创建 p5.js 草图，其中 90% 为算法生成，10% 为核心参数。

采用此方法：

• 为一个生成艺术运动撰写宣言。

• 下一阶段将编写将其赋予生命的算法。

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

如何生成算法哲学

为运动命名（1-2 个词）：例如 "Organic Turbulence"（有机湍流）/ "Quantum Harmonics"（量子谐波）/ "Emergent Stillness"（涌现之静）。

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

为了捕捉【算法精髓】，请表达该哲学如何通过以下方式体现：

• 计算过程与数学关系？

• 噪声函数与随机模式？

• 粒子行为与场动力学？

• 时间演化与系统状态？

• 参数化变化与涌现复杂度？

关键指南：

• 避免冗余：每个算法维度仅提及一次。除非能增加深度，否则避免重复噪声理论、粒子动力学或数学原理。

• 反复强调匠心：哲学必须多次强调，最终算法应呈现出经过无数小时开发、精心打磨且出自顶尖专家的水准。这种框架至关重要——重复使用如“精心打造的算法”、“深度计算专业知识的产物”、“艰苦的优化”、“大师级实现”等词汇。

• 留出创作空间：在算法方向上要具体，但要足够简洁，以便后续模型在实现时能以极高水准进行诠释性选择。

该哲学必须引导后续版本以【算法方式】而非静态图像来表达想法。美存在于过程之中，而非最终的帧。

哲学示例

"Organic Turbulence"（有机湍流）
哲学：受自然法则约束的混沌，从无序中涌现的秩序。
算法表达：由分层 Perlin 噪声驱动的流场。数千个粒子遵循向量力运动，其轨迹累积成有机的密度图。多重噪声倍频创建出湍流区域与平静地带。颜色由速度和密度决定——高速粒子亮起，低速粒子没入阴影。算法运行至平衡状态——这是一个经过精心调校的平衡点，其中...
每一个参数都经过计算美学大师的无数次迭代精炼。

“量子谐波” (Quantum Harmonics)
哲学：离散实体呈现出波状干涉模式。
算法表达：粒子在网格上初始化，每个粒子携带一个随正弦波演变的相位值。当粒子靠近时，其相位发生干涉——相长干涉产生亮节点，相消干涉产生空隙。简单的谐波运动生成复杂的涌现曼陀罗。这是艰苦的频率校准结果，每一个比例都经过精心挑选，以产生共鸣之美。

“递归私语” (Recursive Whispers)
哲学：跨尺度的自相似性，有限空间内的无限深度。
算法表达：递归细分的分支结构。每个分支略有随机，但受黄金比例约束。L-系统或递归细分生成既具数学感又具有机感的树状形态。细微的噪声扰动打破了完美的对称。线宽随递归层级增加而递减。每一个分支角度都是深度数学探索的产物。

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

“随机结晶” (Stochastic Crystallization)
哲学：随机过程结晶为有序结构。
算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，通过松弛算法使其演化。单元格相互推挤直到达到平衡。颜色基于单元格大小、邻居数量或与中心的距离。涌现出的有机铺贴既显得随机又不可避免。每一个种子都产生独特的结晶之美——这是大师级生成算法的标志。

*以上为精简示例。实际的算法哲学应包含 4-6 个实质性段落。*

核心原则

• 算法哲学：构建一个通过代码表达的计算世界观。

• 过程高于结果：始终强调美感源自算法的执行——每一次运行都是唯一的。

• 参数化表达：通过数学关系、力、行为来传递想法，而非静态构图。

• 艺术自由：由下一个 Claude 以算法方式解读该哲学——提供创意实现的空间。

• 纯粹生成艺术：旨在创建“活的算法”，而非带有随机性的静态图像。

• 专家级工艺：反复强调最终算法必须具有精心打造的感觉，经过无数次迭代精炼，是计算美学顶尖专家的深度专业产物。

算法哲学应包含 4-6 个段落。 请用富有诗意的计算哲学将其填满，以统一预期的愿景。避免重复相同观点。将此算法哲学输出为 .md 文件。

---

推演概念种子

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

核心原则：
该概念...
概念是嵌入在算法本身的微妙且小众的引用——它并非总是直白，而始终是精巧的。熟悉该主题的人应能直觉地感受到它，而其他人则仅仅是体验到一场大师级的生成式构图。算法哲学提供了计算语言，而推导出的概念则提供了灵魂——它是隐形地织入参数、行为和涌现模式中的静默概念 DNA。

这至关重要：引用必须足够精炼，从而在不刻意宣告自己的情况下增强作品的深度。像爵士乐手通过算法和谐地引用另一首歌那样去思考——只有懂的人才能捕捉到，但每个人都能欣赏这种生成之美。

---

P5.JS 实现

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

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

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

1. 使用 Read 工具阅读 templates/viewer.html
2. 研究其精确的结构、样式和 Anthropic 品牌标识
3. 将该文件作为绝对的起点——而不仅仅是灵感来源
4. 保持所有固定部分与所示完全一致（页眉、侧边栏结构、Anthropic 颜色/字体、种子控制、操作按钮）
5. 仅替换文件中注释标记的可变部分（算法、参数、参数的 UI 控制项）

避免：

• ❌ 从零开始创建 HTML

• ❌ 虚构自定义样式或配色方案

• ❌ 使用系统字体或深色主题

• ❌ 更改侧边栏结构

遵循以下实践：

• ✅ 复制模板的精确 HTML 结构

• ✅ 保留 Anthropic 品牌标识（Poppins/Lora 字体，浅色调，渐变背景）

• ✅ 维持侧边栏布局（种子 $\rightarrow$ 参数 $\rightarrow$ 颜色？ $\rightarrow$ 操作）

• ✅ 仅替换 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 值

• 构图：即使在随机中，也要保持视觉层级和流动感

• 性能：执行流畅，若是动画则需针对实时渲染进行优化

• 可复现性：相同的种子（Seed）必须始终产生相同的输出

输出格式

输出内容：
1. 算法哲学 —— 以 Markdown 或文本形式解释生成美学
2. 单个 HTML 产出物 —— 基于 templates/viewer.html 构建的自包含交互式生成艺术作品（见步骤 0 及下一节）

该 HTML 产出物包含所有内容：p5.js（来自 CDN）、算法、参数控制和 UI —— 全部集成在一个文件中，可立即在 claude.ai artifacts 或任何浏览器中运行。请从模板文件开始，而非从零开始。

---

交互式产出物创建

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

为了方便探索生成艺术，请创建一个单一的、自包含的 HTML 产出物。确保该产出物在 claude.ai 或任何浏览器中能立即运行，无需任何配置。所有内容均内联嵌入。

关键点：固定部分 vs 可变部分

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

固定部分（必须完全照搬）：

• 布局结构（页眉、侧边栏、主画布区域）

• Anthropic 品牌视觉（UI 颜色、字体、渐变）

• 侧边栏中的种子（Seed）部分：

• 侧边栏中的操作（Actions）部分：

可变部分（根据每件作品定制）：

• 完整的 p5.js 算法（setup/draw/类）

• 参数对象（定义艺术作品所需参数）

• 侧边栏中的参数（Parameters）部分：

• 颜色部分（可选）：

每件作品都应拥有独特的参数和算法！ 固定部分提供一致的 UX 体验，其余一切均可定制。
展现独特的视觉愿景。

核心功能要求

1. 参数控制

• 数值参数滑块（如粒子数量、噪声缩放、速度等）

• 调色板颜色选择器

• 参数更改时实时更新

• 恢复默认设置的重置按钮

2. 种子导航 (Seed Navigation)

• 显示当前种子编号

• “上一个”和“下一个”按钮用于循环切换种子

• “随机”按钮生成随机种子

• 输入框用于跳转至特定种子

• 根据请求生成 100 个变体（种子 1-100）

3. 单一 Artifact 结构

<!DOCTYPE html>
<html lang="zh">
<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>

关键点：这是一个单一的 Artifact。不允许外部文件，不允许除 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>

3. 颜色控制 (可选/可变) - 若艺术效果需要可调颜色则包含：

• 若用户需控制调色板，请添加颜色选择器

• 若使用固定颜色或单色，可跳过此部分

4. 操作按钮 (固定) - 必须严格包含以下项：

• 重新生成按钮

• 重置按钮

• 下载 PNG 按钮

具体要求：

• 种子控制必须可用（上一个/下一个/随机/跳转/显示）

• 所有参数必须有 UI 控件

• 重新生成、重置、下载按钮必须正常工作

• 保持 Anthropic 品牌风格（UI 样式，而非艺术颜色）

Artifact 使用指南

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

---

变体与探索

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

• 包含种子预设（如“变体 1：种子 42”、“变体 2：种子 127”等按钮）

• 添加“画廊模式”，并排显示多个种子的缩略图

• 所有功能均在同一个单一 Artifact 中实现

这就像使用同一块版画印制一系列作品——算法是一致的，但每个种子都揭示了其潜能的不同方面。交互特性意味着用户可以通过探索种子空间来发现自己最喜欢的版本。

---

创作流程

用户需求 $\rightarrow$ 算法哲学 $\rightarrow$ 具体实现

每个请求都是唯一的。流程包括：

1. 解读用户意图 - 什么样的美学...
2. 创建算法哲学（4-6 段），描述其计算方法
3. 用代码实现 —— 构建体现该哲学的算法
4. 设计合适的参数 —— 哪些应该是可调的？
5. 构建匹配的 UI 控制项 —— 为这些参数提供滑块/输入框

固定项：

• Anthropic 品牌视觉（颜色、字体、布局）

• 种子导航（始终存在）

• 独立的 HTML artifact

可变项：

• 算法本身

• 参数

• UI 控制项

• 视觉呈现结果

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

---

资源

本技能包含有用的模板和文档：

• templates/viewer.html：所有 HTML artifact 的必须起点。

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

关键提醒：

• 模板是起点，而非灵感来源。

• 算法才是创造独特之处的地方。

• 不要照抄流场（flow field）示例 —— 请根据哲学需求进行构建。

• 但必须保留模板中精确的 UI 结构和 Anthropic 品牌视觉。