我如何使图像改变颜色时点击/悬停在p5?

Question

我在p5中制作一个世界，我想让我的图像在点击或悬停(覆盖)时变为绿色。

我是p5的新手，真的不知道怎么做。

我已经尝试过使用mousePressed和碰撞检测，但它只是不起作用。

如果有人能帮忙，我将不胜感激。

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

我已经有了这个，它工作，我只需要弄清楚如何使我的图像绿色，当我点击它/悬停在它上面。

Answer 1

您可以在p5.js中使用tint函数

https://p5js.org/reference//p5/色彩

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