p5js

p5.js 生产流水线

何时使用

用户请求以下内容时使用：p5.js 草图、创意编码、生成艺术、交互式可视化、画布动画、基于浏览器的视觉艺术、数据可视化、着色器特效，或任何 p5.js 项目。

内容简介

使用 p5.js 进行交互式与生成式视觉艺术创作的生产流水线。创建基于浏览器的草图、生成艺术、数据可视化、交互体验、3D 场景、音频响应视觉和动态图形，并导出为 HTML、PNG、GIF、MP4 或 SVG。涵盖：2D/3D 渲染、噪声与粒子系统、流场、着色器（GLSL）、像素操作、动态排版、WebGL 场景、音频分析、鼠标/键盘交互，以及无头高分辨率导出。

创作标准

这是在浏览器中呈现的视觉艺术。画布是媒介；算法是画笔。

在编写第一行代码之前，先阐述创意概念。这件作品要传达什么？什么能让观者停下滚动？它与代码教程示例有何不同？用户的提示词只是起点——要以足够的创意野心加以诠释。

首次呈现效果必须惊艳，绝不可妥协。 成品首次加载时必须赏心悦目。如果看起来像 p5.js 教程练习、默认配置，或“AI 生成的创意编码”，那就错了。交付前请重新思考。

超越参考词汇。 参考资料中的噪声函数、粒子系统、调色板和着色器效果只是起始词汇。每个项目都要组合、叠加并创造新内容。素材目录就像一组颜料——画作由你来创作。

主动展现创意。 如果用户要求“粒子系统”，就交付一个具备涌现式集群行为、尾随幽灵残影、调色板偏移深度雾效和呼吸式背景噪声场的粒子系统。至少加入一个用户没有要求、但会喜欢的视觉细节。

密集、层次丰富、经过精心考量。 每一帧都值得细看。绝不使用纯白背景。始终营造构图层级。始终有意设计色彩。始终加入只有在近看时才会显现的微细节。

统一美感胜过功能数量。 所有元素都必须服务于统一的视觉语言——一致的色温、统一的笔画粗细体系、和谐的运动速度。包含十个互不相关效果的草图，不如只有三个彼此协调效果的草图。

模式

模式	输入	输出	参考资料
生成艺术	种子 / 参数	程序化视觉构图（静态或动画）	references/visual-effects.md
数据可视化	数据集 / API	交互式图表、图形、自定义数据显示	references/interaction.md
交互式体验	无（由用户操作）	鼠标 / 键盘 / 触控驱动的草图	references/interaction.md
动画 / 动态图形	时间轴 / 分镜	定时序列、动态排版、转场	references/animation.md
3D 场景	概念描述	WebGL 几何体、光照、相机、材质	references/webgl-and-3d.md
图像处理	图像文件	像素操作、滤镜、马赛克、点彩法	references/visual-effects.md § 像素操作
音频响应式	音频文件 / 麦克风	声音驱动的生成视觉	references/interaction.md § 音频输入

技术栈

每个项目使用单个自包含的 HTML 文件。无需构建步骤。

层级	工具	用途
核心	p5.js 1.11.3（CDN）	画布渲染、数学运算、变换、事件处理
3D	p5.js WebGL 模式	3D 几何体、摄像机、光照、GLSL 着色器
音频	p5.sound.js（CDN）	FFT 分析、振幅、麦克风输入、振荡器
导出	内置 saveCanvas() / saveGif() / saveFrames()	PNG、GIF、帧序列输出
捕获	CCapture.js（可选）	固定帧率视频捕获（WebM、GIF）
无头	Puppeteer + Node.js（可选）	自动执行高分辨率渲染，通过 ffmpeg 输出 MP4
SVG	p5.js-svg 1.6.0（可选）	用于印刷的矢量输出——需要 p5.js 1.x
自然媒体	p5.brush（可选）	水彩、炭笔、钢笔——需要 p5.js 2.x + WEBGL
纹理	p5.grain（可选）	胶片颗粒、纹理叠加
字体	Google Fonts / loadFont()	通过 OTF/TTF/WOFF2 实现自定义排版

