p5.js多sketch文件仅最后一个生效问题求助

这个问题的核心原因是p5.js默认的全局模式会导致函数冲突：当你在多个文件中定义setup()、draw()这类p5核心函数时，它们都是挂载在全局作用域下的变量。后面引入的文件会覆盖前面文件中同名的全局函数，所以最终只有最后一个文件里的sketch能正常执行。

下面是两种最常用的解决办法：

1. 使用p5.js实例模式（推荐） #

实例模式是p5官方提供的多sketch共存方案，每个sketch会拥有独立的作用域，不会互相干扰。只需要把每个文件的代码改写成以下结构：

sketch.js 修改示例： #

// 创建一个sketch实例的逻辑函数
let mainSketch = function(p) {
  // 重写setup，用p.前缀调用p5方法
  p.setup = function() {
    let canvas = p.createCanvas(400, 300);
    // 可以给canvas设置位置，避免和其他sketch重叠
    canvas.position(0, 0);
    p.background('#f0f0f0');
  };

  // 重写draw，同样用p.前缀
  p.draw = function() {
    p.fill('coral');
    p.ellipse(p.mouseX, p.mouseY, 60, 60);
  };
};

// 初始化这个sketch实例
new p5(mainSketch);

wiki.js 修改示例： #

let wikiSketch = function(p) {
  p.setup = function() {
    let canvas = p.createCanvas(400, 300);
    canvas.position(410, 0); // 放在第一个canvas右边
    p.background('#e0e0ff');
  };

  p.draw = function() {
    p.fill('indigo');
    p.rect(p.mouseX - 20, p.mouseY - 20, 40, 40);
  };
};

new p5(wikiSketch);

weather.js 修改示例： #

let weatherSketch = function(p) {
  p.setup = function() {
    let canvas = p.createCanvas(820, 300);
    canvas.position(0, 310); // 放在前两个canvas下方
    p.background('#e6f7ff');
  };

  p.draw = function() {
    p.fill('skyblue');
    p.triangle(p.mouseX, p.mouseY - 30, p.mouseX - 30, p.mouseY + 30, p.mouseX + 30, p.mouseY + 30);
  };
};

new p5(weatherSketch);

这样修改后，三个sketch会各自拥有独立的p5实例，全局作用域不会再出现函数覆盖的问题，所有sketch都能正常运行。你还可以通过position()方法调整每个canvas的位置，避免它们重叠在一起。

2. 封装为模块化函数（适合小改动场景） #

如果不想大面积修改现有代码，可以把每个sketch的逻辑封装成独立的函数，然后在一个统一的入口文件中调用。但这种方法不如实例模式清晰，容易出现其他全局变量冲突，仅适合简单场景：

比如，把每个文件的代码改成：

// sketch.js
function runSketch1() {
  createCanvas(300,300);
  background(200);
  // 这里需要把draw逻辑也做封装处理，比如自定义循环
}

// wiki.js
function runSketch2() {
  let canvas = createCanvas(300,300);
  canvas.position(320,0);
  background(150);
}

然后在一个新的入口文件（比如main.js）中整合逻辑：

function setup() {
  runSketch1();
  runSketch2();
  runSketch3();
}

function draw() {
  // 这里需要手动整合三个sketch的draw逻辑，灵活性较低
}

这种方法的缺点是draw逻辑需要手动整合，不如实例模式灵活，所以更推荐第一种方案。

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