var data = [
  {"w":360,"h":640,"qty":39},
  {"w":320,"h":534,"qty":20},
  {"w":375,"h":667,"qty":16},
  {"w":768,"h":1024,"qty":14},
  {"w":320,"h":568,"qty":6},
  {"w":320,"h":480,"qty":4},
  {"w":364,"h":606,"qty":4},
  {"w":412,"h":732,"qty":3},
  {"w":414,"h":736,"qty":2},
  {"w":640,"h":360,"qty":2},
  {"w":800,"h":1280,"qty":2},
  {"w":1366,"h":768,"qty":1},
  {"w":240,"h":320,"qty":1},
  {"w":357,"h":595,"qty":1},
  {"w":534,"h":320,"qty":1}
];

function setup() {
  createCanvas(1366/2, 1024/2);
  noLoop();
/**
  stroke("grey");
  rect(10,10,width-20,height-20);
  line( width/2, 10, width/2, height-10);
  line( 10, height/2, width-10, height/2);
**/
  rectMode(CENTER);
  noStroke();
  fill(128,10);
  for (var i=0; i<data.length; i++) {
    stroke("black");
    textSize(24);
    text(data[i].w + "x" + data[i].h + "("+ data[i].qty +")", 10, (i+1)*32)
    noStroke();
    for (var j=0; j<data[i].qty; j++) {
      rect(width/2, height/2, data[i].w/4,data[i].h/4);
    }
  }
}

/**
function draw() { 
}
**/