P5js如何复用setup内随机背景色填充draw函数中的矩形

你当前代码无法正常运行的核心原因是screenColor用let声明在setup函数内部，属于函数局部变量，作用域仅覆盖setup函数块，draw函数执行时无法访问到这个变量。

最简洁适配你现有代码逻辑的方案是将需要跨函数访问的变量提升到全局作用域声明，两个函数都可以正常读写这个变量，完全不会破坏你把一次性初始化逻辑放setup、循环渲染逻辑放draw的结构。

修正后的代码如下：

// 全局作用域声明跨函数使用的变量和预设色板
let screenColor;
const colorsPaletteSecond = [
  color(0, 0, 0),
  color(160, 57, 164),
  color(93, 94, 198),
  color(135, 198, 112)
];

function setup() {
  createCanvas(400, 400);
  // setup阶段仅执行一次随机取色，赋值给全局变量
  screenColor = random(colorsPaletteSecond);
  background(screenColor);
  // 此处可继续放其他仅需生成一次的背景图形逻辑
}

function draw() {
  stroke(0);
  // draw循环里直接读取全局存好的固定颜色值，不会每帧重新随机
  fill(screenColor);
  rect(200,200,100,100);
  // 此处可继续放其他需要循环渲染的动态对象逻辑
}

如果你的sketch体量较大、不想声明过多全局变量，也可以通过给p5实例挂载自定义属性、或者用类封装sketch逻辑把颜色存为类属性的方式实现跨作用域访问，但对于普通单文件p5 sketch来说，全局变量方案的可读性和维护性都是最高的。

注意：不要在draw函数内重新调用random(colorsPaletteSecond)取色，否则每帧渲染都会重新随机颜色，无法和初始背景色保持一致。

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