let r = 0;

let t1 = 0;

let t2 = 0;

let t3 = 0;

let t4 = 0;

let t5 = 0;

let t6 = 0;

let tv = 170;

// let tl = 70;

let y1 = 60;

let y2 = 60;

let y3 = 60;

let y4 = 60;

let y5 = 60;

let y6 = 60;

let y7 = 60;

let rectx = 8;

let recty = 16;

let ofs = 27;

let offs = 4;

let md = 80;

​

​

function preload() {

  myData = loadJSON('data.json');

}

​

function setup() {

  createCanvas(700, 600);

  // console.log(myData);

  setTimeout(move1, 2000);

  setTimeout(move2, 4000);

  setTimeout(move3, 6000);

  setTimeout(move4, 8000);

  setTimeout(move5, 10000);

  setTimeout(move6, 12000);

  rectMode(CENTER);

  textAlign(CENTER, CENTER);

​

}

​

function draw() {

  background(255, 246, 230); 

​

  d1s();

  d2s();

  d3s();

  d4s();

  d5s();

  d6s();

  d7s();

​

}

​

function d1s() {

  fill(145, 135, 116, tv);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y1);

  text('12:00 A.M.', 660, y1);

  textAlign(LEFT, CENTER);

  fill(201, 186, 159, tv);

  text('- - - - - - - ', 80, y1);

  textAlign(RIGHT, CENTER);

  text('- - - - - - - ', 620, y1);

  textSize(14);

  textAlign(CENTER, CENTER);

  fill(112, 108, 100, tv);

  text('- DAY 1 -', 40, y1-15);

  for (let i = 0; i < myData.day1.schedule.length; i++) {

    fill(67, 85 + (myData.day1.water[i] * 10), 240, tv);

    noStroke();

    rect((myData.day1.schedule[i] - offs) * ofs, y1, myData.day1.water[i] * rectx, myData.day1.water[i] * recty, 90);

  }

​

}

​

​

function d2s() {

  fill(145, 135, 116, t1);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y2);

  text('12:00 A.M.', 660, y2);

  textAlign(RIGHT, CENTER);

  text('- - - - - - - - - - - -', 620, y2);

   fill(112, 108, 100, t1);

  textSize(14);

  textAlign(CENTER, CENTER);

  text('- DAY 2 -', 40, y2-15);

  fill(201, 186, 159, t1);

  for (let i = 0; i < myData.day2.schedule.length; i++) {

    fill(67, 85 + (myData.day2.water[i] * 10), 240, t1);

    rect((myData.day2.schedule[i] - offs) * ofs, y2, myData.day2.water[i] * rectx, myData.day2.water[i] * recty, 90);

  }

}

​

function d3s() {

  fill(145, 135, 116, t2);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y3);

  text('12:00 A.M.', 660, y3);

  fill(201, 186, 159, t2);

  textAlign(LEFT, CENTER);

  text('- - - - - - - - - - -', 80, y3)

  textAlign(RIGHT, CENTER);

  text('- -', 620, y3);

  textSize(14);

  textAlign(CENTER, CENTER);

  fill(112, 108, 100, t2);

  text('- DAY 3 -', 40, y3-15);

  for (let i = 0; i < myData.day3.schedule.length; i++) {

    fill(67, 85 + (myData.day3.water[i] * 10), 240, t2);

    rect((myData.day3.schedule[i] - offs) * ofs, y3, myData.day3.water[i] * rectx, myData.day3.water[i] * recty, 90);

  }

}

​

function d4s() {

  fill(145, 135, 116, t3);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y4);

  text('12:00 A.M.', 660, y4);

  fill(201, 186, 159, t3);

  textAlign(LEFT, CENTER);

  text('- - - - - - - - - - - - - - -', 80, y4);

  textSize(14);

  textAlign(CENTER, CENTER);

  fill(112, 108, 100, t3);

  text('- DAY 4 -', 40, y4-15);

  for (let i = 0; i < myData.day4.schedule.length; i++) {

    fill(67, 85 + (myData.day4.water[i] * 10), 240, t3);

    rect((myData.day4.schedule[i] - offs) * ofs, y4, myData.day4.water[i] * rectx, myData.day4.water[i] * recty, 90);

  }

}

