LearnGraph.online

Appearance

7.11 Algorithmic Art Skill - 生成艺术创作 ​

概述 ​

Algorithmic Art Skill 专门用于使用 p5.js 创建算法艺术，支持种子随机性和交互式参数探索。它将计算美学运动转化为代码表达，创作出独特的生成艺术作品。

适用场景 ​

当用户请求以下内容时使用此 Skill：

  • 使用代码创作艺术
  • 生成艺术（Generative Art）
  • 算法艺术
  • 流场（Flow Fields）
  • 粒子系统

输出格式 ​

  • .md 文件：算法哲学
  • .html 文件：交互式查看器
  • .js 文件：生成算法

创作流程 ​

+------------------------+     +------------------------+
|   Step 1               | --> |   Step 2               |
|   算法哲学创作         |     |   p5.js 实现           |
+------------------------+     +------------------------+
| 输出: .md 文件         |     | 输出: .html + .js      |
| 创建计算美学运动       |     | 交互式生成艺术         |
| 强调涌现行为           |     | 种子控制 + 参数调节    |
+------------------------+     +------------------------+

Step 1: 算法哲学创作 ​

核心理解 ​

  • 输入：用户的微妙指令作为基础
  • 输出：一个算法哲学/生成美学运动
  • 下一步：用代码表达哲学——90% 算法生成，10% 必要参数

哲学应强调的维度 ​

  • 计算过程、涌现行为、数学之美
  • 种子随机性、噪声场、有机系统
  • 粒子、流动、场、力
  • 参数变化和受控混沌

哲学命名示例 ​

名称核心概念
"Organic Turbulence"有机湍流
"Quantum Harmonics"量子和声
"Emergent Stillness"涌现静谧
"Recursive Whispers"递归低语
"Field Dynamics"场动力学

哲学示例 ​

"Organic Turbulence"（有机湍流） ​

哲学：被自然法则约束的混沌，从无序中涌现秩序。

算法表达：由分层 Perlin 噪声驱动的流场。数千粒子沿向量力流动，轨迹累积成有机密度图。多层噪声八度创造湍流区域和平静区域。颜色来自速度和密度——快速粒子燃烧明亮，慢速粒子淡入阴影。算法运行直到平衡——一个经过无数次迭代精心调优的平衡点，由计算美学大师完成。

"Quantum Harmonics"（量子和声） ​

哲学：离散实体展现波状干涉图案。

算法表达：在网格上初始化粒子，每个携带一个通过正弦波演化的相位值。当粒子接近时，它们的相位干涉——相长干涉产生明亮节点，相消干涉产生空隙。简单的简谐运动生成复杂的涌现曼陀罗。精心校准频率的成果，每个比率都经过精心选择以产生共振之美。

"Recursive Whispers"（递归低语） ​

哲学：跨尺度的自相似性，有限空间中的无限深度。

算法表达：递归细分的分支结构。每个分支轻微随机化但受黄金比例约束。L-系统或递归细分生成既数学又有机的树状形态。微妙的噪声扰动打破完美对称。线宽随递归级别递减。每个分支角度都是深度数学探索的产物。

Step 2: p5.js 实现 ​

技术要求 ​

种子随机性（Art Blocks 模式） ​

javascript
// 始终使用种子以保证可重现性
let seed = 12345;
randomSeed(seed);
noiseSeed(seed);

参数结构 ​

javascript
let params = {
  seed: 12345,           // 始终包含种子
  // 根据算法需要添加参数：
  // - 数量（多少个？）
  // - 尺度（多大？多快？）
  // - 概率（多可能？）
  // - 比率（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（何时行为改变？）
};

核心算法设计思路 ​

如果哲学关于...考虑使用...
有机涌现随时间累积或生长的元素、受自然规则约束的随机过程、反馈循环和交互
数学之美几何关系和比率、三角函数和和声、精确计算创造意外图案
受控混沌严格边界内的随机变化、分岔和相变、从无序中涌现秩序

画布设置 ​

javascript
function setup() {
  createCanvas(1200, 1200);
  // 初始化系统
}

function draw() {
  // 生成算法
  // 可以是静态 (noLoop) 或动画
}

