L5-04：代码生成艺术 —— 用数学和代码创作独一无二的艺术品

🎯 学什么：不拿画笔，不学 Photoshop，用代码和数学公式生成动态的视觉艺术作品——每一幅都是独一无二的。核心洞察：算法艺术和 AI 图片生成（Midjourney/DALL-E）是两种完全不同的东西——AI 图片生成给你一张「鱼」的图片，你拿到的是不可修改的图片文件；算法艺术给你一段「可以生成鱼的代码」，你可以修改代码把鱼变成红色、让鱼游得快一点、复制 100 条。代码 = 永远可编辑的源文件。 💡 难易度：⭐⭐⭐ | ⏱️ 预计时间：40 分钟

---

1. 课程概览

💡 白话小课堂：假设你是一个画家，但你不是直接画画——你发明了一台「自动画画机器」。你设定好规则（「每次画 100 个圆圈，颜色从红渐变到蓝，圆圈的大小随机但不超过 50px」），然后按一下开关，机器就开始画。每次画出来的都不一样，但都是你规则的产物——这就是算法艺术。

来源：Anthropic 官方 Skills 仓库

---

2. 算法艺术 vs AI 图片生成

2.1 本质区别

算法艺术（algorithmic-art / p5.js / Processing）：
  输入：艺术家定义的规则（代码）
  输出：可修改、可复现的源代码
  特点：
    → 你拿到的是「生成器」，不是「成品」
    → 可以修改参数 → 改变颜色/速度/数量
    → 可以嵌入网页实时渲染
    → 每次运行结果不同但可控

AI 图片生成（Midjourney / DALL-E / Stable Diffusion）：
  输入：自然语言描述
  输出：不可修改的图片文件（PNG/JPG）
  特点：
    → 你拿到的是「成品」，不是「生成器」
    → 想改颜色？重新生成一张
    → 无法嵌入网页动态渲染
    → 同一句 prompt 两次结果完全不同且不可控

2.2 Controlled Randomness：受控的随机

这是算法艺术最核心的概念：

完全随机（Chaos）→ 电视机雪花噪点
  → 无法预测、没有美感、难看

完全确定（Deterministic）→ 钟摆
  → 毫无变化、僵硬的、无聊

受控的随机（Controlled Randomness）→ 风吹过麦田
  → 在自然规律边界内随机变化
  → 每一株麦子摇摆角度不同（随机）
  → 但都在风和物理规律约束内（受控）
  → 整体和谐而有机——美但不混乱

在代码中的体现：
  → randomSeed(42) —— 固定种子确保可复现
  → randomGaussian() —— 用正态分布而非均匀随机（更贴近自然）
  → noise(x, y) —— Perlin Noise 产生连续平滑的随机（而非跳跃的纯随机）

---

3. 五大核心算法技术

3.1 技术全景

技术选型的首要原则：先确定情感意图，再选匹配的技术

五种核心技术：

1. Noise（噪声场）
   → 产生连续、平滑、有机的随机模式
   → Perlin Noise / Simplex Noise
   → 适合表达：自然景观（云朵、地形、水面）、有机纹理、流体运动
   → 视觉特征：没有尖锐的边界，所有过渡都是平滑的

2. Recursion（递归/分形）
   → 自相似——大结构由小结构重复组成
   → 分形树、科赫雪花、谢尔宾斯基三角、L-System
   → 适合表达：生命的秩序与复杂、自然生长（树的枝干、雪花）
   → 视觉特征：放大任何一个局部，都像整体的缩小版

3. Particles（粒子系统）
   → 大量独立个体的群体行为
   → 每个粒子有：位置、速度、加速度、生命周期
   → 适合表达：涌现（鸟群/鱼群/星空）、能量流动、生命群体
   → 视觉特征：动态、有机、整体效果 > 单个粒子

4. Color Algorithm（色彩算法）
   → 用算法生成而非手动选择颜色
   → 颜色渐变插值（Lerp）、HSL 色轮旋转、色彩映射函数
   → 适合表达：情感的渐变、时间的流逝、周期性变化
   → 视觉特征：颜色过渡自然、配色自动和谐

5. Geometry（几何）
   → 精确的数学图形
   → 密铺（Tessellation）、对称、黄金比例、Voronoi 图
   → 适合表达：现代的精确与理性、建筑线图、数学之美
   → 视觉特征：秩序感、精确、干净

3.2 选型决策：创意意图 → 技术匹配

你想让观众感受到什么？→ 选什么技术？

