Sarah Kang-Project-06-Abstract Clock

clockk

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-06-clock

 function setup() {
   createCanvas(480, 480);
   background(0);
 }

 function draw() {
    //current time
    var S = second();
    var M = minute();
    var H = hour(); 

    //remap
    var RMH = map(H, 0, 23, 0, 360);
    var RMM = map(M, 0, 59, 0, 360);
    var RMS = map(S, 0, 59, 0, 360);
    var sec = S / 60;

    var rad = 100;
    var dim = 80;
    var dim2 = 40;
    var dim3 = 30;
    var x1 = 220;
    var y1 = 160;
    var x2 = 350;
    var y2 = 260;
    var x3 = 200;
    var y3 = 340;
    var x4 = 80;
    var y4 = 390;
    var x5 = 400;
    var y5 = 60;

    angleMode(DEGREES);

    //first bubble
    fill(63, 57, 64);
    noStroke();
    ellipse(220, 160, sec * dim, sec * dim); //center
    //big ring for hours
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x1, y1, rad + 80, rad + 80, 0, RMH);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(4);
    arc(x1, y1, rad + 50, rad + 50, 0, RMM);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(7);
    arc(x1, y1, rad, rad, 0, RMS);


    //second bubble
    fill(94, 86, 93);
    noStroke();
    ellipse(350, 260, sec * dim, sec * dim); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(4);
    arc(x2, y2, rad + 100, rad + 100, 0, RMS);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(8);
    arc(x2, y2, rad + 75, rad + 75, 0, RMM);
    //small ring for hours
    stroke(201, 231, 255);
    strokeWeight(12);
    arc(x2, y2, rad + 20, rad + 20, 0, RMH);

    //third bubble
    fill(99, 101, 115);
    noStroke();
    ellipse(200, 340, sec * dim2, sec * dim2); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x3, y3, rad + 40, rad + 40, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x3, y3, rad + 20, rad + 20, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x3, y3, rad, rad, 0, RMS);

    //4th bubble
    fill(140, 143, 161);
    noStroke();
    ellipse(80, 390, sec * dim2, sec * dim2); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x4, y4, rad, rad, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x4, y4, rad - 10, rad - 10, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x4, y4, rad - 20, rad - 20, 0, RMS);

    //5th bubble
    fill(149, 140, 161);
    noStroke();
    ellipse(400, 60, sec * dim3, sec * dim3); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x5, y5, rad - 20, rad - 20, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x5, y5, rad - 30, rad - 30, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x5, y5, rad - 45, rad - 45, 0, RMS);

}

I wanted to make a bubble clock and vary the hour, minute, and second variables by the layers of the bubbles. To make the frame changes more apparent, I used more seconds variables in the visualization.