blockW : 40,

  blockH : 40

}

​

var sizeLimits = {

  maxW : 200,

  minW : 10,

  maxH : 200,

  minH : 10

}

var APIKey = "8rd360WUgkDRoghtm59uLtu3k2QBu6N2";

var website = "https://api.giphy.com"

var service = "/v1/gifs/random"

var limit = "&limit=";

var numOfBlocks;

var apiURL;

var img

var imageArray = [];

var count = 0;

​

function setup() {

  createCanvas(400, 400);

  background(200);

  numOfBlocks = floor(width/blockSpacing.blockW)*floor(width/blockSpacing.blockH);

  print(numOfBlocks);

  apiURL = website + service + "?" + "api_key=" + APIKey + limit + numOfBlocks;

  print(apiURL);

  loadJSON(apiURL, dataLoaded);

}

​

function iterate(){

  var i = 0; // will help to iterate through a 1D array of images

  for (var x = 0; x< width; x+= blockSpacing.blockW){

    // Iterates through each block top left x position

    for (var y = 0; y< height; y+= blockSpacing.blockH){

      // Iterates through each block top left y position

      var imageWidth = floor(random(sizeLimits.minW, sizeLimits.maxW));

      var imageHeight = floor(random(sizeLimits.minH, sizeLimits.maxH));

      image(imageArray[i],x,y,imageWidth,imageHeight);

      i++;

    }

  }

}

​

function dataLoaded(data){

  processData(data);

}

​

function loaded(){

  count++;

  print(count);

  if (count == numOfBlocks) {

    iterate();

  }

}

​

function processData(data){

  // process the data to extract images to imageArray

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

    imageArray[j] = createImg(data.data.images.original.url, loaded).hide();

  }

}