工艺要求 ​

  • 平衡：复杂但不视觉噪音，有序但不僵硬
  • 色彩和谐：深思熟虑的调色板，不是随机 RGB 值
  • 构图：即使在随机中，保持视觉层次和流动
  • 性能：流畅执行，如果动画则优化实时性能
  • 可重现性：相同种子始终产生相同输出

交互式 Artifact 创建 ​

固定 vs 可变部分 ​

固定部分（始终保持）：

  • 布局结构（头部、侧边栏、主画布区域）
  • Anthropic 品牌（UI 颜色、字体、渐变）
  • 种子控制区：种子显示、上一个/下一个/随机/跳转按钮
  • 操作区：重新生成、重置、下载 PNG

可变部分（每个作品自定义）：

  • 整个 p5.js 算法
  • 参数对象
  • 参数控制区的滑块和输入
  • 颜色区（可选）

必需功能 ​

1. 参数控制 ​

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>

2. 种子导航 ​

  • 显示当前种子号
  • "上一个"和"下一个"按钮循环种子
  • "随机"按钮获取随机种子
  • 输入框跳转到特定种子
  • 请求时生成 100 个变体（种子 1-100）

3. 单一 Artifact 结构 ​

html
<!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>
    // 所有 p5.js 代码内联
    // 参数对象、类、函数
    // setup() 和 draw()
    // UI 处理程序
  </script>
</body>
</html>

变体与探索 ​

Artifact 默认包含种子导航，允许用户无需创建多个文件即可探索变体。

如果用户想要突出特定变体：

  • 包含种子预设（"变体 1: 种子 42"、"变体 2: 种子 127"等按钮）
  • 添加"画廊模式"并排显示多个种子的缩略图
  • 全部在同一个单一 artifact 中

流场示例代码 ​

javascript
// 流场生成艺术示例
let particles = [];
let flowField;
let cols, rows;
let scl = 20;
let zoff = 0;

function setup() {
  createCanvas(1200, 1200);
  cols = floor(width / scl);
  rows = floor(height / scl);
  flowField = new Array(cols * rows);

  for (let i = 0; i < 1000; i++) {
    particles.push(new Particle());
  }
  background(255);
}

function draw() {
  // 生成流场
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      let index = x + y * cols;
      let angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      let v = p5.Vector.fromAngle(angle);
      v.setMag(1);
      flowField[index] = v;
      xoff += 0.1;
    }
    yoff += 0.1;
  }
  zoff += 0.003;

  // 更新并显示粒子
  for (let particle of particles) {
    particle.follow(flowField);
    particle.update();
    particle.edges();
    particle.show();
  }
}

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxspeed = 4;
    this.prevPos = this.pos.copy();
  }

  follow(vectors) {
    let x = floor(this.pos.x / scl);
    let y = floor(this.pos.y / scl);
    let index = x + y * cols;
    let force = vectors[index];
    this.applyForce(force);
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  show() {
    stroke(0, 5);
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  }

  updatePrev() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }

  edges() {
    if (this.pos.x > width) { this.pos.x = 0; this.updatePrev(); }
    if (this.pos.x < 0) { this.pos.x = width; this.updatePrev(); }
    if (this.pos.y > height) { this.pos.y = 0; this.updatePrev(); }
    if (this.pos.y < 0) { this.pos.y = height; this.updatePrev(); }
  }
}

总结 ​

Algorithmic Art Skill 提供了创建生成艺术的完整方法论：

两步流程：

  1. 创建算法哲学（.md）
  2. p5.js 实现（.html + .js）

核心原则：

  • 过程优于产品——美在于算法执行
  • 种子随机性——相同种子产生相同结果
  • 参数化表达——通过数学关系表达想法

技术要点：

  • 使用种子控制随机性
  • 设计有意义的参数
  • 创建交互式 UI 控制
  • 保持 Anthropic 品牌风格

工艺标准：

  • 看起来像花费无数小时开发
  • 由生成艺术大师精心调优
  • 每个参数都经过深思熟虑

这个 Skill 将 Claude 转变为一个计算艺术家，能够创作出活着呼吸的算法——每次运行都独一无二，但都源于同一个精心设计的哲学。

基于 MIT 许可证发布。内容版权归作者所有。

Copyright © 2025-present 王几行XING（Bryce Wang）