When I tried to make each box display a different color when the mouse hovered over it, I experimented with adding the random() function. However, I couldn’t control how much the colors changed or how often they changed. Should I use millis() to control the timing, or do I need to add another for loop so that I can control the speed of the color changes and make each color change only once?
function setup() { createCanvas(600, 400); }
function draw() { background(0); for(let i = 0; i<20; i ++){
let x = i * 30;
if (mouseX >= x && mouseX < x + 30){
fill(random(255),random(255),random(255));
}else{
fill('white');
}
rect (x, 0, 30,height);
}
}
https://editor.p5js.org/LinSHU0901/full/AJ5F8FFkV
I tried to develop the idea of creating 100 random squares into a series of simple faces made with basic lines, where I could control how the eyes changed. When I click the mouse, the eyes randomly either close or turn into small dots. During the process, I found that when I use noLoop() in setup(), the instructions inside draw() will no longer loop or update unless I use redraw() later to run the draw() function again.