Improvement Plan:

1. Make animation for the UI display

2. Replace photo and dollar notes with png (Done)

3. Remove unnecessary variables (Done)

4. Create a function for card (Done)

*/

​

​

var phase = 0; //Phase of wallet

​

//Height & width of wallet

var h = 240; 

var w = 180;

​

//UI to open wallet

var showUIW = false;

var saveMX;

var saveMY;

​

//Animation trigger

var card1 = false;

var cardA = false;

var cashA = false;

var picA = false;

​

//Animation timer

var aTime = 0;

var aTimeC = 0;

var aTimeP = 0;

​

//Image define

var cash; //http://clipart-library.com/clip-art/100-dollar-bill-transparent-11.htm

var logo; //https://nudatasecurity.com/company/press-releases/

var chip; //https://www.bing.com/images/search?view=detailV2&ccid=KCZ%2bZLax&id=F0532B5B18B93C7B0535ADB7B8465AFDCA8BCA62&thid=OIP.KCZ-ZLaxuDrOwlahODvv-wAAAA&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.28267e64b6b1b83acec256a1383beffb%3frik%3dYsqLyv1aRri3rQ%26riu%3dhttp%253a%252f%252fwww.bethpagefcu.com%252f-%252fmedia%252fImages%252fbethpage%252fPage-Content%252fCC_chip.ashx%253fla%253den%2526hash%253d5C7489F85871C2B5ADB440786183A0CC%26ehk%3ddSC2e4TZ8He2%252bC08UBTODsd0vFgfG8cFanpAJ283qWY%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=100&expw=135&q=credit+card+chip&simid=608020876846438682&FORM=IRPRST&ck=40FC35B7AA4550B4F4A8CBACCD4527D8&selectedIndex=0&qft=+filterui%3aphoto-transparent&ajaxhist=0&ajaxserp=0

//The original website has been taken down but it is still visible on Bing. (https://www.bethpagefcu.com/more/bethpage-chip-card.aspx)

var beach; //https://www.drodd.com/html4/beach-pictures.html

​

//Sound define

var open; //https://freesound.org/people/Natty23/sounds/349191/

var close; //https://freesound.org/people/Natty23/sounds/349192/

var cashV; //https://freesound.org/people/talithamaree_2L/sounds/593577/

​

function preload()

{

  cash = loadImage("100.png");

  logo = loadImage("MC.png");

  chip = loadImage("chip.png");

  beach = loadImage("picBg.jpg");

  open = loadSound("open.wav");

  close = loadSound("close.wav");

  cashV = loadSound("cash.wav");

}

​

function setup() 

{

  createCanvas(600, 600);

}

​

function draw() 

{

  background(220);

  //Define color

  let leather = color(139,69,19); //Main color

  let lLeather = color(160,82,45); // Minor color

  if (phase === 0) //wallet is closed

    {

      //Draw wallet closed

      fill (leather);

      noStroke();

      rectMode(CENTER);

      rect(width / 2,height / 2,w,h);

      strokeWeight(5);

      stroke(lLeather);

      line(380,190,380,410)

      noFill();

      stroke(lLeather,200);

      ellipse(245,215,50)

    }

  else if (phase === 1) //wallet is open

    {

      //Draw wallet open

      fill (leather);

      noStroke();

      rectMode(CENTER);

      rect(width / 2 + w / 2,height / 2,w,h);

      rect(width / 2 - w / 2,height / 2,w,h);

      //Draw cash (Optimized!)

      //Variables for cash

      let stopTC = 70; // When does the animation stop

      let cashSpeed = 1.7 // Speed of cash moving up

      //Animation

      if(aTimeC <= stopTC && cashA == true)

        {

          //Move up

          aTimeC++;

          let cashC = cashSpeed * aTimeC;

          imageMode(CENTER);

          image(cash, width / 2, height / 2 - cashC, 330, 330 / cash.width * cash.height);

        }

      else if (cashA == true && aTimeC > stopTC)

        {

          //Animation ends

          let cashF = cashSpeed * stopTC;

          imageMode(CENTER);

          image(cash, width / 2, height / 2 - cashF, 330, 330 / cash.width * cash.height);

        }

      textAlign(LEFT,CENTER);

      //Draw cash holder (Not animated)

      fill(leather);

      rectMode(CORNER);

      rect(120,height / 2 - h / 2 + 40,360,200)

      strokeWeight(5);

      stroke(lLeather);

      strokeCap(SQUARE);

      line(width / 2, height / 2 + h / 2, width / 2, height / 2 - h / 2 + 40); //middle line

      line(width / 2 + w, height / 2 - h / 2 + 40, width / 2 - w, height / 2 - h / 2 + 40); //top line

      //Draw card (Optimized!)

      noStroke();

      fill(200);

      let stopT = 90;

      if (card1== false)

        {

          card();

        }

        else if(aTime <= stopT && cardA == true)

        {

          aTime++;

          push();

          translate(0,-aTime);

          card();

          pop();

//        console.log(aTime);

        }

      else

        {

          push();

          translate(0,-stopT);

          card();

          pop();

        }

​

//       card holder #1

      fill(leather);

      rect(width / 2 +2.5,height / 2 - h / 2 + 80,w - 2.5,height / 2 + h / 2 - (height / 2 - h / 2 + 80));

      for (i = 0; i <= 2; i++)

        { 

          strokeWeight(5);

          stroke(lLeather);

          strokeCap(SQUARE);

          line(width / 2, height / 2 - h / 2 + 80 + 40 * i, width / 2 + w, height / 2 - h / 2 + 80 + 40 * i);

        } //card holder

      let stopTP = 80;

      if(picA == false)

        {

          pic();

        }

      else if (picA == true && aTimeP <= stopTP)

        {

          aTimeP++;

          noStroke();

          push();

          translate(0,-aTimeP);

          pic();

          pop();

        }

      else if(picA == true && aTimeP > stopTP)

        {

          push();

          translate(0,-stopTP);

          pic();

          pop();

        }

        // picture holder

      noStroke();

      fill(180,180,180,150);

      rect(width / 2 - w + 20, height / 2, 140, 100)

      textSize(15);

      fill(255,0,0)

      text("Try to click stuff in the wallet", 10,20);

      text("Press spacebar to reset", 10,40);

    }

  if (showUIW == true)

    {

      fill(220);

      noStroke();

      ellipse(saveMX,saveMY,15);

      noFill();

      stroke(220);

      strokeWeight(2);

      ellipse(saveMX,saveMY,120);

      fill(255,0,0);

      noStroke();

      ellipse(saveMX + 60, saveMY, 20)

      textSize(15);

      text("Press the red button to open wallet", 10,20)

    }

}

