var pig;

var pigBot;

var coinCent;

var coinDime;

var coinQuarter;

var coinHalf;

var coinDollar;

var showCoin;

​

//SFX

var insertC;

var shake;

var empty;

​

//UI to open wallet

var showUI = false;

var saveMX;

var saveMY;

​

//Array

var coinType = [];

var coinChoice = [];

var insertC = [];

​

//Switch

var coinIn = false;

var phase = 0; //0: not moving, 1: shaking, 2: bottom open

​

//Counter

var coinCounter = 0;

var aCoin = 30;

var aShake = 300;

var aTime = 0;

var coinDrop = 0;

​

function preload() {

  pig = loadImage("piggyBank.png");

  pigBot = loadImage("piggyBottom.png");

  coinCent = loadImage("cent.png");

  coinDime = loadImage("dime.png");

  coinQuarter = loadImage("quarter.png");

  coinHalf = loadImage("half.png");

  coinDollar = loadImage("dollar.png");

​

  insertC1 = loadSound("d1.wav");

  insertC2 = loadSound("d2.wav");

  insertC3 = loadSound("d3.wav");

  insertC4 = loadSound("d4.wav");

  shake = loadSound("shake.wav");

  empty = loadSound("toGround.wav");

}

​

function setup() {

  createCanvas(600, 600);

  coinType = [coinCent, coinDime, coinQuarter, coinHalf, coinDollar];

  insertC = [insertC1, insertC2, insertC3, insertC4];

}

​

function draw() {

  // console.log("coin counter is " + coinCounter);

  // console.log("coin drop is " + coinDrop);

​

  background(220);

  if (phase == 0) {

    piggy(300, 300);

  } else if (phase == 1) {

    aTime++;

    push();

    translate(random(30), random(30));

    piggy(300, 300);

    pop();

​

    if (aTime >= aShake) {

      phase = 0;

      aTime = 0;

    }

  } else if (phase == 2) {

    if (coinChoice.length > 0 && coinDrop <= coinCounter) {

      let coinV = 14;

      image(coinChoice[coinDrop], 300, 300 + aTime * coinV, 80, 80);

      push();

      translate(0, random(50));

      piggy(300, 300);

      pop();

      //AnimationTime

      if (aTime < 30) {

        aTime++;

      } else {

        phase = 0;

        aTime = 0;

        coinDrop++;

      }

    }

    //no coin

    else {

      phase = 0;

      aTime = 0;

    }

  }

​

  UI();

}

​

function mousePressed() {

  if (

    mouseX >= 225 &&

    mouseX <= 420 &&

    mouseY >= 25 &&

    mouseY <= 130 &&

    phase == 0 &&

    aTime == 0

  ) {

    coinChoice[coinCounter] = random(coinType);

    random(insertC).play();

    coinIn = true;

  } else if (

    phase == 0 &&

    mouseX >= 135 &&

    mouseX <= 465 &&

    mouseY >= 160 &&

    mouseY <= 440 &&

    showUI == false

  ) {

    saveMX = mouseX;

    saveMY = mouseY;

    showUI = true;

  } else if (

    phase == 0 &&

    mouseX >= saveMX + 60 - 10 &&

    mouseX <= saveMX + 60 + 10 &&

    mouseY <= saveMY + 10 &&

    mouseY >= saveMY - 10 &&

    showUI == true &&

    aTime == 0

  ) {

    // console.log("yes");

    showUI = false;

    phase = 1;

    shake.play();

  } else if (

    phase == 0 &&

    mouseX >= saveMX - 60 - 10 &&

    mouseX <= saveMX - 60 + 10 &&

    mouseY <= saveMY + 10 &&

    mouseY >= saveMY - 10 &&

    showUI == true &&

    aTime == 0

  ) {

    showUI = false;

    phase = 2;

    empty.play();

  }

  console.log(coinChoice);

}

​

function arrow(x, y) {

  noStroke();

  fill(255, 0, 0);

  rectMode(CENTER);

  rect(x, y, 20, 50);

  rectMode(CORNER);

  triangle(x - 20, y + 25, x + 20, y + 25, x, y + 50);

}

​

function piggy(x, y) {

  fill(0);

  ellipse(x + 20, y - 15, 250);

​

  imageMode(CENTER);

  image(pig, x, y, pig.width / 2, pig.height / 2);

​

  if (phase == 0) {

    fill(255, 0, 0);

    textSize(20);

    textAlign(CENTER);

    text("Press to insert coin!", x + 25, 40);

    arrow(x + 25, 80);

  }

​

  let coinV = 6;

​

  if (coinIn == true) {

    if (aTime <= aCoin) {

      aTime++;

      image(

        coinChoice[coinCounter],

        x + 25,

        80 + aTime * coinV,

        80,

        80

      );

    } else {

      aTime = 0;

      coinIn = false;

      coinCounter++;

    }

  }

​

  image(pigBot, x, y, pig.width / 2, pig.height / 2);

}

​

function UI() {

  if (showUI == true) {

    fill(120);

    noStroke();

    ellipse(saveMX, saveMY, 15);

​

    noFill();

    stroke(120);

    strokeWeight(2);

    ellipse(saveMX, saveMY, 120);

​

    fill(255, 0, 0);

    noStroke();

    ellipse(saveMX + 60, saveMY, 20);

​

    fill(0, 0, 255);

    ellipse(saveMX - 60, saveMY, 20);

​

    textSize(15);

    fill(0);

    textAlign(LEFT, CENTER);

    text("Press the red button to shake piggy bank", 10, 560);

    text("Press the blue button to open piggy bank", 10, 580);

  }

}

​