Genuary Day 7 + Day 8

let colors = [];
let buildings = [];
let heights = [];
let n;
let t = 0;
let h;
function setup() {
  cnv = createCanvas(600, 600);
  noStroke();
  newColors();
  n = randomGaussian(100, 20);
  buildings = [];
  for (let i = 0; i < n; i++) {
    buildings.push(new Bs());
  }
  describe(
    "transparent city scape on water with reflection and lines in the water with a consisten color pallet and windows in the city. "
  );
  noLoop();
  h = color(random(colors));
  h.setAlpha(100);
  document.body.style.background = h;
  h.setAlpha(50);
}

function draw() {
  translate(width / 2, height / 2);
  t++;

  background(h);
  for (let i = 0; i < buildings.length; i++) {
    buildings[i].display();
  }
}
class Bs {
  constructor() {
    this.x = randomGaussian(0, width / 4);
    this.c = random(colors);
    this.c2 = random(colors);
    this.h = abs(random(height / 3 - abs(this.x / 2), -abs(this.x / 5)));
    this.w = random(width / 50, width / 10);
    this.bools = [
      random([true, false]),
      random([true, false]),
      random([true, false]),
      random([true, false]),
      random([true, false]),
      random([true, false]),
      random([true, false])
    ];
    this.windows = random([0, 1, 2, 2, 3, 3, 3, 4, 4, 5]);
    this.rows = random([4, 5, 6, 7, 8]);
  }
  display() {
    let c = color(this.c);
    c.setAlpha(20);
    let c1 = color(this.c);
    c1.setAlpha(50);
    let c2 = color(this.c2);
    c2.setAlpha(15);
    let c3 = color(this.c2);
    c3.setAlpha(40);
    fill(c);
    rect(this.x, 0, this.w, this.h);

    fill(c1);
    rect(this.x, -this.h, this.w, this.h);

    if (this.bools[0]) {
      fill(255);
      for (let j = 0; j < this.windows; j++) {
        for (let k = 0; k < this.rows; k++) {
          fill(c2);
          let d1 = this.w / (this.windows + 1);
          let d2 = this.h / this.rows;
          let x1 = this.x + d1 / 2 + d1 * j;
          rect(x1, d2 * k, d1 / 2, d2 / 2);
          fill(c3);
          rect(x1, -d2 / 2 - d2 * k, d1 / 2, d2 / 2);
        }
      }
      if (this.bools[1]) {
        push();
        let c4 = color(this.c);
        c4.setAlpha(40);
        stroke(c4);
        strokeWeight(this.rows / 5);
        let x2 = this.x - this.rows * this.windows;
        let y2 = abs(this.h / 2);
        line(x2 - this.c[1], y2, x2 + (this.c[0] * this.windows) / 4, y2);

        pop();
        if (this.bools[2]) {
          push();
          let c5 = color(this.c);
          c5.setAlpha(15);
          stroke(c5);
          strokeWeight(this.rows / 10);
          let x2 = this.x - this.rows * this.windows;
          let y2 = abs(this.h / 1.5);
          line(x2 - this.c[2], y2, x2 + (this.c[0] * this.windows) / 5, y2);

          pop();
          if (this.bools[3]) {
            push();
            let c6 = h;
            c6.setAlpha(20);
            stroke(c6);
            strokeWeight(this.rows / this.windows);
            let x2 = this.x - this.rows * this.windows;
            let y2 = abs(this.h / this.windows + this.c[0]);
            line(x2 - this.c[2], y2, x2 + (this.c[0] * this.windows) / 5, y2);

            pop();
            if (this.bools[4] || this.bools[5] || this.bools[6]) {
              push();

              stroke(255, 255, 255, 40);
              strokeWeight(random(0.1, 2));
              let x2 = random(-width / 3, width / 3);
              let y2 = abs(random(10, height / 3));
              line(
                x2 - this.c[1] * 0.8,
                y2,
                x2 + (this.c[0] * this.windows) / 5,
                y2
              );

              pop();
            }
          }
        }
      }
    }
  }
}
function mousePressed() {
  setup();
  draw();
}

function newColors() {
  let rC = [random(5, 10), random(20, 35), random(25, 40)];
  cnt = 0;
  for (let i = 1; i < 10; i += 0.2) {
    colors[cnt] = [
      (1.2 * rC[2]) / i + rC[0] * i * 0.8,
      (-1.2 * rC[0]) / i + rC[1] * i * 0.8,
      (1.2 * rC[1]) / i + rC[2] * i * 0.8
    ];
    fill(colors[cnt]);
    cnt++;
  }
}

function keyPressed() {
  if (keyCode === 83) {
    save(cnv, "city", "png");
  }
}