How do i make images change color when clicked/ hovered in p5?

Question

I am making a world in p5 and i want to make my images green when clicked or hovered (with overlay).

I'm new to p5 and don't really know how to do this.

I've already tried working with mousePressed and collision detection, but it just doesn't work.

If anyone could help I would greatly appreciate it.

let rodeBloedcel;

let x = 100;
let y = 100;
let xspeed = 2.5;
let yspeed = -1;

function preload() {
    rodeBloedcel = loadImage('Img/RodeBloedcel.png');
}

function setup() {
    createCanvas(800, 600);
}

function draw() {
    background('black');
    image(rodeBloedcel, x, y, 100, 70);

    x = x + xspeed;
    y = y + yspeed;

    if (x < 0 || x > width - 100) {
        xspeed = -xspeed;
    }

    if (y < 0 || y > height - 70) {
        yspeed = -yspeed;
    };
}

I already have this and it works, I just need to figure out how to make my image green when I click on it/ hover over it.

Answer 1

You can use the tint function in p5.js

https://p5js.org/reference/#/p5/tint

if (x < 0 || x > width - 100) {
    xspeed = -xspeed;
    tint(0,128,0); // Tint green
    image(rodeBloedcel, x, y,100,70);            
}