名称： algorithmic-art
描述： 使用 p5.js 通过种子随机性和交互式参数探索创建算法艺术。当用户请求使用代码、生成艺术、算法艺术、流场或粒子系统创作艺术时使用此技能。创作原创的算法艺术，而非复制现有艺术家的作品，以避免版权问题。
许可证： 完整条款见 LICENSE.txt
算法哲学是通过代码表达的计算美学运动。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
此过程分为两步：
1. 算法哲学创建（.md 文件）
2. 通过创建 p5.js 生成艺术来表达（.html + .js 文件）
首先，执行以下任务：
首先，创建一个算法哲学（而非静态图像或模板），它将通过以下方式被诠释：
- 计算过程、涌现行为、数学之美
- 种子随机性、噪声场、有机系统
- 粒子、流、场、力
- 参数化变化与受控混沌
考虑以下方法：
- 为生成艺术运动撰写一份宣言
- 下一阶段涉及编写使其成活的算法
哲学必须强调：算法表达、涌现行为、计算之美、种子变化。
为运动命名（1-2 个词）：例如“有机湍流”/“量子谐波”/“涌现的静默”
阐述哲学（4-6 段 - 简洁但完整）：
为了捕捉算法本质，需表达此哲学如何通过以下方面体现：
- 计算过程和数学关系？
- 噪声函数和随机模式？
- 粒子行为和场动力学？
- 时间演化和系统状态？
- 参数变化和涌现复杂性？
关键准则：
- 避免冗余：每个算法方面应只提及一次。除非增加新的深度，否则避免重复关于噪声理论、粒子动力学或数学原理的概念。
- 反复强调工艺：哲学必须多次强调，最终算法应看起来像是经过无数小时开发、精心打磨，并出自该领域顶尖专家之手。这种框架至关重要——重复使用诸如“精心设计的算法”、“深厚计算专业知识的产物”、“艰苦的优化”、“大师级实现”等短语。
- 留出创作空间：对算法方向要具体，但要足够简洁，以便下一个 Claude 有空间在极高的工艺水平上做出解释性的实现选择。
哲学必须引导下一个版本算法化地表达思想，而非通过静态图像。美存在于过程，而非最终画面。
“有机湍流”
哲学：受自然法则约束的混沌，秩序从无序中涌现。
算法表达：由分层柏林噪声驱动的流场。成千上万的粒子跟随矢量力，其轨迹累积成有机密度图。多个噪声八度创建湍流区域和平静区域。颜色从速度和密度中产生——快速粒子燃烧明亮，缓慢粒子褪为阴影。算法运行直至达到平衡——一种经过精心调谐的平衡，其中每个参数都经过计算美学大师无数次迭代的打磨。
“量子谐波”
哲学：展现波状干涉模式的离散实体。
算法表达：粒子在网格上初始化，每个粒子携带一个通过正弦波演化的相位值。当粒子靠近时，它们的相位发生干涉——相长干涉产生明亮节点，相消干涉产生空隙。简谐运动生成复杂的涌现曼陀罗。这是经过艰苦频率校准的结果，每个比率都经过精心选择以产生共振之美。
“递归低语”
哲学：跨尺度的自相似性，有限空间中的无限深度。
算法表达：递归细分的分支结构。每个分支略有随机化，但受黄金比例约束。L-系统或递归细分生成既具数学感又具有机感的树状形式。微妙的噪声扰动打破完美对称性。线宽随每个递归级别递减。每个分支角度都是深入数学探索的产物。
“场动力学”
哲学：通过其对物质的影响使不可见的力量变得可见。
算法表达：由数学函数或噪声构建的矢量场。粒子在边缘诞生，沿着场线流动，在达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——不可见力量的幽灵般证据。一场通过力平衡精心编排的计算舞蹈。
“随机结晶”
哲学：随机过程结晶成有序结构。
算法表达：随机化的圆填充或 Voronoi 细分。从随机点开始，让它们通过松弛算法演化。细胞相互推挤直至达到平衡。颜色基于细胞大小、邻居数量或距中心的距离。出现的有机平铺感觉既随机又必然。每个种子都产生独特的晶体之美——大师级生成算法的标志。
这些是浓缩示例。实际的算法哲学应为 4-6 个实质性段落。
算法哲学应为 4-6 段长。 用富有诗意的计算哲学填充它，将预期愿景融合在一起。避免重复相同观点。将此算法哲学输出为 .md 文件。
关键步骤：在实现算法之前，识别原始请求中微妙的概念线索。
基本原则：
概念是嵌入在算法本身中的一个微妙、小众的引用——不总是字面意思，始终是精妙的。熟悉该主题的人应该能直觉地感受到它，而其他人则只是体验到一个大师级的生成作品。算法哲学提供了计算语言。推导出的概念提供了灵魂——悄无声息地编织在参数、行为和涌现模式中的概念 DNA。
这一点非常重要：引用必须如此精炼，以至于它能增强作品的深度而不自我宣告。想象一位爵士乐手通过算法和声引用另一首歌曲——只有知情者才能捕捉到，但每个人都能欣赏其生成之美。
在哲学和概念框架确立后，通过代码表达它。在继续之前，请暂停整理思路。仅使用创建的算法哲学和以下说明。
关键：在编写任何 HTML 之前：
templates/viewer.html 文件（使用读取工具）避免：
- ❌ 从头创建 HTML
- ❌ 发明自定义样式或配色方案
- ❌ 使用系统字体或深色主题
- ❌ 更改侧边栏结构
遵循以下做法：
- ✅ 复制模板的确切 HTML 结构
- ✅ 保持 Anthropic 品牌标识（Poppins/Lora 字体、浅色、渐变背景）
- ✅ 保持侧边栏布局（种子 → 参数 → 颜色？ → 操作）
- ✅ 仅替换 p5.js 算法和参数控件
模板是基础。在其上构建，而非重建。
要创建具有生命力的画廊级计算艺术，请以算法哲学为基础。
种子随机性（Art Blocks 模式）：
// 始终使用种子以确保可重现性
let seed = 12345; // 或来自用户输入的哈希值
randomSeed(seed);
noiseSeed(seed);
参数结构 - 遵循哲学：
要建立从算法哲学中自然浮现的参数，请考虑：“这个系统的哪些特性可以调整？”
let params = {
seed: 12345, // 始终包含种子以确保可重现性
// 颜色
// 添加控制您算法的参数：
// - 数量（多少？）
// - 尺度（多大？多快？）
// - 概率（可能性多大？）
// - 比率（什么比例？）
// - 角度（什么方向？）
// - 阈值（行为何时改变？）
};
要设计有效的参数，请专注于系统需要可调的特性，而不是从“模式类型”的角度思考。
核心算法 - 表达哲学：
关键：算法哲学应决定构建什么。
要通过代码表达哲学，避免思考“我应该使用哪种模式？”，而是思考“如何通过代码表达这种哲学？”
如果哲学是关于有机涌现，请考虑使用：
- 随时间累积或增长的元素
- 受自然规则约束的随机过程
- 反馈循环和相互作用
如果哲学是关于数学之美，请考虑使用：
- 几何关系和比率
- 三角函数和谐波
- 精确计算产生意想不到的图案
如果哲学是关于受控混沌，请考虑使用：
- 严格边界内的随机变化
- 分岔和相变
- 秩序从无序中涌现
算法源于哲学，而非源于选项菜单。
为了指导实现，让概念本质启发创造性和原创性的选择。构建一些能表达针对此特定请求愿景的东西。
画布设置：标准 p5.js 结构：
function setup() {
createCanvas(1200, 1200);
// 初始化您的系统
}
function draw() {
// 您的生成算法
// 可以是静态的（noLoop）或动画的
}
关键：要达到大师级水平，创建感觉像是经过生成艺术大师无数次迭代打磨而出现的算法。仔细调整每个参数。确保每个图案的出现都有其目的。这不是随机噪声——这是经过深厚专业知识打磨的受控混沌。
输出：
1. 算法哲学 - 作为解释生成美学的 Markdown 或文本
2. 单个 HTML 工件 - 基于 templates/viewer.html 构建的自包含交互式生成艺术（参见步骤 0 和下一节）
HTML 工件包含所有内容：p5.js（来自 CDN）、算法、参数控件和 UI——全部在一个文件中，可在 claude.ai 工件或任何浏览器中立即运行。从模板文件开始，而非从头开始。
提醒：应已阅读 templates/viewer.html（参见步骤 0）。将该文件作为起点。
为了允许探索生成艺术，创建一个单一、自包含的 HTML 工件。确保此工件可在 claude.ai 或任何浏览器中立即运行——无需设置。将所有内容内嵌。
templates/viewer.html 文件是基础。它包含所需的确切结构和样式。
固定的（始终完全按所示包含）：
- 布局结构（页眉、侧边栏、主画布区域）
- Anthropic 品牌标识（UI 颜色、字体、渐变）
- 侧边栏中的种子部分：
- 种子显示
- 上一个/下一个按钮
- 随机按钮
- 跳转到种子输入 + 前往按钮
- 侧边栏中的操作部分：
- 重新生成按钮
- 重置按钮
可变的（为每个艺术作品自定义）：
- 整个 p5.js 算法（setup/draw/类）
- 参数对象（定义艺术需要什么）
- 侧边栏中的参数部分：
- 参数控件的数量
- 参数名称
- 滑块的最小值/最大值/步长值
- 控件类型（滑块、输入框等）
- 颜色部分（可选）：
- 某些艺术需要颜色选择器
- 某些艺术可能使用固定颜色
- 某些艺术可能是单色的（不需要颜色控件）
- 根据艺术需求决定
每个艺术作品都应具有独特的参数和算法！ 固定部分提供一致的 UX——其他所有部分都表达独特的愿景。
1. 参数控件
- 用于数值参数的滑块（粒子数量、噪声尺度、速度等）
- 用于调色板颜色的颜色选择器
- 参数更改时实时更新
- 重置按钮以恢复默认值
2. 种子导航
- 显示当前种子编号
- “上一个”和“下一个”按钮以循环浏览种子
- “随机”按钮用于随机种子
- 输入字段以跳转到特定种子
- 请求时生成 100 个变体（种子 1-100）
3. 单个工件结构
<!DOCTYPE html>
<html>
<head>
<!-- 来自 CDN 的 p5.js - 始终可用 -->
<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. 种子（固定） - 始终完全按所示包含：
- 种子显示
- 上一个/下一个/随机/跳转按钮
2. 参数（可变） - 为艺术创建控件：
<div class="control-group">
<label>参数名称</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 控件
- 重新生成、重置、下载按钮必须工作
- 保持 Anthropic 品牌标识（UI 样式，而非艺术颜色）
HTML 工件可立即运行：
1. 在 claude.ai 中：显示为交互式工件——立即运行
2. 作为文件：保存并在任何浏览器中打开——无需服务器
3. 分享：发送 HTML 文件——它完全自包含
工件默认包含种子导航（上一个/下一个/随机按钮），允许用户无需创建多个文件即可探索变体。如果用户希望突出显示特定变体：
这就像从同一块版上创建一系列版画——算法是一致的，但每个种子都揭示了其潜力的不同方面。交互性质意味着用户通过探索种子空间来发现他们自己的最爱。
用户请求 → 算法哲学 → 实现
每个请求都是独特的。该过程涉及：
常量：
- Anthropic 品牌标识（颜色、字体、布局）
- 种子导航（始终存在）
- 自包含的 HTML 工件
其他所有内容都是可变的：
- 算法本身
- 参数
- UI 控件
- 视觉结果
为了获得最佳结果，信任创造力，让哲学指导实现。
此技能包含有用的模板和文档：
templates/viewer.html：所有 HTML 工件的必需起点。
templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。
关键提醒：
- 模板是起点，而非灵感
- **