​

function preload() { 

  myData = loadJSON('data.json');

}

function setup() {

  createCanvas(400, 500);

  setTimeout(canva, 1000);

  //setInterval(one, 2000);

  //setInterval(two, 2000);

  //setInterval(three, 2000);

  //setInterval(four, 2000);

  //setInterval(five, 2000);

  //setInterval(six, 2000);

  setInterval(seven, 2000);

}

​

function canva() {

  background(220);

}

​

​

// I do realize that the days here are repetitive, and I can a function that encompasses all these repetitive elements (social, entertainment, productivity, etc). I'm working through how to create that. I've been having trouble with it, but this is the start. 

​

​

//Day 1

function one() { 

  //textAlign(CENTER);

  textSize(32);

  text("Day 1", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 50);

  rect(30, 85, 55, myData.Day1.Social[0], 10); 

  textSize(15);

  text(myData.Day1.Social[0] + " mins", 30, myData.Day1.Social[0]+100);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 75);

  rect(width/2, 85, 55, myData.Day1.Entertainment[0], 10);

  textSize(15);

  text(myData.Day1.Entertainment[0] + " mins", width/2, myData.Day1.Entertainment[0]+100);

  //productivity

  textSize(18);

  text("Productivity", width-100, 75);

  rect(width-100, 85, 55, myData.Day1.Productivity[0], 10);

  textSize(15);

  text(myData.Day1.Productivity[0] + " mins", width-100, myData.Day1.Productivity[0]+100);

}

​

​

//Day 2

function two() { 

  textAlign(CENTER);

  textSize(32);

  text("Day 2", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 75);

  rect(30, 85, 55, myData.Day2.Social[0], 10); 

  textSize(15);

  text(myData.Day2.Social[0] + " mins", 30, myData.Day2.Social[0]+100);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 75);

  rect(width/2, 85, 55, myData.Day2.Entertainment[0], 10);

  textSize(15);

  text(myData.Day2.Entertainment[0] + " mins", width/2, myData.Day2.Entertainment[0]+100);

  //productivity

  textSize(18);

  text("Productivity", width-100, 75);

  rect(width-100, 85, 55, myData.Day2.Productivity[0], 10);

  textSize(15);

  text(myData.Day2.Productivity[0] + " mins", width-100, myData.Day2.Productivity[0]+100);

}

​

​

//Day 3

function three() { 

  textAlign(CENTER);

  textSize(32);

  text("Day 3", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 75);

  rect(30, 85, 55, myData.Day3.Social[0], 10); 

  textSize(15);

  text(myData.Day3.Social[0] + " mins", 30, myData.Day3.Social[0]+100);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 75);

  rect(width/2, 85, 55, myData.Day3.Entertainment[0], 10);

  textSize(15);

  text(myData.Day3.Entertainment[0] + " mins", width/2, myData.Day3.Entertainment[0]+100);

  //productivity

  textSize(18);

  text("Productivity", width-100, 75);

  rect(width-100, 85, 55, myData.Day3.Productivity[0], 10);

  textSize(15);

  text(myData.Day3.Productivity[0] + " mins", width-100, myData.Day3.Productivity[0]+100);

}

​

​

//Day 4

function four() { 

  textAlign(CENTER);

  textSize(32);

  text("Day 4", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 75);

  rect(30, 85, 55, myData.Day4.Social[0], 10); 

  textSize(15);

  text(myData.Day4.Social[0] + " mins", 30, myData.Day4.Social[0]+100);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 75);

  rect(width/2, 85, 55, myData.Day4.Entertainment[0], 10);

  textSize(15);

  text(myData.Day4.Entertainment[0] + " mins", width/2, myData.Day4.Entertainment[0]+100);

  //productivity

  textSize(18);

  text("Productivity", width-100, 75);

  rect(width-100, 85, 55, myData.Day4.Productivity[0], 10);

  textSize(15);

  text(myData.Day4.Productivity[0] + " mins", width-100, myData.Day4.Productivity[0]+100);

}

​

​

//Day 5

function five() { 

  textAlign(CENTER);

  textSize(32);

  text("Day 5", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 75);

  rect(30, 85, 55, myData.Day5.Social[0], 10); 

  textSize(15);

  text(myData.Day5.Social[0] + " mins", 30, myData.Day5.Social[0]+100);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 75);

  rect(width/2, 85, 55, myData.Day5.Entertainment[0], 10);

  textSize(15);

  text(myData.Day5.Entertainment[0] + " mins", width/2, myData.Day5.Entertainment[0]+100);

  //productivity

  textSize(18);

  text("Productivity", width-100, 75);

  rect(width-100, 85, 55, myData.Day5.Productivity[0], 10);

  textSize(15);

  text(myData.Day5.Productivity[0] + " mins", width-100, myData.Day5.Productivity[0]+100);

}

​

​

​

//Day 6

function six() { 

  textAlign(CENTER);

  textSize(32);

  text("Day 6", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 75);

  rect(30, 85, 55, myData.Day6.Social[0], 10); 

  textSize(15);

  text(myData.Day6.Social[0] + " mins", 30, myData.Day6.Social[0]+100);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 75);

  rect(width/2, 85, 55, myData.Day6.Entertainment[0], 10);

  textSize(15);

  text(myData.Day6.Entertainment[0] + " mins", width/2, myData.Day6.Entertainment[0]+100);

  //productivity

  textSize(18);

  text("Productivity", width-100, 75);

  rect(width-100, 85, 55, myData.Day6.Productivity[0], 10);

  textSize(15);

  text(myData.Day6.Productivity[0] + " mins", width-100, myData.Day6.Productivity[0]+100);

}

​

​

//Day 7

function seven() { 

  textAlign(CENTER);

  textSize(32);

  text("Day 7", width/2, 50);

  //social

  textSize(18);

  text("Social", 30, 100);

  rectMode(CENTER);

  rect(30, 130, 55, myData.Day7.Social[0], 10); 

  textSize(15);

  text(myData.Day7.Social[0] + " mins", 30, myData.Day7.Social[0]+130);

  //entertainment

  textSize(18);

  text("Entertainment", width/2, 100);

  rect(width/2, 150, 55, myData.Day7.Entertainment[0], 10);

  textSize(15);

  text(myData.Day7.Entertainment[0] + " mins", width/2, myData.Day7.Entertainment[0]+125);

  //productivity

  textSize(18);

  text("Productivity", width-70, 100);

  rect(width-75, 120, 55, myData.Day7.Productivity[0], 10);

  textSize(15);

  text(myData.Day7.Productivity[0] + " mins", width-80, myData.Day7.Productivity[0]+130);

}