algorithmic-art

算法哲学是一种通过代码表达的计算美学运动。输出 .md 文件（哲学文本）、.html 文件（交互式查看器）和 .js 文件（生成式算法）。

这一过程分为两步：

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

首先，完成以下任务：

算法哲学创作

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

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

核心理解

• 接收的内容：用户提供的一些细微输入或指示，应将其作为基础加以考虑；但它不应限制创作自由。
• 创作的内容：一种算法哲学/生成式美学运动。
• 接下来发生的事：同一个版本接收该哲学，并将其表达为代码，即创建 90% 由算法生成、10% 为关键参数的 p5.js 草图。

可以考虑以下方法：

• 为一个生成艺术运动撰写宣言
• 下一阶段是编写让它成为现实的算法

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

如何生成算法哲学

命名运动（1–2 个词）："有机湍流" / "量子和谐" / "涌现式静止"

阐述哲学（4–6 段，简明但完整）：

为了捕捉算法的本质，请说明该哲学如何通过以下方面体现：

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

关键指导原则：

• 避免冗余：每个算法层面只需提及一次。除非能增加新的深度，否则避免反复讨论噪声理论、粒子动力学或数学原理。
• 反复强调工艺：该哲学必须多次强调，最终算法应当看起来耗费了无数小时开发，经过精心打磨，并出自该领域顶尖人士之手。这一框架至关重要——请反复使用诸如"精心打造的算法"、"深厚计算专业知识的成果"、"艰苦卓绝的优化"、"大师级实现"等表述。
• 留出创作空间：对算法方向要具体，但要足够简练，使下一个 Claude 能够以极高的工艺水准做出诠释性的实现选择。

该哲学必须引导下一个版本以算法方式表达思想，而非通过静态图像。美存在于过程之中，而非最终的画面。

哲学示例

"有机湍流" 哲学: 受自然法则约束的混沌，从无序中涌现的秩序。 算法表达: 由分层 Perlin 噪声驱动的流场。数千个粒子沿矢量力运动，其轨迹累积成有机的密度图。多个噪声倍频同时产生湍流区域与平静区域。颜色由速度和密度决定：快速粒子明亮燃烧，缓慢粒子渐隐为阴影。算法运行至平衡状态，这是一种经过无数次迭代精细调校的平衡，每个参数都由计算美学大师反复打磨。

"量子和声" 哲学: 呈现类波干涉图样的离散实体。 算法表达: 粒子初始化在网格上，每个粒子携带一个随正弦波演化的相位值。当粒子相互靠近时，它们的相位发生干涉: 相长干涉形成明亮节点，相消干涉形成空洞。简谐运动生成复杂的涌现曼陀罗图形。这是细致频率校准的结果，每个比值都经过仔细选择，以产生共振之美。

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

"场动力学" 哲学: 通过对物质的作用而显现的无形力量。 算法表达: 由数学函数或噪声构造的矢量场。粒子在边缘诞生，沿场线流动，当抵达平衡态或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅呈现轨迹，即无形力量的幽灵般痕迹。这是一场通过力的平衡精心编排的计算之舞。

"随机结晶" 哲学: 随机过程结晶为有序结构。 算法表达: 随机圆堆积或 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 字体、浅色配色、渐变背景）
• ✅ 保持侧边栏布局（种子 → 参数 → 配色? → 操作）
• ✅ 仅替换 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 值
• 构图：即便是随机，也要保持视觉层次与流动感
• 性能：执行流畅，若为动画则针对实时运行优化
• 可复现性：相同种子始终产生相同输出

输出格式

输出：

1. 算法哲学：以 Markdown 或文本形式阐述生成式美学
2. 单个 HTML 产物：基于 templates/viewer.html（见第 0 步及下一节）构建的、自包含的交互式生成艺术

HTML 产物包含全部内容：来自 CDN 的 p5.js、算法、参数控件和 UI，全部集成在一个文件中，可在 claude.ai 产物或任何浏览器中直接运行。请从模板文件开始，而非从零开始。

