Generative Art using Loops

My concept

I really love the randomizing feature on p5js, just because it means I don’t have to tediously designate a color for each shape when I make a creative piece and I enjoy the unpredictable aspect of it. I decided to create a repetitive grid-like piece with randomized colors that change every frame; no frame is similar to the last because the colors are randomly generated every time. I called my piece Aquatic Disco Ball because of the repetitive square shapes that are only colored with hues generated from the blue and green values, with the red value being on 0 the entire time.

Code highlight

Big shoutout to The Coding Train on YouTube. If you’re seeing this, I wouldn’t have been able to code loops without your tutorials :’)

// restrictions of the bigger squares -- loops
// horizontal: X1
for (var X1 = 8; X1 <= width; X1 += 32){ // variable X1 starts at point 8 (out of 400) on the x-axis; it cannot get exceed the width of the canvas; it adds 32 to the space between each square
// vertical: Y1
for (var Y1 = 8; Y1 <= height; Y1 += 32){ // variable Y1 starts at point 8 (out of 400) on the y-axis; it cannot get exceed the height of the canvas; it adds 32 to the space between each square
  
// restrictions of the smaller squares 
// horizontal: X2
for (var X2 = 8; X2 <= width; X2 += 32){ // variable X1 starts at point 8 (out of 400) on the x-axis; it cannot get exceed the width of the canvas; it adds 32 to the space between each square
// vertical: Y2
for (var Y2 = 8; Y2 <= height; Y2 += 32){ // variable Y1 starts at point 8 (out of 400) on the y-axis; it cannot get exceed the height of the canvas; it adds 32 to the space between each square

Embedded Sketch

Reflection and ideas for future work or improvements

• When I was designing my pattern, the overlaying smaller squares made my browser lag trying to process all the newly added information. This is because I had to input more ‘for’ and ‘var’ codes for the smaller squares to achieve this design— but that meant it would take up more of my browser’s energy even if it was a relatively simple code and there weren’t too many lines overall.
• I also struggled with trying to figure out how to use ‘for’ loops and ‘var’ but The Coding Train videos helped me out. Don’t be fooled though, I’m still not fully competent…
• I feel that in order for me to improve, I need to familiarize myself with the ‘for’ and ‘var’ features more, just because I’m still not confident in my ability to execute my intended design using loops in my code.
• I also feel that I need to branch out and try generating different shapes other than squares, circles, and triangles, but that of course requires more practice.