「风的感觉」→ 粒子系统 + Perlin Noise
  → 粒子被噪声驱动的流场推着走
  → 速度过渡平滑、轨迹有机、像风中的花瓣

「生命的秩序」→ 递归分形 + 生物调色板
  → 树的分叉规则（L-System）+ 绿色系色彩算法
  → 每次递归叉出新枝，颜色从深绿渐变到嫩绿

「现代的精确」→ 几何 + 极简配色
  → 对称密铺 + 黑白灰 + 单强调色
  → 数学公式可视化（如玫瑰曲线 r = cos(kθ)）

「情感的流动」→ 色彩算法 + 噪声场
  → 色彩在 HSL 空间中沿噪声场渐变
  → 暖色（喜悦）→ 冷色（忧伤）的平滑过渡

新手常犯错误：
  → 先学技术再找创意（「学了 Perlin Noise，用它做个什么？」）
  → 正确做法：先确定情感意图，再选匹配的技术

---

4. 种子系统与可复现性

4.1 种子的作用

randomSeed() 是算法艺术的「存档系统」：

没有种子：
  → 每次运行完全不同的随机结果
  → 你看到一个特别满意的版本 → 无法再次生成
  → 「我刚才看到的那个美到极致的画面，再也找不回来了」

有种子：
  → randomSeed(42) → 每次运行产生完全相同的随机序列
  → 同样的种子 = 同样的作品
  → 你可以先固定种子调试参数
  → 参数满意后换种子探索变体

创作工作流：
  Step 1: 固定种子（如 seed=1）→ 调试代码和参数
  Step 2: 参数满意后 → 换种子探索变体（seed=2, 3, 4...）
  Step 3: 找到最喜欢的变体 → 记下种子 + 参数组合
  Step 4: 任何时候都可以用相同种子+参数精确复现

4.2 交互探索

algorithmic-art 支持浏览器中的交互式参数调节：

参数面板（dat.GUI / 自定义面板）：
  → 粒子数量：100 → 500 → 1000
  → 噪声缩放：0.005 → 0.01 → 0.02
  → 颜色速度：0.1 → 0.5 → 1.0
  → 种子切换：← 上一个 / 下一个 →

交互优势：
  → 不需要每次改代码重新运行
  → 拖动滑块实时看到效果
  → 更快找到「最佳参数组合」
  → 「像 DJ 调音台一样操控视觉」

---

5. 结构拆解：算法艺术型 Skill 模板

---

6. 电商案例：直播间实时销售数据动态背景

某抖音直播带货团队（主营女士羊绒大衣，日均直播 8 小时）想在主播身后的 LED 大屏上展示一个「活的」数据可视化背景——不是静态图片，不是循环视频，而是随实时销售数据变化的动态画面：销售额数字跳动时粒子从四面汇聚，订单密集时背景颜色从冷静蓝渐变到热烈金。

设计方案：

技术选型：粒子系统 + 色彩算法

创意意图：「数据在呼吸」——让背景成为数据的「可视化心跳」
  → 粒子系统（粒子 = 每一笔订单的微观映射）
  → 每新增一单 → 10 个粒子从屏幕边缘飞向中心并汇入「累计GMV 数字」
  → 色彩算法：HSL 色相从 210°（冷静蓝，低订单时段）→ 45°（热烈金，高订单时段）
    过渡由实时订单密度驱动，而非定时循环

参数设计：
  → 粒子总数：5000（LED 大屏 1920×1080 分辨率下密集但流畅）
  → 粒子生命周期：3 秒（单次订单可视时间——太久画面过密）
  → 粒子速度：ease_out（快→慢——模拟烟花升空后减速绽放）
  → 背景基础色：#0D1117（深黑底，保证主播人像和商品在前的对比度）
  → 种子：品牌成立日期 → randomSeed(20220308)

输出格式：
  → Canvas 嵌入 OBS 浏览器源
  → 实时读取直播中控台 WebSocket 推送的「近 5 分钟订单数」和「累计 GMV」
  → z-index 置于主播画面和商品贴片之后

效果：

• 部署后首场直播，观众停留时长从 4 分 12 秒提升到 5 分 38 秒（+34%）
• 实时弹幕中出现「背景好酷」「这个数据特效怎么做的」等正反馈 27 条/场（此前几乎没有弹幕讨论直播间视觉）
• 直播间场均 GMV 未见显著变化（视觉不是成交主驱动力），但粉丝群增长速率从 12 人/小时提升到 31 人/小时（+158%）——动态背景成为品牌记忆点，驱动关注转化

