createCanvas(300, 300);

  background('#9bdef2');

}

​

function draw() {

  drawCity(15, 20, 10, 200)

}

​

function drawCity(cityX, cityY, citywidth, color) {

  hooddistance = citywidth*9

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

    for (let j = 0; j <= 2; j++) {

      drawNeighbourhood(cityX + (hooddistance * i), cityY + (hooddistance * j), citywidth, color)

    }

  }

}

​

function drawNeighbourhood(hoodX, hoodY, hoodwidth, color) {

  blockdistance = hoodwidth*3

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

    for (let j = 0; j <= 2; j++) {

      drawBlock(hoodX + (blockdistance * i), hoodY + (blockdistance * j), hoodwidth, color)

    }

  }  

}

​

​

function drawBlock(blockX, blockY, blockwidth, color) {

  distance = blockwidth

  fill(color)

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

    for (let j = 0; j <= 1.5; j = j + 1.5) {

      drawHouse(

        blockX + (distance * i),

        blockY + (distance * j),

        blockwidth, 

        color

      )

    }

  }

}

​

function drawHouse(houseX, houseY, size, color) {

  fill(color);

 // bottom of house

  rect(houseX, houseY, size);

  // top of house

  triangle(houseX, houseY, houseX+(size/2), houseY-size/2, houseX+size, houseY);

}