​

function setup() { 

  createCanvas(800, 600);

  background(255);

  //Quad 1

  push();

  translate(0,0);

  for(var x = 0; x < width/2; x+=cellSize) {

    for(var y=0; y < height/2; y += cellSize){

            line(x+cellSize,        y,           x+cellSize,            y+cellSize );

        // line(x,y, x+cellSize,y+cellSize); // TYPE A

        // line(x+cellSize,y, x,y+cellSize); // TYPE B

    }

  }

  pop();

    //Quad 2

  push();

  translate(width/2,0);

  for(var x = 0; x < width/2; x+=cellSize) {

    for(var y=0; y < height/2; y += cellSize){

    line(x+cellSize,        y,           x+cellSize,            y+cellSize );

      line(x,                   y+cellSize,     x+cellSize,             y+cellSize );

      //line(x,y, x+cellSize,y+cellSize); // TYPE A

        //line(x+cellSize,y, x,y+cellSize); // TYPE B

        }

  }

  pop();

  //Quad 3

  push();

  translate(0,height/2);

  for(var x = 0; x < width/2; x+=cellSize) {

    for(var y=0; y < height/2; y += cellSize){

​

    line(x+cellSize,        y,           x+cellSize,            y+cellSize );

      line(x,                   y,  x+cellSize,             y );

      //line(x,y, x+cellSize,y+cellSize); // TYPE A

        line(x+cellSize,y, x,y+cellSize); // TYPE B

    }

  }

  pop();

    //Quad 4

  push();

  translate(width/2,height/2);

  for(var x = 0; x < width/2; x+=cellSize) {

    for(var y=0; y < height/2; y += cellSize){

​

     line(x+cellSize,       y,           x+cellSize,            y+cellSize );

      line(x,                   y+cellSize,     x+cellSize,             y+cellSize );

      line(x,y, x+cellSize,y+cellSize); // TYPE A

        line(x+cellSize,y, x,y+cellSize); // TYPE B

    }

  }

  pop();

  noLoop();

} 

​

function draw() { 

  //line(cellSize,0, 0,cellSize); // TYPE B

}

​

​

​