| name | algorithmic-art |
| description | 使用 p5.js 创作带有种子随机性和交互式参数探索的算法艺术。当用户请求使用代码创作艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术，而非复制现有艺术家的作品，以避免侵犯版权。 |
| license | 完整条款见 LICENSE.txt |
算法哲学是计算美学运动，通过代码来表达。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
这分为两个步骤：
- 算法哲学创作（.md 文件）
- 通过创作 p5.js 生成艺术来表达（.html + .js 文件）
首先，执行此任务：
算法哲学创作
首先，创造一个将通过以下方式诠释的算法哲学（而非静态图像或模板）：
- 计算过程、涌现行为、数学之美
- 种子随机性、噪声场、有机系统
- 粒子、流、场、力
- 参数化变体与受控混沌
关键理解
- 接收内容：用户提供的一些微妙输入或指令，应作为基础参考，但不应限制创作自由。
- 创作内容：一个算法哲学/生成美学运动。
- 后续步骤：同一版本接收该哲学并以代码形式表达——创作出 90% 为算法生成、10% 为核心参数的 p5.js 草图。
可以考虑这种方法：
- 为一个生成艺术运动撰写一份宣言
- 下一阶段涉及编写实现该宣言的算法
该哲学必须强调：算法表达。涌现行为。计算之美。种子变体。
如何生成算法哲学
为运动命名（1-2 个词）："Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
阐明哲学（4-6 段——简洁但完整）：
为了捕捉算法的精髓，请表达该哲学如何通过以下方式体现：
- 计算过程和数学关系？
- 噪声函数和随机模式？
- 粒子行为和场动力学？
- 时间演化和系统状态？
- 参数化变体和涌现复杂性？
关键指南：
- 避免冗余：每个算法方面应只提及一次。避免重复关于噪声理论、粒子动力学或数学原理的概念，除非能增加新的深度。
- 反复强调工艺：哲学必须多次强调，最终的算法应看起来像是经过无数小时开发、精心提炼，并出自该领域绝对顶尖的专家之手。这种定位至关重要——重复使用“精心打造的算法”、“深厚计算专业知识的产物”、“煞费苦心的优化”、“大师级的实现”等短语。
- 留出创作空间：在算法方向上要具体，但要足够简洁，以便下一个 Claude 能在极高工艺水平上进行诠释性的实现选择。
哲学必须指导下一个版本以算法方式表达思想，而不是通过静态图像。美存在于过程中，而非最终画面。
哲学示例
"Organic Turbulence"
哲学：受自然法则约束的混沌，从无序中涌现的秩序。
算法表达：由分层 Perlin 噪声驱动的流场。成千上万的粒子遵循矢量力，其轨迹累积成有机的密度图。多个噪声八度创造出湍流区域和平静区域。颜色源于速度和密度——快速粒子燃烧得明亮，慢速粒子淡入阴影。算法运行直至达到平衡——这是一个精心调校的平衡点，每个参数都由一位计算美学大师经过无数次迭代提炼而成。
"Quantum Harmonics"
哲学：表现出波状干涉模式的离散实体。
算法表达：在网格上初始化的粒子，每个粒子携带一个通过正弦波演化的相位值。当粒子靠近时，它们的相位会发生干涉——相长干涉产生亮点，相消干涉产生空洞。简谐运动生成复杂的涌现曼荼罗。这是煞费苦心进行频率校准的结果，其中每个比率都经过精心选择，以产生共鸣之美。
"Recursive Whispers"
哲学：跨尺度的自相似性，有限空间中的无限深度。
算法表达：递归细分的分支结构。每个分支都略有随机化，但受黄金比例约束。L-systems 或递归细分生成既有数学感又有有机感的树状形态。微妙的噪声扰动打破了完美的对称性。线条粗细随每个递归层级递减。每个分支角度都是深入数学探索的产物。
"Field Dynamics"
哲学：通过对物质的影响使无形之力可见。
算法表达：由数学函数或噪声构建的矢量场。粒子在边缘诞生，沿着场线流动，在达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示轨迹——无形之力的鬼魅般证据。这是一场通过力平衡精心编排的计算之舞。
"Stochastic Crystallization"
哲学：随机过程结晶成有序结构。
算法表达：随机化的圆堆积或 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 或任何浏览器中工作——无需任何设置。将所有内容内联嵌入。
关键：固定与可变内容
templates/viewer.html 文件是基础。它包含了所需的确切结构和样式。
固定（始终按所示内容原样包含）：
- 布局结构（页眉、侧边栏、主画布区域）
- Anthropic 品牌标识（UI 颜色、字体、渐变）
- 侧边栏中的种子部分：
- 种子显示
- 上一个/下一个按钮
- 随机按钮
- 跳转到种子输入框 + Go 按钮
- 侧边栏中的操作部分：
可变（为每个艺术品定制）：
- 整个 p5.js 算法（setup/draw/类）
- 参数对象（定义艺术品需要什么）
- 侧边栏中的参数部分：
- 参数控件的数量
- 参数名称
- 滑块的最小值/最大值/步长
- 控件类型（滑块、输入框等）
- 颜色部分（可选）：
- 有些艺术品需要颜色选择器
- 有些艺术品可能使用固定颜色
- 有些艺术品可能是单色的（不需要颜色控件）
- 根据艺术品的需求决定
每个艺术品都应该有独特的参数和算法！ 固定部分提供一致的用户体验——其他所有部分则表达独特的愿景。
必要功能
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 品牌标识
