function setup() {
  createCanvas(600, 600);
  noLoop();
}

function draw() {
  background(0, 255, 100);
  drawCity(0, 0, width, height);
}

function drawCity(cityX, cityY, cityWidth, cityHeight) {
  drawTown(cityX, cityY, cityWidth * .5, cityHeight * .5);
  drawTown(cityX + cityWidth * .5, cityY,
           cityWidth * .5, cityHeight * .5);
  drawTown(cityX, cityY + cityHeight * .5,
           cityWidth * .5, cityHeight * .5);
  drawTown(cityX + cityWidth * .5, cityY + cityHeight * .5,
           cityWidth * .5, cityHeight * .5);
}

function drawTown(townX, townY, townWidth, townHeight) {
  drawBlock(townX, townY,
            townWidth * .45, townHeight * .45);
  drawBlock(townX + townWidth * .55, townY,
            townWidth * .45, townHeight * .45);
  drawBlock(townX, townY + townHeight * .55,
            townWidth * .45, townHeight * .45);
  drawBlock(townX + townWidth * .55, townY + townHeight * .55,
            townWidth * .45, townHeight * .45);

  // roads
  noStroke();
  fill(32);
  rect(townX + townWidth * .45, townY, townWidth * .1, townHeight);
  rect(townX, townY + townHeight * .45, townWidth, townHeight * .1);
  stroke(255, 255, 0);
  line(townX + townWidth * .5, townY,
       townX + townWidth * .5, townY + townHeight)
  line(townX, townY + townHeight * .5,
       townX + townWidth, townY + townHeight * .5);
}

function drawBlock(blockX, blockY, blockWidth, blockHeight) {
  // yard
  fill(0, random(200, 255), 0);
  noStroke();
  rect(blockX, blockY, blockWidth, blockHeight);

  const r = random(1);
  if(r < .25){
    drawPlot(blockX + blockWidth * .1, blockY + blockHeight * .1,
              blockWidth * .3, blockHeight * .7);
    drawPlot(blockX + blockWidth * .6, blockY + blockHeight * .1,
             blockWidth * .3, blockHeight * .7);
  } else if(r < .5){
    drawPlot(blockX + blockWidth * .1, blockY + blockHeight * .1,
              blockWidth * .7, blockHeight * .3);
    drawPlot(blockX + blockWidth * .1, blockY + blockHeight * .6,
             blockWidth * .7, blockHeight * .3);
  } else {
    drawPlot(blockX + blockWidth * .1, blockY + blockHeight * .1,
             blockWidth * .3, blockHeight * .3);
    drawPlot(blockX + blockWidth * .6, blockY + blockHeight * .1,
             blockWidth * .3, blockHeight * .3);
    drawPlot(blockX + blockWidth * .1, blockY + blockHeight * .6,
             blockWidth * .3, blockHeight * .3);
    drawPlot(blockX + blockWidth * .6, blockY + blockHeight * .6,
             blockWidth * .3, blockHeight * .3);
  }
}

function drawPlot(plotX, plotY, plotWidth, plotHeight) {
  const r = random(1);
  if (r < .3) {
    drawHouse(plotX, plotY, plotWidth, plotHeight);
  } else if(r < .6) {
    drawOffice(plotX, plotY, plotWidth, plotHeight);
  } else {
    drawFactory(plotX, plotY, plotWidth, plotHeight);
  }
}

