let NUM;

let DayIndex;

///

let r1;

let g1;

let b1;

​

function preload() {

  myData = loadJSON('data2.json');

}

​

function setup() {

  DayIndex=["Day1","Day2","Day3","Day4","Day5","Day6","Day7"]

  createCanvas(400, 400);

  background(224, 204, 255);

  stroke(141, 141, 224)

  strokeWeight(4)

//  r1=171;

// g1=255;

// b1=255;

    NUM =(400/7)-3

    for (let x=0;x<width;x+=width/24){

    for (let y=0;y<height;y+=width/7){

​

      //LINE OF 24

​

     line(x,0,x,400)

      //lines of 7

      line(0,y,400,y);

      push()

      //add one amount of grey each x

​

      fill(255,255,255,(y/255)*x)

      rect(x-width/24,0,x,400)

      pop()

    }

    }

    setInterval(OneCol, 2000);

  // setInterval(TwoCol, 1000);

  // setInterval(ThreeCol, 2000);

  setInterval(FourCol, 1000);

​

}

​

function draw() {

  blendMode(MULTIPLY);

  fill(r1,g1,b1);

  console.log(r1,g1,b1)

​

​

  for (let i = 0; i < myData.Day1.startSleep.length; i++) {

​

    rect(myData.Day1.startSleep[i]*(width/24), myData.Day1.Day[0]*(height/7)-height/7/2, myData.Day1.sleepDuration[i]*(width/24), height/7/2);

        push()

          noStroke();

    fill(0)

    text(myData.Day1.startSleep[i], (myData.Day1.startSleep[i] * 15)-2,  (myData.Day1.Day[0]*NUM)-10)

    pop()

    //console.log("DAY 1:", "DURRATION", myData.Day1.sleepDuration[i], "DAY:", myData.Day1.Day[0] )

  }

​

  for (let i = 0; i < myData.Day2.startSleep.length; i++) {

    rect(myData.Day2.startSleep[i]*(width/24), myData.Day2.Day[0]*(height/7)-height/7/2, myData.Day2.sleepDuration[i]*(width/24), height/7/2);

        push();

          noStroke();

    fill(0);

    text(myData.Day2.startSleep[i], (myData.Day2.startSleep[i] * 15)-2,  (myData.Day2.Day[0]*NUM)-10);

    pop();

  }

​

  for (let i = 0; i < myData.Day3.startSleep.length; i++) {

    rect(myData.Day3.startSleep[i]*(width/24), myData.Day3.Day[0]*(height/7)-height/7/2, myData.Day3.sleepDuration[i]*(width/24), height/7/2);

        push();

          noStroke();

    fill(0);

    text(myData.Day3.startSleep[i], (myData.Day3.startSleep[i] * 15)-2,  (myData.Day3.Day[0]*NUM)-10);

    pop();

  }

  for (let i = 0; i < myData.Day4.startSleep.length; i++) {

    rect(myData.Day4.startSleep[i]*(width/24), myData.Day4.Day[0]*(height/7)-height/7/2, myData.Day4.sleepDuration[i]*(width/24), height/7/2);

        push();

          noStroke();

    fill(0);

    text(myData.Day4.startSleep[i], (myData.Day4.startSleep[i] * 15)-2,  (myData.Day4.Day[0]*NUM)-10);

    pop();

  }

  for (let i = 0; i < myData.Day5.startSleep.length; i++) {

       rect(myData.Day5.startSleep[i]*(width/24), myData.Day5.Day[0]*(height/7)-height/7/2, myData.Day5.sleepDuration[i]*(width/24), height/7/2);

        push();

          noStroke();

    fill(0);

    text(myData.Day5.startSleep[i], (myData.Day5.startSleep[i] * 15)-2,  (myData.Day5.Day[0]*NUM)-10);

    pop();

  }

  for (let i = 0; i < myData.Day6.startSleep.length; i++) {

            rect(myData.Day6.startSleep[i]*(width/24), myData.Day6.Day[0]*(height/7)-height/7/2, myData.Day6.sleepDuration[i]*(width/24), height/7/2);

        push();

          noStroke();

    fill(0);

    text(myData.Day6.startSleep[i], (myData.Day6.startSleep[i] * 15)-2,  (myData.Day6.Day[0]*NUM)-10);

    pop();

  }

  for (let i = 0; i < myData.Day7.startSleep.length; i++) {

    //rect(x, y, w, h, [detailX], [detailY])

​

        rect(myData.Day7.startSleep[i]*(width/24), myData.Day7.Day[0]*(height/7)-height/7/2, myData.Day7.sleepDuration[i]*(width/24), height/7/2);

        push();

          noStroke();

    fill(0);

    text(myData.Day7.startSleep[i], (myData.Day7.startSleep[i] * 15)-2,  (myData.Day7.Day[i]*NUM)-10);

    pop();

  }

}

​

function OneCol(){

  //fill(50, 86, 168);

  r1=60;

  g1=86;

  b1=168;

  console.log("ONE");

}

function TwoCol(){

  fill(83, 138, 207);

}

function ThreeCol(){

  fill(132, 198, 245);

}

function FourCol(){

  //fill(171, 255, 255);

   r1=171;

  g1=255;

  b1=255;

  console.log("FOUR")

}