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 = 30;

  // WAll

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

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

​

      strokeWeight(tileSize/10);

      stroke(220,100);

      line(x-2, y, x-2, y+tileSize);

      strokeWeight(tileSize/20);

      stroke(200,100);

      line(x, y-2, x+tileSize, y-2);

      strokeWeight(1);

      stroke(150);

      fill(255);

      rect(x,y, tileSize,tileSize);

    }

  }

 // let y = windowHeight/2;

  // Platform

  for (let y = windowHeight*.33; y <= windowHeight*.67; y+= tileSize*.5) {

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

/*

      strokeWeight(tileSize/10);

      stroke(220,100);

      line(x-2, y, x-2, y+tileSize);

      strokeWeight(tileSize/20);

      stroke(200,100);

      line(x, y-2, x+tileSize, y-2);

      */

      strokeWeight(1);

      stroke(150);

      fill(255);

      quad(x,y, 

           x+tileSize, y, 

           x + tileSize*2, y+tileSize*.5,

           x+tileSize, y+(tileSize*.5) 

          );

      //rect(x,y, tileSize,tileSize);

    }

  }

  // step

  for (let y = windowHeight*.75; y <= windowHeight * .8; y+= tileSize*.5) {

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

/*

      strokeWeight(tileSize/10);

      stroke(220,100);

      line(x-2, y, x-2, y+tileSize);

      strokeWeight(tileSize/20);

      stroke(200,100);

      line(x, y-2, x+tileSize, y-2);

      */

      strokeWeight(1);

      stroke(150);

      fill(255);

      quad(x,y, 

           x+tileSize, y, 

           x + tileSize*2, y+tileSize*.5,

           x+tileSize, y+(tileSize*.5) 

          );

      //rect(x,y, tileSize,tileSize);

    }

  }

  // step

  for (let y = windowHeight*.85; y <= windowHeight; y+= tileSize*.5) {

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

/*

      strokeWeight(tileSize/10);

      stroke(220,100);

      line(x-2, y, x-2, y+tileSize);

      strokeWeight(tileSize/20);

      stroke(200,100);

      line(x, y-2, x+tileSize, y-2);

      */

      strokeWeight(1);

      stroke(150);

      fill(255);

      quad(x,y, 

           x+tileSize, y, 

           x + tileSize*2, y+tileSize*.5,

           x+tileSize, y+(tileSize*.5) 

          );

      //rect(x,y, tileSize,tileSize);

    }

  }

  let span = (windowHeight*.75) - (windowHeight*.33);

  console.log(span);

  let tubW = windowWidth * .67;

  let tubH = span * .67;

  fill(255);

  ellipse(windowWidth/2, windowHeight*.5, tubW + tileSize, tubH + tileSize/2)

  stroke(0, 200, 200);

  //strokeWeight(tileSize/2);

  fill(0, 255, 255);

  ellipse(windowWidth/2, windowHeight*.5, tubW, tubH)//quad()

    //console.log(mouseX + ", " + mouseY);

}