Ok let’s go over this :
-
I suppose that you don’t want to animate your sketch based on your description so you can use
noLoop()
at the end of the draw function to break the loop. We want to only draw once. -
Also you are misleading with the usage of
beginShape()
/endShape()
, they are used when you want to draw a shape using custom points (not a rectangle or an ellipse since those shapes already have their own pre defined functions) -
Using
translate()
will move the whole coordinate system, in this case you rather want to display your rect with an offset of -58. -
When using
fill()
ornoStroke()
, it’s like a state machine. Unless you call againfill()
with another color, it’s going to stay the same. So you can call them once before drawing your shapes -
When your pattern is working properly, you can see that the last column and row are not drawn. Can you find what to change in order to display the whole pattern correctly?
-
Also try to put spaces in your code as it increases readability
Try to change your code to make it work and then I can post the full solution!