//pattern each square will be filled with

class squareFiller {

  //constructor consists of the x and y coordinates

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  //the first option of a pattern

  //the x and y coordinates are parameters as they will

  //be determined later in setup()

  //k variable determines how spaced each square will be 

  //from each other

  //the while loop determines the pattern by incrementing 

  //and decrementing respectively each of the variables

  //the rest of the fillers have the same idea but with 

  //different spacing and corners which they approach

  filler1(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 60) {

      square(i, j, k);

      i += 10;

      j += 10;

      k -= 15;

    }

  }

​

  filler2(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 30) {

      square(i, j, k);

      i += 5;

      j += 5;

      k -= 15;

    }

  }

​

  filler3(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 30) {

      square(i, j, k);

      i += 5;

      j += 10;

      k -= 15;

    }

  }

​

  filler4(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 60) {

      square(i, j, k);

      i += 10;

      j += 5;

      k -= 15;

    }

  }

​

  filler5(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 64) {

      square(i, j, k);

      i += 5;

      j += 5;

      k -= 7;

    }

  }

​

  filler6(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 26) {

      square(i, j, k);

      i += 2;

      j += 2;

      k -= 7;

    }

  }

​

  filler7(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 26) {

      square(i, j, k);

      i += 2;

      j += 5;

      k -= 7;

    }

  }

​

  filler8(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 62) {

      square(i, j, k);

      i += 5;

      j += 2;

      k -= 7;

    }

  }

​

  filler9(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 60) {

      square(i, j, k);

      i += 20;

      j += 20;

      k -= 30;

    }

  }

​

  filler10(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 30) {

      square(i, j, k);

      i += 10;

      j += 10;

      k -= 30;

    }

  }

​

  filler11(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 30) {

      square(i, j, k);

      i += 10;

      j += 20;

      k -= 30;

    }

  }

​

  filler12(x, y) {

    var i = x;

    var j = y;

    var k = 100;

    while (i < x + 60) {

      square(i, j, k);

      i += 20;

      j += 10;

      k -= 30;

    }

  }

​

  //the randomizer function chooses a random number 1-12

  //and hence determines which pattern will be chosen to 

  //fill the square at hand

  randomizer() {

    let num = floor(random(12)) + 1;

​

    print(num);

    if (num == 1) {

      this.filler1(this.x, this.y);

    } else if (num == 2) {

      this.filler2(this.x, this.y);

    } else if (num == 3) {

      this.filler3(this.x, this.y);

    } else if (num == 4) {

      this.filler4(this.x, this.y);

    } else if (num == 5) {

      this.filler5(this.x, this.y);

    } else if (num == 6) {

      this.filler6(this.x, this.y);

    } else if (num == 7) {

      this.filler7(this.x, this.y);

    } else if (num == 8) {

      this.filler8(this.x, this.y);

    } else if (num == 9) {

      this.filler9(this.x, this.y);

    } else if (num == 10) {

      this.filler10(this.x, this.y);

    } else if (num == 11) {

      this.filler11(this.x, this.y);

    } else {

      this.filler12(this.x, this.y);

    }

  }

}

​

//empty array for each of the squares

let arr = [];

​

function setup() {

  createCanvas(700, 400);

  background(255);

  //drawing the grid/square outlines

  for (var i = 0; i < 601; i += 100) {

    for (var j = 0; j < 301; j += 100) {

      square(i, j, 100);

    }

  }

  //instantiating the objects in the array for

  //each square in the grid

  for(let i = 0; i<601; i+=100)

    {

      for(let j =0; j<301; j+=100)

        {

          arr.push(new squareFiller(i,j));

        }

    }

  //calling the randomizer function for each

  //square in the array

  for(let i=0; i<arr.length; i++)

    {

      arr[i].randomizer();

    }

}