xxxxxxxxxx
300
/*
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)
}