let nums = [11,7,4,2,4,8,5];

let x=50

let y=50

​

let c=(0,200,0);

let c1=200;

let c2=100

let c3=50

let c4=(200,200,50)

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(73, 81, 112,100);

  noStroke();

  textSize(25);

textFont('Georgia');

  text("How many times i flick the switches in my house",30,550)

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

   fill(133)

  rect(20+i*90,0,5,nums[i]*60);

 //bottom right

 if(mouseX >= 20 && mouseX <= 25 && mouseY >= 0 && mouseY <= 600) {

    fill(c)

  textSize(15);

textFont('Georgia');

   background(0,0,0,20)

   fill(252, 244, 3)

   ellipse(23,590,20,20)

   fill(0)

    text("11",17,595)

  }

  else{

      fill(200)

   ellipse(23,590,20,20)

   }

}

   if(mouseX >= 110 && mouseX <= 115 && mouseY >= 40 && mouseY <= 420) {

    fill(c);

      textSize(15);

textFont('Georgia');

      background(0,0,0,100)

   fill(252, 244, 3)

   ellipse(113,420,20,20)

     fill(0)

     text("7",109,425)

  }

  else{

      fill(200)

   ellipse(113,420,20,20)

   }

​

     if(mouseX >= 200 && mouseX <= 205 && mouseY >= 0 && mouseY <= 240) {

    fill(c);

        textSize(15);

textFont('Georgia');

        background(0,0,0,100)

   fill(252, 244, 3)

   ellipse(203,240,20,20)

       fill(0)

       text("4",199,245)

  }

  else{

      fill(200)

   ellipse(203,240,20,20)

   }

       if(mouseX >= 290 && mouseX <= 295 && mouseY >= 0 && mouseY <= 120) {

    fill(c);

          textSize(15);

textFont('Georgia');

          background(0,0,0,100)

   fill(252, 244, 3)

   ellipse(293,120,20,20)

         fill(0)

         text("2",289,125)

  }

  else{

          fill(200)

   ellipse(293,120,20,20)

   }

   if(mouseX >= 380 && mouseX <=385  && mouseY >= 0 && mouseY <= 250) {

    fill(c)

    textSize(15);

textFont('Georgia');

        background(0,0,0,100)

   fill(252, 244, 3)

   ellipse(382,250,20,20)

     fill(0)

     text("4",379,255)

  }

  else{

            fill(200)

   ellipse(382,250,20,20)

   }

     if(mouseX >= 470 && mouseX <= 475 && mouseY >= 0 && mouseY <= 500) {

    fill(c)

         textSize(15);

textFont('Georgia');

             background(0,0,0,100)

   fill(252, 244, 3)

   ellipse(472,490,20,20)

       fill(0)

        text("8",469,495)

  }

  else{

                fill(200)

   ellipse(472,490,20,20)

   }

       if(mouseX >= 560 && mouseX <= 565 && mouseY >= 0 && mouseY <= 350) {

    fill(c)

             textSize(15);

textFont('Georgia');

                    background(0,0,0,100)

   fill(252, 244, 3)

   ellipse(562,310,20,20)

         fill(0)

         text("5",559,315)

  }

  else{

                   fill(200)

   ellipse(562,310,20,20)

   }

​

  }

​

​

​

​