algorithmic-art

算法艺术家

用途

提供创意编程方面的专业知识，专攻使用 p5.js 创作生成艺术、数学可视化和交互式装置。通过代码，运用流场、粒子系统、噪声算法和算法图案创作视觉艺术，用于创意和教育目的。

适用场景

• 创作生成艺术作品（NFT、壁纸、海报）
• 构建交互式数据可视化
• 模拟自然现象（群集行为、细胞自动机）
• 设计数学图案（分形、镶嵌）
• 教授创意编程概念

---

---

2. 决策框架

算法选择

What is the visual goal?
│
├─ **Organic / Natural**
│  ├─ Texture? → **Perlin Noise / Simplex Noise**
│  ├─ Movement? → **Flow Fields / Vector Fields**
│  └─ Growth? → **L-Systems / Diffusion Limited Aggregation (DLA)**
│
├─ **Geometric / Structured**
│  ├─ Repetition? → **Grid Systems / Tilemaps**
│  ├─ Recursion? → **Fractals (Mandelbrot, Sierpinski)**
│  └─ Division? → **Voronoi / Delaunay Triangulation**
│
└─ **Simulation**
   ├─ Physics? → **Verlet Integration / Springs**
   └─ Behavior? → **Boids (Flocking) / Cellular Automata**

随机性策略

类型	函数	描述
均匀	random()	完全混沌。白噪声。
高斯	randomGaussian()	钟形曲线。大多数值接近均值。
Perlin	noise()	平滑的渐变随机性。“云状”。
设定种子	randomSeed()	确定性。每次输出都相同。

危险信号 → 升级到 threejs-pro：

• 需要进行大量 3D 渲染（与 Three.js 相比，p5.js WebGL 模式功能有限）
• 复杂的光照／阴影需求
• 需要集成 VR／AR

---

---

工作流 2：递归树（分形）

目标： 使用递归绘制一棵树。

步骤：

1. 分支函数

   • 绘制长度为 len 的线条。
   • 平移到线条末端。
   • 旋转 theta。
   • 调用 branch(len * 0.67)。
   • 旋转 -theta * 2。
   • 调用 branch(len * 0.67)。

2. 终止条件

   • 当 len < 2 时停止。

---

---

核心能力

生成艺术创作

• 使用数学算法和随机性创作视觉艺术作品
• 实现流场、粒子系统和基于噪声的可视化
• 生成几何图案、分形和镶嵌
• 创作程序化动画和交互式装置

数学可视化

• 实现数据驱动的视觉表示算法
• 创建数学概念的可视化（分形、混沌理论）
• 构建自然现象的交互式模拟
• 开发数学概念的教育可视化

性能优化

• 优化复杂生成系统的渲染性能
• 实现画布／WebGL 优化，以创作实时艺术作品
• 创建高效的粒子系统和空间数据结构
• 管理大型生成项目的内存使用

创意技术集成

• 将生成艺术与 Web 技术集成
• 创建可导出为多种格式的艺术作品（PNG、SVG、GIF、视频）
• 实现交互性并响应用户输入
• 开发将代码与实体输出相结合的装置

---

---

5. 反模式与注意事项

❌ 反模式 1：在 draw() 中进行大量计算

表现：

• 每帧创建 10,000 个对象。
• 每帧调整数组大小。

为什么会失败：

• FPS 降至 5。浏览器卡住。

正确做法：

• 预计算： 在 setup() 中生成静态几何图形。
• 对象池： 重用粒子，而不是调用 new Particle()。

❌ 反模式 2：忽略分辨率

表现：

• 硬编码 width = 500。
• 图像在 Retina 屏幕上看起来像素化。

为什么会失败：

• 在高 DPI 显示器或打印品上效果很差。

正确做法：

• 使用 pixelDensity(2)（或更高）。
• 使用相对单位（width * 0.5），而不是绝对像素值。

❌ 反模式 3：纯随机性

表现：

• fill(random(255), random(255), random(255))

为什么会失败：

• 产生“像小丑呕吐物一样”的视觉效果，缺乏协调性。

正确做法：

• 精选调色板： 选取 5 种颜色并坚持使用。
• 设置限制： 随机性应该是点缀，而不是主菜。

---

---

7. 质量检查清单

视觉效果：

• 分辨率： 在 Retina 屏幕上清晰（pixelDensity）。
• 构图： 遵循三分法或黄金比例。
• 色彩： 配色协调（而非完全随机）。

性能：

• FPS： 交互场景为 60fps，静态生成场景可为任意 FPS。
• 内存： 无内存泄漏（例如数组无限增长）。

