@xopcai/xopc 0.0.29 → 0.0.31

package/skills/creative/algorithmic-art/SKILL-zh.md

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