let timeArray = [];

let timedDraw;

let waterline;

let font;

let totalText;

let totalTextColor;

​

function preload() {

  font = loadFont('PressStart2P-Regular.ttf');

}

​

function setup() {

  createCanvas(600, 600);

  waterData = loadJSON('data.json');

  angleMode(DEGREES);

  noStroke();

  textFont(font);

  textSize(36);

  textAlign(CENTER);

  timeArray = ['6AM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM', '12AM', '1AM', '2AM', '3AM', '4AM', '5AM'];

​

  setInterval(increment, 1500);

} 

​

function increment(){

  if(stepNum < 23){

    stepNum++;

  }

  else{

    stepNum = 23;

  }

}

​

function draw() {

  background(240, 40);

  text(timeArray[stepNum], 300, 320);

  if(stepNum >= 0 && stepNum <= 5){

    totalText = "(Morning)";

    totalTextColor = color(255,233,166, 40);

  }

  if(stepNum >= 6 && stepNum <= 10){

    waterLine = 25;//25

    totalText = "(Afternoon)"; 

    totalTextColor = color(169,241,253,40)

  }

  if(stepNum == 11 && stepNum == 12){

    waterLine = 54;//54

    totalText = "(Evening)";

    totalTextColor = color(182, 156, 240,40)

  }

  if(stepNum >= 13 && stepNum <= 17){

    waterLine = 67;//67

    totalText = "(Night)";

    totalTextColor = color(5, 3, 51,40);

  }

  if(stepNum >= 18){

    waterLine = 84;//84

    totalText = "(I'm hopefully asleep)";

    totalTextColor = color(0, 0, 0, 40);

  }

  if(stepNum == 23){

  push();

  textSize(28);

  fill(0, 40);

  text("TOTAL:", 300, 410);

  pop();

  }

​

  push();

  textSize(20);

  fill(65,105,225);

  text(waterData.Totals.HourbyHour[stepNum] + ' cups', 300, 460);

  pop();

  push();

  textSize(14);

  fill(0, 40);

  text(totalText, 300, 355);

  pop();

  fill(135,206,250);

  rect(10, 0, 50, waterData.Day1.Array[stepNum] * 100);

  rect(100, 0, 50, waterData.Day2.Array[stepNum] * 100);

  rect(190, 0, 50, waterData.Day3.Array[stepNum] * 100);

  rect(280, 0, 50, waterData.Day4.Array[stepNum] * 100);

  rect(370, 0, 50, waterData.Day5.Array[stepNum] * 100);

​

  rect(460, 0, 50, waterData.Day6.Array[stepNum] * 100);

  rect(540, 0, 50, waterData.Day7.Array[stepNum] * 100);

  push();

  fill(65,105,225, 8);

  translate(width, height);

  rotate(180);

  rect(0, 0, width, waterData.Totals.HourbyHour[stepNum] * 3);

  pop();

  push();

  fill(60, 100);

  textSize(14);

  translate(30, 50);

  rotate(90);

  text("Tues:" + waterData.Day1.Array[stepNum], 0, 0);

  text("Wed:" + waterData.Day2.Array[stepNum], 0, -90);

  text("Thurs:" + waterData.Day3.Array[stepNum], 2, -180);

  text("Fri:" + waterData.Day4.Array[stepNum], 0, -270);

  text("Sat:" + waterData.Day5.Array[stepNum], 0, -360);

  text("Sun:" + waterData.Day6.Array[stepNum], 0, -450);

  pop("Mon:" + waterData.Day7.Array[stepNum], 0, -540); 

  // drawLine();

}

​

function drawLine(){

  for(let i = 0; i <= 600; i += 50){

  rect(50, i, 50, 50);

}

}