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. 阅读 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,  // 始终包含种子以实现可重现性
  // 颜色
  // 添加控制YOUR算法的参数：
  // - 数量（多少？）
  // - 尺度（多大？多快？）
  // - 概率（多可能？）
  // - 比率（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（行为何时改变？）
};

设计有效参数，专注于系统需要可调优的属性，而不是以”模式类型”的方式思考。

核心算法——表达哲学：

关键：算法哲学应该规定要构建什么。

要通过代码表达哲学，避免思考”我应该使用哪种模式？”而应该思考”如何通过代码表达这种哲学？”

如果哲学是关于有机涌现，考虑使用：

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

如果哲学是关于数学美感，考虑使用：

• 几何关系和比率
• 三角函数和和谐
• 产生意外模式的精确计算

算法从哲学流出，而不是从选项菜单。

**为了指导实现，让概念本质为创造性和原始选择提供信息。构建表达此特定请求愿景的内容。

Canvas设置：标准p5.js结构：

function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系统
}

function draw() {
  // 你的生成算法
  // 可以是静态（无循环）或动画
}

工匠精神要求

关键：要达到精通，创建感觉像通过大师级生成艺术家无数次迭代开发的算法。仔细调整每个参数。确保每个模式都有目的地涌现。这不是随机噪点——这是经过提炼的受控混沌。

• 平衡：复杂度而无视觉噪点，有序而无僵化
• 颜色和谐：深思熟虑的调色板，而不是随机RGB值
• 构图：即使在随机性中，保持视觉层次和流动
• 性能：流畅执行，如果是动画则针对实时优化
• 可重现性：相同种子始终产生相同输出

输出格式

输出：

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

可变（为每个作品自定义）：

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

**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。

必需功能

1. 参数控件

• 数值参数的滑块（粒子计数、噪点缩放、速度等）
• 调色板的颜色选择器
• 参数更改时的实时更新
• 重置按钮以恢复默认值

2. 种子导航

• 显示当前种子号
• “上一个”和”下一个”按钮循环遍历种子
• 随机按钮用于随机种子
• 跳转到特定种子输入+前往按钮
• 请求时生成100个变体（种子1-100）

3. 单个工件结构

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <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">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </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. 颜色（可选/可变）——如果艺术需要可调色板：

• 如果用户应该控制调色板，添加颜色选择器
• 如果艺术使用固定颜色，跳过此部分
• 如果艺术是单色的（不需要颜色控件），跳过此部分

根据艺术的需求决定。

**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。

必需功能

1. 参数控件

• 数值参数的滑块（粒子计数、噪点缩放、速度等）
• 调色板的颜色选择器
• 参数更改时的实时更新
• 重置按钮以恢复默认值

2. 种子导航

• 显示当前种子号
• “上一个”和”下一个”按钮循环遍历种子
• 随机按钮用于随机种子
• 跳转到特定种子输入+前往按钮
• 请求时生成100个变体（种子1-100）

3. 单个工件结构

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <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">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </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. 颜色（可选/可变）——如果艺术需要可调色板：

• 如果用户应该控制调色板，添加颜色选择器
• 如果艺术使用固定颜色，跳过此部分
• 如果艺术是单色的（不需要颜色控件），跳过此部分

根据艺术的需求决定。

**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。

必需功能

1. 参数控件

• 数值参数的滑块（粒子计数、噪点缩放、速度等）
• 调色板的颜色选择器
• 参数更改时的实时更新
• 重置按钮以恢复默认值

2. 种子导航

• 显示当前种子号
• “上一个”和”下一个”按钮循环遍历种子
• 随机按钮用于随机种子
• 跳转到特定种子输入+前往按钮
• 请求时生成100个变体（种子1-100）

3. 单个工件结构

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <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">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </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. 颜色（可选/可变）——如果艺术需要可调色板：

• 如果用户应该控制调色板，添加颜色选择器
• 如果艺术使用固定颜色，跳过此部分
• 如果艺术是单色的（不需要颜色控件），跳过此部分

根据艺术的需求决定。

**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。

要求**

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

使用工件

HTML工件立即工作：

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

变体与探索

工件默认包含种子导航（上一个/下一个/随机按钮），允许用户通过探索种子空间而不创建多个文件。如果用户想要突出显示的特定变体：

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

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

创作过程

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

每个请求都是唯一的。该过程涉及：

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

• Anthropic品牌（颜色、字体、布局）
• 种子导航（始终存在）
• 自包含HTML工件
• 其他所有内容都是可变的：
  • 算法本身
  • 参数
  • UI控件
  • 视觉结果

要获得最佳结果，信任创造力并让哲学指导实现。

资源

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

• templates/viewer.html：所有HTML工件的必需起点。
  • 这是基础——包含确切的结构和Anthropic品牌
  • 保持不变：布局结构、侧边栏组织、Anthropic颜色/字体、种子控件、操作按钮
  • 替换：p5.js算法、参数定义和参数部分UI控件
  • 文件中的大量注释确切标记要保留与替换的内容
• templates/generator_template.js：p5.js最佳实践和代码结构原则的参考。
  • 展示如何组织参数、使用种子随机性、结构类
  • 不是模式菜单——使用这些原则构建独特算法
  • 在HTML工件中内联嵌入算法（不要创建单独的.js文件）
• 关键提醒：
  • 模板是起点，不是灵感
  • 算法是创建独特内容的地方
  • 不要复制流场示例——构建哲学要求的内容
  • 但要保持确切的UI结构和Anthropic品牌从模板