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

p5.js Coding Questions
1 
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;
  }
}

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.

1 Like
2

mouseReleased is called only once briefly when you release the mouse when it was pressed before

Also, draw runs on and on 60 times per second and therefore everything that happens here, overwrites everything else (in your case what happens in mouseReleased)

Therefore try

void mousePressed() {
    tinted= !tinted; // toggles
}

And in draw() evaluate tinted with if and show different

  if (!tinted) {
    tint(255, 0, 0);
    background(house);
  } else {
    noTint();
    background(house);
  }
1 Like
3

Hey, and welcome to the forum!

Great to have you here!