​

function setup() {

  var canvas = createCanvas(600, 400);

  var main = canvas.parent();

  console.log(main);

  var cityButton = createButton("Generate a city");

  cityButton.mousePressed(cityscape);

  cityButton.parent(main);

  createSpan("Set number of buildings:")

  buildingSlider = createSlider(0, 20, 10);

  buildingSlider.input(cityscape);

  cityscape();

}

​

function cityscape() {

  background("lightgray");

  // number of buildings

  var n = buildingSlider.value();

  var w = width / n; 

  for (var i = 0; i < n; i++) {

    var x = i * w;

    var h = random(50, 200);

    building(x, height - h, w, h);

  }

  // road

  fill("gray");

  rect(0, height - 50, width, 50);

}

​

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

  fill("gray");

  rect(x, y, w, h);

  fill("black");

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

    rect(x + w/4 + i * 10, y + 10, 5, 10);

  }

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

    rect(x + w/4 + i * 10, y + h/2 + 10, 5, 10);

  }

}

​