createCanvas(window.innerHeight, window.innerHeight);

  frameRate(1);

}

​

function draw() {

  background("black");

  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);

}

​

function drawTown(townX, townY, townSize) {

  let plotSize = townSize / 2;

​

  let plot1X = townX + 0;

  let plot1Y = townY + 0;

​

  drawPlot(plot1X, plot1Y, plotSize);

​

  let plot2X = townX + townSize * 0.5;

  let plot2Y = townY + 0;

​

  drawPlot(plot2X, plot2Y, plotSize);

​

  let plot3X = townX + 0;

  let plot3Y = townY + townSize * 0.5;

​

  drawPlot(plot3X, plot3Y, plotSize);

​

  let plot4X = townX + townSize * 0.5;

  let plot4Y = townY + townSize * 0.5;

​

  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);

}

​

function drawPlot(plotX, plotY, plotSize) {

  fill("lightgreen");

  noStroke();

​

  square(plotX, plotY, plotSize);

​

  stroke("black");

​

  let houseWidth = plotSize * 0.25;

  let houseHeight = plotSize * 0.3;

​

  let house1X = plotX + plotSize * 0.2;

  let house1Y = plotY + plotSize * 0.15;

​

  drawBuilding(house1X, house1Y, houseWidth, houseHeight);

​

  let house2X = plotX + plotSize * 0.55;

  let house2Y = plotY + plotSize * 0.15;

​

  drawBuilding(house2X, house2Y, houseWidth, houseHeight);

​

  let house3X = plotX + plotSize * 0.2;

  let house3Y = plotY + plotSize * 0.55;

​

  drawBuilding(house3X, house3Y, houseWidth, houseHeight);

​

  let house4X = plotX + plotSize * 0.55;

  let house4Y = plotY + plotSize * 0.55;

​

  drawBuilding(house4X, house4Y, houseWidth, houseHeight);

}

​

function drawBuilding(buildingX, buildingY, buildingWidth, buildingHeight) {

  let randomNo = random(1);

​

  if (randomNo < 1 / 3) {

    drawHouse(buildingX, buildingY, buildingWidth, buildingHeight);

  } else if (randomNo < 2 / 3) {

    drawOffice(buildingX, buildingY, buildingWidth, buildingHeight);

  } else {

    drawFactory(buildingX, buildingY, buildingWidth, buildingHeight);

  }

}

​

// Function definition for drawHouse, drawFactory, drawOffice

// This has to be copied to the student's sketch before starting

​

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);

}

​

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 * 0.1,

    officeY + officeHeight * 0.1,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

  rect(

    officeX + officeWidth * 0.4,

    officeY + officeHeight * 0.1,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

  rect(

    officeX + officeWidth * 0.7,

    officeY + officeHeight * 0.1,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

  rect(

    officeX + officeWidth * 0.1,

    officeY + officeHeight * 0.4,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

  rect(

    officeX + officeWidth * 0.4,

    officeY + officeHeight * 0.4,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

  rect(

    officeX + officeWidth * 0.7,

    officeY + officeHeight * 0.4,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

​

  // door

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

  rect(

    officeX + officeWidth * 0.4,

    officeY + officeHeight * 0.8,

    officeWidth * 0.2,

    officeHeight * 0.2

  );

}

​

function drawFactory(factoryX, factoryY, factoryWidth, factoryHeight) {

  stroke(0);

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

​

  // front

  rect(

    factoryX,

    factoryY + factoryHeight * 0.5,

    factoryWidth,

    factoryHeight * 0.5

  );

​

  // stacks

  rect(

    factoryX + factoryWidth * 0.2,

    factoryY + factoryHeight * 0.1,

    factoryWidth * 0.1,

    factoryHeight * 0.4

  );

  rect(

    factoryX + factoryWidth * 0.7,

    factoryY + factoryHeight * 0.1,

    factoryWidth * 0.1,

    factoryHeight * 0.4

  );

​

  // windows

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

  rect(

    factoryX + factoryWidth * 0.2,

    factoryY + factoryHeight * 0.6,

    factoryWidth * 0.1,

    factoryHeight * 0.1

  );

  rect(

    factoryX + factoryWidth * 0.7,

    factoryY + factoryHeight * 0.6,

    factoryWidth * 0.1,

    factoryHeight * 0.1

  );

​

  // door

  rect(

    factoryX + factoryWidth * 0.4,

    factoryY + factoryHeight * 0.8,

    factoryWidth * 0.2,

    factoryHeight * 0.2

  );

}

​