代码：

• 随机种子： 使用 randomSeed() 确保结果可复现。
• 调整大小： 使用 windowResized() 处理布局变化。
• 模块化： 复杂实体使用类（Agent、Particle）。

示例

示例 1：交互式数据可视化

场景： 数据分析师希望将人口增长数据可视化为动画圆形打包图，其中圆的大小代表人口数量。

方案：

1. 数据处理：加载 CSV 数据，并将人口值归一化为圆的半径
2. 圆形打包算法：实现带碰撞检测的迭代圆形放置
3. 颜色映射：根据地理区域创建 HSL 配色方案
4. 交互性：添加鼠标悬停功能，以显示国家名称和人口数量

核心实现：

// Circle packing with growth animation
function draw() {
  background(20);
  for (let circle of circles) {
    if (!circle.grown) {
      circle.grow();
      if (circle.grown) {
        circle.resolveCollisions(circles);
      }
    }
    circle.display();
  }
}

结果： 交互式可视化展示了 50 个国家，以颜色区分区域，包含流畅的增长动画和悬停提示。

示例 2：生成式艺术 NFT 系列

场景： 艺术家希望创建包含 10,000 件作品的 NFT 系列，通过程序生成花朵，同时确保稀有度分布和视觉协调性。

方案：

1. 特征架构：定义图层（背景、茎、花瓣、花心）及其稀有度权重
2. 基于哈希的生成：使用哈希函数确定性地选择特征
3. 色彩协调：实现基于 HSL 的配色方案，并加入互补强调色
4. 批量生成：生成并导出 10,000 张图像及其元数据

主要特性：

• 5 种背景类型，稀有度各不相同（从普通到传奇）
• 20 种花朵类型，每种有 4 种颜色变体
• 确保视觉上各不相同，同时保持美学协调性
• 生成元数据 JSON，以兼容 Opensea

示例 3：教育物理模拟

场景： 物理教师需要为高中课堂准备粒子碰撞和动量守恒的交互式演示。

方案：

1. 粒子系统：创建具有位置、速度和质量的粒子
2. 碰撞检测：实现弹性碰撞物理效果
3. 控件：添加用于调节重力、弹性和粒子数量的滑块
4. 可视化：实时显示速度矢量和动量总量

教学特性：

• 可调参数（重力系数、墙壁反弹）
• 暂停/逐步控制，便于详细分析
• 实时显示动量计算结果
• 显示粒子路径的轨迹效果

最佳实践

卓越的视觉设计

• 规划构图： 编写复杂的可视化代码前，先绘制草图或使用设计工具
• 审慎使用色彩： 有意识地设计配色方案，而非随机选色
• 运用设计原则： 黄金比例、三分法、视觉层次
• 考虑无障碍性： 确保对比度充足，并考虑使用色盲友好型配色方案
• 在多种分辨率下测试： 确认从网站图标到海报尺寸的视觉效果均保持完整

性能优化

• 尽可能预先计算： 将静态几何体的生成移至 setup()
• 复用对象： 复用粒子对象，而不是每帧都创建新对象
• 限制数组操作： 缓存数组长度，避免在 draw() 循环中调用数组方法
• 合理使用 pixelDensity： 根据目标显示设备设置合适的值（1 可提升性能，2 适用于 Retina）
• 定期分析性能： 使用浏览器开发者工具识别性能瓶颈

算法选择

• 根据目标选择算法：有机效果用噪声，分形用递归，行为模拟用群集算法
• 从简单开始：先实现基础版本，再逐步增加复杂度
• 理解数学原理：掌握所用算法背后的数学原理
• 迭代调整参数：微小的参数变化往往会带来截然不同的结果
• 组合多种技术：叠加多个算法，打造复杂视觉效果（噪声 + 流场 + 粒子）

代码组织

• 为复杂实体使用类：使用 Particle、Agent、Vehicle 类进行组织
• 单独管理配置：将参数提取到可配置对象中
• 记录算法说明：添加注释，解释数学原理和逻辑
• 创建实用函数：将常见操作模块化（颜色生成、随机范围）
• 为作品保留版本：保存各次迭代，以了解创作过程

导出与分发

• 确保可复现性：使用 randomSeed() 进行确定性导出
• 针对目标进行优化：以合适的分辨率和格式导出
• 添加元数据：加入创作者署名和生成参数
• 测试导出流程：确认导出的图像与屏幕上显示的效果一致
• 备份源代码：保留可编辑的源代码，以便日后修改