let daysOfTheWeek = ["MON","TUE","WED","THUR","FRI","SAT","SUN"];

let imgCn = [];

let YouTubeCount = [];

let position1 = 100;

let s = 0.0;

let Colors = [0,125,245,200,55, 400,180];

let g = 0;

​

function setup() {

  createCanvas(600, 600);

  background(194, 66, 245);

  //for loop 

  let s = 'A week of Youtube Vids I Watched:';

  //fill(19, 14, 20);

  textSize(20);

  text(s, 180, 70, 400, 100);

​

  // set up yt screenshot and first bar graph

    image(YouTubeCount[g],160,320,350,250);

    rect(position1, 150, 43, 100);

    text(youtubevidswatched[g],position1 + 12,275);

    text(daysOfTheWeek[g],position1 ,140); 

    text("Views This Week",250 ,300); 

  // Draw a line for graph

    line(90,275, 90, 110);

    line(540,278, 89,278);

    fill(240);

    let nextBtn = createButton('Next');

        nextBtn.mousePressed(Next)// calling the function called Next

    //let backBtn = createButton('Back');

     //   backBtn.mousePressed(goBack)

    g++; // incriment increase

​

}

​

function Next(){

   // to stop more than 6 clicks

  if(g < YouTubeCount.length){

    fill(Colors[g]);

    position1 += 50; //position += 50 the same as position = position +50

    // draw the next day and go to next picture

    rect(position1, 150, 43, 100);

    text(youtubevidswatched[g],position1 += 25 ,275); 

    text(daysOfTheWeek[g],position1 - 25 ,140); 

    image(YouTubeCount[g],160,320,270,190);

  }else if (g === YouTubeCount.length){// if no more images

    redraw(); // redraw stops things from happening forever

  }

    g++;

}

​

// does nothing

function draw() {

  //  fill(51);

  //background(0);

​

}

​

​

function preload() {

  // array with assets

  var assests =['assets/Youtubecount 1.PNG','assets/Youtubecount 2.PNG','assets/Youtubecount 3.PNG','assets/Youtubecount 4.PNG','assets/Youtubecount 5.PNG','assets/Youtubecount 6.PNG'];

 for (let i = 0; i < assests.length; i++){

   // i increases each time, allowing me to select elements in array

     YouTubeCount.push(loadImage(assests[i]));

 }

}

​