DMS 121    Bernard Dolecki    University at Buffalo    2020

      This project focuses on the making of art. This application

    is played like a game, giving the player some cash buy supplies 

    or to just jump right into painting. This program gives the 

    opportunity to draw with multiple colors and multiple brush sizes 

    with the click of a mouse. Once you are done painting, sell your 

    work to help pay for new supplies and more possibilities.

    References:

      p5js Sample Draw: https://p5js.org/examples/mobile-simple-draw.html

    Fullscreen Link:

      https://editor.p5js.org/ericdevo/full/UnVwmiuLJ

*/

​

//Global

var hide = true;

if (hide) /*Images*/ {

  var NowWhat;

  var Large;

  var Med;

  var Small;

  var W;

  var R;

  var Y;

  var B;

  var K;

  var WR;

  var WY;

  var WB;

  var WK;

  var RY;

  var RB;

  var RK;

  var YB;

  var YK;

  var BK;

  var Selling;

  var Sold;

  var Plaza;

  var PlazaL;

  var PlazaR;

  var Store;

  var StoreW;

  var StoreR;

  var StoreY;

  var StoreB;

  var StoreMed;

  var StoreLarge;

  var StoreBook;

  var SoldOut;

  var Lock;

  var Start;

  var info;

  var Frame;

  var Ring1;

  var Ring2;

  var Mom;

  var postIt;

  var bike;

  var BikeTitle;

}

if (hide) /*Sounds*/ {

  var menuSong;

  var drawSong;

  var storeSong;

  var ChaChing;

  var Sploosh;

  var Click;

  var Doorbell;

  var Woosh;

  var Gavel;

  var PaintingCanvas;

  var countingMoney;

  var changeBrush;

  var buzzbuzz;

}

if (hide) /*Variables*/ {

  var scene = 1; // SCENE SELECTION

  var clickCounter = 0; // CLICK COOLDOWN

​

  var drawColor = 0; // WHAT COLOR IS SELECTED

  var drawSize = 1; // WHAT SIZE BRUSH IS SELECTED

  var mix = 0; // COLORS CURRENTLY SELECTED

  var smallDraw = 25; // SMALL BRUSH DIAMETER

  var medDraw = 50; // MED BRUSH DIAMETER

  var largeDraw = 75; // LARGE BRUSH DIAMETER

  var drawSizes = 40; // DIMENTIONS OF BRUSH

  var sizeImage; // REPRESENTS SMALL, MEDIUM, OR LARGE BRUSH SIZE

  var curColor; // COLOR OF STROKE

  var rainbow1;

  var rainbow2;

  var rainbow3;

  var rain1 = true;

  var rain2 = true;

  var rain3 = true;

​

  var inCanvas = false; // IS CURSOR IN CANVAS

  var doDraw = false; // ABLE TO DRAW

  var drawing = false; // CURRENTLY DRAWING

  var drawn = false; // HAVE DRAWN ANYTHING

​

  var progress = false; // ARE YOU DRAWING

  var forSale = false; // CAN YOU PRESS "SELL"

  var number = 0; // KEEPS TRACK OF AMOUNT OF SAVES

  var timer = 0; // ADDS DELAY TO CHANGING SCENES

  var infoUp = true; // TESTS IF THE INFO SCREEN WILL DISPLAY

  var callUp = false; //Phonecall with Mom

  var bikeUp = false; //Friends got bike

​

  var cash = 50; // AMOUNT OF MONEY YOU HAVE

  var sellPrice = 0; // MONEY YOU GET FROM AUCTION

  var paintEXP = 0.75; // VARIABLE OF EXPERIENCE

  var colorChange = 1; // VARIABLE OF DIFFERENT COLORS

  var sizeChange = 1; // VARIABLE OF DIFFERENT BRUSH SIZES

  var amountOfPaint = 1; // VARAIBLE OF AMOUNT OF PAINT

  var topSellPrice = 3.00; // STARTING TOP BID FOR PAINTING

  var rise = 0.00; // ADD UP TO THE AUCTIONED PRICE

  var addIt = 1; // DISPLAY INCREASE

  var gotWhite = false;

  var gotRed = false;

  var gotYellow = false;

  var gotBlue = false;

  var gotMed = false;

  var gotLarge = false;

  var preSave;

  var theFirstSave = null;

}

