使用P5时无法通过鼠标点击切换背景色该如何解决？

常见错误原因 #

• p5的鼠标事件函数（如mousePressed()）必须定义在全局作用域，不能嵌套在setup()、draw()函数内部，否则无法被p5事件系统识别
• 背景色参数未定义为全局变量，修改后的色值无法被draw()函数读取生效
• draw()函数中background()使用了固定色值，没有绑定可变的背景色变量

实现代码 #

方案1：点击屏幕任意位置切换背景 #

// 全局存储背景色变量
let bgColor;

function setup() {
  createCanvas(windowWidth, windowHeight);
  // 初始背景色
  bgColor = 220;
}

function draw() {
  background(bgColor);
}

// 全局定义鼠标点击事件
function mousePressed() {
  // 随机切换RGB背景色
  bgColor = color(random(255), random(255), random(255));
  // 若需要固定色值切换可替换为以下逻辑：
  // bgColor = bgColor === 220 ? 50 : 220;
}

方案2：仅点击指定按钮切换背景 #

let bgColor;
let toggleBtn;

function setup() {
  createCanvas(windowWidth, windowHeight);
  bgColor = 220;
  // 创建切换按钮
  toggleBtn = createButton('切换背景色');
  toggleBtn.position(20, 20);
  // 绑定点击事件
  toggleBtn.mousePressed(changeBg);
}

function draw() {
  background(bgColor);
}

function changeBg() {
  bgColor = color(random(255), random(255), random(255));
}

效果验证 #

代码修改完成后刷新页面即可生效，可根据需求自定义切换的色值规则。

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