🔑 启示：直播间的背景不只是「背景」——当它是死的，它就是一张壁纸；当它是活的且与数据联动，它就是信任信号（「这个直播间的数据是真的——你看它在变」）。粒子系统 + 实时数据驱动的思路可以用到更多场景：大促战报大屏、品牌官网实时销量看板、线下门店互动装置。

---

7. 掌握检验

Q1：算法艺术和 AI 图片生成的本质区别是什么？

• A) 算法艺术是免费的，AI 图片生成是付费的
• B) 算法艺术输出的是可修改、可复现的代码；AI 图片生成输出的是不可修改的图片文件
• C) 算法艺术只能生成黑白图形
• D) 算法艺术使用扩散模型，AI 图片生成使用 p5.js

Q2：「controlled randomness」是算法艺术的核心概念。以下哪个最能体现它？

• A) 电视机雪花噪点——完全随机
• B) 一个钟摆——完全可预测
• C) 风吹过麦田——在自然规律边界内有随机变化
• D) 一个数字骰子——每次结果完全随机

Q3：算法艺术的 5 个核心元素是什么？请为每个元素写出一个适合的创意场景。

Q4：新手在选择算法技术时最常犯的错误是什么？正确的选择方法应该是什么？

Q5：以下哪种场景更适合用 algorithmic-art 而非 Midjourney？

• A) 需要一个社交媒体的产品宣传图，只做一次
• B) 需要为客户定制品牌专属的动态背景，要嵌入网站实时渲染且每次刷新不同
• C) 需要一张猫的可爱照片
• D) 需要将一张图片变成梵高风格的绘画

Q6：种子随机数（Seed）的目的是什么？如果不用种子会带来什么问题？

Q7：请设计一个算法艺术项目：你想创作一件「表达时间流逝和生命短暂」的作品。请说明 (1) 你会选择哪 2-3 个核心技术元素；(2) 为什么选择这些技术；(3) 你希望通过颜色和运动表达什么情感。

---

8. 答案

点击查看答案

Q1：B — 算法艺术通过代码逻辑生成图像，你拿到的是源代码——可以修改参数、改变颜色、复制 100 条。AI 图片生成通过扩散模型从噪声中重建图像，你拿到的是一个不可编辑的图片文件。代码 = 永远可编辑的源文件，图片 = 不可编辑的结果。

Q2：C — 风吹过麦田体现了「在边界内的随机」——每一株麦子的摇摆角度不同（随机），但都在风和物理规律的约束范围内，整体和谐而有机。

Q3：参考答案 — (1) Noise → 表达「自然、有机感」如模拟云朵、地形；(2) Recursion → 表达「生命的秩序」如树枝分叉、雪花结构；(3) Particles → 表达「涌现、群体」如鸟群、星空；(4) Color Algorithm → 表达「情感渐变」如日落颜色过渡；(5) Geometry → 表达「现代的精确」如建筑线图、对称密铺。

Q4：参考答案 — 最常见的错误是「先学技术再找创意」——急着学 Perlin Noise 但不知道用它表达什么。正确做法是「先确定情感意图，再选匹配的技术」：先问自己「我想让观众感受到什么」→ 风的感觉用粒子+噪声，生命的秩序用递归+生物调色板，现代的精确用几何+极简配色。

Q5：B — 需要实时渲染、每次刷新不同、嵌入网站中使用，这正是 algorithm-art 的核心优势。选项 A、C、D 都是一次性图片需求，Midjourney/DALL-E 更合适。

Q6：参考答案 — 种子随机数确保「可复现性」——同样的种子产生完全相同的随机序列，所以同一件作品可以被重复生成。如果没有种子，每次运行都会产生完全不同的结果——你无法「找回」之前一个让你特别满意的版本。

Q7：参考答案 — (1) 选择 Particles + Noise + Color Algorithm。(2) 粒子系统代表生命个体（每个粒子有出生、运动、消失的生命周期）；Perlin Noise 驱动粒子运动（有机但不可预测的流动感 = 时间流逝）；色彩算法让粒子从暖色渐变到冷色（生命从活力到沉寂）。(3) 希望观众感受到「美丽但忧伤」——每一个生命都短暂但独一无二，时间的洪流不可阻挡。

（5/7 通过）

---

9. 延伸阅读

• [[L5-03-品牌规范系统|上一课：品牌规范系统]] —— 品牌色系统可用于色彩算法
• [[L5-05-主题工厂|下一课：主题工厂]] —— 色彩算法的实际应用