createCanvas(windowWidth, 3 * windowHeight)

  angleMode(DEGREES)

  noLoop()

​

  textSize(16)

  textAlign(LEFT, CENTER)

}

​

function draw() {

  background(252)

​

  for (var i = 0; i < byCategory.length; i++) {

    var y = 320 * i + 20

    drawArtistBio(byCategory[i], y)

  }  

}

​

function drawArtistBio(bio, y) {

  push();

  translate(20, y);

  noFill()

  rect(0, 0, 1024, 300);

​

  if (bio.Gender == 'Male') fill('#F0AB86')

  if (bio.Gender == 'Female') fill('#9CAFB7')

  ellipse(100, 100, 100, 100);

  fill(0);

  text(bio.DisplayName, 50, 180);

  text(bio.ArtistBio, 50, 200, 200);

  text(bio.NumArtworks + ' artworks', 50, 270);

  text("There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.", 260, 50, 300);

  if (bio.Gender == 'Male') fill('#F0AB86')

  if (bio.Gender == 'Female') fill('#9CAFB7')

  rect(260, 160, 100 - 10, 100);

  rect(360, 160, 100 - 10, 100);

  rect(460, 160, 100 - 10, 100);

  drawArtwork(700, 25, bio, 25);

  pop();

}

​

function drawArtwork(tx, ty, bio, rowLength) {

  push()

​

  translate(tx, ty)

​

  var categories = Object.keys(bio.NumArtworksByCategory)

  var artworks = Object.values(bio.NumArtworksByCategory)

​

  var h = 0

  for (var c = 0; c < categories.length; c++) {

    push()

​

    fill('#2D3A3A')

    textAlign(RIGHT, CENTER)

    text(categories[c], 0, h + 5)

​

    translate(30, 0)

​

    if (bio.Gender == 'Male') {

      fill('#F0AB86')

    }

    if (bio.Gender == 'Female') {

      fill('#9CAFB7')

    }

    noStroke()

    var i = 0

    var total = roundUp(artworks[c], 10)

    for (var y = 0; y < 10 * ceil(total / rowLength); y += 10) {

      var nPoints = min(total - i, rowLength)

      for (var x = 0; x < 10 * nPoints; x += 10) {

        rect(x, y + h, 6, 6)

        i += 1

      }

    }

    h = h + y + 15

​

    pop()

  }

  pop()

}

​

​

function roundUp(n, d) {

  return ceil(n / d)

}

​