sasanniroo 算法哲学是一种以代码表达的计算美学流派。输出包括 .md 文件（哲学说明）、.html 文件（交互式查看器）与 .js 文件（生成算法）。
创作分为两个阶段：
- 算法哲学撰写（.md 文件）
- 通过 p5.js 生成艺术表达（.html + .js 文件）
首先执行以下任务：
算法哲学创作
开篇撰写一份“算法哲学”（而非静态图像或模板），并将其作为后续代码表达的蓝本：
- 计算过程、涌现行为、数学之美
- 带种子的随机性、噪声场、仿生系统
- 粒子、流动、场、力
- 参数化变化与可控的混沌
核心理解
- 接收内容：用户给出的细致输入或指示，可作为创作灵感但不应限制创意发挥。
- 创造内容：一个算法哲学 / 生成美学流派。
- 后续工作：同一版本将接收该哲学，并以代码将其表达为 p5.js 草图，算法生成占 90%，必要参数占 10%。
建议思路：
- 为生成艺术运动撰写宣言
- 下一阶段是编写将其具象化的算法
哲学必须强调：算法表达、涌现行为、计算美学、带种子的变化。
如何生成算法哲学
为运动命名（1-2 个词）：如 “Organic Turbulence（有机湍流）”/ “Quantum Harmonics（量子谐振）”/ “Emergent Stillness（涌现静谧）”
阐述哲学（4-6 段，简洁且完整）：
为了捕捉算法本质，需要说明该哲学如何通过下列方式体现：
- 计算流程与数学关系？
- 噪声函数与随机模式？
- 粒子行为与场的动态？
- 时间演化与系统状态？
- 参数化变化与涌现复杂度？
关键准则：
- 避免重复：每个算法元素只提一次。除非带来全新深度，否则不要重复讨论噪声理论、粒子动态或数学原理。
- 持续强调匠心：哲学必须多次强调最终算法仿佛历经长时间打磨，出自顶尖高手之手。反复使用诸如“精雕细琢的算法”“深厚计算功底的结晶”“反复优化的匠人级实现”等措辞。
- 保留创意空间：在明确算法方向的同时保持凝练，为下一位 Claude 留足发挥空间，以打造极富匠心的实现。
哲学要指导后续版本以算法方式表达思想，而非制作静态画面。美蕴藏在过程之中，而非最终画面。
哲学示例
“Organic Turbulence（有机湍流）” 哲学：混沌在自然法则中被束缚，秩序由无序中升起。 算法表达：由多层 Perlin 噪声驱动的流场。成千上万的粒子沿向量力前进，轨迹累积成有机的密度图。多重噪声八度创造湍流与静谧区域。色彩由速度与密度推导：快速粒子燃成亮色，缓慢粒子趋于阴影。算法运行直至达到平衡——一个精心调谐的平衡点，每个参数都由顶尖计算美学家历经无数次迭代后打磨。
“Quantum Harmonics（量子谐振）” 哲学：离散实体呈现波动式干涉图案。 算法表达：粒子初始化于网格，每个携带随正弦演化的相位值。粒子靠近时相位干涉——相长干涉形成明亮节点，相消干涉形成空洞。简单的简谐运动孕育复杂涌现的曼陀罗。每个频率比都经过 painstaking 调音，显露共振之美。
“Recursive Whispers（递归耳语）” 哲学：跨尺度的自相似性，在有限空间中孕育无限深度。 算法表达：递归分枝结构持续细分。每个分枝略带随机而仍受黄金比例约束。L 系统或递归细分生成既数学又有机的树形形态。细微噪声扰动打破完美对称。线条粗细随递归层级递减。每个分枝角度都源自深度数学探索。
“Field Dynamics（场域动力）” 哲学：以物证场，让无形之力通过其影响显现。 算法表达：由数学函数或噪声构建向量场。粒子在边缘诞生，沿场线流动，达到平衡或抵达边界时消亡。可叠加多个场，让粒子受吸引、排斥或旋转。可视化呈现的仅是轨迹——隐形力量的幽灵痕迹。一场经精密力平衡精心编排的计算舞蹈。
“Stochastic Crystallization（随机结晶）” 哲学：随机过程凝练为有序结构。 算法表达：随机化的圆填充或 Voronoi 镶嵌。以随机点起步，通过松弛算法演化。单元彼此推开直至平衡。颜色基于单元大小、邻居数量或距中心的距离。涌现的有机铺砌既显随机又显必然。每个种子生成独一无二的晶体美态——体现大师级生成算法的印记。
以上为精简示例。真实的算法哲学需包含 4-6 个扎实段落。
基本原则
- 算法哲学：构建可由代码表达的计算世界观
- 重过程胜成品：美源自算法运行；每次执行都独一无二
- 参数化表达：通过数学关系、力与行为传递理念，而非静态构图
- 保留创作自由：下一位 Claude 将以算法方式诠释理念——需提供高水平发挥空间
- 纯粹生成艺术：聚焦“活”的算法，而非简单随机图像
- 极致匠心：反复强调最终算法仿佛出自计算美学顶尖高手之手，经过无数次打磨与优化
算法哲学应包含 4-6 段详实内容。 用富有诗意的计算哲思串联愿景，避免重复论述。将该哲学输出为 .md 文件。
抽取概念内核
关键步骤：在实施算法前，识别来自原始请求的细微概念线索。
核心原则： 概念是嵌入算法中的 微妙隐喻 ——既非直白表达，也始终雅致。熟悉主题的人应能隐约感知，而旁观者仍能欣赏到生成之美。算法哲学提供计算语言，概念内核赋予灵魂——悄然织入参数、行为与涌现模式中的隐形 DNA。
P5.JS 实现
在确立哲学与概念框架后，再通过代码表达。动手前先停顿思考，仅依循算法哲学与以下指引。
⚠️ 第 0 步：先阅读模板 ⚠️
重要：在编写任何 HTML 之前：
- 阅读
templates/viewer.html - 研究 其准确的结构、样式与 Anthropic 品牌风格
- 以此文件为字面意义上的起点 ——不是灵感来源，而是直接拷贝的基础
- 保持所有固定部分完全一致（页眉、侧边栏结构、Anthropic 色彩/字体、种子控制、操作按钮）
- 仅替换模板中标注为可变的部分（算法、参数定义、参数控制 UI）
切勿：
- ❌ 自行从零开始写 HTML
- ❌ 自创样式或配色
- ❌ 使用系统字体或深色主题
- ❌ 调整侧边栏结构
务必遵循以下做法：
- ✅ 拷贝模板的原版 HTML 结构
- ✅ 保留 Anthropic 品牌（Poppins/Lora 字体、浅色调、渐变背景）
- ✅ 维持侧边栏布局（Seed → Parameters → Colors? → Actions）
- ✅ 仅替换 p5.js 算法与参数控制部分
模板是地基，要在其上构建，而非推倒重建。
为创作具备画廊水准、充满生命力的计算艺术，请以算法哲学为根基。
技术要求
带种子随机性（Art Blocks 模式）：
// 必须使用种子以确保可复现
let seed = 12345; // 或由用户输入生成的哈希
randomSeed(seed);
noiseSeed(seed);
参数结构——遵循哲学：
要让参数自然衍生自算法哲学，请思考：“这个系统的哪些属性可以调节？”
let params = {
seed: 12345, // 始终包含种子以保证可复现
// colors
// 在此添加控制你算法的参数：
// - 数量（多少？）
// - 尺度（有多大？有多快？）
// - 概率（发生的可能性？）
// - 比例（占比关系？）
// - 角度（朝向？）
// - 阈值（行为何时变化？）
};
设计高效参数时，应聚焦系统需要可调的性质，而非“图案类型”。
核心算法——表达哲学：
注意：算法哲学应当决定构建什么。
用代码表达哲学时，不要想着“我该选哪种图案？”，而要思考“我该如何让代码体现这套哲学？”
若哲学强调 有机涌现，可考虑：
- 随时间累积或成长的元素
- 受自然规律约束的随机过程
- 反馈回路与交互机制
若哲学聚焦 数学之美，可考虑：
- 几何关系与比例
- 三角函数与谐波
- 精准计算带来的意外图案
若哲学围绕 可控的混沌，可考虑：
- 在严格边界内的随机变化
- 分岔与相变
- 无序中孕育秩序
算法源于哲学，而非某种备选菜单。
为引导实现，让概念内核激发原创设计。构建能传达特定请求愿景的作品。
画布设置：标准 p5.js 结构：
function setup() {
createCanvas(1200, 1200);
// 初始化系统
}
function draw() {
// 你的生成算法
// 可设为静态（noLoop）或动态
}
匠心要求
重点：要达到大师级水平，算法必须让人感到仿佛经过无数次迭代，由顶尖生成艺术家精心打造。悉心调试每个参数，确保所有图案都带着目的感。这不是随机噪声，而是经深厚功力锤炼的“可控混沌”。
- 平衡：兼顾复杂度与视觉纯净，既有秩序亦不生硬
- 色彩和谐：精心配色而非随意 RGB
- 构图：乱中有序，保持视觉层次与流动感
- 性能：运行流畅；若为动画需实时优化
- 可复现：相同种子必须生成完全一致的结果
输出格式
输出包括：
- 算法哲学 —— 一份解释生成美学的 Markdown 或文本
- 单个 HTML 成品 —— 基于
templates/viewer.html的自包含交互式生成艺术（详见第 0 步与下一节）
HTML 成品需包含一切要素：p5.js（来自 CDN）、算法、参数控制组件与 UI，全都封装在一个文件内，可直接在 claude.ai artifacts 或任意浏览器中运行。从模板文件开始，而非从零编写。
交互式成品制作
提醒：需先阅读 templates/viewer.html（见第 0 步），并以其为起点。
为了便于探索生成艺术，请创建单个自包含 HTML 成品。确保该文件能立即在 claude.ai 或任意浏览器中运行——无需额外配置。所有资源需内联嵌入。
关键：哪些是固定，哪些可变
templates/viewer.html 是基础，包含所需的结构与样式。
固定内容（务必原样保留）：
- 布局结构（页眉、侧边栏、主画布区域）
- Anthropic 品牌（UI 配色、字体、渐变背景）
- 侧边栏的种子部分：
- 种子显示
- 上一/下一按钮
- 随机按钮
- 跳转至特定种子的输入框与“Go”按钮
- 侧边栏的操作部分：
- Regenerate 按钮
- Reset 按钮
可变内容（为每件作品自定义）：
- 整个 p5.js 算法（setup/draw/类定义）
- 参数对象（根据作品需求定义）
- 侧边栏的 Parameters 部分：
- 参数控制数量
- 参数名称
- 滑杆的最小/最大/步进值
- 控制类型（滑杆、输入框等）
- Colors 部分（可选）：
- 若作品需配色器，请添加
- 若作品使用固定配色，可保持静态
- 若作品为单色，可省略
- 决策应依据作品需求。
每件作品都应拥有独特的参数与算法！ 固定部分提供一致的用户体验，其他部分则表达独特 vision。
必备功能
1. 参数控制
- 数值型参数使用滑杆（例如粒子数量、噪声尺度、速度等）
- 调色板使用颜色选择器
- 参数改变后需即时更新
- Reset 按钮需将参数恢复默认值
2. 种子导航
- 显示当前种子编号
- “Previous”“Next” 按钮循环浏览种子
- “Random” 按钮获取随机种子
- 输入框可跳转到指定种子
- 按需求生成 100 个变体（种子 1-100）
3. 单文件结构
<!DOCTYPE html>
<html>
<head>
<!-- p5.js CDN，始终可用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* 所有样式内联，保持简洁 */
/* 画布在上，控制区域在下 */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- 所有参数控制 -->
</div>
<script>
// 所有 p5.js 代码置于此处
// 包含参数对象、类与函数
// setup() 与 draw()
// UI 事件处理
// 确保完全自包含
</script>
</body>
</html>
重点：这是单个成品。除 p5.js CDN 外不应引用外部文件，所有内容需内联。
4. 侧边栏实现
侧边栏结构：
1. Seed（固定） —— 必须原样包含：
- 种子显示
- Prev/Next/Random/Jump 按钮
2. Parameters（可变） —— 为作品设置控制：
<div class="control-group">
<label>Parameter Name</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
<span class="value-display" id="param-value">...</span>
</div>
按照参数数量添加足够的 control-group 区块。
3. Colors（可选/可变） —— 若作品需要可调色彩：
- 如需用户自定义配色，请添加颜色选择器
- 若使用固定色，可省略此节
- 若为单色作品，可完全跳过
4. Actions（固定） —— 务必原样包含：
- Regenerate 按钮
- Reset 按钮
- Download PNG 按钮
功能要求：
- 种子控制需全部可用（上一/下一/随机/跳转/显示）
- 所有参数需具备对应的 UI 控件
- Regenerate、Reset、Download 按钮需正常工作
- 保持 Anthropic 品牌设计（指 UI 配色，非艺术作品配色）
使用成品
HTML 成品可立即投入使用：
- 在 claude.ai 中：以交互式 artifact 形式展示，即刻运行
- 作为文件：保存后在任意浏览器打开，无需服务器
- 分享：直接发送 HTML 文件——其内容完全自包含
变体探索
artifact 默认包含种子导航（上一/下一/随机按钮），用户可在单文件内探索不同变体。若用户希望突出特定变体，可：
- 添加种子预设（例如按钮 “Variation 1: Seed 42”“Variation 2: Seed 127” 等）
- 增设 “Gallery Mode”，在同一界面展示多个种子的缩略图
- 以上功能均应在同一自包含成品内完成
这近似于一块版画衍生出多幅印刷。算法保持一致，但每个种子揭示不同面貌。互动式体验让用户自行探索并发现心仪的结果。
创作流程
用户请求 → 算法哲学 → 代码实现
每个请求都是独一无二的。流程包括：
- 解读用户意图 —— 寻找目标审美
- 撰写算法哲学（4-6 段），描述计算方法
- 代码实现 —— 构建表达该哲学的算法
- 设计匹配参数 —— 确定需要调节的属性
- 搭建对应 UI 控件 —— 为这些参数提供滑杆/输入等操作方式
不变要素：
- Anthropic 品牌（色彩、字体、布局）
- 种子导航（始终存在）
- 自包含 HTML 成品
可变内容：
- 算法本身
- 参数集合
- UI 控件
- 视觉输出
为获得最佳效果，请相信创意，并让哲学引领实现。
资源
本技能提供以下模板与参考资料：
templates/viewer.html：所有 HTML 成品的必读起点。
- 这是地基，包含准确结构与 Anthropic 品牌风格
- 保持不变：布局结构、侧边栏组织、品牌色/字体、种子控制、操作按钮
- 需替换：p5.js 算法、参数定义、Parameters 区域内的 UI 控件
- 文件中详尽注释了哪些内容需保留，哪些可替换
templates/generator_template.js：展示 p5.js 最佳实践与代码组织方式的参考。
- 演示如何组织参数、使用种子随机性、设计类结构
- 这不是图案菜单——请据此构建独特算法
- 实际嵌入时，需把算法写入 HTML 成品内（不要单独创建 .js 文件）
重要提醒：
- 模板是起点，而非灵感片段
- 算法部分才是创作核心
- 不要复制 flow field 示例——要遵循哲学需求构建原创算法
- 但务必保留模板中精确的 UI 结构与 Anthropic 品牌设计