let up1 = true;

let up2 = true;

let up3 = true;

​

//X,Y and R values for the yellow balls inside cups.

let ballX1 = 80;

let ballX2 = 200;

let ballX3 = 320;

let ballY = 230;

let ballR = 60;

​

//width and height of the ellipses

let widthE = 80;

let heightE = 20;

​

//X and Y values of the ellipse's center for the 1st cup

let centerX1 = 80;

let centerY1 = 260;

​

//X and Y values of the ellipse's center for the 2nd cup

let centerX2 = 200;

let centerY2 = 260;

​

//X and Y values of the ellipse's center for the 3rd cup

let centerX3 = 320;

let centerY3 = 260;

​

let fortunes = [1, 2, 3];

let fortune;

​

function setup() {

  createCanvas(400, 400);

  fortune = random(fortunes);

}

​

function draw() {

  background(190);

  noStroke();

  fill(0);

  textAlign(CENTER);  

  textSize(30);  

  text("CHOOSE YOUR MOOD!", width/2, 340);

  //Create the yellow balls inside the cups and draw faces on them.

  fill("yellow");

  ellipse(ballX1, ballY, ballR);

  ellipse(ballX2, ballY, ballR);

  ellipse(ballX3, ballY, ballR);

  fill(0);

  if(fortune==1){

    fill('blue')

    ellipse(ballX1-10, ballY-10, 10);

    ellipse(ballX1+10, ballY-10, 10);

    arc(ballX1, ballY+5, 35, 25, 0, PI);

    fill('purple');

    ellipse(ballX2-10, ballY-10, 10);

    ellipse(ballX2+10, ballY-15, 10);

    rect(ballX2-18, ballY+5, 36, 6)

    fill('red');

    ellipse(ballX3-10, ballY-10, 10);

    ellipse(ballX3+10, ballY-10, 10);

    arc(ballX3, ballY+15, 30, 25, PI,0);

  }else if(fortune==2){

    fill('blue')

    ellipse(ballX3-10, ballY-10, 10);

    ellipse(ballX3+10, ballY-10, 10);

    arc(ballX3, ballY+5, 35, 25, 0, PI);

    fill('purple');

    ellipse(ballX1-10, ballY-10, 10);

    ellipse(ballX1+10, ballY-15, 10);

    rect(ballX1-18, ballY+5, 36, 6)

    fill('red');

    ellipse(ballX2-10, ballY-10, 10);

    ellipse(ballX2+10, ballY-10, 10);

    arc(ballX2, ballY+15, 30, 25, PI,0);

  }else if(fortune==3){

    fill('red');

    ellipse(ballX2-10, ballY-10, 10);

    ellipse(ballX2+10, ballY-10, 10);

    arc(ballX2, ballY+5, 35, 25, 0, PI);

    fill('blue')

    ellipse(ballX3-10, ballY-10, 10);

    ellipse(ballX3+10, ballY-15, 10);

    rect(ballX3-18, ballY+5, 36, 6)

    fill('purple');

    ellipse(ballX1-10, ballY-10, 10);

    ellipse(ballX1+10, ballY-10, 10);

    arc(ballX1, ballY+15, 30, 25, PI,0);

  }

​

  console.log(fortune);

  //Create the cups using only the X and Y values of the ellipse's center as variables so that we can move the whole cup by changing only centerx and centerY variables.

  //To raise the cups, we need to only reduce centerY.

  fill(140,12,76);

  ellipse(centerX1, centerY1, widthE, heightE);

  quad(centerX1-20, centerY1-120, centerX1+20, centerY1-120, centerX1+40, centerY1, centerX1-40, centerY1);

  ellipse(centerX2, centerY2, widthE, heightE);

  quad(centerX2-20, centerY2-120, centerX2+20, centerY2-120, centerX2+40, centerY2, centerX2-40, centerY2);

  ellipse(centerX3, centerY3, widthE, heightE);

  quad(centerX3-20, centerY3-120, centerX3+20, centerY3-120, centerX3+40, centerY3, centerX3-40, centerY3);

}

​

function mouseClicked() {

  if(mouseX>=centerX1-40 && mouseX<=centerX1+40 && mouseY>=centerY1-120 && mouseY<=centerY1) {

    if(up1){

      centerY1=centerY1-80;

      up1 = false;

    }else{

      centerY1=centerY1+80;

      up1 = true;         

    }   

  }else if(mouseX>=centerX2-40 && mouseX<=centerX2+40 && mouseY>=centerY2-120 && mouseY<=centerY2){

    if(up2){

      centerY2=centerY2-80;

      up2 = false;

    }else{

      centerY2=centerY2+80;

      up2 = true;         

    }

  }else if(mouseX>=centerX3-40 && mouseX<=centerX3+40 && mouseY>=centerY3-120 && mouseY<=centerY3){

    if(up3){

      centerY3=centerY3-80;

      up3 = false;

    }else{

      centerY3=centerY3+80;

      up3 = true;         

    }

  }

}

​