p5.js 中 setup() 和 draw() 函数的执行机制详解

p5.js 原理深入剖析

解析 p5.js 的生命周期流转、帧驱动渲染循环与状态控制模型，建立清晰的图形编程心智认知。

在 p5.js 的编程范式中，整个交互式图形程序的心脏就是 setup() 与 draw() 这两个预定义函数。初学者往往简单地把它们理解为“一个在开始时运行，另一个在之后一直循环”，但若要实现高帧率动画、复杂的交互逻辑或精细的算力优化，开发者必须清楚它们在底层究竟如何被调用、数据状态在各帧之间如何保留，以及如何通过状态机灵活控制渲染循环。

一、核心运行模型：单次初始化与帧驱动循环

在默认情况下，当 p5.js 脚本被浏览器加载并解析后，运行时库会自动寻找用户定义的 setup() 和 draw() 函数，并按照固定的调度策略执行它们：

• setup() 的定位是配置入口：它由系统自动调用，并且在整个 Sketch（画作）的生命周期内只执行一次。它的核心职责是分配内存与系统资源，包括创建 HTML5 Canvas 元素、设置画布像素尺寸、配置全局渲染模式（如色彩模式、矩形绘制对齐方式）以及初始化全局数据结构。
• draw() 的定位是帧驱动循环：在 setup() 同步执行完毕后，p5.js 会立即启动内部调度器，默认以屏幕刷新率（通常为每秒 60 次）为基准，周而复始地调用 draw()。每次调用即代表一个渲染帧（Frame），用于计算物体的运动状态并把图形光栅化到画布上。

很多开发者会疑惑：是谁在负责持续调用 draw()？答案是浏览器的 window.requestAnimationFrame()。p5.js 并不是使用容易产生定时漂移的 setInterval，而是把 draw() 的下一次执行注册在浏览器的下一次屏幕重绘周期的回调中。这种机制确保了动画与显示器的刷新同步，极大减少了画面撕裂与卡顿。

二、完整的生命周期时序：从 preload 到 draw 循环

为了全面理解 setup() 与 draw()，我们需要将其置于 p5.js 的完整运行时生命周期中观察。一个规范的 p5.js 程序在运行时包含三个阶段：资源预载（preload）、初始化（setup）和渲染循环（draw）。

1. 资源预载阶段：preload()

如果程序中定义了 preload() 函数，p5.js 会在触发 setup() 之前先执行它。该阶段主要处理异步资源加载，例如通过 loadImage() 加载位图纹理、通过 loadJSON() 获取远程数据，或者通过 loadSound() 解码音频文件。

在底层，p5.js 在 preload() 期间会维护一个内部计数器。每一次异步加载都会递增计数，并在资源成功下载解码后递减。只有当计数器归零、所有外部资源全部就绪后，p5.js 才会释放阻塞，正式进入 setup() 阶段。这保证了在 setup() 中使用已加载图片尺寸时绝不会遇到 undefined 报错。

2. 一次性构建阶段：setup()

当预载完成或无预载函数时，setup() 立即执行。一个典型的 setup() 实现如下：

function setup() {
  // 1. 创建画布并挂载到网页
  createCanvas(800, 600);

  // 2. 设定绘图环境状态
  colorMode(RGB, 255);
  rectMode(CENTER);
  frameRate(60);

  // 3. 构建初始状态数据
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle(width / 2, height / 2));
  }
}

三、draw() 的逐帧执行逻辑与单帧流水线

在 setup() 顺利返回后，控制权交由渲染主循环。每一个独立的 draw() 周期都在极短的时间内（目标通常是 16.6 毫秒）完成一系列标准步骤：

1. 全局输入与时间变量的更新

在进入 draw() 函数体之前，p5.js 内部会先与浏览器的输入事件进行同步，更新 mouseX、mouseY 以及上一帧坐标 pmouseX、pmouseY。与此同时，frameCount 计数器自增 1，并通过高精度时间戳计算出 deltaTime（当前帧与前一帧之间的真实毫秒间隔）。利用 deltaTime 可以实现与帧率解耦的物理动力学计算，避免高刷新率屏幕下物体运动速度异常变快。

2. background() 与画面残留控制

在 draw() 中，一个最关键的转折点在于是否调用 background()：

• 标准动画模式：在 draw() 的开头调用 background(240)。这会使用纯色完全覆盖上一帧的所有像素，相当于清空画板。随后绘制的新坐标图元就形成了干净连贯的平滑动画。
• 轨迹累积模式：如果完全不调用 background()，Canvas 画布上的像素将永远不会被擦除。每次 draw() 绘制的几何图形都会叠加在历史画面之上，常用于实现画笔绘制工具或生成艺术中的复杂线条叠加。
• 动态拖尾与残影模式：如果在每一帧调用带有半透明 Alpha 通道的背景，例如 background(240, 240, 240, 25)，上一帧的内容会被一层微弱的半透明色遮盖。经过数十帧的连续衰减，图形会呈现出优雅的运动拖尾特效。

四、渲染循环的控制机制：noLoop()、loop() 与 redraw()

许多应用并不需要每秒 60 次全速刷新。例如，展示静态信息图表、生成静态壁纸或只有在用户点击滑块时才需要改变的控制面板。如果让 draw() 无休止地空转，会白白浪费 CPU 和 GPU 资源，在移动设备上还会造成电量急剧消耗与发热。

