当我松开鼠标时，如何在显示另一个图像时使图像变色？ {P5js}

Question

let house;
let ghost;
let tinted = false;

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

}

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

  ghost= loadImage('ghost.png');
   tint(255, 30);
  image(ghost,100,100);

}


function draw() {
  background(house);

}


function mouseReleased() {

  if (!tinted) {
    tint(255, 0, 0);
    background(house);

    tinted = true;

  } else {
    noTint();
    background(house);


    tinted = false;
  }
}

https://editor.p5js.org/106p01013/sketches/9Ys7VVhyy

我想画鬼屋素描。 初始状态是显示一张房子的图片，隐藏一张鬼的图片。

我尝试做的事情： 当我松开鼠标时，房屋图片变成红色并显示幽灵图片。 当我再次松开鼠标时，房子就没有了色调效果，幽灵也被隐藏了。

但是无论我怎么尝试都不管用

我还希望在显示幽灵时出现文字效果，并随着时间的推移而抖动。 但是，如果我连前面的都做不到，这个就更不可能了。

Answer 1

你看不到鬼影，因为p5js马上又把鬼影和背景画了过来。我建议你创建一个变量来检查你是否需要绘制幽灵：

let drawGhost = false;

function draw() {
  background(house);
  if (drawGhost)
    image(ghost, 100, 100);
}

function mouseReleased() {
  if (!tinted) {
    tint(255, 0, 0);
    drawGhost = true
    tinted = true;
  } else {
    noTint();
    drawGhost = false;
    tinted = false;
  }
}