Skip to content

Instantly share code, notes, and snippets.

@jaukia
Created January 15, 2019 15:52
Show Gist options
  • Save jaukia/0c423bd49c916827ba52b2ebb5a88422 to your computer and use it in GitHub Desktop.
Save jaukia/0c423bd49c916827ba52b2ebb5a88422 to your computer and use it in GitHub Desktop.
Boxes with g9
var initialData = {
size: 100.0,
padding: 20.0
}
function render(data, ctx) {
for(var i=0; i<30; i++) {
var padding = data.padding;
var rowItems = Math.floor(ctx.width/(data.size+padding));
var step = data.size+padding;
var x = (i%rowItems)*step-ctx.width/2.0;
var y = Math.floor(i/rowItems)*step-ctx.height/2.0;
var paddingParams = {affects:['padding'],'fill':'#66ff00'};
var sizeParams = {affects:['size'],'fill':'#ff6600'};
ctx.rect(x,y,data.size,data.size,sizeParams);
ctx.rect(x+data.size,y,padding,data.size,paddingParams);
ctx.rect(x,y+data.size,data.size,padding,paddingParams);
}
}
var demo = g9(initialData, render).align('left', 'top');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment