let bubblewidth = 0;  //bubble 1//

let bubbleheight = 10;

let growAmount = 0.15;

let grow = true;

​

let bubblewidth2 = 0;   //bubble 2//

let bubbleheight2 = 10;

let growAmount2 = 0.1;

let grow2 = true;

​

let bubblewidth3 = 0;  //bubble 3//

let bubbleheight3 = 10;

let growAmount3 = 0.35;

let grow3 = true;

​

let bubblewidth4 = 0; //bubble 4//

let bubbleheight4 = 10;

let growAmount4 = 0.075;

let grow4 = true;

​

let bubblewidth5 = 0; //bubble 5//

let bubbleheight5 = 10;

let growAmount5 = 0.05;

let grow5 = true;

​

let bubblewidth6 = 0; //bubble 6//

let bubbleheight6 = 10;

let growAmount6 = 0.1;

let grow6 = true;

​

let bubblewidth7 = 0; //bubble 7//

let bubbleheight7 = 10;

let growAmount7 = 0.1;

let grow7 = true;

​

let bubblewidth8 = 0; //bubble 8//

let bubbleheight8 = 10;

let growAmount8 = 0.1;

let grow8 = true;

​

let bubblewidth9 = 0; //bubble 9//

let bubbleheight9 = 10;

let growAmount9 = 0.1;

let grow9 = true;

​

​

​

///// this is for tweening /////

​

let startX = 225;  ///bubble 1///

let stopX = 225;

let startY = 720;

let stopY = 0;

let x = startX;

let y = startY;

let step = 0.001;

let pct = 0.0;

​

let startX2 = 500;  ///bubble 2///

let stopX2 = 500;

let startY2 = 720;

let stopY2 = 0;

let x2 = startX2;

let y2 = startY2;

let step2 = 0.0005;

let pct2 = 0.0;

​

let startX3 = 800;  ///bubble 3///

let stopX3 = 800;

let startY3 = 720;

let stopY3 = 0;

let x3 = startX3;

let y3 = startY3;

let step3 = 0.002;

let pct3 = 0.0;

​

let startX4 = 1125;  ///bubble 4///

let stopX4 = 1125;

let startY4 = 720;

let stopY4 = 0;

let x4 = startX4;

let y4 = startY4;

let step4 = 0.00025;

let pct4 = 0.0;

​

let startX5 = 100;  ///bubble 5///

let stopX5 = 100;

let startY5 = 720;

let stopY5 = 0;

let x5 = startX5;

let y5 = startY5;

let step5 = 0.00075;

let pct5 = 0.0;

​

let startX6 = 650;  ///bubble 6///

let stopX6 = 650;

let startY6 = 720;

let stopY6 = 0;

let x6 = startX6;

let y6 = startY6;

let step6 = 0.005;

let pct6 = 0.0;

​

let startX7 = 350;  ///bubble 7///

let stopX7 = 350;

let startY7 = 720;

let stopY7 = 0;

let x7 = startX7;

let y7 = startY7;

let step7 = 0.0065;

let pct7 = 0.0;

​

let startX8 = 950;  ///bubble 8///

let stopX8 = 950;

let startY8 = 720;

let stopY8 = 0;

let x8 = startX8;

let y8 = startY8;

let step8 = 0.0035;

let pct8 = 0.0;

​

let startX9 = 950;  ///bubble 9///

let stopX9 = 950;

let startY9 = 720;

let stopY9 = 0;

let x9 = startX9;

let y9 = startY9;

let step9 = 0.0035;

let pct9 = 0.0;

​

​

​

​

///For when screen is clicked to create bubble 9

let bubbleCreated = false;

​

​

​

​

​

/// For colors of bubbles and background////

let CircleR = 255;

let CircleG = 42;

let CircleB = 6;

​

let orangeColor = true;

let greenColor = false;

let blueColor = false;

let purpleColor = false;

​

let backgroundOrange;

let backgroundBlue;

let backgroundGreen;

let backgroundPurple;

​

​

​

​

​

​

/////////////////////////////////////////

​

​

// image background // 

​

function preload() { //load in all images for background

  backgroundOrange = loadImage('assets/orangebg.jpg');

  backgroundBlue = loadImage('assets/bluebg.jpg');

  backgroundGreen = loadImage('assets/greenbg.jpg');

  backgroundPurple = loadImage('assets/purplebg.jpg');

}

/////////////////////////////////////////////////////////////////////////////////////////////

​

​

​

​

​

​

​

​

function setup() {

  createCanvas(1280, 720);

}

​

