createCanvas(600, 400);

  landscape();

  var landscapeButton = createButton("Generate a Landscape");

  landscapeButton.mousePressed(landscape);

​

  var saveButton = createButton("save image");

  saveButton.mousePressed(saveImage);

}

​

function saveImage() {

  save("Landscape.png");

}

​

function landscape() {

  background("#E6A039");

​

  //----------------------------------function calls:

  cloud(100, 100, 300);

  building(0, 60, 150);

  tree(100, 210, 100);

​

  //-------------------------------------------

  //sun

  noStroke();

  fill("yellow");

  circle(300, 130, 250);

​

  //-------------------------------------drawings:

​

  //street

  fill("#E0DFDF");

  noStroke();

  rect(0, 300, width, 100);

​

  //clouds:

  // fill("white");

  // circle(100,100,50);

  // circle(120,120,50);

  // circle(80,120,50);

​

  //building

  noStroke();

  fill("black");

  // rect(0, 150, 100, 150);

​

  noStroke();

  fill("black");

  // rect(300, 150, 100, 150);

​

  noStroke();

  fill("black");

  // rect(200, 150, 100, 150);

​

  noStroke();

  fill("black");

  // rect(400, 150, 100, 150);

​

  noStroke();

  fill("black");

  // rect(400, 150, 100, 150);

​

  //tree

  // fill("brown")

  // rect(100,220, 20, 100, 5);

  // fill("green");

  // circle(110, 220, 80);

​

  //------------------------------------loop:

  //  for (var x = 0; x <= width; x += 150) {

  //   var y = 100; // Fixed y position

  //   var h = 200

  //   var x =

  //   var w = random(0, 100); // Random width

  //   var y = random(0,200)

  //   building(x, y, w, h); // Pass width and height to building function

  // }

​

  //clouds & trees

  for (var x = 0; x <= width; x += 100) {

    var y = random(20, 140);

    cloud(x, y, "white");

    var s = random(50, 100);

    tree(x, 220, s);

    var w = random(50, 100); // Random width

    var by = random(0,200); // building y

    var h = 300 - by;

    building(x, by, w, h);

  }

​

  //car

  fill("black");

  circle(120, 360, 40);

  fill("black");

  circle(280, 360, 40);

  fill("#1B4D74");

  rect(100, 280, 200, 80);

  fill("#1B4D74");

  rect(300, 300, 50, 60, 5);

  fill("#FCFCFC");

  rect(320, 300, 30, 25, 5);

}

​

//-----------------------------------function declarations

​

//cloud

function cloud(x, y, c) {

  fill(c);

  noStroke();

  circle(x, y, 50);

  circle(x + 20, y + 20, 50);

  circle(x - 20, y + 20, 50);

}

​

//buildings

function building(x, y, w, h) {

  noStroke();

  fill("black");

  rect(x, y, w, h);

}

​

//trees

function tree(x, y, s) {

  fill("brown");

  rect(x, y, 20, 100, 5);

  fill("green");

  circle(x + 10, y, s);

}

​