mjeong1-06-Abstract-Clock-SectionA

sketch

//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);
    quad(20,330,480,330,460,490,40,490);
    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);
    quad(10,10,490,10,470,30,30,30);
    fill(102,102,102);
    quad(10,10,30,30,30,320,10,340);
    fill(221,221,221);
    quad(10,340,30,320,470,320,490,340);
    fill(124,122,116);
    quad(490,340,470,320,470,30,490,10);
    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”