1. Design the tile (rect, lines lines)

  2. Loop a row of tiles (inner for loop)

  3. Loop a grid of tiles (outer for loop)

  Challenge: Diagonal Lines

*/

function setup() {

  createCanvas(windowWidth, windowHeight);

  strokeCap(ROUND);

}

​

function draw() {

  background(255);

  let tileSize = 60;

  let shadow = tileSize/16;

  for (let y = 0; y < windowHeight/2; y += tileSize) {

    for (let x = 0; x < windowWidth; x += tileSize) {

      tileWall(x, y, tileSize, shadow);

    }

  }

  for (let y = windowHeight/2; y < windowHeight; y += tileSize/2) {

    for (let x = 0; x < windowWidth; x += tileSize) {

      tileFloor(x, y, tileSize, shadow);

    }

  }

  stroke(0);

  fill(0, 255, 255);

  ellipse(windowWidth/2, windowHeight * .75, windowWidth * .75, windowWidth * .25)

}

​

function mouseClicked() {

  console.log(windowHeight + ", " + mouseY);

}

function tileWall(x,y, w, s) {

  strokeWeight(1);

  stroke(150);

  fill(255);

  rect(x, y, w, w);

  strokeWeight(s);

  stroke(220,100);

  line(x + w - s, y+s, x + w - s, y + w - s);

​

  stroke(200,100);

  line(x + s, y + w - s, x + w - s, y + w - s);

}

​

function tileFloor(x,y, w, s) {

  strokeWeight(1);

  stroke(150);

  fill(255);

  quad(x-w, y, x, y, x+w, y+w/2, x, y+w/2)

​

  stroke(200,100);

  line(x + s, y + w/2 - s, x + w - s, y + w/2 - s);

}