版本说明

p5.js 1.x（1.11.3）是默认版本——稳定、文档完善、库兼容性最广。除非项目需要 2.x 功能，否则请使用此版本。

p5.js 2.x（2.2+）新增：使用 async setup() 替代 preload()、OKLCH/OKLAB 色彩模式、splineVertex()、着色器 .modify() API、可变字体、textToContours()、指针事件。p5.brush 需要此版本。参见 references/core-api.md § p5.js 2.0。

流程

每个项目都遵循相同的 6 阶段流程：

CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

1. 概念 — 阐述创作愿景：氛围、色彩世界、运动语汇，以及独特之处
2. 设计 — 选择模式、画布尺寸、交互模型、色彩系统、导出格式。将概念映射为技术决策
3. 代码 — 编写内嵌 p5.js 的单个 HTML 文件。结构：全局变量 → preload() → setup() → draw() → 辅助函数 → 类 → 事件处理程序
4. 预览 — 在浏览器中打开，验证视觉质量。按目标分辨率测试。检查性能
5. 导出 — 捕获输出：使用 saveCanvas() 导出 PNG，使用 saveGif() 导出 GIF，使用 saveFrames() + ffmpeg 导出 MP4，使用 Puppeteer 进行无头批处理
6. 验证 — 输出是否符合概念？在预期显示尺寸下是否具有视觉冲击力？你愿意将其装框吗？

创作方向

美学维度

维度	选项	参考资料
色彩系统	HSB/HSL、RGB、命名调色板、程序化配色、渐变插值	references/color-systems.md
噪声语汇	Perlin 噪声、单纯形噪声、分形（多倍频）、域扭曲、卷曲噪声	references/visual-effects.md § 噪声
粒子系统	基于物理、集群行为、轨迹绘制、吸引子驱动、流场跟随	references/visual-effects.md § 粒子
形状语言	几何图元、自定义顶点、贝塞尔曲线、SVG 路径	references/shapes-and-geometry.md
运动风格	缓动、基于弹簧、噪声驱动、物理模拟、插值过渡、分步运动	references/animation.md
字体排印	系统字体、加载的 OTF 字体、由 textToPoints() 生成的粒子文字、动态排版	references/typography.md
着色器效果	GLSL 片元/顶点着色器、滤镜着色器、后期处理、反馈循环	references/webgl-and-3d.md § 着色器
构图	网格、放射状、黄金比例、三分法、有机散布、平铺	references/core-api.md § 构图
交互模型	鼠标跟随、点击生成、拖拽、键盘状态、滚动驱动、麦克风输入	references/interaction.md
混合模式	BLEND、ADD、MULTIPLY、SCREEN、DIFFERENCE、EXCLUSION、OVERLAY	references/color-systems.md § 混合模式
分层	createGraphics() 离屏缓冲区、Alpha 合成、蒙版	references/core-api.md § 离屏缓冲区
纹理	Perlin 表面、点刻、排线、半色调、像素排序	references/visual-effects.md § 纹理生成

项目专属变化规则

绝不使用默认配置。对于每个项目：

• 自定义调色板 — 绝不直接使用 fill(255, 0, 0)。始终采用精心设计且包含 3-7 种颜色的调色板
• 自定义笔画粗细体系 — 纤细点缀（0.5）、中等结构（1-2）、粗重强调（3-5）
• 背景处理 — 绝不采用纯粹的 background(0) 或 background(255)。始终使用纹理、渐变或分层效果
• 运动变化 — 不同元素采用不同速度。主元素为 1x、次元素为 0.3x、环境元素为 0.1x
• 至少一个原创元素 — 自定义粒子行为、新颖的噪声应用或独特的交互响应

项目专属创意

每个项目至少创作以下一项：

• 与氛围相匹配的定制调色板（非预设方案）
• 新颖的噪声场组合（例如，curl 噪声 + 域扭曲 + 反馈）
• 独特的粒子行为（自定义作用力、自定义轨迹、自定义生成方式）
• 用户未要求、但能提升作品质感的交互机制
• 营造视觉层级的构图技术

