​

function preload() {

  myData = loadJSON('data.json');

}

​

function setup() {

  createCanvas(600, 600);

  background(14, 14, 26);

​

  setInterval(one, 2000);

  setInterval(two, 500);

  setInterval(three, 700);

  setInterval(four, 400);

  setInterval(five, 300);

  setInterval(six, 500);

  setTimeout(onee, 2000);

  setTimeout(twoo, 3000);

  setTimeout(threee, 5000);

  setTimeout(fourr, 6500);

  setTimeout(fivee, 8000);

}

​

function draw() {

  push();

  noStroke();

  fill(223, 231, 232);

​

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

    ellipse(i * 65 + 65, 100, myData.Day1.dailySleep[i] * 0.45);

  }

​

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

    ellipse(i * 65 + 65, 170, myData.Day2.dailySleep[i] * 0.45);

  }

​

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

    ellipse(i * 65 + 65, 240, myData.Day3.dailySleep[i] * 0.45);

  }

​

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

    ellipse(i * 65 + 65, 310, myData.Day4.dailySleep[i] * 0.45);

  }

​

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

    ellipse(i * 65 + 65, 380, myData.Day5.dailySleep[i] * 0.45);

  }

​

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

    ellipse(i * 65 + 65, 450, myData.Day6.dailySleep[i] * 0.45);

  }

​

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

    ellipse(i * 65 + 65, 520, myData.Day7.dailySleep[i] * 0.45);

  }

  pop();

}

​

function one() {

  noStroke();

  c = color(random(255), random(255), random(255));

  fill(c);

  ellipse(260, 100, 16);

}

​

function two() {

  noStroke();

  c = color(random(255), random(255), random(255));

  fill(c);

  ellipse(455, 170, 8);

}

​

function three() {

  noStroke();

  c = color(random(255), random(255), random(255));

  fill(c);

  ellipse(195, 240, 8);

  ellipse(390, 240, 9);

  ellipse(520, 240, 11);

}

​

function four() {

  noStroke();

  c = color(random(255), random(255), random(255));

  fill(c);

  ellipse(260, 310, 15);

}

​

function five() {

  noStroke();

  c = color(random(255), random(255), random(255));

  fill(c);

  ellipse(260, 450, 11);

}

​

function six() {

  noStroke();

  c = color(random(255), random(255), random(255));

  fill(c);

  ellipse(260, 520, 19);

}

​

function onee() {

  noStroke();

  fill(255, 242, 0);

  ellipse(195, 100, 50);

}

​

function twoo() {

  noStroke();

  fill(255, 242, 0);

  ellipse(195, 170, 43);

​

}

​

function threee() {

  noStroke();

  fill(255, 242, 0);

  ellipse(260, 380, 44);

}

​

function fourr() {

  noStroke();

  fill(255, 242, 0);

  ellipse(455, 450, 46);

}

​

function fivee() {

  noStroke();

  fill(255, 242, 0);

  ellipse(195, 520, 53);

}