/*
 * @name Iteration
 * @arialabel White bars on the top half of the screen intersect with thin lines on the left and dark grey bars on the right
 * @description Iteration with a "for" structure to construct repetitive forms.
 */
let y;
let num = 14;

function setup() {
  // createCanvas(720, 360);
  createCanvas(windowWidth, windowHeight);
  background(102);
  noStroke();

  // Draw white bars
  fill(255);
  y = 60;
  for (let i = 0; i < num / 3; i++) {
    rect(50, y, 475, 10);
    y += 20;
  }

  // Gray bars
  fill(51);
  y = 40;
  for (let i = 0; i < num; i++) {
    rect(405, y, 30, 10);
    y += 20;
  }
  y = 50;
  for (let i = 0; i < num; i++) {
    rect(425, y, 30, 10);
    y += 20;
  }

  // Thin lines
  y = 45;
  fill(0);
  for (let i = 0; i < num - 1; i++) {
    rect(120, y, 40, 1);
    y += 20;
  }
}