creating-algorithmic-art

---

算法哲学是以代码呈现的计算美学运动。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。

这分为两个步骤：

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

首先，执行以下任务：

算法哲学创作

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

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

关键认知

• 收到的内容：用户提供的一些细微输入或指示，需予以考虑，但仅将其作为基础；不应限制创作自由。
• 创作的内容：一种算法哲学／生成式美学运动。
• 接下来发生的事：下一位 Agent 会收到这套哲学，并将其通过代码表达出来——创作以 90% 算法生成、10% 必要参数构成的 p5.js 草图。

可采用以下思路：

• 为生成艺术运动撰写宣言
• 下一阶段将编写让其焕发生命的算法

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

如何创作算法哲学

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

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

为体现算法的本质，阐述这种哲学如何通过以下方面呈现：

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

关键指南：

• 避免重复：每个算法层面只提及一次。除非能带来新的深度，否则避免重复谈论噪声理论、粒子动力学或数学原理。
• 反复强调精湛技艺：哲学必须多次强调，最终算法应仿佛历经无数小时开发、经过悉心打磨，并出自领域顶尖高手之手。这种定位至关重要——反复使用类似“精心打造的算法”“深厚计算专业造诣的结晶”“反复精细优化”“大师级实现”等表述。
• 留出创作空间：明确算法方向，但表达应足够简洁，为下一位 Agent 留出空间，让其以极高的工艺水准作出诠释性实现选择。

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

哲学示例

“有机湍流” 哲学：受自然法则约束的混沌，从无序中涌现秩序。 算法表达：由多层 Perlin 噪声驱动的流场。数千个粒子沿着矢量力运动，轨迹不断累积，形成有机的密度图。多个噪声倍频创造出湍流区域与平静地带。颜色由速度和密度显现——快速粒子灼烧出明亮色彩，缓慢粒子则隐入阴影。算法持续运行，直至达到平衡——每个参数都经过计算美学领域大师无数次迭代的精心调整，最终实现微妙而精准的平衡。

“量子谐波” 哲学：离散实体呈现出波状干涉图案。 算法表达：在网格上初始化粒子，每个粒子都携带一个随正弦波演变的相位。当粒子彼此接近时，它们的相位会发生干涉——相长干涉形成明亮节点，相消干涉则创造空洞。简单的简谐运动生成复杂而涌现的曼荼罗。每一个频率比都经过精心挑选，最终呈现出共振之美；这一切源于对频率进行的细致校准。

“递归低语” 哲学：跨越尺度的自相似性，以及有限空间中的无限深度。 算法表达：递归细分的分支结构。每条分支都略带随机性，但受黄金比例约束。L-system 或递归细分生成既具数学感又富有有机气息的树状形态。细微的噪声扰动打破完美对称。线条粗细随着每一层递归逐渐减小。每个分支角度，都是深入数学探索的结晶。

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

“随机结晶” 哲学：随机过程结晶为有序结构。 算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演变。单元彼此推离，直至达到平衡。颜色取决于单元大小、邻居数量或到中心的距离。由此涌现的有机镶嵌既像随机生成，又仿佛命中注定。每个随机种子都会生成独一无二的晶体之美——这正是大师级生成算法的印记。

以上是精简示例。实际的算法哲学应包含 4–6 个内容充实的段落。

核心原则

• 算法哲学：创造一种通过代码表达的计算世界观
• 过程重于产品：始终强调美感源自算法的运行——每次运行都独一无二
• 参数化表达：通过数学关系、力和行为传达理念，而非静态构图
• 艺术自由：接下来由 Agent 以算法方式诠释这一哲学——为创意实现留出空间
• 纯粹生成艺术：这里要创作的是会持续演化的算法，而不是带有随机性的静态图像
• 精湛技艺：反复强调，最终算法必须让人感受到精雕细琢、经无数次迭代打磨，并出自计算美学领域绝对顶尖专家的深厚造诣

算法哲学应包含 4–6 个段落。 以富有诗意的计算哲学充实内容，将预期愿景融为一体。避免重复相同观点。将这一算法哲学输出为一个 .md 文件。

---

推导概念种子

关键步骤：实现算法之前，先找出原始请求中隐含的微妙概念脉络。

核心原则： 这个概念是嵌入算法本身的微妙、小众的引用——不一定是字面上的，但始终精妙。熟悉相关主题的人会凭直觉感受到它，而其他人只会欣赏到精湛的生成式作品。算法哲学提供计算语言，推导出的概念则赋予作品灵魂——它是安静的概念 DNA，无形地融入参数、行为和涌现模式之中。

