week#2 – “for” loop assignment

My aim for this assignment was to produce an Andy-Warhol(esque), visually abstract art with a pronounced focus on colour portrayal. This is because some of Andy Warhol’s more iconic features of pop art was his use of distinctive arrays of colour. Through this ever prominent display of colours, which was made especially overt by the black background, coupled with the illusion of depth that is added within each square, I was able to generate an unintended yet desirable end-result.

This assignment punctuated the fact that my brain is not hardwired for coding, especially p5.js – javascript coding, and to some extremes, it even made me reconsider my major (interactive media). Whilst I had ambitious ideas and concepts I wished to bloom into fruition, my abilities and understanding of coding severely restricted this. As a result, I am incredibly proud of every single code that I produced with the for() loop since it took me an unbelievable amount of time to perfect(?) it. Initially I had wanted some form of dynamic physical change of shapes e.g., squares transitioning into ellipses, circles alternating in size, but again, with my incredibly limited knowledge it was hard to replicate it.

let cols = 10; // Number of columns
  let rows = 10; // Number of rows
  let gap = 10; // Gap size between squares
  let squareSize = (width - (cols - 1) * gap) / cols; //calculating square size
  
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let x = c * (squareSize + gap); //x+y position of squares
      let y = r * (squareSize + gap); 
      
    //generating a random colour
    let randomColor = color(random(255), random(255), random(255));
      
      noFill(); 
      stroke(randomColor);
      rect(x, y, squareSize); // Draw the square
      
        //creating transition between square and ellipse
        for (let size = squareSize; size >= 20; size -= 2) {
          rect(x, y, size); // Draw a square
          ellipse(x + size / 2, y + size / 2, size - 10, size - 10); // Draw a circle in the middle of the square

Creating a spaced grid with randomly iterating colours was definitely doable although I can’t deny that it was a mind-twister but trying to create this transition from square to ellipse was almost impossible. I’m still not entirely sure how to adjust the coding to produce my desired result but, though not intended, this outcome was equally wonderful. I was very pleased with how it displayed on screen. For further improvements, as I have previously mentioned, I would love to first of all solidify my coding knowledge so that I can produce more dynamic and animated works. Perhaps an interesting idea could be that these squares randomly swap positions to occupy a new coordinate.