<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
<!--<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/addons/p5.dom.min.js"></script>-->
<!--<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/addons/p5.sound.min.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>
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() {
}
**/