//Idea; display age in the back and baby name in the front, randomize font each time 

​

function preload() {

  playfair = loadFont("PlayfairDisplay.ttf");

  bebas = loadFont("BebasNeue-Regular.ttf");

  baby = loadTable('names.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  textFont(playfair);

  let numRows = baby.getRowCount();

  let name = baby.getColumn('Name');

  let count = baby.getColumn('Count');

  let year = baby.getColumn('Year')

  print(name); // test if getColumn is working 

  //DISPLAY TEXT

  //NAME

  textAlign(CENTER, CENTER)

  myNum = int(random(3, 52));

  print(myNum);

  print(name[myNum - 2]);

  push();

  textSize(30);

  text(str(name[myNum - 2]), width/2, height/2);

  pop();

  //AGE

  push();

  textFont(bebas);

  textSize(200);

  fill(0, 50);

  text(str(year[myNum - 2]), width/2, height/2 - 20);

  pop();

  //QUANTITY

  push();

  textSize(18);

  countMsg = "There are " + str(count[myNum - 2]) + " babies with this name.";

  text(str(countMsg), width/2, height/2 + 50);

  pop();

  noLoop(); 

}

​

function mouseClicked() {

  loop();

}