function draw() {

  if(orangeColor == true)  //use the image based on what color is currently being used

  {

      image(backgroundOrange,0,0);

  }

  else if(blueColor == true)

  {

      image(backgroundBlue,0,0);

  }

  else if(greenColor == true)

  {

      image(backgroundGreen,0,0);

  }

  else if(purpleColor == true)

  {

      image(backgroundPurple,0,0);

  }

  fill(CircleR, CircleG, CircleB); //fill the circle based on the color being used

  strokeWeight(0);

  ellipse(x,y,bubblewidth,bubbleheight);

  ellipse(x2,y2, bubblewidth2, bubbleheight2);

  ellipse(x3, y3, bubblewidth3, bubbleheight3);

  ellipse(x4, y4, bubblewidth4, bubbleheight4);

  ellipse(x5, y5, bubblewidth5, bubbleheight5);

  ellipse(x6, y6, bubblewidth6, bubbleheight6);

  ellipse(x7, y7, bubblewidth7, bubbleheight7);

  ellipse(x8, y8, bubblewidth8, bubbleheight8);

  /////////////////////////////////////////////////////////////////////////

  ////Bubble1////

  if (bubblewidth > 150) { // wont exceed past 150 //

    grow = false

  }

  if (bubblewidth < 20) { // wont be smaller than 20 // 

    grow = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow == true) { ///growing///

    bubblewidth  += growAmount; /// width is always growing by 0.5 when grow is true/////

​

    if(bubbleheight < 200)       // wont go past 200 in height // 

    {

      bubbleheight = random(bubbleheight + 0.01, bubbleheight + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth -= growAmount; /// width is always shrinking by 0.5 when grow is false/////

​

    if(bubbleheight > 30)   // wont go below 30 in height //

    {

      bubbleheight = random(bubbleheight - 1, bubbleheight - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct < 1.0) // notes from tweening //

    {

      x = startX +((stopX-startX)*pct);

      y = startY +((stopY-startY)*pct);

      pct+=step;

    }

  if (pct >= 1.0)

    {

      pct = 0;

    }

  /////////////////////////////////////////////////////////////

  ///BUBBLE 2////

  if (bubblewidth2 > 200) { // wont exceed past 200 //

    grow2 = false

  }

  if (bubblewidth2 < 20) { // wont be smaller than 20 // 

    grow2 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow2 == true) { ///growing///

    bubblewidth2  += growAmount2; /// width is always growing by 0.1 when grow is true/////

​

    if(bubbleheight2 < 200)       // wont go past 200 in height // 

    {

      bubbleheight2 = random(bubbleheight2 + 0.01, bubbleheight2 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth2 -= growAmount2; /// width is always shrinking by 0.1 when grow is false/////

​

    if(bubbleheight2 > 50)   // wont go below 50 in height //

    {

      bubbleheight2 = random(bubbleheight2 - 1, bubbleheight2 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct2 < 1.0) // notes from tweening //

    {

      x2 = startX2 +((stopX2-startX2)*pct2);

      y2 = startY2 +((stopY2-startY2)*pct2);

      pct2+=step2;

    }

  if (pct2 >= 1.0)

    {

      pct2 = 0;

    }

  //////////////////////////////////////////////////////////////////////////////////////////////

  ///BUBBLE 3////

  if (bubblewidth3 > 300) { // wont exceed past 300 //

    grow3 = false

  }

  if (bubblewidth3 < 20) { // wont be smaller than 20 // 

    grow3 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow3 == true) { ///growing///

    bubblewidth3  += growAmount3; /// width is always growing by 0.35 when grow is true/////

​

    if(bubbleheight3 < 400)       // wont go past 400 in height // 

    {

      bubbleheight3 = random(bubbleheight3 + 0.01, bubbleheight3 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth3 -= growAmount3; /// width is always shrinking by 0.35 when grow is false/////

​

    if(bubbleheight3 > 40)   // wont go below 40 in height //

    {

      bubbleheight3 = random(bubbleheight3 - 1, bubbleheight3 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct3 < 1.0) // notes from tweening //

    {

      x3 = startX3 +((stopX3-startX3)*pct3);

      y3 = startY3 +((stopY3-startY3)*pct3);

      pct3+=step3;

    }

  if (pct3 >= 1.0)

    {

      pct3 = 0;

    }

  //////////////////////////////////////////////////////////////////////

  ///BUBBLE 4////

  if (bubblewidth4 > 250) { // wont exceed past 250 //

    grow4 = false

  }

  if (bubblewidth4 < 20) { // wont be smaller than 20 // 

    grow4 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow4 == true) { ///growing///

    bubblewidth4  += growAmount4; /// width is always growing by 0.075 when grow is true/////

​

    if(bubbleheight4 < 300)       // wont go past 300 in height // 

    {

      bubbleheight4 = random(bubbleheight4 + 0.01, bubbleheight4 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth4 -= growAmount4; /// width is always shrinking by 0.075 when grow is false/////

​

    if(bubbleheight4 > 40)   // wont go below 40 in height //

    {

      bubbleheight4 = random(bubbleheight4 - 1, bubbleheight4 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct4 < 1.0) // notes from tweening //

    {

      x4 = startX4 +((stopX4-startX4)*pct4);

      y4 = startY4 +((stopY4-startY4)*pct4);

      pct4+=step4;

    }

  if (pct4 >= 1.0)

    {

      pct4 = 0;

    }

​

​

//////////////////////////////////////////////////////////////////////

///BUBBLE 5////

  if (bubblewidth5 > 250) { // wont exceed past 250 //

    grow5 = false

  }

  if (bubblewidth5 < 20) { // wont be smaller than 20 // 

    grow5 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow5 == true) { ///growing///

    bubblewidth5  += growAmount5; /// width is always growing by 0.075 when grow is true/////

​

    if(bubbleheight5 < 300)       // wont go past 300 in height // 

    {

      bubbleheight5 = random(bubbleheight5 + 0.01, bubbleheight5 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth5 -= growAmount5; /// width is always shrinking by 0.075 when grow is false/////

​

    if(bubbleheight5 > 40)   // wont go below 40 in height //

    {

      bubbleheight5 = random(bubbleheight5 - 1, bubbleheight5 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct5 < 1.0) // notes from tweening //

    {

      x5 = startX5 +((stopX5-startX5)*pct5);

      y5 = startY5 +((stopY5-startY5)*pct5);

      pct5+=step5;

    }

  if (pct5 >= 1.0)

    {

      pct5 = 0;

    }

  //////////////////////////////////////////////////////////////////////

///BUBBLE 6////

  if (bubblewidth6 > 80) { // wont exceed past 250 //

    grow6 = false

  }

  if (bubblewidth6 < 20) { // wont be smaller than 20 // 

    grow6 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow6 == true) { ///growing///

    bubblewidth6  += growAmount6; /// width is always growing by 0.075 when grow is true/////

​

    if(bubbleheight6 < 100)       // wont go past 300 in height // 

    {

      bubbleheight6 = random(bubbleheight6 + 0.01, bubbleheight6 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth6 -= growAmount6; /// width is always shrinking by 0.075 when grow is false/////

​

    if(bubbleheight6 > 20)   // wont go below 40 in height //

    {

      bubbleheight6 = random(bubbleheight6 - 1, bubbleheight6 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct6 < 1.0) // notes from tweening //

    {

      x6 = startX6 +((stopX6-startX6)*pct6);

      y6 = startY6 +((stopY6-startY6)*pct6);

      pct6+=step6;

    }

  if (pct6 >= 1.0)

    {

      pct6 = 0;

    }

   //////////////////////////////////////////////////////////////////////

///BUBBLE 7////

  if (bubblewidth7 > 50) { // wont exceed past 250 //

    grow7 = false

  }

  if (bubblewidth7 < 10) { // wont be smaller than 10 // 

    grow7 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow7 == true) { ///growing///

    bubblewidth7  += growAmount7; /// width is always growing by 0.075 when grow is true/////

​

    if(bubbleheight7 < 75)       // wont go past 300 in height // 

    {

      bubbleheight7 = random(bubbleheight7 + 0.01, bubbleheight7 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth7 -= growAmount7; /// width is always shrinking by 0.075 when grow is false/////

​

    if(bubbleheight7 > 20)   // wont go below 20 in height //

    {

      bubbleheight7 = random(bubbleheight7 - 1, bubbleheight7 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct7 < 1.0) // notes from tweening //

    {

      x7 = startX7 +((stopX7-startX7)*pct7);

      y7 = startY7 +((stopY7-startY7)*pct7);

      pct7+=step7;

    }

  if (pct7 >= 1.0)

    {

      pct7 = 0;

    }

  //////////////////////////////////////////////////////////////////////

///BUBBLE 8////

  if (bubblewidth8 > 40) { // wont exceed past 250 //

    grow8 = false

  }

  if (bubblewidth8 < 10) { // wont be smaller than 10 // 

    grow8 = true

  }  

  /////////////////////////////////////////////////////////////////////////

  if (grow8 == true) { ///growing///

    bubblewidth8  += growAmount8; /// width is always growing by 0.075 when grow is true/////

​

    if(bubbleheight8 < 50)       // wont go past 300 in height // 

    {

      bubbleheight8 = random(bubbleheight8 + 0.01, bubbleheight8 + 1);

    } ///  using random will make bubble height increase by a number between 0.01 and 1 //

  }

  else { //// shrinking ////

    bubblewidth8 -= growAmount8; /// width is always shrinking by 0.075 when grow is false/////

​

    if(bubbleheight8 > 10)   // wont go below 20 in height //

    {

      bubbleheight8 = random(bubbleheight8 - 1, bubbleheight8 - 0.01);

    }  

  }

  //////////////////////////////////////////////////////////////////

  if (pct8 < 1.0) // notes from tweening //

    {

      x8 = startX8 +((stopX8-startX8)*pct8);

      y8 = startY8 +((stopY8-startY8)*pct8);

      pct8+=step8;

    }

  if (pct8 >= 1.0)

    {

      pct8 = 0;

    }

​

  //////////////////////////////////////////////////////////////////////

    ///BUBBLE 9////

  if(bubbleCreated == true)  //Only create bubble 9 when clicked

    {

      ellipse(x9, y9, bubblewidth9,bubbleheight9);

      if(y9 <= 10)

      {

        bubbleCreated = false;   //get rid of bubble when it reaches top of screen

      }

       //////////////////////////////////////////////////////////////////////

      ///BUBBLE 9////

​

      if (bubblewidth9 > 40) { // wont exceed past 40 //

        grow9 = false

      }

      if (bubblewidth9 < 10) { // wont be smaller than 10 // 

        grow9 = true

      }  

​

​

      /////////////////////////////////////////////////////////////////////////

​

​

      if (grow9 == true) { ///growing///

​

        bubblewidth9  += growAmount9; /// width is always growing by 0.075 when grow is true/////

​

​

​

        if(bubbleheight9 < 50)       // wont go past 300 in height // 

        {

          bubbleheight9 = random(bubbleheight9 + 0.01, bubbleheight9 + 1);

        } ///  using random will make bubble height increase by a number between 0.01 and 1 //

      }

​

​

      else { //// shrinking ////

​

        bubblewidth9 -= growAmount9; /// width is always shrinking by 0.075 when grow is false/////

​

​

        if(bubbleheight9 > 10)   // wont go below 20 in height //

        {

          bubbleheight9 = random(bubbleheight9 - 1, bubbleheight9 - 0.01);

        }  

      }

  /////////////////////////////////////////////////////////////////////////////////////

​

      if (pct9 < 1.0) // notes from tweening //

        {

          x9 = startX9 +((stopX9-startX9)*pct9);

          y9 = startY9 +((stopY9-startY9)*pct9);

          pct9+=step9;

        }

​

      if (pct9 >= 1.0)

        {

          pct9 = 0;

        }

  }

}

 ///////////////// colors change when shift////////

​

function keyPressed()

{

  if(keyCode == SHIFT)

    {

      ////////// red to blue /////////////

    if(orangeColor == true)

      {

        CircleR = 25;

        CircleG = 33;

        CircleB = 219;

        orangeColor = false;

        blueColor = true;

      }

      ///////// blue to green /////

      else if(blueColor == true)

      {       

        CircleR = 34;

        CircleG = 219;

        CircleB = 83;

        blueColor = false;

        greenColor = true;

      }

      ////////////// green to purple //////////////

      else if(greenColor == true)

      {

        CircleR = 131;

        CircleG = 0;

        CircleB = 191;

        greenColor = false;

        purpleColor = true;

      }

       /////// purple to red /////////

      else if(purpleColor ==true)

      {

        CircleR = 207;

        CircleG = 21;

        CircleB = 4;

        orangeColor = true;

        purpleColor = false;

      }

    }

}

​

​

​

​

​

​

​

​

​

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

​

​

// for mouse click //

function mouseClicked()

{

  if(bubbleCreated == false)  //will only let you make one bubble at a time from a click

  {

    startX9 = mouseX;  //make starting position for new bubble be where the mouse is.

    stopX9 = startX9;

    startY9 = mouseY;  //make starting position for new bubble be where the mouse is

    stopY9 = 0;

    x9 = startX9;

    y9 = startY9;

    step9 = 0.003;

    pct9 = 0.0;

    bubbleCreated = true; //let's the code know bubble 9 can be created

  }

}

/////////////////////////////////////////////////////////////////////////////////////////