For this week's live coding, I decided to work on my previous checkerboard pattern. The original sketch used nested for loops and if/else statements to create a repeating pattern with different colors and shapes. I wanted to explore how I could make my code simpler and more interactive.
Change 1: Using an Array
First, I noticed that I was repeating the same color codes many times. So I created an array to store all four colors. In this case, I can try different color series for my pattern. Instead of writing the hex codes every time, I could use colors[0], colors[1], etc. This made my code easier to organize. I also found that I could change the colors of the whole pattern by editing just one array.
Change 2: Creating a Function
Next, I tried using a function to draw the circles. Originally, I had two separate pieces of code for the yellow and pink circles. I created a drawCircle() function with four parameters: x, y, size, and color. This allowed me to reuse the same function with different values.
I also made a small mistake here. I wrote color[0] instead of colors[0]. This helped me understand the difference between an array name and a function parameter.
Change 3: Adding Mouse Interaction
Finally, I wanted to make the pattern interactive. I used mouseX to control the size of the circles.
At first, I tried putting let circleSize = 20 + mouseX / 20; at the top of my code and inside setup(), but it didn't work as I expected. Then I found that setup() only runs once, while draw() runs continuously.
After moving the calculation into draw(), the circles could change size when I moved my mouse.