Q2:Change the behavior so that when you mouse over a column, it appears and stays until the next time you mouse over it again, at which point the column disappears.

I tried setting the area outside the button as a “reset” area to keep count. This means that each time you want to turn it on or off, you have to touch the reset area first.
I use reset = !reset to switch the reset state.However, I found that when I keep the mouse on the button, the reset state keeps changing, which causes a flickering effect.
if (mouseX > 200 && mouseX < 400) {
if (!reset) {
on = true;
} else if (reset) {
on = false;
}
reset = !reset;
} else {
reset = true;
}
Q4: Draw a rectangle to the screen about every half a second
1 second have 60 frame. It means that half a second=30 frame . I want the rectangle to be drawn every 30 frames (at frames 0, 30, 60, 90…). These numbers are all multiples of 30.
Therefore, the rectangle appears whenever the remainder is 0.
if (frameCount % 30 == 0) {
rect(width / 4, height / 4, 300, 200);
}
x is the movement range of my ball, from 5 to 600. I use map() to convert this range to a color range of 0 to 255. This means they have a positive relationship.
let c = map(x, 5, 600, 0, 255);
Sketch1
At first, we wanted to use bezier curves to draw a person who studies when the light is on and closes their eyes to sleep when the light is off. However, it was a little too complicated to create.
