var x, y;

var b, s;

​

function setup() {

  createCanvas(400, 400);

  background(250);

  rectMode(CENTER);

  x = 0;

  y = 0;

  // frameRate(10);

  b = 4;

  s = b*2;

}

​

function draw() {

  // background(220);

  noStroke();

  r = random(0, 1);

// //1. zen tiles

//   if (r < 0.15) {

//     fill(0);

//     rect(x, y, width/b, height/b);

//     fill(0);

//     rect(width-x, height-y, width/b, height/b);

//   }

//   y = y + height/s;

//   if(y>=height/2){

//     y = 0;

//      x = x + width/b;

//   }

//2. yin yang

  if (r < 0.15) {

    fill(250);

    rect(x, y, width/b, height/b);

    fill(0);

    rect(width-x, height-y, width/b, height/b);

  } else {

    fill(0);

    rect(x, y, width/b, height/b);

    fill(250);

    rect(width-x, height-y, width/b, height/b);

  }

  y = y + height/s;

  if(y>=height/2){

    y = 0;

    x = x + width/b;

  }

}