hackTheBayIMG.js

var NUM_ROWS, DIA, RAD;

function setup() {
  createCanvas(300, 300);
  background('#f9a825');

  NUM_ROWS = 8; //modify me if u wish
  //determines radius and diameter based on NUM_ROWS
  RAD = height / NUM_ROWS;
  DIA = 2 * RAD;
}

function draw() {
  var alt = true; //alternates x position

  var currentRow = 0; //row number

  //position the y coordinate
  for (var y = height; y >= 0; y -= RAD) {

      currentRow += 1;
      alt = !alt; //alteration

      var xPos = alt ? 0 : RAD; //determine x position


      var r = 0, g = 0, b = 0;

      r = (r + (currentRow == 4 ? 121 : 30 * currentRow));
      console.log(r); //RED color value

      g = (g + (13 * currentRow));
      console.log(g); //GREEN color value

      b = (b + (currentRow == 4 ? 45 : 11 * currentRow));
      console.log(b); //BLUE color value

      //set color of row based on above r g b
      var rowColor = color(38 + r, 77 + g, 115 - b);

      stroke(rowColor);
      fill(rowColor);

      for (var x = xPos; x <= width; x += DIA) {
        ellipse(x, y, DIA, DIA);
      }

  }
}