参数设计理念

参数应从算法中自然产生，而不是来自通用菜单。思考：“这个系统中有哪些属性应当可调？”

好的参数能体现算法的特性：

• 数量 — 粒子、分支、细胞的数量（控制密度）
• 尺度 — 噪声频率、元素大小、间距（控制纹理）
• 速率 — 速度、增长率、衰减率（控制能量）
• 阈值 — 行为何时改变？（控制戏剧张力）
• 比例 — 比例关系、各项力之间的平衡（控制和谐度）

糟糕的参数是与算法无关的通用控件：

• “color1”、“color2”、“size” — 脱离语境便毫无意义
• 用于无关效果的切换开关
• 只改变外观而不改变行为的参数

每个参数都应改变算法的 思考方式，而不只是改变其 外观。改变噪声倍频程的“湍流”参数就是好参数。仅改变 ellipse() 半径的“粒子大小”滑块则流于表面。

工作流

第 1 步：创意构想

编写任何代码前，先明确：

• 氛围 / 情绪：观众应有什么感受？沉思？振奋？不安？顽皮？
• 视觉叙事：随时间推移（或交互时）会发生什么？构建？衰变？转变？振荡？
• 色彩世界：暖色 / 冷色？单色？互补色？主色调是什么？强调色是什么？
• 形状语言：有机曲线？锐利几何？圆点？线条？混合？
• 运动词汇：缓慢漂移？爆发式迸射？呼吸般脉动？机械般精准？
• 是什么让 THIS 与众不同：究竟是什么让这个作品独一无二？

将用户的提示词映射为美学选择。“令人放松的生成式背景”所要求的一切都应与“故障数据可视化”不同。

第 2 步：技术设计

• 模式 — 上表 7 种模式中的一种
• 画布尺寸 — 横向 1920x1080、纵向 1080x1920、方形 1080x1080，或响应式的 windowWidth/windowHeight
• 渲染器 — P2D（默认）或 WEBGL（用于 3D、着色器和高级混合模式）
• 帧率 — 60fps（交互）、30fps（环境动画）或 noLoop()（静态生成）
• 导出目标 — 浏览器显示、PNG 静态图、GIF 循环动画、MP4 视频、SVG 矢量图
• 交互模型 — 被动（无输入）、鼠标驱动、键盘驱动、音频响应、滚动驱动
• 查看器界面 — 对于交互式生成艺术，从 templates/viewer.html 开始，其中提供种子导航、参数滑块和下载功能。对于简单草图或视频导出，使用纯 HTML

步骤 3：编写草图

对于交互式生成艺术（种子探索、参数调节）：从 templates/viewer.html 开始。先阅读模板，保留固定部分（种子导航、操作），替换算法和参数控件。这样用户就能使用种子上一项／下一项／随机／跳转、支持实时更新的参数滑块，以及 PNG 下载功能——这些都已连线就绪。

对于动画、视频导出或简单草图：使用纯 HTML：

单个 HTML 文件。结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Name</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  
    
    
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
  seed: 42,
  // ... project-specific params
};

// === Color Palette ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === Global State ===
let particles = [];

// === Preload (fonts, images, data) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Initialize state...
}

// === Draw Loop ===
function draw() {
  // Render frame...
}

// === Helper Functions ===
// ...

// === Classes ===
class Particle {
  // ...
}

// === Event Handlers ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

关键实现模式：

• 种子随机性：始终使用 randomSeed() + noiseSeed()，确保结果可复现
• 颜色模式：使用 colorMode(HSB, 360, 100, 100, 100)，以便直观地控制颜色
• 状态分离：用 CONFIG 保存参数，用 PALETTE 保存颜色，用全局变量保存可变状态
• 基于类的实体：将粒子、Agent、形状定义为类，并提供 update() + display() 方法
• 离屏缓冲区：使用 createGraphics() 实现分层合成、轨迹和遮罩

步骤 4：预览并迭代