这非常重要：引用必须足够含蓄，在不刻意彰显自身的同时提升作品的深度。试着像爵士乐手通过算法和声引用另一首曲子——只有懂的人才能听出来，但每个人都会欣赏生成之美。

---

P5.JS 实现

确立算法哲学和概念框架后，通过代码将其表达出来。继续之前，先停下来整理思路。只使用已创建的算法哲学和以下说明。

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

关键：编写任何 HTML 之前：

1. 使用 Read 工具阅读 templates/viewer.html
2. 仔细研究其确切结构、样式和一致的品牌风格
3. 将该文件作为实际起点——而不只是灵感来源
4. 完全保留所有固定部分（页眉、侧边栏结构、模板颜色／字体、种子控件、操作按钮），如原样所示
5. 只替换文件注释中标记的可变部分（算法、参数、参数 UI 控件）

避免：

• ❌ 从头创建 HTML
• ❌ 自创样式或配色方案
• ❌ 使用系统字体或深色主题
• ❌ 更改侧边栏结构

遵循以下做法：

• ✅ 原样复制模板的 HTML 结构
• ✅ 保持品牌风格一致（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 成品包含所有内容：p5.js（来自 CDN）、算法、参数控件和 UI，全部集中在一个文件中，可在 opencode 成品或任何浏览器中立即运行。请从模板文件开始，而不是从头编写。

---

交互式成品创建

提醒：templates/viewer.html 应已阅读（参见第 0 步）。请以该文件为起点。

为便于探索生成艺术，请创建一个独立的 HTML 成品。确保此成品无需设置，即可在 opencode 或任何浏览器中立即运行。将所有内容内嵌其中。

重要：固定内容与可变内容

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

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

• 布局结构（页眉、侧边栏、主画布区域）
• 一致的品牌样式（UI 颜色、字体、渐变）
• 侧边栏中的种子区域：
  • 种子显示
  • 上一个／下一个按钮
  • 随机按钮
  • 跳转到种子的输入框和前往按钮
• 侧边栏中的操作区域：
  • 重新生成按钮
  • 重置按钮

可变内容（针对每件艺术作品进行自定义）：

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

每件艺术作品都应有独特的参数和算法！ 固定部分提供一致的用户体验，其余内容则展现独特的创意。

必需功能

1. 参数控件

• 用于数值参数（粒子数量、噪声比例、速度等）的滑块
• 用于调色板颜色的颜色选择器
• 参数更改时实时更新
• 用于恢复默认值的重置按钮

2. 种子导航

• 显示当前种子编号
• 用于循环切换种子的“上一个”和“下一个”按钮
• 用于随机种子的“随机”按钮
• 用于跳转到指定种子的输入框
• 按需生成 100 个变体（种子 1-100）

3. 单个作品结构

<!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>

重要：这是一个单独的作品。没有外部文件，没有导入项（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>

根据参数数量添加相应数量的 control-group div。

3. 颜色（可选/可变） - 如果作品需要可调整的颜色，则包含此项：

• 如果用户需要控制调色板，则添加颜色选择器
• 如果作品使用固定颜色，则跳过此部分
• 如果作品为单色，则跳过此部分

4. 操作（固定） - 始终按所示内容准确包含：

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

要求：

• 种子控件必须可用（上一个/下一个/随机/跳转/显示）
• 所有参数都必须有 UI 控件
• 重新生成、重置、下载按钮必须可用
• 保持品牌风格一致（UI 样式，而非作品颜色）

使用作品

HTML 作品可立即使用：

1. 在 opencode 中：以交互式作品的形式显示，可立即运行
2. 作为文件：保存后在任意浏览器中打开，无需服务器
3. 分享：发送 HTML 文件即可——它完全自包含

---

变体与探索

作品默认包含种子导航（上一个/下一个/随机按钮），用户无需创建多个文件即可探索不同变体。如果用户想要突出显示特定变体：

• 包含种子预设（例如“变体 1：种子 42”“变体 2：种子 127”等按钮）
• 添加“画廊模式”，并排显示多个种子的缩略图
• 所有内容都在同一个作品中

这就像用同一块版制作一系列版画——算法保持一致，但每个种子都会展现其潜力的不同面向。由于作品具有交互性，用户可以通过探索种子空间，发现自己喜欢的作品。

