let boxCount = 0;

​

 function setup() {

   createCanvas(800, 400, WEBGL);

   background(100);

   for (let y = 0; y < 16; y++) { //16 columns

     for (let x = 0; x < 16; x++) { //16 rows

       let xpos = x * 24; //size 24 squares

       let ypos = y * 24; //size 24 squares

       b = new Box(xpos, ypos, 24, 24); //create new Box object

       boxes.push(b) //push box object into boxes array

     }

   }

 }

​

 function mousePressed() {

   boxCount++;

 }

​

 function draw() {

   background(220);

   orbitControl(); //add orbit control and hold mouse to pan

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

     boxes[i].display(); //display the box

   }

​

 }

​

 class Box {

   constructor(x, y, w, h) { //Square object takes in four arguments

     this.x = x; //x value

     this.y = y; //y value

     this.w = w; //width value

     this.h = h; //height value

     this.color = color(100); //color fill value

   }

   display() {

     push();

     stroke(160);

     fill(this.color); //fill the shape

     translate(this.x - 400, this.y - 200);

     box(this.h, this.h, this.h); //draw the rectangle shape

     pop();

   }

 }