xxxxxxxxxx
383
/*
Improvement Plan:
1. Make animation for the UI display
2. Make functions with variables
3. Make 2 arrays
*/
var phase = 2; //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;
var zipDrag = false;
var zipBottom = 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
var zip; //https://www.rockywoods.com/Water-Resistant-5-Coil-Auto-Locking-Zipper-Slider-Black
//the following pngs are all from wikipedia: https://en.wikipedia.org/wiki/Coins_of_the_United_States_dollar#Coins_in_circulation
var coinCent;
var coinDime;
var coinQuarter;
var coinHalf;
var coinDollar;
//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/
var coinArr=[];
var coinArrCh=[coinCent,
coinDime,
coinQuarter,
coinHalf,
coinDollar];
var cursorArr=[];
function preload()
{
cash = loadImage("100.png");
logo = loadImage("MC.png");
chip = loadImage("chip.png");
beach = loadImage("picBg.jpg");
coinCent = loadImage("cent.png");
coinDime = loadImage("dime.png");
coinQuarter = loadImage("quarter.png");
coinHalf = loadImage("half.png");
coinDollar = loadImage("dollar.png");
zip = loadImage("zipper.png");
open = loadSound("open.wav");
close = loadSound("close.wav");
cashV = loadSound("cash.wav");
}
function setup()
{
createCanvas(600, 600);
for(i=0;i<=20;i++)
{
coinArr[i]=random[coinArrCh];
}
}
function draw()
{
background(220);
// print("this is x:"+mouseX)
// print("this is y:"+mouseY)
//Define color
let leather = color(139,69,19); //Main color
let lLeather = color(160,82,45); // Minor color
let metal = color(169,169,169); // Metal 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(width / 2 +2.5,height / 2 - h / 2 + 55);
}
else if(aTime <= stopT && cardA == true)
{
aTime++;
push();
translate(0,-aTime);
card(width / 2 +2.5,height / 2 - h / 2 + 55);
pop();
// console.log(aTime);
}
else
{
push();
translate(0,-stopT);
card(width / 2 +2.5,height / 2 - h / 2 + 55);
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 flip to the back", 10,40);
}
else if (phase === 2) //back of wallet
{
let zipper = 8;
fill (leather);
noStroke();
rectMode(CENTER);
rect(width / 2,height / 2,w,h);
textSize(15);
fill(255,0,0)
text("Press spacebar again to reset", 10,20);
fill (leather);
noStroke();
rectMode(CORNER);
rect(width / 2 - w/2,height / 2 - h/2,350 - zipper / 2 - (width / 2 - w/2), h);
if(zipDrag == false)
{
strokeWeight(zipper);
stroke(metal);
line(350,190,350,410)
imageMode(CENTER)
image(zip,350,215,zip.width / 10,zip.height / 10);
imageMode(CORNER)
}
// console.log(width - w/2)
// console.log(height - h/2)
// noFill();
// stroke(lLeather,200);
// ellipse(245,215,50)
}
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;
}
else if(phase === 2 && mouseX >= 340 / 20 && mouseX <= 360 && mouseY >= 215 - zip.height / 20 && mouseY <= 215 + zip.height / 20)
{
zipDrag = true;
// print("yeah")
}
}
function keyPressed()
{
if (keyCode == 32 && phase == 2)
{
back2Ori();
close.play();
}
else if (keyCode == 32 && phase == 1)
{
close.play();
phase++;
}
}
function mouseDragged()
{
if(phase == 2 && zipDrag == true && zipBottom == false)
{
if(mouseX >= )
}
}
function card(x,y)
{
imageMode(CORNER);
let golden = color(212,175,55); //Chip on card
let cardLogo = color(255,165,0); //Logo on credit card
let cardPro = 54 / 85.5;
rect(x,y,w - 5,(w-2.5) / 85.5 * 54,5);
fill(0);
textSize(12);
text("5432 9876 1908 0838", x + 10, y + (w-2.5) * cardPro - 30);
text("PETER LEE 08/32",x + 10, y + (w-2.5) * cardPro - 15);
image(chip,x + 10, y - 75 + (w-2.5) * cardPro,40,40/chip.width * chip.height);
image(logo,x + 133, y - 40 + (w-2.5) * cardPro,40,40/logo.width * logo.height);
}
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)
}