createCanvas(window.innerHeight, window.innerHeight);

  noLoop();

}

​

function draw() {

  background("black");

​

  // drawTown(townX, townY, townSize);

  // drawTown(20, 20, 400);

  drawCity();

}

function drawCity() {

  let townSize = width*0.5

  // top left

  let town1X = 0

  let town1Y = 0

  drawTown(town1X, town1Y, townSize)

  // top right

  let town2X = width*0.5

  let town2Y = 0

  drawTown(town2X, town2Y, townSize)

  // bottom left

  let town3X = 0

  let town3Y = height*0.5

  drawTown(town3X, town3Y, townSize)

  // bottom right

  let town4X = width * 0.5

  let town4Y = height * 0.5

  drawTown(town4X, town4Y, townSize)

}

// Code for drawing a town

function drawTown(townX, townY, townSize) {

  let plotSize = townSize / 2;

​

  //top-left plot

  let plot1X = townX;

  let plot1Y = townY;

  drawPlot(plot1X, plot1Y, plotSize);

​

  //top-right plot

  let plot2X = townX + townSize / 2;

  let plot2Y = townY;

  drawPlot(plot2X, plot2Y, plotSize);

​

  //bottom-left plot

  let plot3X = townX;

  let plot3Y = townY + townSize / 2;

  drawPlot(plot3X, plot3Y, plotSize);

​

  //bottom-right plot

  let plot4X = townX + townSize / 2;

  let plot4Y = townY + townSize / 2;

  drawPlot(plot4X, plot4Y, plotSize);

  // Roads

  noStroke()

  fill('black')

  // Vertical

  let roadWidth = townSize*0.08

  let verticalRoadX = townX + townSize*0.5 - roadWidth*0.5

  let verticalRoadY = townY + 0

  rect(verticalRoadX, verticalRoadY, roadWidth, townSize)

  // Horizontal

  let horizontalRoadX = townX

  let horizontalRoadY = townY + townSize*0.5 - roadWidth*0.5

  rect(horizontalRoadX, horizontalRoadY, townSize, roadWidth)

  // Markings

  fill('yellow')

  let markingWidth = townSize * 0.005

  // Vertical

  let verticalMarkingX = townX + townSize*0.5 - markingWidth*0.5

  let verticalMarkingY = townY + 0

  rect(verticalMarkingX, verticalMarkingY, markingWidth, townSize)

  // Horizontal

  let horizontalMarkingX = townX + 0

  let horizontalMarkingY = townY + townSize*0.5 - markingWidth*0.5

  rect(horizontalMarkingX, horizontalMarkingY, townSize, markingWidth)

}

​

// Code for drawing a plot

function drawPlot(plotX, plotY, plotSize) {

  fill("yellow");

  noStroke();

  square(plotX, plotY, plotSize);

​

  let houseWidth = plotSize * 0.3;

  let houseHeight = plotSize * 0.3;

​

  //top-left house

  let house1X = plotX + plotSize * 0.1;

  let house1Y = plotY + plotSize * 0.1;

  drawHouse(house1X, house1Y, houseWidth, houseHeight);

​

  //top-right house

  let house2X = plotX + plotSize * 0.1;

  let house2Y = plotY + plotSize * 0.6;

  drawHouse(house2X, house2Y, houseWidth, houseHeight);

​

  //bottom-left house

  let house3X = plotX + plotSize * 0.6;

  let house3Y = plotY + plotSize * 0.1;

  drawHouse(house3X, house3Y, houseWidth, houseHeight);

​

  //bottom-right house

  let house4X = plotX + plotSize * 0.6;

  let house4Y = plotY + plotSize * 0.6;

  drawHouse(house4X, house4Y, houseWidth, houseHeight);

}

​

// Code for drawing a house

function drawHouse(houseX, houseY, houseWidth, houseHeight) {

  stroke(0);

​

  const frontY = houseY + houseHeight * 0.4;

  const frontHeight = houseHeight * 0.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 * 0.5,

    houseY,

    houseX + houseWidth,

    frontY

  );

​

  const windowWidth = houseWidth * 0.25;

  const windowHeight = frontHeight * 0.25;

  const windowY = frontY + frontHeight * 0.15;

​

  const leftWindowX = houseX + houseWidth * 0.1;

  const rightWindowX = houseX + houseWidth - houseWidth * 0.1 - windowWidth;

​

  // windows

  fill(random(255), random(255), random(255));

  rect(leftWindowX, windowY, windowWidth, windowHeight);

  line(

    leftWindowX,

    windowY + windowHeight * 0.5,

    leftWindowX + windowWidth,

    windowY + windowHeight * 0.5

  );

  line(

    leftWindowX + windowWidth * 0.5,

    windowY,

    leftWindowX + windowWidth * 0.5,

    windowY + windowHeight

  );

  rect(rightWindowX, windowY, windowWidth, windowHeight);

  line(

    rightWindowX,

    windowY + windowHeight * 0.5,

    rightWindowX + windowWidth,

    windowY + windowHeight * 0.5

  );

  line(

    rightWindowX + windowWidth * 0.5,

    windowY,

    rightWindowX + windowWidth * 0.5,

    windowY + windowHeight

  );

​

  const doorWidth = houseWidth * 0.25;

  const doorHeight = frontHeight * 0.4;

  const doorX = houseX + houseWidth * 0.5 - doorWidth * 0.5;

  const doorY = houseY + houseHeight - doorHeight;

​

  // door

  fill(random(255), random(255), random(255));

  rect(doorX, doorY, doorWidth, doorHeight);

​

  const doorknobX = doorX + doorWidth * 0.2;

  const doorknobY = doorY + doorHeight * 0.5;

  const doorknobSize = houseWidth * 0.05;

​

  // doorknob

  fill(0);

  circle(doorknobX, doorknobY, doorknobSize);

}

​