let fs = 10;

let fs2 = 10;

let fs3 = 10;

let fs4 = 10;

let fs5 = 10;

let fs6 = 10;

let fs7 = 10;

let sizeX = [50, 130, 210, 290, 370, 450, 530];

let staff;

let myfont;

​

let rain;

let amp;

​

function preload(){

  myData = loadJSON('data.json');

  rain = loadSound('rain.mp3');

  staff = loadImage('staff.png')

  myfont = loadFont('Neucha.ttf');

}

​

function setup() {

  createCanvas(600, 600);

  //console.log(myData.Day1.openapp)

  amp = new p5.Amplitude();

  textAlign(CENTER);

  setInterval(one, 1000);

  setInterval(two, 1000);

  setInterval(three, 1000);

  setInterval(four, 1000);

  setInterval(five, 1000);

  setInterval(six, 1000);

  setInterval(seven, 1000);

  setTimeout(fsone,2000);

  setTimeout(fstwo,4000);

  setTimeout(fsthree,6000);

  setTimeout(fsfour,8000);

  setTimeout(fsfive,10000);

  setTimeout(fssix,12000);

  setTimeout(fsseven,14000);

}

​

​

​

//*********************************************************

​

function fsone(){

  rain.loop();

  fs = fs + 8

}

​

function fstwo(){

  fs2 = fs2 + 8

}

​

function fsthree(){

  fs3 = fs3 + 8

}

​

function fsfour(){

  fs4 = fs4 + 8

}

​

function fsfive(){

  fs5 = fs5 + 8

}

​

function fssix(){

  fs6 = fs6 + 8

}

​

function fsseven(){

  fs7 = fs7 + 8

}

​

function one(){

  sizeX[0] = sizeX[0] + 10

  if (sizeX[0] == 60){

    sizeX[0] = sizeX[0] - 20

  }

}

​

function two(){

  sizeX[1] = sizeX[1] + 10

  if (sizeX[1] == 140){

    sizeX[1] = sizeX[1] - 20

  }

}

​

function three(){

  sizeX[2] = sizeX[2] + 10

  if (sizeX[2] == 220){

    sizeX[2] = sizeX[2] - 20

  }

}

​

function four(){

  sizeX[3] = sizeX[3] + 10

  if (sizeX[3] == 300){

    sizeX[3] = sizeX[3] - 20

  }

}

​

function five(){

  sizeX[4] = sizeX[4] + 10

  if (sizeX[4] == 380){

    sizeX[4] = sizeX[4] - 20

  }

}

​

function six(){

  sizeX[5] = sizeX[5] + 10

  if (sizeX[5] == 460){

    sizeX[5] = sizeX[5] - 20

  }

}

​

function seven(){

  sizeX[6] = sizeX[6] + 10

  if (sizeX[6] == 540){

    sizeX[6] = sizeX[6] - 20

  }

}

​

​

​

//*****************************************************************

​

function draw() {

  background(15, 37, 64);

  image(staff, 0, 350, 600, 220)

  let level = amp.getLevel();

  let r = map(level,0,1,0,400);

​

  strokeWeight(50);

  stroke(17, 48, 85);

​

  line(50, 0, 50, myData.Day1.duration[0]+myData.Day1.duration[1]+myData.Day1.duration[2]);

  line(130, 0, 130, myData.Day2.duration[0]+myData.Day2.duration[1]+myData.Day2.duration[2]+myData.Day2.duration[3]);

  line(210, 0, 210, myData.Day3.duration[0]+myData.Day3.duration[1]);

  line(290, 0, 290, myData.Day4.duration[0]+myData.Day4.duration[1]+myData.Day4.duration[2]+myData.Day4.duration[3]+myData.Day4.duration[4]);

  line(370, 0, 370, myData.Day5.duration[0]+myData.Day5.duration[1]+myData.Day5.duration[2]);

  line(450, 0, 450, myData.Day6.duration[0]+myData.Day6.duration[1]+myData.Day6.duration[2]);

  line(530, 0, 530, myData.Day7.duration[0]+myData.Day7.duration[1]+myData.Day7.duration[2]+myData.Day7.duration[3]+myData.Day7.duration[4]);

  fill(51, 173, 255)

  noStroke();

  textFont(myfont);

  textAlign(CENTER);

  textSize(fs);

  text('Day 1', 50, 590);

  textSize(fs2);

  text('Day 2', 130, 590);

  textSize(fs3);

  text('Day 3', 210, 590);

  textSize(fs4);

  text('Day 4', 290, 590);

  textSize(fs5);

  text('Day 5', 370, 590);

  textSize(fs6);

  text('Day 6', 450, 590);

  textSize(fs7);

  text('Day 7', 530, 590);

​

//openapp  

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

    fill(255, 224, 93);

    ellipse(sizeX[0], myData.Day1.openapp[i]*10+50, r*2, r*2);

    // imageMode(CENTER);

    // image(note, sizeX[0], myData.Day1.openapp[i]*15+50, 30, 40);

  }

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

    fill(76, 246, 243);

    ellipse(sizeX[1], myData.Day2.openapp[i]*15+50, r, r);

    // imageMode(CENTER);

    // image(note, sizeX[1], myData.Day2.openapp[i]*15+50, 30, 40);

  }

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

    fill(76, 246, 243);

    ellipse(sizeX[2], myData.Day3.openapp[i]*15+50, r*1.5, r*1.5);

    // imageMode(CENTER);

    // image(note, sizeX[2], myData.Day3.openapp[i]*15+50, 30, 40);

  }

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

    fill(255, 224, 93);

    ellipse(sizeX[3], myData.Day4.openapp[i]*15+50, r*2, r*2);

    // imageMode(CENTER);

    // image(note, sizeX[3], myData.Day4.openapp[i]*15+50, 30, 40);

  }

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

    fill(255, 224, 93);

    ellipse(sizeX[4], myData.Day5.openapp[i]*15+50, r, r);

    // imageMode(CENTER);

    // image(note, sizeX[4], myData.Day5.openapp[i]*15+50, 30, 40);

  }

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

    fill(76, 246, 243);

    ellipse(sizeX[5], myData.Day6.openapp[i]*15+50, r*1.8, r*1.8);

    // imageMode(CENTER);

    // image(note, sizeX[5], myData.Day6.openapp[i]*15+50, 30, 40);

  }

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

    fill(255, 224, 93);

    ellipse(sizeX[6], myData.Day7.openapp[i]*15+50, r, r);

    // imageMode(CENTER);

    // image(note, sizeX[6], myData.Day7.openapp[i]*15+50, 30, 40);

  }

}

​