<aside>
for (initialization; condition; increment) {
// Code to be executed
}
initialization
while (condition) {
// Code to be executed
increment
}
</aside>
I want to draw this using a loop function.
At first, I failed to draw the circle. After I wrote the loop function code, nothing appeared on the canvas.
Then I asked ChatGPT to debug for me. It said that I have the wrong sentence with the range in the loop.
for (let x = r; x < width; x += r * 2)
for (let y = r; y < height; y += r * 2)
When I used ‘True or False’ to fill the color, I found that one row is green and the next row is grey.
isGreen=(x/(r**2) + y/(r**2))%2 == 0
(x, y) = (0, 0), isGreen will be (0 + 0)% 2= 0
(x, y) = (40, 0), isGreen will be (1 + 0)% 2= 1
(x, y) = (0, 40), isGreen will be (0 + 1)% 2= 1
(x, y) = (40, 40), isGreen will be (1 + 1)% 2= 0
https://editor.p5js.org/HanBao/full/Nk5jir6L2
<aside>
Create a grid of 100 cells that turn red when you hover over them. Challenge: Rewrite your grid so that you can change the total width of the grid, the total height of the grid, the total number of columns and the total number of rows without having to change any of the code in the loops.
</aside>
Initial code draft: the rectangles seem to overlap…
Second code draft: 100 cells have been drawn, but it don’t turn red when the mouse moves over cell.
Third code draft: I adjusted the position of rect() function, the cell turned red!
<aside>
Challenge: Create a checkerboard grid of 100 cells.
</aside>