function drawHouse(houseX, houseY, houseWidth, houseHeight) {
  stroke(0);

  const frontY = houseY + houseHeight * .4;
  const frontHeight = houseHeight * .6;

  // front
  fill(random(255), random(255), random(255));
  rect(houseX, frontY, houseWidth, frontHeight);

  // roof
  fill(random(255), random(255), random(255));
  triangle(houseX, frontY,
           houseX + houseWidth * .5, houseY,
           houseX + houseWidth, frontY);

  const windowWidth = houseWidth * .25;
  const windowHeight = frontHeight * .25;
  const windowY = frontY + frontHeight * .15;

  const leftWindowX = houseX + houseWidth * .1;
  const rightWindowX = (houseX + houseWidth) -
                       (houseWidth * .1) - windowWidth;

  // windows
  fill(random(255), random(255), random(255));
  rect(leftWindowX, windowY, windowWidth, windowHeight);
  line(leftWindowX, windowY + windowHeight * .5,
       leftWindowX + windowWidth, windowY + windowHeight * .5);
  line(leftWindowX + windowWidth * .5, windowY,
       leftWindowX + windowWidth * .5, windowY + windowHeight);
  rect(rightWindowX, windowY, windowWidth, windowHeight);
  line(rightWindowX, windowY + windowHeight * .5,
       rightWindowX + windowWidth, windowY + windowHeight * .5);
  line(rightWindowX + windowWidth * .5, windowY,
       rightWindowX + windowWidth * .5, windowY + windowHeight);

  const doorWidth = houseWidth * .25;
  const doorHeight = frontHeight * .4;
  const doorX = houseX + houseWidth * .5 - doorWidth * .5;
  const doorY = houseY + houseHeight - doorHeight;

  // door
  fill(random(255), random(255), random(255));
  rect(doorX, doorY, doorWidth, doorHeight);

  const doorknobX = doorX + doorWidth * .2;
  const doorknobY = doorY + doorHeight * .5;
  const doorknobSize = houseWidth * .05;

  // doorknob
  fill(0);
  circle(doorknobX, doorknobY, doorknobSize);
}

function drawOffice(officeX, officeY, officeWidth, officeHeight) {
  stroke(0);
  fill(random(255), random(255), random(255));
  rect(officeX, officeY, officeWidth, officeHeight);

  // windows
  fill(random(255), random(255), random(255));
  rect(officeX + officeWidth * .1, officeY + officeHeight * .1,
       officeWidth * .2, officeHeight * .2);
  rect(officeX + officeWidth * .4, officeY + officeHeight * .1,
       officeWidth * .2, officeHeight * .2);
  rect(officeX + officeWidth * .7, officeY + officeHeight * .1,
       officeWidth * .2, officeHeight * .2);
  rect(officeX + officeWidth * .1, officeY + officeHeight * .4,
       officeWidth * .2, officeHeight * .2);
  rect(officeX + officeWidth * .4, officeY + officeHeight * .4,
       officeWidth * .2, officeHeight * .2);
  rect(officeX + officeWidth * .7, officeY + officeHeight * .4,
       officeWidth * .2, officeHeight * .2);

  // door
  fill(random(255), random(255), random(255));
  rect(officeX + officeWidth * .4, officeY + officeHeight * .8,
      officeWidth * .2, officeHeight * .2);
}

function drawFactory(factoryX, factoryY, factoryWidth, factoryHeight) {
  stroke(0);
  fill(random(255), random(255), random(255));

  // front
  rect(factoryX, factoryY + factoryHeight * .5,
       factoryWidth, factoryHeight * .5);

  // stacks
  rect(factoryX + factoryWidth * .2, factoryY + factoryHeight * .1,
       factoryWidth * .1, factoryHeight * .4);
  rect(factoryX + factoryWidth * .7, factoryY + factoryHeight * .1,
       factoryWidth * .1, factoryHeight * .4);

  // windows
  fill(random(255), random(255), random(255));
  rect(factoryX + factoryWidth * .2, factoryY + factoryHeight * .6,
       factoryWidth * .1, factoryHeight * .1);
  rect(factoryX + factoryWidth * .7, factoryY + factoryHeight * .6,
       factoryWidth * .1, factoryHeight * .1);

  // door
  rect(factoryX + factoryWidth * .4, factoryY + factoryHeight * .8,
       factoryWidth * .2, factoryHeight * .2);
}