Logoclaudeskills文档

Algorithmic Art 算法艺术

面向 Claude 的 Agent Skill 指南，教你用 p5.js、种子化随机、参数控制打造可复现的生成艺术工作流。

来源：基于 anthropics/skills（MIT）内容改写。

算法哲学是一种由计算审美运动延伸出的思想，并最终通过代码落地。需要输出 .md 文件（哲学陈述）、.html 文件（交互式预览）以及 .js 文件（生成算法）。

整个流程分为两步：

  1. 创作算法哲学（.md 文件）
  2. 以 p5.js 生成艺术诠释哲学（.html + .js 文件）

首先，请完成以下任务：

算法哲学创作

先创作一份 算法哲学（Algorithmic Philosophy），而非静态图像或模板。后续将通过以下路径被实现：

  • 计算过程、涌现行为、数学之美
  • 种子随机、噪声场、类自然系统
  • 粒子、流体、力场与作用力
  • 参数化变化与可控的混沌

核心认知

  • 输入是什么：用户可能会提供一些微妙的提示或说明，作为灵感基础，但绝不能束缚创作自由。
  • 产出是什么：一套算法哲学 / 生成美学流派。
  • 下一步做什么：同一轮次的 Claude 会读取这份哲学，并 用代码实现 —— 编写 p5.js 草图，其中 90% 取决于算法生成，10% 由关键参数驱动。

建议采取如下方式：

  • 先写一份生成艺术流派的宣言（manifesto）
  • 下一阶段再撰写算法，让哲学具象化

哲学必须强调：算法表达、涌现行为、计算之美、种子化变化。

如何撰写算法哲学

为流派命名（1-2 个词）：如 “Organic Turbulence”“Quantum Harmonics”“Emergent Stillness”。

阐述哲学（4-6 个段落，简练但完整）：

为了捕捉算法本质，需要说明该哲学如何通过以下维度显现：

  • 计算过程与数学关系？
  • 噪声函数与随机模式？
  • 粒子行为与力场动态？
  • 时间演化与系统状态？
  • 参数化变化与涌现复杂度？

关键准则：

  • 避免冗余：每个算法要素只出现一次。不要重复描述噪声理论、粒子动力学或数学原理，除非能引入新的深度。
  • 反复强调匠心：哲学必须多次强调最终算法看起来仿佛耗费漫长时间打磨，经过细心迭代，出自行业顶尖高手之手。重复使用类似表述：“精雕细琢的算法”“深厚计算专业带来的成果”“历经痛苦优化”“大师级实现”等。
  • 保留自由空间：在指出算法方向时保持具体，但仍要给下一位 Claude 留出诠释空间，以便其用极高水准的匠心完成实现。

哲学要引导下一轮在 算法层面 刻画创意，而非输出静态图像。美感蕴于过程，而非最终截图。

哲学示例

“Organic Turbulence” 哲学：受自然法则约束的混沌，从无序中生长出秩序。 算法表达：使用多层 Perlin 噪声驱动流场。上千个粒子沿向量力场运动，轨迹叠加形成有机密度分布。多阶噪声叠加制造湍流区与平静区。颜色依据速度与密度生成——高速粒子燃烧般明亮，低速则近似阴影。算法运行至达到平衡：这是大师级计算美学家历经无数次调试所得的精密配置。

“Quantum Harmonics” 哲学：离散实体呈现波动干涉图样。 算法表达：粒子初始化在网格上，并携带随时间演化的相位值。粒子靠近时发生干涉——相干带来亮点，相消造就空洞。简单的简谐运动生成复杂的涌现曼陀罗。每个频率比例都经过痛心调校，保证共鸣之美。

“Recursive Whispers” 哲学：跨尺度的自相似，在有限空间中展现无穷深度。 算法表达：递归分支结构。每个分支略带随机，但受黄金比例约束。可用 L-system 或递归细分生成既数学又自然的树状形体。轻微噪声扰动打破完美对称。随着递归层数递增，线条逐渐变细。每个分叉角度都经过深度数学探索。

“Field Dynamics” 哲学：让不可见的力通过对物质的影响显形。 算法表达：使用数学函数或噪声构建向量场，生成粒子所感知的无形流动。积分线揭示力的路径。速度与加速度映射成颜色。压力随密度变化，用于塑造局部结构。所有参数均通过反复实验校准，以呈现精心雕琢的效果。

接下来由同一轮 Claude 把哲学统统转写为代码。

生成艺术实现（实现阶段）

实现阶段需要输出一个可交互的 HTML artifact（单文件）。文件内部包含：

  • Anthropic 风格 UI（品牌色、布局、Seed 控件）
  • 内联的 p5.js 代码（运行在 <script type="module"> 中）
  • 参数控制面板（使用 <input type="range"> 等控件）
  • 支持种子浏览、参数调整、再生成、PNG 下载

实现流程

  1. 读取哲学：理解生成逻辑、核心机制、视觉特征。
  2. 初始化种子系统：
    • 使用 let seed = ...;
    • 编写 setSeed(newSeed) 重置随机状态。
    • 使用 randomSeed(seed); noiseSeed(seed); 保证可复现性。
  3. 定义参数：
    • 用一个对象保存参数及默认值（const parameters = {...}）。
    • 创建 updateParam 函数并与 UI 控件绑定。
    • 所有参数均应在 draw() 中实时生效。
  4. 构建 UI：使用模板提供的结构生成侧边栏、参数控件、颜色选择器（视需求）等。
  5. 实现主算法：根据哲学设计核心生成逻辑，重点突出算法匠心。
  6. 实现交互：种子按钮（Prev / Next / Random / Jump）、再生成、重置、PNG 下载全部要可用。

