let audioStarted = false;

let buildings = [];

let stars = [];

let chords = {

  Cmaj7: { notes: ["C4", "E4", "G4", "B4"], color: [255, 200, 100] },

  Dm7: { notes: ["D4", "F4", "A4", "C5"], color: [100, 255, 100] },

  G7: { notes: ["G3", "B3", "D4", "F4"], color: [100, 100, 255] },

  Am7: { notes: ["A3", "C4", "E4", "G4"], color: [255, 100, 150] },

};

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  let startButton = createButton("Start Music");

  startButton.position(10, 10);

  startButton.mousePressed(startAudio);

​

  generateBuildings();

  generateStars(100);

}

​

function startAudio() {

  if (!audioStarted) {

    Tone.start().then(() => {

      synth = new Tone.PolySynth(Tone.Synth, {

        maxPolyphony: 10,

      }).toDestination();

      audioStarted = true;

    });

  }

}

​

function draw() {

  setGradient(0, 0, width, height, color(10, 10, 40), color(120, 50, 80), "Y");

​

  for (let star of stars) {

    star.update();

    star.display();

  }

​

  for (let b of buildings) {

    b.display();

  }

}

​

function generateStars(numStars) {

  for (let i = 0; i < numStars; i++) {

    stars.push(new Star(random(width), random(height * 0.6)));

  }

}

​

class Star {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = random(1, 3);

    this.brightness = random(150, 255);

    this.twinkleSpeed = random(0.01, 0.05);

  }

​

  update() {

    this.brightness += sin(frameCount * this.twinkleSpeed) * 2;

  }

​

  display() {

    fill(255, 255, 200, this.brightness);

    noStroke();

    ellipse(this.x, this.y, this.size);

  }

}

​

function generateBuildings() {

  let numBuildings = 5;

  let buildingWidth = width / numBuildings - 20;

  let chordKeys = Object.keys(chords);

​

  for (let i = 0; i < numBuildings; i++) {

    let x = i * (buildingWidth + 20);

    let w = buildingWidth;

    let h = random(height * 0.5, height * 0.8);

    let y = height - h;

    let chordKey = chordKeys[i % chordKeys.length];

​

    buildings.push(new Building(x, y, w, h, chordKey));

  }

}

​

class Building {

  constructor(x, y, w, h, chordKey) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.chordKey = chordKey;

    this.windows = [];

​

    let rows = int(h / 50);

    let cols = int(w / 50);

    let chordNotes = chords[chordKey].notes;

​

    for (let r = 0; r < rows; r++) {

      for (let c = 0; c < cols; c++) {

        let wx = this.x + c * 50 + 10;

        let wy = this.y + r * 50 + 10;

        let note = chordNotes[(r * cols + c) % chordNotes.length];

​

        this.windows.push(new Window(wx, wy, note, chords[chordKey].color));

      }

    }

  }

​

  display() {

    fill(10, 10, 20);

    noStroke();

    rect(this.x, this.y, this.w, this.h);

​

    for (let w of this.windows) {

      w.update();

      w.display();

    }

  }

}

​

class Window {

  constructor(x, y, note, color) {

    this.x = x;

    this.y = y;

    this.size = 40;

    this.note = note;

    this.color = color;

    this.brightness = 30;

  }

​

  update() {

    this.brightness = lerp(this.brightness, 30, 0.05);

  }

​

  display() {

    fill(this.color[0], this.color[1], this.color[2], this.brightness);

    rect(this.x, this.y, this.size, this.size);

  }

​

  playArpeggio() {

    let arpeggioNotes = [this.note];

    let duration = "8n";

    let octaveShift = ["", "5", "6"];

​

    for (let i = 1; i < 3; i++) {

      let baseNote = this.note.substring(0, this.note.length - 1);

      arpeggioNotes.push(baseNote + octaveShift[i]);

    }

​

    let sequence = new Tone.Sequence(

      (time, note) => {

        synth.triggerAttackRelease(note, duration, time);

        this.brightness = 255;

      },

      arpeggioNotes,

      "8n"

    ).start(0);

​

    Tone.Transport.start();

    setTimeout(() => {

      sequence.stop();

    }, arpeggioNotes.length * 300);

  }

​

  isClicked(mx, my) {

    return (

      mx > this.x &&

      mx < this.x + this.size &&

      my > this.y &&

      my < this.y + this.size

    );

  }

}

​

function mousePressed() {

  if (!audioStarted) return;

​

  for (let b of buildings) {

    for (let w of b.windows) {

      if (w.isClicked(mouseX, mouseY)) {

        w.playArpeggio();

      }

    }

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

  for (let i = y; i <= y + h; i++) {

    let inter = map(i, y, y + h, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(x, i, x + w, i);

  }

}

​