​

function mousePressed()

{

  if (mouseX <= 420 && mouseX >= 180 && mouseY >= 210 && mouseY <= 390 && phase === 0 && showUIW == false)

    {

      // console.log("yes");

      showUIW = true;

      saveMX = mouseX;

      saveMY = mouseY;

    }

  if(phase === 0 && showUIW === true && mouseX >= saveMX + 60 - 10 && mouseX <= saveMX + 60 +10 && mouseY <= saveMY + 10 && mouseY >= saveMY - 10)

    {

       // console.log("yes");

      showUIW = false;

      phase ++;

      open.play();

    }

  else if(phase === 1 && mouseY <= height / 2 - h / 2 + 80 && mouseY >= height / 2 - h / 2 + 55 && mouseX >= width / 2 && mouseX <= width / 2 + w && card1 == false)

    {

      // console.log("yes");

      card1 = true;

      cardA = true;

    }

  else if(mouseX >= width / 2 - w / 2 && mouseX <= width / 2 + w / 2 && phase === 1 && mouseY <= height / 2 - h / 2 + 40 && mouseY >= height / 2 - h / 2)

    {

                  // console.log("yes");

            cashA = true;

      cashV.play(0,1,1,0,1);

    }

  else if(phase === 1 && mouseX >= width / 2 - w + 20 && mouseX <= width / 2 - w + 160 && mouseY >= height / 2 && mouseY <= height / 2 + 100)

    {

            picA = true;

    }

}

​

function keyPressed()

{

  if (keyCode == 32)

    {

      back2Ori();

      close.play();

    }

}

​

function card()

{

  imageMode(CORNER);

  let golden = color(212,175,55); //Chip on card

  let cardLogo = color(255,165,0); //Logo on credit card

  rect(width / 2 +2.5,height / 2 - h / 2 + 55,w - 5,(w-2.5) / 85.5 * 54,5);

  fill(0);

  textSize(12);

  text("5432 9876 1908 0838", (width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 35);

  text("PETER LEE    08/32",(width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 20);

  image(chip,width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20,40,40/chip.width * chip.height);

  image(logo,(width / 2 + 2.5) + 133, height / 2 - h / 2 + 15 + (w-2.5) / 85.5 * 54,40,40/logo.width * logo.height);

  // fill(cardLogo);

  // ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25,20);

}

​

function back2Ori()

{

  phase = 0;

  showUIW = false;

  card1 = false;

  cardA = false;

  aTime = 0;

  aTimeC = 0;

  aTimeP = 0;

  cashA = false;

  picA = false;

}

​

function pic()

{

  imageMode(CORNER);

  noStroke();

  image(beach,width / 2 - w + 25, height / 2,130,95)

  rect(width / 2 - w + 70, height / 2 + 35, 30, 60)

  fill(255,239,213)

  rect(width / 2 - w + 80, height / 2 + 45, 20, 25)

  fill(255,0,0);

  rect(width / 2 - w + 80, height / 2 + 70, 20, 25)

}