if (hide) /*ACHIEVEMENTS*/ {

  var IN_DEBT = false; //Get in debt by $50

  var WAS_IN_DEBT = false //Extension of above

  var SAVER = false; //Save your first painting

  var BIKE_TIME = false; //Have $150 to get a bike

  var SHOWBIKE = false; //Extension of above

  var FIRST_PAINTING = false; //Make your first painting

  var SECRET_DRAWER = false; //Draw on the Start Screen

  var NO_MORE_PAINT = false; //Buy all the paints

  var NO_MORE_BRUSHES = false; //Buy all the brushes

}

​

function preload() {

​

  if (hide) /*Images*/{

    NowWhat = loadImage('assets/bg/Now What.png');

    Small = loadImage('assets/bg/Small.png');

    Med = loadImage('assets/bg/Med.png');

    Large = loadImage('assets/bg/Large.png');

    W = loadImage('assets/colors/W.png');

    R = loadImage('assets/colors/R.png');

    Y = loadImage('assets/colors/Y.png');

    B = loadImage('assets/colors/B.png');

    K = loadImage('assets/colors/K.png');

    WR = loadImage('assets/colors/WR.png');

    WY = loadImage('assets/colors/WY.png');

    WB = loadImage('assets/colors/WB.png');

    WK = loadImage('assets/colors/WK.png');

    RY = loadImage('assets/colors/RY.png');

    RB = loadImage('assets/colors/RB.png');

    RK = loadImage('assets/colors/RK.png');

    YB = loadImage('assets/colors/YB.png');

    YK = loadImage('assets/colors/YK.png');

    BK = loadImage('assets/colors/BK.png');

    Selling = loadImage('assets/bg/Selling.png');

    Sold = loadImage('assets/stickers/Sold.png');

    Plaza = loadImage('assets/bg/Plaza.png');

    PlazaL = loadImage('assets/bg/Plaza Left.png');

    PlazaR = loadImage('assets/bg/Plaza Right.png');

    Store = loadImage('assets/bg/Store.png');

    StoreW = loadImage('assets/bg/Store White.png');

    StoreR = loadImage('assets/bg/Store Red.png');

    StoreY = loadImage('assets/bg/Store Yellow.png');

    StoreB = loadImage('assets/bg/Store Blue.png');

    StoreMed = loadImage('assets/bg/Store Medium.png');

    StoreLarge = loadImage('assets/bg/Store Large.png');

    StoreBook = loadImage('assets/bg/Store Book.png');

    SoldOut = loadImage('assets/stickers/Sold Out.png');

    Lock = loadImage('assets/stickers/Lock.png');

    Start = loadImage('assets/bg/Start.png');

    info = loadImage('assets/stickers/info.png');

    Frame = loadImage('assets/stickers/Frame.png');

    Ring1 = loadImage('assets/stickers/Ring1.png');

    Ring2 = loadImage('assets/stickers/Ring2.png');

    Mom = loadImage('assets/stickers/Mom.png');

    postIt = loadImage('assets/stickers/postIt.png');

    bike = loadImage('assets/stickers/bike.png');

    BikeTitle = loadImage('assets/stickers/BikeTitle.png');

  }

  if (hide) /*Sounds*/ {

    menuSong = loadSound('assets/sounds/menuSong.wav'); 

    drawSong = loadSound('assets/sounds/drawSong.wav');

    storeSong = loadSound('assets/sounds/storeSong.wav');

    ChaChing = loadSound('assets/sounds/ChaChing.wav');

    Sploosh = loadSound('assets/sounds/Sploosh.wav');

    Click = loadSound('assets/sounds/Click.wav');

    Doorbell = loadSound('assets/sounds/Doorbell.wav');

    Woosh = loadSound('assets/sounds/Woosh.wav');

    Gavel = loadSound('assets/sounds/Gavel3.wav');

    PaintingCanvas = loadSound('assets/sounds/PaintingCanvas.wav');

    countingMoney = loadSound('assets/sounds/countingMoney.wav');

    changeBrush = loadSound('assets/sounds/changeBrush.wav');

    buzzbuzz = loadSound('assets/sounds/buzzbuzz.wav');

  }

  if (hide) /*Data*/ {

  rainbow1 = floor(random(226));

  rainbow2 = floor(random(226));

  rainbow3 = floor(random(226));

  }

}

​

function setup() {

  createCanvas(1200, 900);

  background(255, 255, 255);

  menuSong.loop();  

}

​

function mouseReleased() {

  drawing = false;

  PaintingCanvas.pause();

}

​

