function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

  //noStroke();

}

​

function draw() {

  background(220);

  const colWidth = width/num;

  const rowHeight = height/num;

  for(let i = 0;i<num;i++){

    for(let j = 0;j<num;j++){

      const x = colWidth*i+colWidth/2;

      const y = rowHeight*j+rowHeight/2;

      const t = new Tile(x,y,colWidth,rowHeight);

      push();

      noFill();

      //fill(100);

      rect(x,y,colWidth,rowHeight);

      pop();

      t.randRect();

    }

  }

  noLoop();

}

​

class Tile {

  // x,y = 中心座標

  // w,h = 幅と高さ

  constructor(x,y,w,h){

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.rand = Math.round(random(0,2));

  }

  randRect(){

    if(this.rand===0){

      rect(this.x,this.y,this.w/2,this.h/2);

    }else if(this.rand===1){

      rect(this.x-this.w/2,this.y-this.h/2,this.w/2,this.h/2);

      rect(this.x+this.w/2,this.y+this.h/2,this.w/2,this.h/2);

    }else{

      circle(this.x,this.y,this.w/2);

    }

  }

}