// inspired by work from https://studionaam.com

var bg, fg;

​

var padding = { 'top': 40, 'right': 30, 'bottom': 40, 'left' : 30};

​

function setup() {

  createCanvas(424, 600); // 1.413 aspect ratio same as A0 format

  // background and foreground colors

  bg = color('#000000');

  fg = color('#ffffff');

}

​

function draw() {

  background(bg);

  textSize(20);

  let xcol1 = padding.left; // grid col 1

  let ypos = padding.top;

​

  // row 1

  stroke(fg);

  line(xcol1, ypos, width-padding.right, ypos);

​

  ypos += 16;

  let xcol2 = (width/4)*2; // grid col 2

  let xcol3 = (width/4)*3; // grid col 3

  // row 2

  noStroke();

  textFont("Roboto Condensed");

  textStyle(NORMAL);

  fill(fg);

  textSize(8);

  text("DIGITAL RELEASE", xcol1, ypos);

  text("BOILERROOM SESSIONS", xcol2, ypos);

​

  // row 3

  textFont("Dosis");

  textSize(20);  

  text("D-Squared ⎯⎯⎯\nnr. 21", xcol2, ypos+45);

  // dynamic drawing

  let pad = 2;

  let hsquares = 4;

  let sw = (width-padding.left-padding.right-(pad*hsquares))/hsquares;

​

  let xpos = padding.left;

  ypos = ypos+105;

  for(i = 0; i < 3; i++) {

    for(j = 0; j < 4; j++) {

      sdim = sw;

      //if( (i == 1) && (j == 2) ) { 

        sdim = 5+((sw-5)*abs(sin(frameCount*0.01))); 

        rect(xpos, ypos, sdim, sdim);

      //} else {

      //  rect(xpos, ypos, sdim, sdim);

      //}

      xpos += sw+pad;

    }

    ypos += sw+pad;

    xpos = padding.left;

  }

​

  // footer

  noStroke();

  let yr3 = (height/5)*4;  // row 3

  let yr4 = height-padding.bottom; // row 4

​

  textFont("Roboto Condensed");

  textStyle(NORMAL);

  fill(fg);

  textSize(10);

  text("Release", xcol1, yr3);

  text("November\nFRI 23rd", xcol1, yr3+30);

​

  text("Coordinates", xcol2, yr3);

  text("Russel Warehouse\n101st | 3rd Ave.", xcol2, yr3+30);

​

  text("Follow", xcol3, yr3);

  text("mixcloud.com\n/durokuduro", xcol3, yr3+30);

​

  text("resonance.fm\n© 8019", xcol2, yr4);

}

​