difficulties:

• loops still very confusing to me
• still making rookie mistakes like forgetting certain syntax or not closing brackets
• using modulus is hard
• overall flow of code is becoming more intuitive, but making specific and creative adjustments are difficult → don’t know syntax or how to do it in the most efficient way; takes a very long time and is based on trial and error

overview:

• 0x10 grid of cells on a 400x400 canvas
• each cell can either display an ellipse or a rectangle depending on the sum of its row and column indices
• cells change color dynamically when mouse is hovered

grid setup:

• grid is made up of cols (10 columns) and rows (10 rows)
• size of each cell is determined by dividing the canvas width by the number of columns (cellWidth = width / cols) and the canvas height by the number of rows (cellHeight = height / rows)

drawing the grid:

• two nested loops (i and j) go through every column and row to calculate the position (x, y) of each cell
  • x is calculated as i * cellWidth, and y is j * cellHeight
  • places the cells in a grid by multiplying the column (i) and row (j) by the size of each cell

hover interaction:

• check mouse location using mouseX and mouseY
• if the mouse is over a cell, the color of that cell is set using the lerpColor() function, which blends two colors based on the position in the grid
  • if the mouse is over the cell, it uses colors that blend between blue and pink based on the column index i
  • otherwise, it fills the cell with a light gradient that blends between white and a light gray based on the row index j

shape alternation:

• alternates between drawing an ellipse and a rectangle in each cell, depending on whether the sum of the row (j) and column (i) indices is even or odd:
  • if (i + j) % 2 === 0 (even) → an ellipse is drawn
  • if the sum is odd → a rectangle is drawn
• padding
  • ellipse: diameter is cellWidth * 0.8, and it's drawn at the center of the cell
  • rectangle: inset by 10% of the cell's size on all sides (cellWidth * 0.1)

https://editor.p5js.org/tinaaayu/sketches/9vCc9ubM-