• 直接在浏览器中打开 HTML 文件——基本草图无需服务器
• 对本地文件使用 loadImage()/loadFont() 时：使用 scripts/serve.sh 或 python -m http.server
• 使用 Chrome DevTools 的 Performance 标签页确认帧率达到 60fps
• 在目标导出分辨率下测试，而不只是窗口尺寸
• 调整参数，直到视觉效果符合步骤 1 中的构想

步骤 5：导出

格式	方法	命令
PNG	在 keyPressed() 中使用 saveCanvas('output', 'png')	按 's' 保存
高分辨率 PNG	使用 Puppeteer 无头模式捕获	node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1
GIF	saveGif('output', 5) — 捕获 N 秒	按 'g' 保存
帧序列	saveFrames('frame', 'png', 10, 30) — 以 30fps 捕获 10 秒	然后运行 ffmpeg -i frame-%04d.png -c:v libx264 output.mp4
MP4	使用 Puppeteer 捕获帧 + ffmpeg	bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30
SVG	使用 p5.js-svg 配合 createCanvas(w, h, SVG)	save('output.svg')

步骤 6：质量验证

• 是否符合构想？ 将输出与创意构想进行比较。如果看起来很普通，就回到步骤 1
• 分辨率检查：在目标显示尺寸下是否清晰？是否存在锯齿伪影？
• 性能检查：在浏览器中能否保持 60fps？（动画最低为 30fps）
• 颜色检查：颜色搭配是否协调？在亮屏和暗屏显示器上都进行测试
• 边界情况：画布边缘处会发生什么？调整大小时呢？运行 10 分钟后呢？

关键实现说明

性能——首先禁用 FES

友好错误系统（FES）会带来最高 10 倍的开销。每个用于生产的草图都要禁用它：

p5.disableFriendlyErrors = true;  // BEFORE setup()

function setup() {
  pixelDensity(1);  // prevent 2x-4x overdraw on retina
  createCanvas(1920, 1080);
}

在热点循环（粒子、像素操作）中，使用 Math.* 而不是 p5 封装函数——速度提升可测量：

// In draw() or update() hot paths:
let a = Math.sin(t);          // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random();        // not random() — when seed not needed
let m = Math.min(a, b);       // not min(a, b)

切勿在 draw() 中调用 console.log()。切勿在 draw() 中操作 DOM。参见 references/troubleshooting.md § Performance。

种子随机性——始终使用

每个生成艺术草图都必须可复现。相同种子，相同输出。

function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // All random() and noise() calls now deterministic
}

切勿使用 Math.random() 生成内容——仅可用于性能关键的非视觉代码。视觉元素始终使用 random()。如果需要随机种子：CONFIG.seed = floor(random(99999))。

生成艺术平台支持（fxhash / Art Blocks）

对于生成艺术平台，请将 p5 的 PRNG 替换为平台提供的确定性随机函数：

// fxhash convention
const SEED = $fx.hash;              // unique per mint
const rng = $fx.rand;               // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });

// In setup():
randomSeed(SEED);   // for p5's noise()
noiseSeed(SEED);

// Replace random() with rng() for platform determinism
let x = rng() * width;  // instead of random(width)

参见 references/export-pipeline.md § Platform Export。

颜色模式——使用 HSB

对于生成艺术而言，HSB（色相、饱和度、亮度）比 RGB 容易使用得多：

colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)

切勿硬编码原始 RGB 值。定义调色板对象，并通过程序推导颜色变化。参见 references/color-systems.md。

噪声 — 多倍频，而非原始噪声

原始的 noise(x, y) 看起来像平滑的斑块。叠加倍频以营造自然纹理：

function fbm(x, y, octaves = 4) {
  let val = 0, amp = 1, freq = 1, sum = 0;
  for (let i = 0; i < octaves; i++) {
    val += noise(x * freq, y * freq) * amp;
    sum += amp;
    amp *= 0.5;
    freq *= 2;
  }
  return val / sum;
}

对于流动的有机形态，使用域扭曲：将噪声输出重新用作噪声输入坐标。请参阅 references/visual-effects.md。

createGraphics() 用于分层 — 并非可选项

单遍平面渲染看起来很单调。合成时使用离屏缓冲区：

