p5.js多场景序列动画无法播放问题求助

核心问题 #

p5.js全局模式下只能存在一个setup()和draw()函数，如果每个场景都单独写这两个函数，会导致函数被覆盖：要么只有最后一个场景的逻辑生效，要么动画逻辑混乱，出现无动画或仅首个场景动的情况。

解决方案：用状态管理统一控制场景 #

把所有场景的初始化、绘制逻辑拆成单独函数，通过一个全局变量标记当前场景，在唯一的setup()和draw()里统一调度：

• 定义场景状态变量：比如let currentScene = 1;，用来记录当前显示的场景编号（对应你的9个场景）。
• 拆分场景逻辑：每个场景对应两个函数——sceneNInit()（初始化该场景的变量、样式）和sceneNDraw()（该场景的动画绘制逻辑）。
• 全局setup初始化：在唯一的setup()里创建画布，并初始化第一个场景。
• 全局draw调度：在唯一的draw()里，根据currentScene的值调用对应场景的绘制函数，同时处理场景切换逻辑（比如按时间、按键触发）。

简化示例（可扩展到9个场景） #

let currentScene = 1;
// 各场景的动画变量
let circleX;
let rectSize;
let bgHue;

function setup() {
  createCanvas(400, 400);
  scene1Init(); // 初始化首个场景
}

function draw() {
  switch(currentScene) {
    case 1:
      scene1Draw();
      // 场景1持续120帧（约2秒，60fps）后切换
      if(frameCount > 120) {
        currentScene = 2;
        scene2Init(); // 切换前初始化场景2
      }
      break;
    case 2:
      scene2Draw();
      if(frameCount > 240) {
        currentScene = 3;
        scene3Init();
      }
      break;
    case 3:
      scene3Draw();
      // 循环回到场景1
      if(frameCount > 360) {
        currentScene = 1;
        scene1Init();
      }
      break;
  }
}

// 场景1初始化
function scene1Init() {
  circleX = 0;
  background(255);
}

// 场景1动画绘制
function scene1Draw() {
  background(255); // 每次绘制清背景，避免帧叠加
  circleX += 2; // 更新动画变量
  ellipse(circleX, height/2, 50, 50);
}

// 场景2初始化
function scene2Init() {
  rectSize = 20;
  background(100);
}

// 场景2动画绘制
function scene2Draw() {
  background(100);
  rectSize += 1;
  rect(width/2 - rectSize/2, height/2 - rectSize/2, rectSize, rectSize);
}

// 场景3初始化
function scene3Init() {
  bgHue = 0;
  colorMode(HSB, 360, 100, 100);
}

// 场景3动画绘制
function scene3Draw() {
  bgHue += 1;
  background(bgHue, 80, 80);
}

针对你现有代码的排查步骤 #

• 检查是否存在多个setup()/draw()：删掉所有场景内的这两个函数，只保留全局的一个。
• 确认每个场景的动画变量是否在sceneNInit()里重置：切换场景时必须重新初始化变量，不然会沿用之前的值，导致动画异常。
• 检查场景绘制函数是否有更新变量+清背景：没有更新变量画面不会动，没清背景会导致帧叠加，看起来像静态。
• 验证场景切换逻辑：如果用时间触发，建议用millis()计算时长（比frameCount更准确，不受帧率波动影响）；如果是手动触发，确保切换时调用了对应场景的初始化函数。

内容的提问来源于stack exchange，提问作者user20477407