Project 06 Abstract Clock

The way time is tracked in this piece of design is by having the little blue fish tracking seconds, the little pink fish tracking minutes, and the rainbow tracking hours. So the blue fish moves right a bit every second and when the minute increases the pink fish moves right. the rainbow goes from red to blue every hour and it restarts from red again when the full rainbow is done.

sketch
//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project 06 Abstract Clock

//set variables
var H;//hour
var M;//min
var S;//sec
var bx;//blue fish x
var px;//piink fish x

function setup() {
    createCanvas(480, 400);
    background(255);

} 

function draw() {
    background(199,137,201);//purple
    
    //current time
    H = hour();
    M = minute();
    S = second();

    //rainbow (hour)
    if(H == 6 || H == 12 || H==18 || H==24){
        noStroke();
        fill(122,153,229);//blue
        ellipse(240,140,560,470)
        fill(131,226,210);//teal
        ellipse(240,140,480,390);
        fill(151,226,134);//green
        ellipse(240,140,400,310);
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }
    else if(H == 5 || H == 11 || H==17 || H==23){
        noStroke();
        fill(131,226,210);//teal
        ellipse(240,140,480,390);
        fill(151,226,134);//green
        ellipse(240,140,400,310);
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }
    else if(H == 4 || H == 10 || H== 16 || H== 22){
        noStroke();
        fill(151,226,134);//green
        ellipse(240,140,400,310);
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    else if(H == 3 || H == 9 || H== 15 || H== 21){
        noStroke();
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    else if(H == 2 || H == 8 || H== 14 || H== 20){
        noStroke();
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    else if(H == 1 || H == 7 || H== 13 || H== 19){
        noStroke();
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    //ocean
    fill(198,230,227);
    rect(0,132,480,351);

    //bluefish(sec)
    bx = width/59;
    bluefish(S*bx,height/2);

    //pink fish(min)
    px = width/59
    pinkfish(M*px,3*height/4);
}
 
function bluefish(x,y){
    //tail
    fill(44,170,213);
    triangle(x-38,y+13,x-38,y-13,x,y);
    //fin on top and bottom
    fill(144,214,235);
    triangle(x+5,y-17,x-10,y-23,x-10,y+10);
    //body
    fill(44,170,213);
    ellipse(x,y,55,34);
    //fin
    fill(144,214,235);
    triangle(x-15,y-6,x-15,y+6,x,y-2);
    //head
    fill(144,214,235);
    ellipse(x+16,y,23,27);
    //eye
    fill(73,64,24);
    ellipse(x+15,y-3,5,5);
    fill("white");
    ellipse(x+14,y-4,2,2);
    //smile
    stroke(73,64,24);
    strokeWeight(1);
    point(x+19,y+6);
    point(x+20,y+6.5);
    point(x+21,y+7);
    point(x+22,y+7.3);
    point(x+23,y+7);
    point(x+24,y+6.5);
}

function pinkfish(x,y){
    //tail
    noStroke();
    fill(193,82,144);//dark pink
    triangle(x-38,y+13,x-38,y-13,x,y);
    //fin on top and bottom
    fill(233,171,205);//light pink
    triangle(x+5,y-17,x-10,y-23,x-10,y+10);
    //body
    fill(193,82,144);
    ellipse(x,y,55,34);
    //fin
    fill(233,171,205);
    triangle(x-15,y-6,x-15,y+6,x,y-2);
    //head
    fill(233,171,205);
    ellipse(x+16,y,23,27);
    //eye
    fill(73,64,24);
    ellipse(x+15,y-3,5,5);
    fill("white");
    ellipse(x+14,y-4,2,2);
    //smile
    stroke(73,64,24);
    strokeWeight(1);
    point(x+19,y+6);
    point(x+20,y+6.5);
    point(x+21,y+7);
    point(x+22,y+7.3);
    point(x+23,y+7);
    point(x+24,y+6.5);
}

Leave a Reply