let bgLayer, fgLayer, trailLayer;
function setup() {
  createCanvas(1920, 1080);
  bgLayer = createGraphics(width, height);
  fgLayer = createGraphics(width, height);
  trailLayer = createGraphics(width, height);
}
function draw() {
  renderBackground(bgLayer);
  renderTrails(trailLayer);   // persistent, fading
  renderForeground(fgLayer);  // cleared each frame
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

性能 — 尽可能向量化

p5.js 的 draw 调用开销很高。对于数千个粒子：

// SLOW: individual shapes
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}

// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();

// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
  let idx = 4 * (floor(p.y) * width + floor(p.x));
  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();

请参阅 references/troubleshooting.md § 性能。

多草图使用实例模式

全局模式会污染 window。在生产环境中，请使用实例模式：

const sketch = (p) => {
  p.setup = function() {
    p.createCanvas(800, 800);
  };
  p.draw = function() {
    p.background(0);
    p.ellipse(p.mouseX, p.mouseY, 50);
  };
};
new p5(sketch, 'canvas-container');

在一个页面中嵌入多个草图或与框架集成时，必须使用实例模式。

WebGL 模式注意事项

• createCanvas(w, h, WEBGL) — 原点位于中心，而非左上角
• Y 轴方向相反（正 Y 值在 WEBGL 中向上，在 P2D 中向下）
• translate(-width/2, -height/2) — 获得类似 P2D 的坐标
• 每次变换都要用 push()/pop() 包围 — 矩阵栈溢出会静默发生
• 在 rect()/plane() 之前调用 texture() — 不要在其后调用
• 自定义着色器：createShader(vert, frag) — 在多个浏览器中测试

导出 — 按键绑定约定

每个草图都应在 keyPressed() 中包含以下内容：

function keyPressed() {
  if (key === 's' || key === 'S') saveCanvas('output', 'png');
  if (key === 'g' || key === 'G') saveGif('output', 5);
  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
  if (key === ' ') CONFIG.paused = !CONFIG.paused;
}

无头视频导出 — 使用 noLoop()

通过 Puppeteer 进行无头渲染时，草图在 setup 中必须使用 noLoop()。否则，p5 的 draw 循环会在截图较慢时自由运行——草图会抢先运行，从而产生跳帧或重复帧。

function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // capture script controls frame advance
  window._p5Ready = true;      // signal readiness to capture script
}

随附的 scripts/export-frames.js 会检测 _p5Ready，并在每次捕获时调用一次 redraw()，从而实现帧与捕获之间精确的 1:1 对应。请参阅 references/export-pipeline.md § 确定性捕获。

对于多场景视频，请使用按片段架构：每个场景一个 HTML 文件，独立渲染，再使用 ffmpeg -f concat 拼接。请参阅 references/export-pipeline.md § 按片段架构。

Agent 工作流

构建 p5.js 草图时：

1. 编写 HTML 文件 — 单个自包含文件，所有代码均内联
2. 在浏览器中打开 — open sketch.html（macOS）或 xdg-open sketch.html（Linux）
3. 本地资源（字体、图像）需要服务器：在项目目录中运行 python -m http.server 8080，然后打开 http://localhost:8080/sketch.html
4. 导出 PNG/GIF — 添加 keyPressed() 快捷键（如上所示），并告知用户按哪个键
5. 无头导出 — 运行 node scripts/export-frames.js sketch.html --frames 300 以自动捕获帧（草图必须使用 noLoop() + _p5Ready）
6. MP4 渲染 — 运行 bash scripts/render.sh sketch.html output.mp4 --duration 30
7. 迭代优化 — 编辑 HTML 文件，用户刷新浏览器即可查看更改
8. 按需加载参考资料 — 使用 skill_view(name="p5js", file_path="references/...") 在实现过程中按需加载特定的参考文件

性能目标

指标	目标
帧率（交互）	稳定保持 60fps
帧率（动画导出）	最低 30fps
粒子数量（P2D 形状）	在 60fps 下为 5,000-10,000
粒子数量（像素缓冲区）	在 60fps 下为 50,000-100,000
画布分辨率	最高 3840x2160（导出），1920x1080（交互）
文件大小（HTML）	< 100KB（不含 CDN 库）
加载时间	首帧前 < 2s