---

创作过程

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

每个请求都独一无二。流程包括：

1. 解读用户意图——希望追求怎样的美感？
2. 创建算法理念（4-6 个段落），描述计算方法
3. 通过代码实现——构建能体现这一理念的算法
4. 设计适当的参数——哪些内容应当可以调整？
5. 构建匹配的 UI 控件——为这些参数提供滑块/输入框

固定项：

• 一致的品牌风格（颜色、字体、布局）
• 种子导航（始终存在）
• 自包含的 HTML 作品

其他内容都可变：

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

要获得最佳效果，请信任创造力，并让理念指引实现过程。

---

RESOURCES

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

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

  • 这是基础模板，包含精确的结构和统一的品牌风格
  • 保持不变：布局结构、侧边栏组织方式、模板的颜色和字体、种子控制、操作按钮
  • 替换：p5.js 算法、参数定义，以及 Parameters 部分中的 UI 控件
  • 文件中的大量注释会明确标出哪些内容需要保留，哪些需要替换

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

  • 展示如何组织参数、使用带种子的随机数、构建类的结构
  • 不是算法菜单——请运用这些原则构建独特的算法
  • 将算法直接嵌入 HTML 作品中（不要创建单独的 .js 文件）

重要提醒：

• 模板是起点，不是灵感来源
• 算法才是创造独特作品的地方
• 不要照搬流场示例——按照理念的要求构建作品
• 但务必保留模板中精确的 UI 结构和统一的品牌风格

---

VERIFICATION — 提交前必须完成

能运行的草图不代表好用的草图。生成式代码可能会以难以从源代码中发现、却能从渲染结果中一眼看出的方式出错：粒子逃出画布、流场坍缩到单一吸引子、密度饱和成一片实心墨迹，或者每个种子生成的结果都几乎一样。

渲染并检查结果。至少使用四个种子。

source ~/.local/opencode-venv/bin/activate
python3 - <<'PY'
from playwright.sync_api import sync_playwright
import pathlib
url = "file://" + str(pathlib.Path("artifact.html").resolve())
with sync_playwright() as p:
    b = p.chromium.launch(); pg = b.new_page(viewport={"width": 1400, "height": 900})
    errs = []
    pg.on("console", lambda m: m.type == "error" and errs.append(m.text))
    pg.on("pageerror", lambda e: errs.append(str(e)))
    for seed in (1, 7, 42, 1337):
        pg.goto(url); pg.wait_for_timeout(400)
        pg.evaluate(f"() => {{ if (window.setSeed) setSeed({seed}); }}")
        pg.wait_for_timeout(3500)                    # let the system reach equilibrium
        pg.locator("canvas").screenshot(path=f"/tmp/seed-{seed}.png")
    print("CONSOLE ERRORS:", errs); b.close()
PY

查看全部四张 PNG 并检查：

• 不同种子生成的结果有明显差异。 四张图几乎一样，说明随机性没有影响到关键参数——带种子的生成式创作这一理念就失效了。
• 不同种子生成的结果具有相似的风格。 四张图毫不相关，说明作品没有系统，只有噪声。
• 没有任何内容超出画布。 粒子离开画面或聚集在某个角落，都表明力场没有边界限制。
• 墨迹覆盖率在 8-40% 范围内。 低于此范围会显得空洞；高于此范围则会饱和成一片没有结构的实色区域。
• 缩略图尺寸下构图依然成立。 缩小到 200px。如果变成均匀的灰色一片，说明明暗层次缺乏区分。
• 控制台错误为零，包括动画运行期间，而不只是页面加载时。
• 作品会达到稳定状态。 如果算法永不稳定，每次截图都会得到不同的图像，这就不是可复现的艺术。

如果作品不符合其中任何一项，请修复算法——不要通过调整截图时间来掩盖问题。

RELATED SKILLS

• designing-canvas-art——静态 PDF/PNG 艺术；其 designing-canvas-art/references/rendering.md 介绍的颗粒、半色调、边距规范和笔触系统都可以直接应用于 p5 输出
• designing-frontend-interfaces——用于画布外围的查看器界面；designing-frontend-interfaces/references/color-and-theme.md 介绍的 OKLCH 色阶，比原始 HSL 更适合生成式调色板
• testing-webapps——用于驱动和捕获作品的 Playwright 模式
• building-web-artifacts——当草图发展为多组件应用时使用