function draw() {

  if (hide) {

    //print("IN CANVAS: " + inCanvas)

    //print("DO DRAW: " + doDraw)

    //print("DRAWING: " + drawing)

    //print("PAINT EXP: " + paintEXP)

    //print("COLOR CHANGE: " + colorChange)

    //print("SIZE CHANGE: " + sizeChange)

    //print("AMOUNT OF PAINT: " + amountOfPaint)

  } //Auction Variables

​

  if (clickCounter < 11) clickCounter += 1; //Prevents repeat clicking

  if (mouseX > 384 && mouseX < 1185 && mouseY > 90 && mouseY < 693) inCanvas = true; else inCanvas = false;

  if (inCanvas && drawColor != 0) doDraw = true; else doDraw = false;

​

  if (scene == 1) background(Start); //"Start"

​

  if (scene == 2) /*Plaza*/ {

    background(Plaza);

​

    if (mouseX > 117 && mouseX < 470 && mouseY > 182 && mouseY < 659 && !callUp && !bikeUp) background(PlazaL); //"PAINTERS" Hover

    if (mouseX > 647 && mouseX < 1048 && mouseY > 226 && mouseY < 659 && !callUp && !bikeUp) background(PlazaR); //"ART STORE" Hover

    //NEW BIKE

    if (cash > 150) BIKE_TIME = true;

    if (BIKE_TIME) image(bike,0,0)

    if (BIKE_TIME && !SHOWBIKE) {

      bikeUp = true;

      image(BikeTitle,0,0);

    }

    if (infoUp) image(info,0,0); //Show Info

    //MOM'S PHONECALL

    if ((cash < -25)||(cash == -25)){

      if (!WAS_IN_DEBT&&!IN_DEBT){

        callUp = true;

        timer += 1

        if (timer < 30) image(Ring1,0,0); else image(Ring2,0,0);

        if (timer == 60) timer = 0;

      }

      if (!WAS_IN_DEBT&&IN_DEBT) {

        image(Mom,0,0);

        timer = 0;

      }

    }

    if (hide){

      textSize(60);

      if (cash > 0)fill(43, 150, 21);

      else if (cash < 0)fill(255, 0, 0);

      else fill(0, 0, 0);

      stroke(0, 0, 0, 0);

      text("$" + nf(round(cash, 2), 0, 2), 20, 75);

    } // Cash Display

  }

​

  if (scene == 3) /*Draw Space*/ {

    // EVERY ACTION AND DISPLAY ON CANVAS PAGE

    if (!progress) {

      if (doDraw) drawn = true;

      if (!drawn) background(255, 255, 255);

      if (drawing) amountOfPaint = round(amountOfPaint + 0.002, 3);

      //CHOOSE THE SIZE OF PAINTBRUSH      

      if (drawSize == 1) /*Small Brush Selected*/ {

        drawSizes = smallDraw;

        sizeImage = Small;

      }

      if (drawSize == 2) /*Medium Brush Selected*/ {

        drawSizes = medDraw;

        sizeImage = Med;

      }

      if (drawSize == 3) /*Large Brush Selected*/ {

        drawSizes = largeDraw;

        sizeImage = Large;

      }

​

      image(sizeImage, 0, 0);

​

      //CHOOSE THE SPECIFIED COLOR

      if (hide) /*COLORS*/ {

        if (drawColor == 0) /*Blank*/ {

          curColor = color(0, 0, 0, 0);

          doDraw = false;

        }

        if (drawColor == 1) /*White*/ {

          image(W, 28, 679);

          curColor = color(255, 255, 255);

        }

        if (drawColor == 2) /*Red*/ {

          image(R, 28, 679);

          curColor = color(255, 0, 0);

        }

        if (drawColor == 3) /*Yellow*/ {

          image(Y, 28, 679);

          curColor = color(255, 255, 0);

        }

        if (drawColor == 4) /*Blue*/ {

          image(B, 28, 679);

          curColor = color(0, 0, 255);

        }

        if (drawColor == 5) /*Black*/ {

          image(K, 28, 679);

          curColor = color(0, 0, 0);

        }

        if (drawColor == 6) /*White-Red*/ {

          image(WR, 28, 679);

          curColor = color(255, 89, 192);

        }

        if (drawColor == 7) /*White-Yellow*/ {

          image(WY, 28, 679);

          curColor = color(255, 255, 110);

        }

        if (drawColor == 8) /*White-Blue*/ {

          image(WB, 28, 679);

          curColor = color(0, 201, 255);

        }

        if (drawColor == 9) /*White-Black*/ {

          image(WK, 28, 679);

          curColor = color(150, 150, 150);

        }

        if (drawColor == 10) /*Red-Yellow*/ {

          image(RY, 28, 679);

          curColor = color(255, 130, 0);

        }

        if (drawColor == 11) /*Red-Blue*/ {

          image(RB, 28, 679);

          curColor = color(160, 0, 160);

        }

        if (drawColor == 12) /*Red-Black*/ {

          image(RK, 28, 679);

          curColor = color(101, 0, 0);

        }

        if (drawColor == 13) /*Yellow-Blue*/ {

          image(YB, 28, 679);

          curColor = color(0, 147, 12);

        }

        if (drawColor == 14) /*Yellow-Black*/ {

          image(YK, 28, 679);

          curColor = color(103, 95, 40);

        }

        if (drawColor == 15) /*Blue-Black*/ {

          image(BK, 28, 679);

          curColor = color(0, 0, 100);

        }

      }

      //PUT LOCKS OVER WHAT WAS NOT 

      if (!gotWhite) image(Lock,25,19);

      if (!gotRed) image(Lock,25,128);

      if (!gotYellow) image(Lock,25,237);

      if (!gotBlue) image(Lock,25,345);

      if (!gotMed) image(Lock,633,745);

      if (!gotLarge) image(Lock,806,745);

​

      if (hide) /*TEST BOUNDARIES*/ {

        if (mouseX > 27 && mouseX < 344 && mouseY > 780 && mouseY < 858) { //"Clear Color" Hover

          //background(0, 0, 0)

        } //Check Clear Color

        if (mouseX > 985 && mouseX < 1185 && mouseY > 5 && mouseY < 75) { //"DONE" Hover

          //background(0, 0, 0)

        } //Check Done

        if (mouseX > 499 && mouseX < 529 && mouseY > 783 && mouseY < 813) { //"Small" Hover

          //background(0, 0, 0)

        } //Check Small

        if (mouseX > 639 && mouseX < 693 && mouseY > 771 && mouseY < 824) { //"Med" Hover

          //background(0, 0, 0)

        } //Check Med

        if (mouseX > 803 && mouseX < 880 && mouseY > 758 && mouseY < 834) { //"Large" Hover

          //background(0, 0, 0)

        } //Check Large

        if (mouseX > 25 && mouseX < 94 && mouseY > 37 && mouseY < 109) { //"White" Hover

          //background(0, 0, 0)

        } //Check White

        if (mouseX > 25 && mouseX < 94 && mouseY > 147 && mouseY < 219) { //"Red" Hover

          //background(0, 0, 0)

        } //Check Red

        if (mouseX > 25 && mouseX < 94 && mouseY > 257 && mouseY < 329) { //"Yellow" Hover

          //background(0, 0, 0)

        } //Check Yellow

        if (mouseX > 25 && mouseX < 94 && mouseY > 365 && mouseY < 436) { //"Blue" Hover

          //background(0, 0, 0)

        } //Check Blue

        if (mouseX > 25 && mouseX < 94 && mouseY > 475 && mouseY < 545) { //"Black" Hover

          //background(0, 0, 0)

        } //Check Black

        if (mouseX > 384 && mouseX < 1185 && mouseY > 90 && mouseY < 693) { //"Canvas" Hover

          //background(0, 0, 0)

        } //Check Canvas

      }

    } 

    // EVERY ACTION AND DISPLAY ON AUCTION PAGE

    else {

      if (forSale) {

        curColor = null;

        image(NowWhat, 0, 0);

        if (WAS_IN_DEBT) image(postIt,0,0);

      } 

      else {

        image(Selling, 0, 0);

        textSize(60);

        fill(0, 0, 0);

        stroke(0, 0, 0, 0);

        text("$" + nf(round(rise, 2), 0, 2), 97, 585);

        // DISPLAY ACCUMULATION OF AUCTION SELL PRICE

        if (rise != sellPrice) {

          rise = round(rise + addIt, 3);

          if (floor(sellPrice) == floor(rise)) addIt = 0.1;

          if (floor(sellPrice * 10) == floor(rise * 10)) addIt = 0.01;

        }

​

        // TIMERS TO AUTOMATICALLY CHANGE SCENES

        if (rise == sellPrice) {

          countingMoney.stop();

          timer += 1;

          if (timer == 60) Gavel.play();

          if (timer > 100) image(Sold, 764, 100);

          if (timer == 300) {

            timer = 0;

            scene = 2;

            sellPrice = 1;

            rise = 0;

            progress = false;

            addIt = 1;

            drawSong.pause();

            if (!((cash < -25)||(cash == -25))) menuSong.loop(); else buzzbuzz.loop();          

          } 

        }

      }

​

      if (hide) /*TEST BOUNDARIES*/ {

        if (mouseX > 240 && mouseX < 500 && mouseY > 733 && mouseY < 845); { //"SELL" Hover

          //background(0, 0, 0)

        } //Check SELL

        if (mouseX > 700 && mouseX < 960 && mouseY > 733 && mouseY < 845); { //"SAVE" Hover

          //background(0, 0, 0)

        } //Check SAVE

      }

    }

​

  }

  if (scene == 4) /*STORE*/ {

    background(Store);

    //CHANGE BACKGROUND TO HIGHLIGHT HOVERED ITEM

    if (mouseX > 983 && mouseX < 1184 && mouseY > 12 && mouseY < 82); //background(0,0,0) //"Back" Hover  

    if ((mouseX > 95 && mouseX < 202 && mouseY > 276 && mouseY < 444) && !gotWhite) background(StoreW); //"White" Hover

    if ((mouseX > 264 && mouseX < 367 && mouseY > 276 && mouseY < 444) && !gotRed) background(StoreR); //"Red" Hover

    if ((mouseX > 95 && mouseX < 200 && mouseY > 568 && mouseY < 735) && !gotYellow) background(StoreY); //"Yellow" Hover

    if ((mouseX > 264 && mouseX < 367 && mouseY > 568 && mouseY < 735) && !gotBlue) background(StoreB); //"Blue" Hover

    if ((mouseX > 544 && mouseX < 718 && mouseY > 553 && mouseY < 626) && !gotMed) background(StoreMed); //"MEDIUM" Hover

    if ((mouseX > 540 && mouseX < 748 && mouseY > 732 && mouseY < 806) && !gotLarge) background(StoreLarge); //"Large" Hover

    if (mouseX > 974 && mouseX < 1178 && mouseY > 544 && mouseY < 740) background(StoreBook) //"Books" Hover

    // PLACE STICKERS OVER ALREADY BOUGHT ITEMS

    if (gotWhite)image(SoldOut,70,260);

    if (gotRed)image(SoldOut,242,263);

    if (gotYellow)image(SoldOut,71,555);

    if (gotBlue)image(SoldOut,233,556);

    if (gotMed)image(SoldOut,569,490);

    if (gotLarge)image(SoldOut,568,670);

    // SHOW FIRST SAVED PAINTING IN THE STORE

    if (SAVER){

      image(Frame,522,49,286,230);

      image(theFirstSave,550,80,229,172);

    }

    if (hide){

      textSize(60);

      if (cash > 0)fill(43, 150, 21);

      else if (cash < 0)fill(255, 0, 0);

      else fill(0, 0, 0);

      stroke(0, 0, 0, 0);

      text("$" + nf(round(cash, 2), 0, 2), 20, 75);

    } // Cash Display

  }

}