参考资料

文件	内容
references/core-api.md	画布设置、坐标系、绘制循环、push()/pop()、离屏缓冲区、合成模式、pixelDensity()、响应式设计
references/shapes-and-geometry.md	二维图元、beginShape()/endShape()、贝塞尔/Catmull-Rom 曲线、vertex() 系统、自定义形状、p5.Vector、有符号距离场、SVG 路径转换
references/visual-effects.md	噪声（Perlin、分形、域扭曲、旋度）、流场、粒子系统（物理、集群、轨迹）、像素操作、纹理生成（点描、排线、半色调）、反馈循环、反应扩散
references/animation.md	基于帧的动画、缓动函数、lerp()/map()、弹簧物理、状态机、时间线编排、基于 millis() 的计时、转场模式
references/typography.md	text()、loadFont()、textToPoints()、动态排版、文本蒙版、字体度量、响应式文本 sizing
references/color-systems.md	colorMode()、HSB/HSL/RGB、lerpColor()、paletteLerp()、程序化调色板、色彩协调、blendMode()、渐变渲染、精选调色板库
references/webgl-and-3d.md	WEBGL 渲染器、三维图元、摄像机、光照、材质、自定义几何体、GLSL 着色器（createShader()、createFilterShader()）、帧缓冲、后处理
references/interaction.md	鼠标事件、键盘状态、触摸输入、DOM 元素、createSlider()/createButton()、音频输入（p5.sound FFT/振幅）、滚动驱动的动画、响应式事件
references/export-pipeline.md	saveCanvas()、saveGif()、saveFrames()、确定性无头捕获、ffmpeg 帧转视频、CCapture.js、SVG 导出、逐片段架构、平台导出（fxhash）、视频常见问题
references/troubleshooting.md	性能分析、逐像素预算、常见错误、浏览器兼容性、WebGL 调试、字体加载问题、像素密度陷阱、内存泄漏、CORS
templates/viewer.html	交互式查看器模板：种子导航（上一个/下一个/随机/跳转）、参数滑块、下载 PNG、响应式画布。以此为基础制作可探索的生成艺术

---

创造性发散（仅当用户要求实验性／创意／独特输出时）

如果用户要求创意、实验性、令人惊讶或非常规的输出，请在生成代码之前选择最合适的策略并逐步推演。

• 概念融合——当用户指定要组合的两项内容或想要混合美学时
• SCAMPER——当用户希望对已知的生成艺术模式进行改造时
• 距离联想——当用户给出一个概念并希望进行探索时（“围绕时间创作某物”）

概念融合

1. 确定两种不同的视觉系统（例如，粒子物理 + 手写）
2. 建立对应映射（粒子 = 墨滴，力 = 笔压，场 = 字母形态）
3. 选择性地融合——保留能产生有趣涌现视觉效果的映射
4. 将融合实现为统一系统，而不是将两个系统并排放置

SCAMPER 变形

选取一种已知的生成模式（流场、粒子系统、L 系统、元胞自动机），并进行系统性改造：

• 替换：用文本字符替代圆，用渐变替代线条
• 组合：融合两种模式（流场 + 沃罗诺伊图）
• 改编：将二维模式应用到三维投影中
• 修改：夸大比例扭曲、扭曲坐标空间
• 改变用途：使用物理模拟进行排版，使用排序算法处理颜色
• 消除：移除网格、颜色、对称性
• 反转：向后运行模拟，反转参数空间

距离联想

1. 以用户的概念为锚点（例如，“孤独”）
2. 从三个距离生成联想：
   • 近距离（显而易见）：空荡荡的房间、孤身一人的身影、寂静
   • 中等距离（有趣）：鱼群中一条逆游的鱼、没有通知的手机、地铁车厢之间的空隙
   • 远距离（抽象）：质数、渐近曲线、凌晨 3 点的颜色
3. 深化中等距离的联想——它们足够具体，能够形象化，同时又足够出人意料，令人感兴趣