​

function d5s() {

  fill(145, 135, 116, t4);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y5);

  text('12:00 A.M.', 660, y5);

  fill(201, 186, 159, t3);

  fill(201, 186, 159, t4);

  textAlign(LEFT, CENTER);

  text('- - - - - - - - - - -', 80, y5);

  textAlign(RIGHT, CENTER);

  text('- - - - -', 620, y5);

  textSize(14);

  textAlign(CENTER, CENTER);

  fill(112, 108, 100, t4);

  text('- DAY 5 -', 40, y5-15);

  for (let i = 0; i < myData.day5.schedule.length; i++) {

    fill(67, 85 + (myData.day5.water[i] * 10), 240, t4);

    rect((myData.day5.schedule[i] - offs) * ofs, y5, myData.day5.water[i] * rectx, myData.day5.water[i] * recty, 90);

  }

}

​

function d6s() {

  fill(145, 135, 116, t5);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y6);

  text('12:00 A.M.', 660, y6);

  fill(201, 186, 159, t5);

  textAlign(LEFT, CENTER);

  text('- - - - - - - - - - - - - - - - ', 80, y6);

  textAlign(RIGHT, CENTER);

  text('- - - - -', 620, y6);

  textSize(14);

  textAlign(CENTER, CENTER);

  fill(112, 108, 100, t5);

  text('- DAY 6 -', 40, y6-15);

  for (let i = 0; i < myData.day6.schedule.length; i++) {

    fill(67, 85 + (myData.day6.water[i] * 10), 240, t5);

    rect((myData.day6.schedule[i] - offs) * ofs, y6, myData.day6.water[i] * rectx, myData.day6.water[i] * recty, 90);

  }

}

​

function d7s() {

  fill(145, 135, 116, t6);

  textAlign(CENTER, CENTER);

  noStroke();

  textSize(12);

  textStyle(BOLD);

  text('8:00 A.M.', 40, y7);

  text('12:00 A.M.', 660, y7);

  fill(201, 186, 159, t6);

  textAlign(LEFT, CENTER);

  text('- - - - - - - - - - - - - - -', 80, y7);

  textAlign(RIGHT, CENTER);

  text('- - ', 620, y7);

  textSize(14);

  textAlign(CENTER, CENTER);

  fill(112, 108, 100, t6);

  text('- DAY 7 -', 40, y7-15);

  for (let i = 0; i < myData.day7.schedule.length; i++) {

    fill(67, 85 + (myData.day7.water[i] * 10), 240, t6);

    rect((myData.day7.schedule[i] - offs) * ofs, y7, myData.day7.water[i] * rectx, myData.day7.water[i] * recty, 90);

  }

}

​

function move1() {

  y1 += md;

  t1 = tv;

}

​

function move2() {

  y1 += md;

  y2 += md;

  t2 = tv;

}

​

function move3() {

  y1 += md;

  y2 += md;

  y3 += md;

  t3 = tv;

}

​

function move4() {

  y1 += md;

  y2 += md;

  y3 += md;

  y4 += md;

  t4 = tv;

}

​

function move5() {

  y1 += md;

  y2 += md;

  y3 += md;

  y4 += md;

  y5 += md;

  t5 = tv;

}

​

function move6() {

  y1 += md;

  y2 += md;

  y3 += md;

  y4 += md;

  y5 += md;

  y6 += md;

  t6 = tv;

}

​

// function move7() {

//   y1 += 75;

//   y2 += 75;

//   y3 += 75;

//   y4 += 75;

//   y5 += 75;

//   y6 += 75;

//   y7 += 75;

//   t7 = tv;

// }