P5.js闹鬼房屋交互问题：鼠标释放切换图片色调与幽灵显隐

原代码问题分析 #

• 初始状态下setup()里提前绘制了幽灵并添加低透明度，不符合"隐藏幽灵"的需求
• draw()中使用background(house)无法应用色调效果，background()不支持tint()，必须用image()绘制房屋才能配合色调生效
• mouseReleased()里直接在事件函数内绘制内容无效，因为draw()会持续刷新画布，所有绘制逻辑应放在draw()中，事件仅负责修改状态变量

修复后的基础功能代码 #

let house;
let ghost;
let tinted = false;

function preload() {
  house = loadImage('Haunted House.jpg');
  ghost = loadImage('ghost.png'); // 提前预加载所有图片，避免加载延迟
}

function setup() {
  createCanvas(house.width, house.height);
}

function draw() {
  // 根据状态控制房屋色调
  if (tinted) {
    tint(255, 0, 0); // 红色色调
  } else {
    noTint(); // 取消色调
  }
  image(house, 0, 0); // 绘制房屋（替代background，支持tint）
  
  // 根据状态显示/隐藏幽灵
  if (tinted) {
    noTint(); // 幽灵不需要色调，先取消
    image(ghost, 100, 100);
  }
}

function mouseReleased() {
  // 切换状态，仅修改变量，不做绘制
  tinted = !tinted;
}

文本抖动效果实现（幽灵显示时生效） #

在原有基础上添加文本相关逻辑，利用frameCount生成随机偏移量实现抖动：

let house;
let ghost;
let tinted = false;

function preload() {
  house = loadImage('Haunted House.jpg');
  ghost = loadImage('ghost.png');
}

function setup() {
  createCanvas(house.width, house.height);
  textSize(32);
  fill(255, 0, 0);
  textAlign(CENTER, CENTER);
}

function draw() {
  if (tinted) {
    tint(255, 0, 0);
  } else {
    noTint();
  }
  image(house, 0, 0);
  
  if (tinted) {
    noTint();
    image(ghost, 100, 100);
    
    // 抖动文本：利用frameCount生成随时间变化的偏移
    let shakeX = random(-5, 5) * sin(frameCount * 0.1);
    let shakeY = random(-5, 5) * cos(frameCount * 0.1);
    text("Boo!", width/2 + shakeX, height/2 + shakeY);
  }
}

function mouseReleased() {
  tinted = !tinted;
}

关键修改点说明 #

• 所有图片移到preload()中预加载，避免运行时加载延迟导致的错误
• 用image(house, 0,0)替代background(house)，让tint()能作用于房屋图片
• 将绘制逻辑全部放在draw()中，mouseReleased()仅负责切换tinted状态
• 文本抖动通过三角函数结合frameCount实现随时间变化的随机偏移，模拟抖动效果

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