​

let bigSqr;

​

function setup() {

  colorMode(HSL);

  createCanvas(400, 400);

}

​

​

class BigSqr{

    constructor (x, y, fill){

      this.x = x;

      this.y = y;

      this.fill = fill;

    }

    makeBigSqr(){

      fill(this.fill,100,50);

      rect(this.x, this.y, width/2, height/2);  

    }

  }

​

function draw() {

  noStroke();

  background(220);

  bigSqr = new BigSqr(0,0,220);

  bigSqr.makeBigSqr();

  // make class for each rect -- constructors pos and fill

  // fill(220, 100, 50);

  // rect(0, 0, width/2, height/2);

  fill(240, 100, 50);

  rect(width/2, 0, width/2, height/2);

  fill(230, 100, 50);

  rect(0, height/2, width/2, height/2);

  fill(210, 100, 50);

  rect(width/2, height/2, width/2, height/2);

  fill(320,100, 50);

  rect(width/4, height/4, width/4, height/4);

  fill(340,100, 50);

  rect(width/2, height/4, width/4, height/4);

  fill(330, 100, 50);

  rect(width/4, height/2, width/4, height/4);

  fill(310, 100, 50);

  rect(width/2, height/2, width/4, height/4);

}