let clouds = [];

​

function setup() {

  createCanvas(600, 400);

  generatePatternButton();

}

​

function generatePatternButton() {

  let button = createButton("Generate Cityscape");

  button.position(20, 20);

  button.mousePressed(generateCityscape);

}

​

function generateCityscape() {

  buildings = []; // Clear previous buildings

  clouds = []; // Clear previous clouds

​

  background("lightblue");

​

  // Draw ground

  fill("#666666");

  noStroke();

  rect(0, height * 0.6, width, height * 0.4); // Ground

​

  // Generate buildings

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

    let x = random(width);

    let h = random(height * 0.2, height * 0.5); // Adjusted height range for buildings

    let w = random(20, 60); // Adjusted width range for buildings

    let building = {

      x: x,

      h: h,

      w: w

    };

    buildings.push(building);

  }

​

  // Generate clouds

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

    let x = random(width);

    let y = random(height * 0.2); // Adjusted height range for clouds

    let size = random(50, 100); // Adjusted size range for clouds

    let cloud = {

      x: x,

      y: y,

      size: size

    };

    clouds.push(cloud);

  }

​

  // Draw buildings

  fill("#444444");

  for (let building of buildings) {

    rect(building.x, height * 0.6 - building.h, building.w, building.h);

  }

​

  // Draw clouds

  fill("white");

  noStroke();

  for (let cloud of clouds) {

    ellipse(cloud.x, cloud.y, cloud.size, cloud.size * 0.6);

    ellipse(cloud.x + cloud.size * 0.3, cloud.y - cloud.size * 0.2, cloud.size * 0.8, cloud.size * 0.4);

    ellipse(cloud.x - cloud.size * 0.3, cloud.y + cloud.size * 0.2, cloud.size * 0.8, cloud.size * 0.4);

  }

}

​