算法艺术（p5.js）

用 p5.js、有种子随机 与 可交互参数 创作算法艺术。用户要「用代码画画 / 生成艺术 / 流场 / 粒子系统」等时使用。勿抄袭 在世艺术家作品以免版权问题。

产出：哲学 .md、交互查看 .html、生成逻辑 .js（或内联在 HTML 中）。

分两步：

算法哲学（.md）
用 p5.js 落实（.html + .js / 内联）

一、算法哲学

建立 算法哲学（不是静态图模板），通过 计算过程、涌现行为、数学美感、有种子随机、噪声场、有机系统、粒子/流场/力、参数化变化与受控混沌 来表达。

关键理解

输入：用户提示作基础，不束缚创意。
产出：生成式美学运动 的宣言。
下一步：用代码 落实哲学——约 九成算法生成、一成必要参数。

如何写算法哲学

命名（1–2 词）：如「有机湍流」「量子谐波」「涌现寂静」。

正文（4–6 段）：覆盖 计算过程与数学关系、噪声与随机模式、粒子与场、时间演化与系统状态、参数与涌现复杂度 等；每类点子 不重复堆砌。

反复强调： 最终算法应像经 无数迭代、由 计算美学顶尖实践者 精心调校 的结果（「一丝不苟的算法」「深厚计算功底」「殚精竭虑优化」「大师级实现」等）。

哲学要引导 用过程表达，美在 运行中，不在单帧截图。

示例（压缩，正式稿需 4–6 段长文）

有机湍流：分层 Perlin 噪声驱动流场；大量粒子沿矢量场运动，轨迹堆积成密度图；速度/密度映射色彩；多八度噪声形成湍流与平静区。
量子谐波：网格粒子带相位，近距干涉；建设性干涉为亮斑，相消为暗区；频率比经精细校准。
递归低语：分支递归、黄金比例约束、噪声扰动打破对称；线宽随层级递减。
场动力学：数学或噪声矢量场；粒子从边缘诞生，沿流线运动至平衡或边界；可视化多为轨迹「幽灵」。
随机结晶：随机圆堆叠或 Voronoi，松弛至平衡；按单元大小、邻居数等着色；多种子即多样「晶体」美。

原则

算法哲学：计算世界观，用代码表达。
过程重于单帧：美来自 执行过程，每次运行可不同。
参数化表达：思想在 数学关系、力、行为，不在静态摆拍。
艺术自由：给实现者诠释空间。
纯生成艺术：要做 活的算法，不是「带随机的静图」。
专家工艺：反复强调代码级打磨与专业深度。

输出为 .md 文件。

二、概念种子

实现前从用户请求中抽出 含蓄概念线：像画布技能一样，概念 嵌在参数与行为里，不喊口号；懂的人能感到，不懂的人仍见 高水准生成构图。哲学提供 计算语言，概念提供灵魂。

三、p5.js 实现

⚠ 步骤 0：先读模板 ⚠️

写任何 HTML 之前：

用 Read 工具阅读 templates/viewer.html
弄清 结构、样式、Anthropic 品牌固定区
以该文件为 字面起点，不是「参考灵感」
固定区块保持不动：页眉、侧栏结构、品牌色/字体、种子控件、操作按钮
只替换 注释标出的 变量区（算法、参数、参数 UI）

避免： 从零写 HTML；自造配色/暗色主题；改侧栏结构。
要做： 复制模板结构；保留品牌；只换 p5 算法与参数控件。

技术要求

有种子随机（Art Blocks 思路）：

let seed = 12345;
randomSeed(seed);
noiseSeed(seed);

参数对象 应自然从哲学生长：数量、尺度、速度、概率、比例、角度、阈值等。

核心算法 由哲学驱动，不是从「菜单选题」。有机涌现 → 累积/反馈/受约束随机；数学之美 → 几何、三角、精确计算；受控混沌 → 边界内随机、分岔、有序自无序涌现等。

画布： 标准 p5 setup/draw；可静态 noLoop() 或动画 draw。

工艺

算法应像经无数迭代调校：受控混沌 而非乱噪声；色彩和谐；随机中仍有 构图与动线；动画要流畅；同一 seed 必须可复现。

输出物

算法哲学（Markdown 或说明文本）
单一 HTML artifact：以 templates/viewer.html 为起点，内联 p5（CDN）、算法、控件，开箱即用。

四、交互 Artifact

再次强调： 模板已读，以之为基础。

固定（始终原样保留）： 布局（页眉、侧栏、主画布区）、Anthropic 品牌样式、侧栏 Seed 区（显示、上一条/下一条/随机/跳转）、Actions（Regenerate、Reset 等按模板）。

可变： 全部 p5 算法、params、侧栏 Parameters 区控件数量与范围、Colors 区（可选：取色器或固定色或单色省略）。

每件作品应有 独特参数与算法；固定部分保证 一致 UX。

必备能力：

参数控件：滑条、取色等，改动即刷新
种子导航：显示当前 seed、Prev/Next/Random、输入跳转；若要求可扫 seed 1–100
单文件结构：除 p5 CDN 外无外部依赖，内联样式与脚本

侧栏顺序：Seed（固定）→ Parameters（可变）→ Colors（可选）→ Actions（固定）。种子与下载等按钮须 真实可用。

使用方式

claude.ai 中作为交互 artifact 直接运行
存成文件用浏览器打开，无需服务器
单文件即可分享

五、变体与探索

默认用种子按钮探索变体。若用户要突出某些变体：可加 seed 预设按钮、「画廊模式」多缩略图等，仍放在 同一 artifact 内——同一「版」，不同 seed 呈现不同面貌。

六、创作流程

用户请求 → 算法哲学 → 实现 → 设计可调参数 → 匹配 UI。常量：品牌、种子导航、单文件 artifact；其余：算法、参数、控件、视觉结果。

资源

templates/viewer.html：必须作为 HTML 起点；注释标明保留/替换范围。
templates/generator_template.js：参数组织、有种子随机、类结构等参考；不是图案菜单——算法仍应由哲学决定；通常 内联进 HTML，不单独丢一个无关联的 .js 文件了事。

切记： 模板是地基；算法才是独创所在；不要照搬流场示例若哲学指向别处；UI 骨架与品牌 必须与模板一致。

算法生成艺术

安装方式

CLI 安装（推荐）

手动下载安装

触发指令

使用指南