# mjeong1-06-Abstract-Clock-SectionA

``````//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Project-06
//section A

function setup() {
createCanvas(500,500);//create canvas 500X500
}

function draw() {
background(51,51,51);

var h = hour();
var m = minute();
var s = second();
//setting up variables for the time
var mappedh= map(h,0,24,0,4);
//divide 24 hours into 4 so that later I can create 4 rectangles that represents hours
//each rectangle will represent 6 hours

stroke(203,203,203);
strokeWeight(5);
fill(33,33,33);
stroke(0);
//initial back ground which is the machine

for(var i = 0; i<mappedh; i++){
fill(255,100,100);
noStroke();
rect(i*70+35,370,60,60,20);
fill(0);
noStroke();
textSize(20);
text("25%",i * 70+45,405);
}
//hour each pink rectancle represents 6 hours so that 4 rectangles as totall will have 100% which is 24 hours

if(m%2 ==0){
fill(255,50,50);
rect(350,370,80,80,15);
}
else{
fill(7,196,7);
rect(350,370,80,80,15);
}
//min
//spin button will change the color, green to red, red to green.
//color change happens every minute
fill(0);
strokeWeight(2);
textSize(25);
text("SPIN",360,415);
noStroke();
fill(162,162,162);
rect(0,0,500,350);
fill(68,62,64);
fill(102,102,102);
fill(221,221,221);
fill(124,122,116);
fill(0);
rect(30,30,440,290);
//background of slot machine
//grey picture frame

for(var i = 0; i<3; i++){
fill(255);
stroke(180);
strokeWeight(3);
rect(i*150+35,50,130,200);
//three white background for three screens
//use for loop create three rectangles using on rect command
if(m<20){
fill(255,50,50);
stroke(0);
textSize(180);
text("7",150*(i-2)+50,210);
fill(200);
rect(350,100,100,100);
rect(200,100,100,100);
}
//if we have min 0 to 19(for example 06:15am or pm), then we have one 7 and two rectangles
//on the screen
if (m>=20 & m<40){
fill(255,50,50);
stroke(0);
textSize(180);
text("7",150*(i-1)+50,210);
fill(200);
rect(350,100,100,100);
//if the minute is 20 to 39, then it has two 7s and one rectangle

}
if (m>=40 & m<60){
fill(255,50,50);
stroke(0);
textSize(180);
text("7",150*i+50,210);
}
//if the minute is 40 to 59, then we have three 7s

if (m<60 & m>50){
fill(255,50,50);
stroke(0);
textSize(180);
text("7",150*i+50+random(1,5),210);
}
//from 50 min to 60 min, 7s are shaking
}

for(var i = 0; i<s; i++){
fill(255,50,50);
stroke(255);
strokeWeight(2);
rect(i*7+35,290,7,20);
}
//number of red rectanlges that represent the secs

if(m==0){
textSize(50);
text("JACKPOT",50,480);
}
//each o'clock will have jackpot, ex)3 o'clock, 4 o'clock

}

``````

For this assignment I created slot machine that represents abstract clock. Every second, the number of red rectangles under the slot machine screes will increase. Every other minute, the color of button will change its color. And every 20 min you get “7” on your screen which increases its number at 20 min, 40min, and 60min. As the number of the “7” will increase and when it reaches three “7”s, then you will get “jackpot” 