algorithmic-art

算法哲学是通过代码表达的计算性审美流派。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。

这分两步完成：

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

首先，执行以下任务：

算法哲学的创建

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

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

关键理解

• 接收的内容：用户提供的一些微妙输入或指示，应作为基础考虑，但不限制创作自由。
• 创建的内容：一种算法哲学/生成式审美流派。
• 下一步：然后，同一个智能体将接收该哲学，并通过代码进行表达——创作出90%为算法生成、10%为关键参数的 p5.js 草图。

考虑这种方法：

• 为一场生成艺术运动撰写宣言
• 下一阶段则是编写使其生动起来的算法

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

如何生成算法哲学

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

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

要捕捉算法的精髓，需表达哲学如何通过以下方面体现：

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

关键指南：

• 避免冗余：每个算法方面只提及一次。除非增加新的深度，否则避免重复关于噪声理论、粒子动力学或数学原理的观点。
• 反复强调工艺性：哲学必须多次强调，最终算法应看起来像是花费了无数小时开发，经过精心打磨，出自其领域顶尖人物之手。这一框架至关重要——重复使用诸如“精心制作的算法”、“深厚计算专业知识的产物”、“一丝不苟的优化”、“大师级实现”等短语。
• 留出创作空间：在算法方向上保持具体，但同时要足够简洁，让下一个智能体有空间在同样高超的工艺水平上做出诠释性的实现选择。

该哲学必须指导下一个智能体通过算法而非静态图像来表达思想。美存在于过程之中，而非最终画面。

哲学示例

“有机湍流”
哲学：受自然法则约束的混沌，从无序中产生的秩序。
算法表达：由多层柏林噪声驱动的流场。数千个粒子跟随向量力，它们的轨迹累积成有机的密度图。多倍频程的噪声创造了湍流区域和宁静区域。颜色源于速度和密度——快速运动的粒子燃烧明亮，缓慢的粒子褪入阴影。算法运行直至达到平衡——一个经过精心调校的平衡，每个参数都通过无数次迭代由一位计算美学大师反复优化。

“量子谐波”
哲学：表现出波状干涉模式的离散实体。
算法表达：粒子在网格上初始化，每个粒子携带一个通过正弦波演化的相位值。当粒子靠近时，它们的相位会相互干涉——相长干涉产生亮节点，相消干涉产生空洞。简谐运动生成复杂的涌现曼荼罗。这是经过艰苦频率校准的成果，每个比例都经过精心挑选以产生谐振之美。

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

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

“随机结晶”
哲学：随机过程结晶成有序结构。
算法表达：随机圆填充或沃罗诺伊图。从随机点开始，让它们通过松弛算法演化。细胞相互推开直至平衡。颜色基于细胞大小、邻居数量或到中心的距离。涌现出的有机镶嵌感觉既随机又必然。每个种子都产生独特的结晶之美——大师级生成算法的标志。

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

基本原则

• 算法哲学：创建一个将通过代码表达的计算世界观
• 过程重于产物：始终强调美源于算法的执行过程——每一次运行都是独一无二的
• 参数化表达：思想通过数学关系、力、行为来传达——而非静态构图
• 艺术自由：下一个智能体将通过算法诠释该哲学——提供创造性的实施空间
• 纯粹的生成艺术：这是创造鲜活的算法，而非带有随机性的静态图像
• 专家级工艺：反复强调最终算法必须感觉经过精心雕琢、通过无数次迭代精炼、是其计算美学领域顶尖人物深厚专业知识的产物

算法哲学应为 4-6 段长。用诗意的计算哲学填充它，汇聚核心愿景。避免重复相同的观点。将此算法哲学输出为 .md 文件。

推断概念种子

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

基本原则：
概念是嵌入算法本身中的微妙、小众的指涉——不总是直白的，总是精妙的。熟悉该主题的人应能直觉地感受到它，而其他人仅仅体验到一件大师级的生成作品。算法哲学提供了计算语言。推断出的概念提供了灵魂——无声的概念性 DNA 隐形地编织在参数、行为和涌现模式中。

这一点非常重要：指涉必须经过提炼，以增强作品的深度，而不显露自身。想象一下爵士音乐家通过算法和声引用另一首歌曲——只有懂行的人才能捕捉到，但每个人都能欣赏生成之美。

P5.JS 实施

在确立了哲学和概念框架之后，通过代码进行表达。在继续之前，先花点时间整理思绪。仅使用上面创建的算法哲学和下面的指导。

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

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

1. 阅读 templates/viewer.html 文件（使用读取工具）
2. 研究 确切的结构、样式和 Anthropic 品牌标识
3. 将该文件作为实际出发点 – 而不仅仅是灵感
4. 保持所有固定部分与示例完全相同（标题、侧边栏结构、Anthropic 颜色/字体、种子控件、操作按钮）
5. 仅替换文件中注释标记的可变部分（算法、参数、参数的 UI 控件）

避免：

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

遵循这些实践：

• ✅ 复制模板的确切 HTML 结构
• ✅ 保留 Anthropic 品牌标识（Poppins/Lora 字体、浅色、渐变背景）
• ✅ 保持侧边栏布局（种子 → 参数 → 颜色？ → 操作）
• ✅ 仅替换 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 值
• 构图：即使在随机性中，也要保持视觉层次和流动
• 性能：执行流畅，如果是动画则需针对实时进行优化
• 可重现性：相同的种子必须始终产生相同的输出

输出格式

输出：

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 颜色、字体、渐变）
• 侧边栏中的种子部分：
  • 种子显示
  • 上一个/下一个按钮
  • 随机按钮
  • 跳转到种子输入 + 前往按钮
• 侧边栏中的操作部分：
  • 重新生成按钮
  • 重置按钮

可变部分（为每个艺术作品定制）：

• 整个 p5.js 算法（setup/draw/类）
• 参数对象（定义艺术需要什么）
• 侧边栏中的参数部分：
  • 参数控件的数量
  • 参数名称
  • 滑块的最小值/最大值/步进值
  • 控件类型（滑块、输入等）
• 颜色部分（可选）：
  • 有些艺术需要颜色选择器
  • 有些艺术可能使用固定颜色
  • 有些艺术可能是单色的（不需要颜色控件）
  • 根据艺术的需要来决定

每件艺术作品都应有独特的参数和算法！固定部分提供一致的用户体验——其他所有内容都表达独特的愿景。

必需功能

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 控件
• 重新生成、重置、下载按钮必须有效
• 保留 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 控件
  • 文件中的详细注释标明了哪些要保留、哪些要替换
• templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。
  • 展示如何组织参数、使用种子随机性、结构化类
  • 不是模式菜单——使用这些原则来构建独特的算法
  • 将算法内联嵌入到 HTML 作品中（不要创建单独的 .js 文件）

关键提醒：

• 模板是出发点，而非灵感来源
• 算法是发挥创造力的地方，构建独特的东西
• 不要复制流场示例——构建哲学所需要的东西
• 但务必保留模板中确切的 UI 结构和 Anthropic 品牌标识