---

交互式产物创建

提醒：templates/viewer.html 应已在第 0 步中读取。以该文件作为起点。

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

关键：固定部分与可变部分

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

固定部分（必须严格按所示包含）：

• 布局结构（页眉、侧边栏、主画布区域）
• Anthropic 品牌元素（UI 颜色、字体、渐变）
• 侧边栏中的种子部分：
  • 种子显示
  • 上一个/下一个按钮
  • 随机按钮
  • 跳转到种子的输入框 + 「Go」按钮
• 侧边栏中的操作部分：
  • 重新生成按钮
  • 重置按钮

可变部分（针对每件作品定制）：

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

每件作品都应具有独特的参数和算法！ 固定部分保证一致的用户体验，其余部分则表达作品的独特构想。

必需功能

1. 参数控件

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

2. 种子导航

• 显示当前种子编号
• 提供"上一个"和"下一个"按钮，用于切换种子
• 提供"随机"按钮，用于生成随机种子
• 提供输入框，用于跳转到指定种子
• 在请求时生成 100 个变体（种子 1-100）

3. 单一 Artifact 结构

<!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 self-contained
  </script>
</body>
</html>

关键要求：这是单一 Artifact。不得使用外部文件，不得导入任何内容（p5.js CDN 除外）。所有内容均需内联。

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

侧边栏结构如下：

1. 种子（固定）：必须严格按所示内容包含：

• 种子显示
• 上一个/下一个/随机/跳转按钮

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>

根据参数数量添加对应数量的控件分组 div。

3. 颜色（可选/可变）：若艺术作品需要可调颜色，则包含此部分：

• 若用户应能控制调色板，则添加取色器
• 若艺术作品使用固定颜色，则跳过此部分
• 若艺术作品为单色，则跳过此部分

4. 操作（固定）：必须严格按所示内容包含：

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

要求：

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

使用 Artifact

该 HTML Artifact 可立即使用：

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

---

变体与探索

该 Artifact 默认包含种子导航（上一个/下一个/随机按钮），用户无需生成多个文件即可探索变体。如果用户希望突出特定变体，可以：

• 添加种子预设（如"变体 1：种子 42"、"变体 2：种子 127"等按钮）
• 添加"画廊模式"，并排显示多个种子的缩略图
• 以上均在同一个单一 Artifact 内完成

这类似于用同一块版画印制一系列作品：算法保持一致，但每个种子都会呈现其潜力的不同侧面。通过交互式探索，用户可以自行发现喜爱的变体。

---

创作流程

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

每个请求都是独特的。流程包括：

1. 理解用户意图：探究所追求的审美风格是什么？
2. 提出算法理念（4-6 段）：描述计算方法
3. 以代码实现：构建体现该理念的算法
4. 设计合适的参数：哪些内容应可调节？
5. 构建匹配的 UI 控件：为这些参数提供滑块或输入框

恒定部分：

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

其余均为可变部分：

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

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

---

资源

本 skill 包含以下实用的模板和文档:

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

  • 这是基础文件,包含标准结构和 Anthropic 品牌元素
  • 保持不变: 布局结构、侧边栏组织方式、Anthropic 配色和字体、种子控件、操作按钮
  • 替换: 参数部分中的 p5.js 算法、参数定义和 UI 控件
  • 文件中的大量注释明确标出了哪些需要保留、哪些需要替换

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

  • 展示了如何组织参数、使用带种子的随机数、组织类结构
  • 这不是一个模式菜单,请运用这些原则构建独特的算法
  • 将算法内联嵌入 HTML 产物中(不要创建单独的 .js 文件)

关键提醒:

• 模板是起点,不是灵感来源
• 算法部分才是创造独特内容的地方
• 不要照搬流场示例,而要构建符合设计理念的作品
• 但要保留模板中确切的 UI 结构和 Anthropic 品牌元素