function setup() {
  createCanvas(600, 400);
  particles = [];
  numParticles = 200;

  // Initialize particles to represent the city
  (let i = 0; i < numParticles; i++) {
    particles.push(new Particle(random(0, width), random(height * 0.3, height * 0.8)));
  }
}

function draw() {
  // Sky color
  background(135, 206, 235);

  // Ground gradient (simulating the foreground)
  let groundColor1 = color(102, 204, 0);
  let groundColor2 = color(50, 100, 0);
  for (let i = 0; i < height * 0.2; i++) {
    let inter = map(i, 0, height * 0.2, 0, 1);
    let c = lerpColor(groundColor1, groundColor2, inter);
    stroke(c);
    line(0, height - height * 0.2 + i, width, height - height * 0.2 + i);
  }

  // Draw and update particles (buildings)
  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(5, 20); // Varying building sizes
    this.color = color(random(100, 200), random(100, 200), random(100, 200)); // Muted building colors
    this.xOffset = random(0, 1000);
  }

  update() {
    // Apply "wind" effect based on mouse position
    let wind = map(mouseX, 0, width, -0.5, 0.5);
    this.x += wind * 0.1;
    this.x += noise(this.xOffset) * 0.2 - 0.1;
    this.xOffset += 0.01;

    // Keep particles within bounds
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, height * 0.3, height * 0.8);
  }

  display() {
    noStroke();
    fill(this.color);
    rect(this.x, this.y, this.size, this.size * 2); // Rectangles for buildings
  }
}