| name | algorithmic-art |
| description | 使用 p5.js 创建具有确定性随机和交互式参数探索的算法艺术。当用户请求使用代码创作艺术、生成式艺术、算法艺术、流场或粒子系统时使用此技能。创建原创的算法艺术而非复制现有艺术家的作品，以避免版权侵犯。 |
| license | 完整条款见 LICENSE.txt |
算法哲学是计算美学运动，通过代码来表达。输出 .md 文件（哲学理念）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
这分为两个步骤：
- 算法哲学创建（.md 文件）
- 通过创建 p5.js 生成式艺术来表达（.html + .js 文件）
首先，执行此任务：
算法哲学创建
首先，创建一个算法哲学（而非静态图像或模板），该哲学将通过以下方式诠释：
- 计算过程、涌现行为、数学之美
- 确定性随机、噪声场、有机系统
- 粒子、流、场、力
- 参数化变化和受控混沌
核心理解
- 收到什么：用户提供的一些细微输入或指示作为参考，但应作为基础；不应限制创意自由。
- 创建什么：一个算法哲学/生成式美学运动。
- 接下来发生什么：同一个版本接收该哲学并用代码表达它 - 创建 90% 算法生成、10% 基本参数的 p5.js 作品。
考虑这种方法：
- 为生成式艺术运动撰写宣言
- 下一阶段涉及编写让它活起来的算法
该哲学必须强调：算法表达。涌现行为。计算之美。确定性变化。
如何生成算法哲学
命名运动（1-2 个词）："有机湍流" / "量子和声" / "涌现静谧"
阐述哲学（4-6 段 - 简洁但完整）：
为了捕捉算法本质，表达该哲学如何通过以下方式体现：
- 计算过程和数学关系？
- 噪声函数和随机模式？
- 粒子行为和场动力学？
- 时间演化和系统状态？
- 参数化变化和涌现复杂性？
关键准则：
- 避免冗余：每个算法方面应只提及一次。避免重复关于噪声理论、粒子动力学或数学原理的概念，除非添加新的深度。
- 反复强调工艺：哲学必须多次强调最终算法应看起来像是花费了无数小时开发、精心打磨，并来自该领域绝对顶尖的人。这种框架至关重要 - 重复使用"精心制作的算法"、"深厚计算专业知识的产物"、"精益求精的优化"、"大师级实现"等短语。
- 留出创意空间：对算法方向要具体，但要足够简洁，让下一个 Claude 有空间在极高的工艺水平上做出诠释性实现选择。
该哲学必须引导下一个版本以算法方式表达想法，而非通过静态图像。美存在于过程中，而非最终帧。
哲学示例
"有机湍流"
哲学：受自然法则约束的混沌，秩序从无序中涌现。
算法表达：由多层 Perlin 噪声驱动的流场。数千个粒子沿着矢量力运动，它们的轨迹累积成有机密度图。多个噪声倍频程创建湍流区域和平静区。颜色来自速度和密度 - 快速粒子燃烧明亮，慢速粒子淡化为阴影。算法运行直到达到平衡 - 一个精心调整的平衡，每个参数都经过计算美学大师的无数次迭代精炼。
"量子和声"
哲学：表现出波状干涉模式的离散实体。
算法表达：粒子在网格上初始化，每个携带通过正弦波演化的相位值。当粒子靠近时，它们的相位发生干涉 - 建设性干涉创建明亮节点，破坏性干涉创建空洞。简单谐波运动生成复杂的涌现曼陀罗。这是精心频率校准的结果，每个比率都经过仔细选择以产生共振之美。
"递归低语"
哲学：跨尺度的自相似性，有限空间中的无限深度。
算法表达：递归细分的分支结构。每个分支略微随机化但受黄金比例约束。L 系统或递归细分生成既数学又有机的树状形式。细微的噪声扰动打破完美对称。线条粗细随着每个递归层级而减小。每个分支角度都是深度数学探索的产物。
"场动力学"
哲学：通过对物质的影响使不可见的力可见。
算法表达：由数学函数或噪声构建的矢量场。粒子从边缘诞生，沿着场线流动，当它们达到平衡或边界时死亡。多个场可以吸引、排斥或旋转粒子。可视化只显示轨迹 - 不可见力的幽灵般证据。一场通过力平衡精心编排的计算之舞。
"随机结晶"
哲学：随机过程结晶成有序结构。
算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。单元推开直到平衡。基于单元大小、邻居数量或距中心的距离着色。涌现的有机镶嵌感觉既随机又不可避免。每个种子产生独特的晶体之美 - 大师级生成算法的标志。
这些是浓缩的示例。实际的算法哲学应该是 4-6 个实质性段落。
基本原则
- 算法哲学：创建通过代码表达的计算世界观
- 过程重于产品：始终强调美从算法的执行中涌现 - 每次运行都是独特的
- 参数化表达：想法通过数学关系、力、行为来传达 - 而非静态构图
- 艺术自由：下一个 Claude 以算法方式诠释哲学 - 提供创意实现空间
- 纯生成式艺术：这是关于制作活的算法，而非带有随机性的静态图像
- 专家工艺：反复强调最终算法必须感觉经过精心制作、通过无数次迭代精炼、是计算美学领域绝对顶尖者的深厚专业知识的产物
算法哲学应该是 4-6 段。 用富有诗意的计算哲学填充它，将预期愿景汇集在一起。避免重复相同的要点。将此算法哲学输出为 .md 文件。
推导概念种子
关键步骤：在实现算法之前，识别原始请求中的细微概念线索。
基本原则：
概念是嵌入在算法本身中的细微、小众的引用 - 不总是字面的，总是精致的。熟悉该主题的人应该直观地感受到它，而其他人只是体验到一个精湛的生成式作品。算法哲学提供计算语言。推导形编织到参数、行为和涌现模式中的静谧概念 DNA。
这非常重要：引用必须如此精炼，以至于它在不宣布自己的情况下增强作品的深度。像爵士音乐家通过算法和声引用另一首歌一样思考 - 只有知道的人才会捕捉到它，但每个人都欣赏生成式之美。
P5.JS 实现
有了哲学和概念框架，通过代码表达它。在继续之前暂停收集思绪。仅使用创建的算法哲学和下面的说明。
⚠️ 步骤 0：首先阅读模板 ⚠️
关键：在编写任何 HTML 之前：
- 阅读
templates/viewer.html（使用 Read 工具）
- 学习确切的结构、样式和 Anthropic 品牌
- 将该文件用作字面起点 - 不仅仅是灵感
- 保持所有固定部分完全如所示（标题、侧边栏结构、Anthropic 颜色/字体、种子控件、操作按钮）
- 仅替换文件注释中标记的可变部分（算法、参数、参数的 UI 控件）
避免：
- ❌ 从头创建 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() {
}
工艺要求
关键：要实现精通，创建感觉像是通过大师级生成艺术家的无数次迭代涌现的算法。仔细调整每个参数。确保每个模式都有目的地涌现。这不是随机噪声 - 这是通过深厚专业知识精炼的受控混沌。
- 平衡：复杂性而无视觉噪声，秩序而不僵化
- 色彩和谐：周到的调色板，而非随机 RGB 值
- 构图：即使在随机性中，也保持视觉层次和流动
- 性能：流畅执行，如果动画则优化为实时
- 可重现性：相同种子始终产生相同输出
输出格式
输出：
- 算法哲学 - 作为 markdown 或文本解释生成式美学
- 单个 HTML 工件 - 从
templates/viewer.html 构建的自包含交互式生成艺术（见步骤 0 和下一节）
HTML 工件包含一切：p5.js（从 CDN）、算法、参数控件和 UI - 全部在一个文件中，可在 claude.ai 工件或任何浏览器中立即工作。从模板文件开始，而非从头开始。
交互式工件创建
提醒：应该已经阅读了 templates/viewer.html（见步骤 0）。将该文件用作起点。
为了允许探索生成式艺术，创建一个单一的、自包含的 HTML 工件。确保此工件在 claude.ai 或任何浏览器中立即工作 - 无需设置。内联嵌入所有内容。
关键：什么是固定的 VS 可变的
templates/viewer.html 文件是基础。它包含所需的确切结构和样式。
固定（始终完全按所示包含）：
- 布局结构（标题、侧边栏、主画布区域）
- Anthropic 品牌（UI 颜色、字体、渐变）
- 侧边栏中的种子部分：
- 种子显示
- 上一个/下一个按钮
- 随机按钮
- 跳转到种子输入 + 前往按钮
- 侧边栏中的操作部分：
可变（为每个艺术作品自定义）：
- 整个 p5.js 算法（setup/draw/classes）
- 参数对象（定义艺术所需的内容）
- 侧边栏中的参数部分：
- 参数控件数量
- 参数名称
- 滑块的最小/最大/步长值
- 控件类型（滑块、输入等）
- 颜色部分（可选）：
- 某些艺术需要颜色选择器
- 某些艺术可能使用固定颜色
- 某些艺术可能是单色的（不需要颜色控件）
- 根据艺术的需求决定
每个艺术作品应该有独特的参数和算法！ 固定部分提供一致的用户体验 - 其他一切都表达独特的愿景。
必需功能
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>
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
</div>
<script>
</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. 操作（固定） - 始终完全按所示包含：
要求：
- 种子控件必须工作（上一个/下一个/随机/跳转/显示）
- 所有参数必须有 UI 控件
- 重新生成、重置、下载按钮必须工作
- 保持 Anthropic 品牌（UI 样式，而非艺术颜色）
使用工件
HTML 工件立即工作：
- 在 claude.ai 中：显示为交互式工件 - 立即运行
- 作为文件：保存并在任何浏览器中打开 - 无需服务器
- 分享：发送 HTML 文件 - 它完全自包含
变化与探索
工件默认包含种子导航（上一个/下一个/随机按钮），允许用户探索变化而无需创建多个文件。如果用户想要突出显示特定变化：
- 包含种子预设（"变化 1：种子 42"、"变化 2：种子 127"等的按钮）
- 添加"画廊模式"，并排显示多个种子的缩略图
- 全部在同一个单个工件中
这就像从同一个版上创建一系列印刷品 - 算法是一致的，但每个种子揭示其潜力的不同方面。交互性意味着用户通过探索种子空间发现自己的最爱。
创作过程
用户请求 → 算法哲学 → 实现
每个请求都是独特的。该过程涉及：
- 解释用户意图 - 寻求什么美学？
- 创建算法哲学（4-6 段）描述计算方法
- 在代码中实现 - 构建表达此哲学的算法
- 设计适当的参数 - 什么应该是可调整的？
- 构建匹配的 UI 控件 - 这些参数的滑块/输入
常量：
- Anthropic 品牌（颜色、字体、布局）
- 种子导航（始终存在）
- 自包含的 HTML 工件
其他一切都是可变的：
要实现最佳结果，相信创造力并让哲学指导实现。
资源
此技能包含有用的模板和文档：
关键提醒：
- 模板是起点，而非灵感
- 算法是创建的地方独特的东西
- 不要复制流场示例 - 构建哲学所需的东西
- 但确实保持模板中确切的 UI 结构和 Anthropic 品牌
