let data;

​

let txt_x = 400;

let txt_y = 100;

let txt_fill, bg_fill;

​

let titleFont, bodyFont;

​

let day1_color, day2_color, day3_color, day4_color, day5_color, day6_color, day7_color;

​

let xpos, barlen;

​

function preload() {

  data = loadJSON('data.json');

  titleFont = loadFont("firstgradelolo.ttf");

  bodyFont = loadFont("Comfortaa-Regular.ttf");

}

​

function setup() {

  createCanvas(600, 600);

  sceneNum = 0;

  txt_fill = color(255, 255, 204);

  bg_fill = color(254, 248, 236);

​

  setTimeout(one, 2000);

  setTimeout(two, 4000);

  setTimeout(three, 6000);

​

  setInterval(four, 2000);

  setInterval(five, 4000);

​

​

  //day colors

  let day1_color = ("#cc99ff");

  let day2_color = ("#6666ff");

  let day3_color = ("#33cccc");

  let day4_color = ("#70db70");

  let day5_color = ("#ffff99");

  let day6_color = ("#ffccb3");

  let day7_color = ("#ff9999");

  //DAY 1

  day1_x = map(data[0].time, 0, 24, 0, width);

  day1_lol = map(data[0].lol_num, 0, 33, 0, width / 2); 

  day1_bar = new Data_bar(day1_x, 70, day1_lol, 10, day1_color, ("why: " + data[0].what_I_did + "\nLOL times: " + data[0].lol_num)) 

  //DAY 2

  day2_x = map(data[1].time, 0, 24, 0, width); 

  day2_lol = map(data[1].lol_num, 0, 33, 0, width / 2); 

  day2_bar = new Data_bar(day2_x, 140, day2_lol, 10, day2_color, ("what I did: " + data[1].what_I_did + "\nLOL times: " + data[1].lol_num)) 

  //DAY 3

  day3_x = map(data[2].time, 0, 24, 0, width);

  day3_lol = map(data[2].lol_num, 0, 33, 0, width / 2); 

  day3_bar = new Data_bar(day3_x, 210, day3_lol, 10, day3_color, ("what I did: " + data[2].what_I_did + "\nLOL times: " + data[2].lol_num))

  //DAY 4

  day4_x = map(data[3].time, 0, 24, 0, width); 

  day4_lol = map(data[3].lol_num, 0, 33, 0, width / 2);

  day4_bar = new Data_bar(day4_x, 280, day4_lol, 10, day4_color, ("what I did: " + data[3].what_I_did + "\nLOL times: " + data[3].lol_num)) 

  //DAY 5

  day5_x = map(data[4].time, 0, 24, 0, width); 

  day5_lol = map(data[4].lol_num, 0, 33, 0, width / 2); 

  day5_bar = new Data_bar(day5_x, 350, day5_lol, 10, day5_color, ("what I did: " + data[4].what_I_did + "\nLOL times: " + data[4].lol_num)) 

  //DAY 6

  day6_x = map(data[5].time, 0, 24, 0, width);

  day6_lol = map(data[5].lol_num, 0, 33, 0, width / 2); 

  day6_bar = new Data_bar(day6_x, 420, day6_lol, 10, day6_color, ("what I did: " + data[5].what_I_did + "\nLOL times: " + data[5].lol_num))

  //DAY 7

  day7_x = map(data[6].time, 0, 24, 0, width); 

  day7_lol = map(data[6].lol_num, 0, 33, 0, width / 2); 

  day7_bar = new Data_bar(day7_x, 490, day7_lol, 10, day7_color, ("what I did: " + data[6].what_I_did + "\nLOL times: " + data[6].lol_num)) 

}

​

function draw() {

  background(255, 204, 0);

​

  data_visualization();

  push();

  noStroke();

  fill(255, 235, 153);

  rect(39, 60, 1, 480);

  rect(114, 60, 1, 480);

  rect(189, 60, 1, 480);

  textSize(20);

  textFont(titleFont);

  text('2hrs', 30, 560);

  text('5hrs', 103, 560);

  text('8hrs', 179, 560);

  pop();

}

​

function data_visualization() {

  push();

  fill(0);

  textFont(titleFont);

  textSize(30);

  text("Laugh Out Loud", 200, 50);

  pop();

  push();

  fill(0);

  textSize(12);

  textFont(bodyFont);

  text(data[0].date, txt_x, txt_y); 

  text(data[1].date, txt_x, txt_y + 70); 

  text(data[2].date, txt_x, txt_y + 140);

  text(data[3].date, txt_x, txt_y + 210);

  text(data[4].date, txt_x, txt_y + 280);

  text(data[5].date, txt_x, txt_y + 350);

  text(data[6].date, txt_x, txt_y + 420);

  pop();

//Data Visualization

  day1_bar.show();

  day1_bar.checkCollision();

​

  day2_bar.show();

  day2_bar.checkCollision();

​

  day3_bar.show();

  day3_bar.checkCollision();

​

  day4_bar.show();

  day4_bar.checkCollision();

​

  day5_bar.show();

  day5_bar.checkCollision();

​

  day6_bar.show();

  day6_bar.checkCollision();

  day7_bar.show();

  day7_bar.checkCollision();

}

​

//setTimeout

function one() {

  txt_x = txt_x + 5;

  txt_y = txt_y + 5;

}

​

function two() {

  txt_x = txt_x + 5;

  txt_y = txt_y + 5;

}

​

function three() {

  txt_x = txt_x + 5;

  txt_y = txt_y + 5;

}

​

function four() {

  txt_fill = color(204, 255, 204);

  bg_fill = color(254, 248, 186);

}

​

function five() {

  txt_fill = color(230, 230, 255);

  bg_fill = color(254, 248, 236);

}

​

//Data bar

class Data_bar {

​

  constructor(x, y, w, h, color_val, txt_data) { 

​

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.color_val = color_val;

    this.txt_data = txt_data;

  }

​

  show() {

    push();

    fill(this.color_val);

    noStroke();

    rect(this.x, this.y, this.w, this.h);

    ellipse(this.x, this.y + 5, 20);

    pop();

  }

​

  checkCollision() {

    if (mouseX > this.x && mouseX < this.x + this.w &&

      mouseY > this.y && mouseY < this.y + this.h) {

      push();

      fill(txt_fill);

      textSize(12);

      textFont(bodyFont);

      text(this.txt_data, this.x - 10, this.y + 30);

      pop();

    }

  }

}