用 p5.js 与种子随机创作可交互生成艺术时…

当用户请求用代码创作生成艺术、流场、粒子系统或算法艺术，并需要可复现种子、参数探索与交互式 viewer 时使用。

适用场景

解决思路

1. 按两步开展：1）创建算法哲学（.md 文件）；2）用 p5.js 生成艺术表达（.html + .js）；最终以单个自包含 HTML artifact 输出，算法内嵌，不创建单独 .js 文件。
2. 创建 ALGORITHMIC PHILOSOPHY，而不是静态图像或模板；用计算过程、涌现行为、数学美、seeded randomness、noise fields、有机系统、粒子、流、场、力、参数变化和受控混沌来解释它。
3. 把用户给的 subtle input 或 instructions 作为基础，但不让它限制创意自由。
4. 创建算法哲学/生成美学运动；同一版本接收哲学并用代码表达，生成 p5.js sketch：90% 算法生成，10% 关键参数。
5. 为生成艺术运动写一份宣言，下一阶段写算法使其复活。
6. 哲学必须强调算法表达、涌现行为、计算美和种子变化。
7. 命名运动（1-2 个词），例如 'Organic Turbulence'、'Quantum Harmonics'、'Emergent Stillness'。
8. 用 4-6 段简洁但完整地阐明哲学，表达它如何通过计算过程与数学关系、噪声函数与随机模式、粒子行为与场动力学、时间演化与系统状态、参数变化与涌现复杂性显现。
9. 避免冗余：每个算法方面只提一次；不要重复噪声理论、粒子动力学或数学原理，除非增加新深度。
10. 反复强调工艺：多次强调最终算法看似无数小时开发、精心打磨、领域顶尖；重复 'meticulously crafted algorithm'、'product of deep computational expertise'、'painstaking optimization'、'master-level implementation' 等短语。
11. 留创意空间：算法方向要具体，但简洁到让下一版有极高工艺的诠释实现选择。
12. 哲学必须引导下一版以算法方式表达想法，不通过静态图像；美存在于过程而非最终帧。
13. 哲学长度为 4-6 段，填充诗性计算哲学，避免重复；输出为 .md 文件。
14. 可参考示例：'Organic Turbulence' 用分层 Perlin noise 流场、粒子 trails、速度/密度颜色并运行至平衡；'Quantum Harmonics' 用网格粒子、phase、sine 波、干涉和 mandalas；'Recursive Whispers' 用递归分支、黄金比例、L-systems、噪声扰动和线宽递减；'Field Dynamics' 用向量场、粒子沿场线、边界出生/死亡、多场吸引/排斥/旋转并只显示 traces；'Stochastic Crystallization' 用随机圆包或 Voronoi、松弛算法、细胞平衡并按大小/邻居/距离着色。
15. 实现算法前，推导概念种子：从原始请求识别微妙的发概念线索。
16. 概念应是嵌入算法本身的 subtle、niche reference，不总是字面，总是高级；熟悉主题者能直觉感受，其他人体验大师级生成构图。
17. 让哲学提供计算语言，让概念提供灵魂，即无声概念 DNA 编织进参数、行为和涌现模式。
18. 参考必须精炼到增强深度而不自我宣告；像爵士音乐家通过算法和声引用另一首歌；只有懂的人领会，但所有人都欣赏生成美。
19. 用哲学和概念框架通过代码表达；先暂停整理思路；只使用创建的算法哲学和以下指令。
20. STEP 0：写任何 HTML 前，用 Read 工具读 `templates/viewer.html`；研究确切结构、样式和 Anthropic branding；将该文件作为字面起点；保持 FIXED sections 完全如示（header、sidebar structure、Anthropic colors/fonts、seed controls、action buttons）；只替换注释标记的 VARIABLE sections（algorithm、parameters、UI controls for parameters）。
21. 避免：从零创建 HTML；发明自定义样式或配色；使用系统字体或深色主题；改变 sidebar 结构。
22. 遵循：复制模板的 exact HTML structure；保留 Anthropic branding（Poppins/Lora fonts、浅色、渐变背景）；保持 sidebar layout（Seed → Parameters → Colors? → Actions）；只替换 p5.js 算法和参数控件。模板是基础，不要重建。
23. Seeded randomness 按 Art Blocks pattern：始终用 seed 保证可复现；用 `let seed = 12345;` 或从用户输入 hash；调用 `randomSeed(seed);` 和 `noiseSeed(seed);`。
24. 参数结构跟随哲学：先问“这个系统的哪些品质可调整？”；用 `let params = { seed: 12345, // colors // Add parameters that control YOUR algorithm: // Quantities, Scales, Probabilities, Ratios, Angles, Thresholds };`。
25. 设计有效参数时，聚焦系统需要可调的性质，而不是思考“图案类型”。
26. 核心算法表达哲学：哲学决定构建什么；不要想“用哪个图案？”，而想“如何通过代码表达这个哲学？”。
27. 若哲学关于有机涌现：用随时间积累或生长的元素、受自然规则约束的随机过程、反馈循环和交互。
28. 若哲学关于数学美：用几何关系和比例、三角函数和声、精确计算创造意外图案。
29. 若哲学关于受控混沌：用严格边界内随机变化、分叉和相变、从无序涌现秩序。
30. 算法从哲学流动，而不是从选项菜单选择；让概念本质指导创意和原创选择，构建表达该请求愿景的东西。
31. Canvas 设置用标准 p5.js 结构：`function setup() { createCanvas(1200, 1200); // Initialize your system }`；`function draw() { // Your generative algorithm // Can be static (noLoop) or animated }`。
32. 工艺要求：创建像大师生成艺术家经过无数迭代后的算法；仔细调整每个参数；确保每个图案有目的涌现；不是随机噪声，而是深度专业打磨的控制混沌。
33. Balance：复杂但无视觉噪声，有序但不僵化。
34. Color Harmony：使用深思熟虑的调色板，而不是随机 RGB 值。
35. Composition：即使在随机中也保持视觉层级和流动。
36. Performance：平滑执行；若为动画，优化实时表现。
37. Reproducibility：相同 seed 总是产生相同输出。
38. 输出格式：1）Algorithmic Philosophy 作为 markdown 或 text 解释生成美学；2）Single HTML Artifact 自包含交互生成艺术，基于 `templates/viewer.html`。HTML 包含一切：p5.js 从 CDN、算法、参数控件和 UI 全在一个文件，可立即在 claude.ai artifacts 或任何浏览器运行。从模板文件开始，不是从零。
39. 交互式 artifact 创建时，先提醒自己已读 `templates/viewer.html`，并以其为起点。
40. 创建单个自包含 HTML artifact，使其立即可在 claude.ai 或任何浏览器工作，无需设置；全部内联。
41. 明确 FIXED：布局结构（header、sidebar、main canvas area）；Anthropic branding（UI colors、fonts、gradients）；sidebar 中 Seed section（Seed display、Previous/Next buttons、Random button、Jump to seed input + Go button）；Actions section（Regenerate button、Reset button）。
42. 明确 VARIABLE：整个 p5.js 算法（setup/draw/classes）；parameters object；sidebar 的 Parameters section（参数控件数量、名称、min/max/step、控件类型）；Colors section 可选（有些需要颜色选择器，有些固定颜色，有些单色，根据艺术需要决定）。
43. 每件作品都应有 unique parameters and algorithm；固定部分提供一致 UX，其余表达独特愿景。
44. 必需功能 1：Parameter Controls——为数字参数做滑块（粒子数、噪声尺度、速度等），为调色板做颜色选择器，参数改变实时更新，Reset 按钮恢复默认。
45. 必需功能 2：Seed Navigation——显示当前 seed 数字，Previous/Next 循环 seeds，Random 随机 seed，输入字段跳转特定 seed，请求时生成 100 个变体（seeds 1-100）。
46. 必需功能 3：Single Artifact Structure——用单个 HTML，p5.js 从 CDN，样式内联，canvas 在上 controls 在下，全部 p5.js 代码内联，无外部文件，无导入（除 p5.js CDN）。
47. 必需功能 4：构建 sidebar——1）Seed（FIXED）始终完全如示：Seed display、Prev/Next/Random/Jump buttons；2）Parameters（VARIABLE）为艺术创建控件：`<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；3）Colors（OPTIONAL/VARIABLE）如果艺术需要可调颜色，添加颜色选择器，若固定颜色或单色则跳过；4）Actions（FIXED）始终完全如示：Regenerate button、Reset button、Download PNG button。
48. 要求：Seed controls 必须工作（prev/next/random/jump/display）；所有参数必须有 UI 控件；Regenerate、Reset、Download 按钮必须工作；保留 Anthropic branding（UI 样式，不是艺术颜色）。
49. 使用 artifact：在 claude.ai 显示为交互 artifact 立即运行；作为文件保存并在任何浏览器打开，无需服务器；分享时发送 HTML 文件，它完全自包含。
50. 变体与探索：默认包含 seed navigation，允许用户探索变化而无需创建多个文件。
51. 若用户想突出特定变体：包含 seed presets（如按钮 'Variation 1: Seed 42'、'Variation 2: Seed 127'）；添加 'Gallery Mode' 并排显示多个 seed 缩略图；全部在同一单个 artifact 中。
52. 像同一版画系列：算法一致，每个 seed 揭示不同侧面；交互性让用户探索 seed 空间并发现自己的最爱。
53. 创作过程：用户请求 → 算法哲学 → 实现；每次请求都独特。
54. 过程步骤：1）解释用户意图——寻求什么美学？2）创建算法哲学（4-6 段）描述计算方法；3）用代码实现——构建表达该哲学的算法；4）设计适当参数——什么应可调？5）构建匹配 UI 控件——为那些参数做滑块/输入。
55. 常量：Anthropic branding（colors、fonts、layout）；seed navigation（始终存在）；自包含 HTML artifact。
56. 其他都可变：算法本身、参数、UI 控件、视觉结果。
57. 最佳结果：信任创造力，让哲学指导实现。
58. 资源：`templates/viewer.html` 是所有 HTML artifact 的必需起点；保持布局结构、sidebar 组织、Anthropic colors/fonts、seed controls、action buttons 不变；替换 p5.js 算法、参数定义、Parameters section UI 控件；文件内 extensive comments 标记 keep vs replace。
59. 资源：`templates/generator_template.js` 是 p5.js 最佳实践和代码结构原则参考；展示如何组织参数、使用 seeded randomness、结构 classes；它不是 pattern menu，用这些原则构建独特算法；将算法内嵌 HTML artifact（不要创建单独 .js 文件）。
60. 关键提醒：模板是起点，不是灵感；算法是创造独特物的地方；不要复制 flow field 示例——构建哲学要求的东西；但确实保持模板精确 UI 结构和 Anthropic branding。
61. 创建原创算法艺术，不复制现有艺术家作品，以避免版权侵犯。

适用边界 · 注意事项

• 只想要静态图像、模板或非生成过程结果时。
• 无法使用 `templates/viewer.html`，或不愿保留 Anthropic branding、Poppins/Lora 字体、浅色渐变与固定侧栏结构时；此时不能直接套用模板，需要自行重建 UI。
• 需要复制现有艺术家作品或受版权保护风格时；应创建原创算法艺术以避免版权侵犯。