种子系统规范

let seed = 12345;

function setSeed(newSeed) {
  seed = newSeed;
  randomSeed(seed);
  noiseSeed(seed);
}
  • randomSeed 与 noiseSeed 必须一起调用。
  • 存储 seed，并在 UI 上展示当前值。
  • prev/next/random/jump 都要调用 setSeed()，然后触发 regenerate()。
  • 使用 floor(random(1000000)) 来生成新 seed。

参数管理模式

const parameters = {
  particleCount: { value: 1500, min: 500, max: 5000, step: 50 },
  flowScale: { value: 0.0025, min: 0.0005, max: 0.01, step: 0.0005 },
  lineOpacity: { value: 40, min: 10, max: 120, step: 1 }
};

function updateParam(key, value) {
  const param = parameters[key];
  const numericValue = Number(value);
  param.value = numericValue;

  const display = document.getElementById(`${key}-value`);
  if (display) display.textContent = numericValue.toFixed(3).replace(/\.?0+$/, '');

  regenerate();
}
  • 所有参数都放在 parameters 对象中。
  • updateParam 函数负责更新值并刷新界面。
  • 控件应使用 <input type="range">，并配合 <span> 显示当前值。

Antropic 品牌 UI

侧边栏必须遵循模板中的结构，保持品牌色、渐变背景、字体等。不允许：

  • 改动品牌色或渐变
  • 重新排版 Seed 控件或 Action 按钮
  • 移除顶部标题或描述

可以：

  • 添加适量参数控件
  • 依据算法需求决定是否加入颜色调节
  • 在行动区内添加额外按钮（如“保存设置”），前提是不破坏既有功能

代码组织建议

class FlowField {
  constructor(config) { ... }
  update() { ... }
  draw() { ... }
}

function setup() {
  createCanvas(900, 520);
  setSeed(seed);
  setupControls();
  regenerate();
}

function regenerate() {
  clear();
  background("#050009");
  const config = getConfigFromParameters();
  const field = new FlowField(config);
  field.run();
}
  • 使用类或模块化函数来分离逻辑。
  • setup() 初始化 canvas、UI 与 seed。
  • regenerate() 读取参数、重新运行算法。
  • 保持代码结构清晰、可维护。

技术细节

  1. Canvas 设置：保留 900 x 520 尺寸（或根据哲学适当调整）。
  2. 颜色：可使用 color() 或 HSB 模式。若需要让用户更改颜色，请在侧边栏增加颜色选择器。
  3. 性能考量：
    • 控制粒子数量（建议 < 5000）
    • 使用离屏 buffer（createGraphics）减少重绘
    • 对噪声函数做缓存
  4. 导出功能：saveCanvas(canvas, filename, 'png')
  5. 工具提示：在参数标签或描述中说明用途，帮助用户理解。

  1. Seed（固定）

    • Seed 显示
    • Prev / Next / Random / Jump 按钮

  2. Parameters（可变）

    • 使用 <div class="control-group"> 结构
    • 每个参数含 label、range 输入与数值显示

  3. Colors（可选）

    • 若需要颜色调节，则加入颜色选择器
    • 若颜色固定或单色，可省略

  4. Actions（固定）

    • Regenerate
    • Reset
  • Download PNG

所有按钮都必须可用。保留 Anthropic 品牌样式。

使用 Artifact

生成的 HTML 文件开箱即用：

  1. 在 claude.ai 中：作为 Artifact 即刻运行。
  2. 本地浏览：保存后直接用浏览器打开，无需服务器。
  3. 分享：发送 HTML 单文件即可，完全自包含。

变体与探索

Artifact 默认提供 Seed 导航（Prev / Next / Random 按钮），用户可在单文件中探索多种变体。若用户想突出特定版本：

  • 提供预设种子按钮（如 “Variation 1: Seed 42”）
  • 增加 “Gallery Mode”，并排展示多组 Seed 缩略图
  • 全部收纳于同一个 Artifact 中

这类似制作同一版画的多张印刷品：算法保持一致，但不同种子揭示出潜力的不同切面。交互式探索让用户找到心仪的效果。

创作流程回顾

用户需求 -> 算法哲学 -> 代码实现

每次请求都独一无二。流程包括：

  1. 解析用户意图——想要怎样的审美？
  2. 撰写算法哲学（4-6 段）——描述计算方法
  3. 用代码实现哲学——让理念真正“运行”
  4. 设计参数控制——哪些数值需要可调？
  5. 搭建 UI 控件——为上述参数配备滑块 / 输入框

恒定不变的部分：

  • Anthropic 品牌样式（颜色、字体、布局）
  • 种子导航控件（必须存在）
  • 自包含的 HTML Artifact

允许变化的部分：

  • 具体算法
  • 参数列表
  • UI 控件布局
  • 可视化效果

要获得最佳结果，请信任创造力，让哲学引导实现。

GitHub 访问

在 GitHub 查看

Agent Skills 学习与案例库

Claude agent skills 的学习笔记与可复用案例集。

Canvas Design 视觉画布

Agent Skill 参考：利用精选字体、配色系统与现成资产模板，设计高质感的营销画布。