​

var gridSz = 100; // Size of each grid item 

var numRows;      // Numbers of rows. It is calculated in setup() function

var numCols;      // Numbers of columns...

​

function setup() {

  createCanvas(800, 800);

  // CAlculate number of colums relavent to the gridSz

  numRows = width / gridSz;

​

  // Calculate number of rows relavent to the gridSz

  numCols = height / gridSz;

}

​

function draw() {

  background(250);

​

  for (var i = 0; i < numRows; i++) {

    for (var j = 0; j < numCols; j++) {

      var gx = i * gridSz;

      var gy = j * gridSz;

      // Uncomment the below line to display grid..

      //rect(gx, gy, gridSz, gridSz);

​

      // Instatiate and draw the instances of the circleFace class

      face = new circleFace();

      // Set head size randomly between 50-90

      face.rad = random(50,90);

      // Set position of each face to gx and gy. 

      // We add gridSz/2 to x and y to make faces positioned into the center of each grid.

      face.x = gridSz/2 + gx;

      face.y = gridSz/2 + gy;

      // Display the object

      face.display();

​

    }

  }

​

  // Disable loop, otherwise the program causes memory leak and gets slow-down.

  noLoop();

}

​

function keyPressed() {

  if(key === 's') {

    // Use the following naming convention while uploading the images.

    saveCanvas("week2-assignment-alptugan.jpg");

  }

}

​