xxxxxxxxxx
288
var phase = 0;
var h = 240;
var w = 180;
var showUIW = false;
var saveMX;
var saveMY;
var card1 = false;
var cardA = false;
var aTime = 0;
var aTimeC = 0;
var aTimeP = 0;
var cashA = false;
var picA = false;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(220);
let leather = color(139,69,19);
let lLeather = color(160,82,45);
let golden = color(212,175,55);
let cardLogo = color(255,165,0);
let cash = color(0,128,0);
let cashD = color(0,100,0);
if (phase === 0) //wallet is 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)
//draw wallet
}
else if (phase === 1) //wallet is open
{
fill (leather);
noStroke();
rectMode(CENTER);
rect(width / 2 + w / 2,height / 2,w,h);
rect(width / 2 - w / 2,height / 2,w,h);
//cash
let stopTC = 70;
let cashSpeed = 1.7
if(aTimeC <= stopTC && cashA == true)
{
aTimeC++;
let cashC = cashSpeed * aTimeC;
fill(cashD);
rect(width / 2, height / 2 - cashC,330, 330 / 6.14 * 2.61)
fill(cash);
rect(width / 2, height / 2 + 15 - cashC,330, 330 / 6.14 * 2.61)
fill(cashD)
textSize(60);
textAlign(CENTER,CENTER);
text("$",width / 2, height / 2 + 15 - cashC);
}
else if (cashA == true && aTimeC > stopTC)
{
let cashF = cashSpeed * stopTC;
fill(cashD);
rect(width / 2, height / 2 - cashF,330, 330 / 6.14 * 2.61)
fill(cash);
rect(width / 2, height / 2 + 15 - cashF,330, 330 / 6.14 * 2.61)
fill(cashD)
textSize(60);
textAlign(CENTER,CENTER);
text("$",width / 2, height / 2 + 15 - cashF);
}
textAlign(LEFT,CENTER);
//cash holder
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
//card 1
noStroke();
fill(200);
let stopT = 90;
if (card1== false)
{
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);
fill(golden);
rect(width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20,40,30,5)
fill(cardLogo);
ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25,20);
}
else if(aTime <= stopT && cardA == true)
{
aTime++;
fill(200);
rect(width / 2 +2.5,height / 2 - h / 2 + 55 - aTime,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 - aTime);
text("PETER LEE 08/32",(width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 20 - aTime);
fill(golden);
rect(width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20 - aTime,40,30,5)
fill(cardLogo);
ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25 - aTime,20);
// console.log(aTime);
}
else
{
fill(200);
rect(width / 2 +2.5,height / 2 - h / 2 + 55 - stopT,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 - stopT);
text("PETER LEE 08/32",(width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 20 - stopT);
fill(golden);
rect(width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20 - stopT,40,30,5)
fill(cardLogo);
ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25 - stopT,20);
}
// 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)
{
fill(135,206,235);
noStroke();
rect(width / 2 - w + 25, height / 2, 130, 95)
fill(0,191,255);
rect(width / 2 - w + 25, height / 2 + 45, 130, 50)
fill(244,164,96);
rect(width / 2 - w + 25, height / 2 + 65, 130, 30)
fill(0);
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)
}
else if (picA == true && aTimeP <= stopTP)
{
aTimeP++;
fill(135,206,235);
noStroke();
rect(width / 2 - w + 25, height / 2 - aTimeP, 130, 95)
fill(0,191,255);
rect(width / 2 - w + 25, height / 2 + 45 - aTimeP, 130, 50)
fill(244,164,96);
rect(width / 2 - w + 25, height / 2 + 65 -aTimeP, 130, 30)
fill(0);
rect(width / 2 - w + 70, height / 2 + 35 -aTimeP, 30, 60)
fill(255,239,213)
rect(width / 2 - w + 80, height / 2 + 45 -aTimeP, 20, 25)
fill(255,0,0);
rect(width / 2 - w + 80, height / 2 + 70 -aTimeP, 20, 25)
}
else if(picA == true && aTimeP > stopTP)
{
fill(135,206,235);
noStroke();
rect(width / 2 - w + 25, height / 2 - stopTP, 130, 95)
fill(0,191,255);
rect(width / 2 - w + 25, height / 2 + 45 - stopTP, 130, 50)
fill(244,164,96);
rect(width / 2 - w + 25, height / 2 + 65 - stopTP, 130, 30)
fill(0);
rect(width / 2 - w + 70, height / 2 + 35 -stopTP, 30, 60)
fill(255,239,213)
rect(width / 2 - w + 80, height / 2 + 45 -stopTP, 20, 25)
fill(255,0,0);
rect(width / 2 - w + 80, height / 2 + 70 -stopTP, 20, 25)
}
// picture holder
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 ++;
}
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;
}
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)
{
phase = 0;
showUIW = false;
card1 = false;
cardA = false;
aTime = 0;
aTimeC = 0;
aTimeP = 0;
cashA = false;
picA = false;
}
}