Jihee Kim_SectionD_Project-06-Abstract-Clock

jiheek1_project6

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project6 Abstract Clock
//section D

function setup() {
    createCanvas(480, 480);
    noStroke();
}

function draw() {
    background(127, 87, 75);
    drawGrid(); // draw a picnic table pattern in the background with grid
    var H = hour()%12; //the hour restarts on a 12-hour basis
    var M = minute();
    var S = second();

    //SECONDS
    //for every second, a salt particle comes out of the shaker
    //draw the salt shaker
    stroke(180);
    strokeWeight(2);
    fill(220);
    ellipse(77.5, 120, 55, 55); // head of the shaker
    fill(255);
    stroke(180);
    quad(35, 20, 50, 120, 105, 120, 120, 20); // the body of salt shaker
    line(55, 20, 70, 120); // left profile line of shaker
    line(100, 20, 85, 120); // right profile line of shaker
    noStroke();
    fill(180);
    ellipse(73, 138, 5, 5); // hole left
    ellipse(82, 138, 5, 5); // hole right
    ellipse(77.5, 144, 5, 5); // hole middle
    //have the salt particles come out every second
    for (var i = 0; i < S; i ++) {
    fill(255);
    rect(76, 152 + i*5, 2.5, 2.5);
    }

    // MINUTES
    // a ring forms on the plate of eggs every minute
    //draw the plate of eggs
    fill(230);
    noStroke();
    ellipse(width*3/4-1, height/4+3, 403, 403); // plate shadow for volume
    fill(255);
    ellipse(width*3/4, height/4, 400, 400); // plate
    //draw navy blue patterns on the plate
    noFill();
    stroke(155, 187, 234);
    strokeWeight(1);
    //have ring draw every minute
    for (var i = 0; i < M; i++) {
    ellipse(width*3/4, height/4, 390-i*6.5, 390-i*6.5);
    }

    //draw the eggs
    noStroke();
    //Egg1
    fill(239, 228, 202); //428
    ellipse(270, height/2-96, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(270, height/2-100, 150, 130); //egg white
    fill(237, 130, 37);
    ellipse(width-230, height/2-85, 53, 53); //egg yolk shadow for volume
    fill(242, 139, 40);
    ellipse(width-232, height/2-86, 50, 50); //egg yolk
    //Egg2
    fill(239, 228, 202); //362
    ellipse(width*3/4+2, height/2-5, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(width*3/4, height/2-9, 150, 130); //egg white
    fill(237, 143, 50);
    ellipse(width-133, height/2-13, 53, 53); //egg yolk shadow for volume
    fill(242, 152, 54);
    ellipse(width-135, height/2-14, 50, 50); //egg yolk


    //HOURS
    //a sausage will appear every hour
    //the tray of sausages will clear every 12 hours
    //draw a tray for sausage
    fill(255);
    rect(width/3-45, height-100, width*2/3+45, 100);
    rect(width/3-30, height-115, width*2/3+30, 15);
    ellipse(width/3-30, height-100, 30, 30); //round the corner of the tray
    //draw patterns on the tray
    noFill();
    stroke(160, 157, 78);
    strokeWeight(1);
    line(width/3-42, height-100, width/3-42, height);
    line(width/3-27, height-112, width, height-112);
    arc(width/3-27, height-97, 30, 30, PI, 3*PI/2);
    //draw sausage (a sausage appears every hour)
    var X = [130, 160, 190, 220, 250, 280, 310, 340, 370, 400, 430, 460];
    var Y = 410;
    for (var i = 0; i < H; i++) {
        stroke(147, 49, 28);
        strokeWeight(15); //thickness of the sausage
        line(X[i], Y, X[i] + 15, Y + 40);
    }
}

function drawGrid() {
    // cover canvas with vertical lines to depict a wood table
    for (var y = 0; y < height; y ++) {
        for (var x = 50; x < width; x += 50) {
            stroke(102, 69, 56);
            strokeWeight(3);
            line(x, y, x, height);
        }
    }
}

For this project, I created an abstract clock in a picnic setting. I used a hierarchy in size to depict the seconds, minutes and hours. The smallest element, which is the salt particles, represent the seconds. The second in size, which is the blue rings/pattern that form on the plate, depict the minutes. Lastly, the biggest element, the sausages represent the hours. The tray of sausages clears every 12 hours, making this clock based on a 12hr system.