​

function mousePressed() {

  if (scene == 1) {

    PaintingCanvas.loop();

    //CHANGE TO PLAZA SCENE

    if ((mouseX > 298 && mouseX < 900 && mouseY > 564 && mouseY < 717) && (clickCounter > 10)) {

      scene = 2;

      clickCounter = 0;

      drawSizes = null;

      curColor = null;

      Click.play();

    }

  } //Main

​

  if (scene == 2) {

    //CHANGE TO CANVAS SCENE

    if ((mouseX > 117 && mouseX < 470 && mouseY > 182 && mouseY < 659) && (clickCounter > 10) && !infoUp && !callUp && !bikeUp) {

      scene = 3;

      clickCounter = 0;

      drawn = false;

      colorChange = 1;

      sizeChange = 1;

      amountOfPaint = 1;

      cash -= 10;

      mix = 0;

      Doorbell.play();

      drawSong.loop();

      menuSong.pause();

    } //Painters

    //CHANGE TO STORE SCENE

    if ((mouseX > 647 && mouseX < 1048 && mouseY > 226 && mouseY < 659) && (clickCounter > 10) && !infoUp && !callUp && !bikeUp) {

      scene = 4;

      clickCounter = 0;

      menuSong.pause();

      Doorbell.play();

      storeSong.loop();

    } //Art Store

    //OPEN INFORMATION

    if ((mouseX > 1104 && mouseX < 1179 && mouseY > 16 && mouseY < 89) && (clickCounter > 10) && !infoUp && !callUp && !bikeUp){

      infoUp = true;

      clickCounter = 0;

      Click.play();

    } //Bring Up Info

    //CLOSE INFORMATION

    if (infoUp && clickCounter > 10){

      infoUp = false;

      clickCounter = 0;

      Click.play();

    } //Close Info

    //CLOSE BIKE PROMPT

    if ((BIKE_TIME && !SHOWBIKE) && clickCounter > 10){

      clickCounter = 0;

      SHOWBIKE = true;

      bikeUp = false

      Click.play();

    }

    //MOM'S PHONECALL

    if (callUp && !IN_DEBT && clickCounter > 10) {

      IN_DEBT = true;

      clickCounter = 0;

      buzzbuzz.stop();

      menuSong.loop();

    }

    if (callUp && IN_DEBT && !WAS_IN_DEBT && clickCounter > 10) {

      callUp = false;

      WAS_IN_DEBT = true;

      ChaChing.play();

      cash += 40;

      clickCounter = 0;

    }

  } //Plaza

​

  if (scene == 3) {

    //INTERACTIONS ON THE CANVAS

    if (!progress) {

      if (doDraw) drawing = true; else drawing = false;

​

      if ((mouseX > 985 && mouseX < 1185 && mouseY > 5 && mouseY < 75) && (clickCounter > 10)) /*DONE */{

        progress = true;

        clickCounter = 0;

        drawColor = 0;

        drawSize = 1;

        forSale = true;

        Click.play();

        preSave = get(385, 93, 799, 598);

      }

      if ((mouseX > 499 && mouseX < 529 && mouseY > 783 && mouseY < 813) && (clickCounter > 10)) /*SMALL*/{

        if (drawSize != 1) {

          sizeChange = round(sizeChange + 0.05, 2);

          changeBrush.play();

        }

        drawSize = 1;

        clickCounter = 0;

      }

      if ((mouseX > 639 && mouseX < 693 && mouseY > 771 && mouseY < 824) && (clickCounter > 10) && gotMed) /*MEDIUM*/{

        if (drawSize != 2) {

          sizeChange = round(sizeChange + 0.05, 2);

          changeBrush.play();

        }

        drawSize = 2;

        clickCounter = 0;

      }

      if ((mouseX > 803 && mouseX < 880 && mouseY > 758 && mouseY < 834) && (clickCounter > 10 && gotLarge)) /*LARGE*/{

        if (drawSize != 3) {

          sizeChange = round(sizeChange + 0.05, 2);

          changeBrush.play();

        }

        drawSize = 3;

        clickCounter = 0;

      }

      if ((mouseX > 27 && mouseX < 344 && mouseY > 780 && mouseY < 858) && (clickCounter > 10)) /*CLEAR*/{

        drawColor = 0;

        clickCounter = 0;

        mix = 0;

        Woosh.play();

      }

      if (mouseX > 384 && mouseX < 1185 && mouseY > 90 && mouseY < 693) PaintingCanvas.loop(); //Sound in Canvas

​

      //COLOR INFORMAION AND MIXING

      if (hide){

        // WHITE, RED, YELLOW, BLUE, OR BLACK

        if (drawColor == 0) {

          //WHITE

          if ((mouseX > 25 && mouseX < 94 && mouseY > 37 && mouseY < 109) && (clickCounter > 10) && gotWhite) {

            drawColor = 1;

            clickCounter = 0;

            Sploosh.play();

            if (mix < 2) {

              mix += 1;

              colorChange = round(colorChange + 0.01, 2);

            }

          }

          //RED

          if ((mouseX > 25 && mouseX < 94 && mouseY > 147 && mouseY < 219) && (clickCounter > 10) && gotRed) {

            drawColor = 2;

            clickCounter = 0;

            Sploosh.play();

            if (mix < 2) {

              mix += 1;

              colorChange = round(colorChange + 0.01, 2);

            }

          }

          //YELLOW

          if ((mouseX > 25 && mouseX < 94 && mouseY > 257 && mouseY < 329) && (clickCounter > 10) && gotYellow) {

            drawColor = 3;

            clickCounter = 0;

            Sploosh.play();

            if (mix < 2) {