How to make an image tint while displaying another image, when I release the mouse?

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

I want to make a haunted house sketch. The initial state is to show a picture of the house and hide the picture of the ghost.

What I tried to do: When I release the mouse, the house picture turns red tint and the ghost picture is displayed. When I release the mouse again, the house becomes without the tint effect and the ghost is hidden.

But it doesn't work, no matter how I try.

I also want a text effect to appear when the ghost is displayed and to jiggle over time. But if I can't even do the previous, this one is even less likely to work.

Answer 1

You can't see the ghost because p5js immediately draws over the ghost with the background again. I suggest you create a variable to check if you need draw the ghost:

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;
  }
}