p5.js 提供了完善的循环控制器，其底层是一个明确的状态机：

1. noLoop() 的内部机制

调用 noLoop() 并不会销毁 Canvas，也不会阻止当前的 draw() 执行。如果在 setup() 中调用 noLoop()，p5.js 会保证 draw() 仅运行一次以呈现初始画面，然后不再向浏览器注册下一次 requestAnimationFrame 回调。内部的 isLooping() 状态变为 false。此时画布内容稳定驻留在显存中，进程开销降为最低。

2. redraw()：按需单次重绘

当处于 noLoop() 挂起状态时，如果用户拖动了滑块或者点击了屏幕，我们不需要重新启动整个循环，只需要让画面刷新一次即可。此时调用 redraw() 是最佳方案。redraw() 会手动触发一次 draw() 的完整执行，执行完毕后继续保持挂起状态。

let bgColor = 240;

function setup() {
  createCanvas(400, 400);
  noLoop(); // 启动即挂起，不浪费渲染算力
}

function draw() {
  background(bgColor);
  fill(57, 73, 87);
  circle(width / 2, height / 2, 80);
}

// 仅在发生交互时，按需重绘单帧
function mousePressed() {
  bgColor = random(200, 255);
  redraw(); // 手动请求单次绘制
}

3. loop()：恢复连续循环

如果需要从静态展示重新切换回持续动画（例如用户点击了“播放”按钮），调用 loop() 即可。p5.js 会重新激活状态标志，并立即安排新的渲染循环任务。

五、常见开发误区与性能避坑指南

在实际项目开发中，对 setup() 与 draw() 运行机制的误解常常导致严重的性能问题或逻辑异常。以下是四种最常见的误区：

1. 误在 draw() 中反复调用 createCanvas()

createCanvas() 的底层操作是在 HTML DOM 树中插入 <canvas> 标签并申请 WebGL/2D 绘图上下文与显存缓冲。如果在 draw() 内部调用它，每秒钟将创建 60 个新的 DOM 画布并抛弃旧画布，这会瞬间导致浏览器的垃圾回收器（GC）超负荷，引发剧烈卡顿甚至页面崩溃。createCanvas() 只能且必须在 setup() 中调用一次。若需调整画布大小，应使用 resizeCanvas(newW, newH)。

2. 混淆 JavaScript 原生循环与 draw() 循环

初学者常想通过 for 循环让小球一步步向前移动：

// 错误理解示例：期望看到小球逐步移动
function draw() {
  background(255);
  for (let x = 0; x < 400; x++) {
    circle(x, 200, 20); // 错误！这会在单帧内瞬间绘制 400 个圆
  }
}

JavaScript 是单线程执行的。for 循环会在当前帧的毫秒时间内全部执行完毕，最终用户在屏幕上看到的不是“移动的小球”，而是一条瞬间连成的粗线。动画的时间维度必须依赖 draw() 的跨帧累加，而不是单个 draw() 内部的阻塞式循环。正确的做法是定义全局变量 x，在 draw() 每次被调用时令 x += 1。

3. 在 draw() 中进行重型计算或异步请求

为了维持 60 FPS 的流畅表现，draw() 内的所有 JavaScript 代码必须在 16.6 毫秒以内执行完毕。如果在 draw() 中同步执行复杂的大规模矩阵计算、高精度的网格搜索或发起网络请求，会导致当前帧无法按时交卷，浏览器帧率暴跌至 10-20 FPS 甚至更低。复杂的耗时运算应当放在 Web Worker 中异步计算，或拆解为多帧渐进式完成。

4. 手动显式调用 draw()

有些开发者试图在外部事件函数中写 draw() 来强制更新画面。这会打破 p5.js 内部的调用节奏，导致 frameCount 计算失步或图元重复叠加。永远不要手动书写 draw()，需要单次重绘时请务必使用 redraw()。

六、setup() 与 draw() 核心要素总结

为了帮助开发者迅速查阅并牢记两者的关键差异，下表及图示系统梳理了核心要素的对比矩阵：

特性维度	setup() 函数	draw() 函数
调用时机	页面载入与 preload() 完成后立即自动调用	setup() 运行结束后紧接着自动启动
执行频次	严格仅运行 1 次（单次初始化）	持续高频循环（默认约 60 次/秒）
底层驱动源	p5.js 启动生命周期调度器	浏览器的 requestAnimationFrame 调度
核心任务	创建 Canvas、设置色彩/形状模式、初始化变量	清除/保留背景、状态演算、几何图元渲染
控制 API	createCanvas(), pixelDensity()	noLoop(), loop(), redraw()
关键禁忌	在 setup 外部裸调用 p5 函数；期望 async 阻塞	重复调用 createCanvas；手动调用 draw()；执行重型耗时运算

掌握 setup() 与 draw() 的执行机制是深入 p5.js 与交互式创意编程的基石。将“环境与资源初始化”严格收敛于 setup() 中，将“状态演进与视效呈现”清晰组织于 draw() 中，并根据应用场景灵活运用 noLoop() 与 redraw()，便能在保证视觉表现力的同时，写出结构优雅、性能出色的高质量图形程序。