createCanvas(400, 400);

}

​

function draw() {

  background("skyblue");

  // The ground

  noStroke();

  fill("lightgreen");

  rect(0, 100, 400, 300);

  // The road

  noStroke();

  fill("black");

  quad(190, 100, 210, 100, 250, 400, 150, 400);

  noFill();

  stroke("white");

  // dashed line

  let start = 100;

  for (let i = 1; i < 10; i++) {

    strokeWeight(i);

    line(200, start, 200, start + (i * 4));

    start += (i * 7);

  }

  // Left row of houses

  for (let i = 1; i < 10; i++) {

    // This spacing is linear and easy to understand,

    // But it would be more accurate to space them expontentially

    house(175 - (i * 20), 50 + i * 25);

  }

  // Right row of houses

  for (let i = 1; i < 10; i++) {

    house(225 + (i * 20), 50 + i * 25);

  }

}

​

function house(x, y) {

  // The width (and height) of the house scales based on its y location

  let w = (y / 1.5);

  // body

  noStroke()

  fill(x, x - y , y); // Color is darker the further back

  rect(x - (w / 2), y, w, w);

  // roof

  strokeWeight(2);

  stroke("black");

  fill(y, y, y)

  triangle(x, y - (w / 2), x - (w / 2), y, x + (w / 2), y);

}