可调参数的生成艺术

上游原文#

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

这一过程分两步：

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

首先，完成下面这项任务：

算法哲学创作#

开始时，请创建一套算法哲学（而不是静态图像或模板），它将通过以下方式被诠释：

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

关键理解#

• 你收到的输入：用户给出的一些细微输入或指令需要纳入考虑，但只作为基础；它们不应限制创作自由。
• 你所创造的内容：一套算法哲学，也就是一种生成美学运动。
• 接下来会发生什么：同一个版本会接收这套哲学，并用代码把它表达出来——创建 p5.js 草图，其中 90% 是算法生成，10% 是必要的参数。

请考虑这种做法：

• 为一个生成艺术运动撰写宣言
• 下一阶段则是编写让这份宣言活起来的算法

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

如何生成一套算法哲学#

为这个运动命名（1–2 个词）：”有机湍流“（Organic Turbulence）／”量子谐波“（Quantum Harmonics）／”涌现之静“（Emergent Stillness）

阐述这套哲学（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 字体、浅色配色、渐变背景）
• ✅ 维持侧边栏布局（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?)
};

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

核心算法——表达哲学：

关键：应当由算法哲学决定要构建什么。

要用代码表达这套哲学，不要想“我该用哪种图案？”，而要想“如何用代码表达这套哲学？” 如果这套哲学讲的是有机涌现，可以考虑使用：

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

如果这套哲学讲的是数学之美，可以考虑使用：

• 几何关系与比例
• 三角函数与谐波
• 精确计算所产生的出人意料的花样

如果这套哲学讲的是受控的混沌，可以考虑使用：

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

算法源自哲学，而不是来自一份选项菜单。

为了指导实现，让概念内核去启发富有创意且原创的选择。构建出能表达这一特定请求之构想的东西。

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

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

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

工艺要求#

关键：要达到精通的水准，就要创建出仿佛由一位生成艺术大师经过无数次迭代才打磨出来的算法。仔细调校每一个参数。确保每一种图案都是有目的地涌现出来的。这不是随机噪声——这是经由深厚专业功底精炼而成的受控混沌。

• 平衡：复杂但不显视觉噪杂，有序但不失僵硬
• 色彩和谐：经过深思熟虑的调色板，而非随意的 RGB 值
• 构图：即使在随机之中，也要保持视觉层次与流动感
• 性能：执行流畅，若为动画则针对实时渲染进行优化
• 可复现性：相同的 seed 始终产生完全相同的输出

输出格式#

输出：

1. 算法哲学——以 markdown 或文本形式阐述生成美学
2. 单个 HTML 制品——基于 templates/viewer.html 构建的自包含交互式生成艺术（参见 STEP 0 及下一节）

该 HTML 制品包含一切：p5.js（来自 CDN）、算法、参数控件和 UI——全都在一个文件中，可在 claude.ai artifacts 或任何浏览器中立即运行。要从模板文件开始，而不是从零开始。

---

创建交互式制品#

提醒：templates/viewer.html 应当已经被读取过（参见 STEP 0）。以该文件为起点。

为了让生成艺术可供探索，请创建一个单一、自包含的 HTML 制品。确保该制品在 claude.ai 或任何浏览器中都能立即运行——无需任何设置。把所有内容都内联嵌入。

关键：哪些是固定的，哪些是可变的#

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

固定（始终按原样包含）：

• 布局结构（页头、侧边栏、主画布区域）
• Anthropic 品牌（UI 颜色、字体、渐变）
• 侧边栏中的 Seed 区：
  • Seed 显示
  • Previous/Next 按钮
  • Random 按钮
  • Jump to seed 输入框 + Go 按钮
• 侧边栏中的 Actions 区：
  • Regenerate 按钮
  • Reset 按钮

可变（针对每件作品自定义）：

• 整个 p5.js 算法（setup/draw/classes）
• parameters 对象（定义这件作品需要什么）
• 侧边栏中的 Parameters 区：
  • 参数控件的数量
  • 参数名称
  • 滑块的 min/max/step 值
  • 控件类型（滑块、输入框等）
• Colors 区（可选）：
  • 有些作品需要取色器
  • 有些作品可能使用固定颜色
  • 有些作品可能是单色的（无需颜色控件）
  • 根据作品需求决定

每件作品都应有独一无二的参数和算法！ 固定部分提供一致的 UX——其余一切则表达独特的构想。

必需功能#

1. 参数控件

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

2. Seed 导航

• 显示当前 seed 编号
• “Previous”和“Next”按钮用于循环切换 seed
• “Random”按钮用于随机 seed
• 输入框用于跳转到指定 seed
• 在需要时生成 100 个变体（seeds 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. Seed（固定）——始终按原样包含：

• Seed 显示
• Prev/Next/Random/Jump 按钮

2. Parameters（可变）——为作品创建控件：

<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. Colors（可选/可变）——如果作品需要可调节的颜色，则包含：

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

4. Actions（固定）——始终按原样包含：

• Regenerate 按钮
• Reset 按钮
• Download PNG 按钮

要求：

• Seed 控件必须可用（prev/next/random/jump/display）
• 所有参数都必须有 UI 控件
• Regenerate、Reset、Download 按钮必须可用
• 保持 Anthropic 品牌（UI 样式，而非作品颜色）

使用该制品#

该 HTML 制品可立即使用：

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

---

变体与探索#

该制品默认包含 seed 导航（prev/next/random 按钮），让用户无需创建多个文件即可探索各个变体。如果用户希望突出特定变体：

• 加入 seed 预设（“Variation 1: Seed 42”、“Variation 2: Seed 127”等按钮）
• 添加一个“Gallery Mode”，并排展示多个 seed 的缩略图
• 全部内容都在同一个制品之内

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

---

创作流程#

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

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

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

常量：

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

其余一切都是可变的：

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

为获得最佳结果，请相信创造力，让哲学引导实现。

---

资源#

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

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

  • 这是基础——包含确切的结构与 Anthropic 品牌
  • 保持不变：布局结构、侧边栏组织、Anthropic 颜色/字体、seed 控件、操作按钮
  • 替换：p5.js 算法、参数定义，以及 Parameters 区中的 UI 控件
  • 文件中的详尽注释标明了哪些要保留、哪些要替换

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

  • 展示如何组织参数、使用带种子的随机性、组织类结构
  • 不是一套模式菜单——用这些原则来构建独特的算法
  • 将算法内联嵌入 HTML 制品中（不要创建单独的 .js 文件）

关键提醒：

• 模板是起点，不是灵感来源
• 算法才是创造独特之处的地方
• 不要照抄流场示例——构建哲学所要求的东西
• 但务必保留模板中确切的 UI 结构与 Anthropic 品牌