Category: Project-06-Abstract-Clock

Mari Kubota- Project- 06- Abstract Clock

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 6
*/


function setup(){
    createCanvas(400,400);
}

function draw(){
    background(178,208,166);
    noStroke();
    //creates vars to call on time
    var sec= second();
    var min= minute();
    var hr= hour();
    var size= 200;

    //Mapping time to shape components
    var mappedSec = map(sec, 0,59, width/2-size,width/2+size);
    var mappedMin = map(min,0, 59, 0, size);
    var mappedHr = map(hr, 0, 23, 270, 630);

    //blue circle
    fill(178,208,220);
    ellipse(width/2, height/2, size, size);

    //Background color circle ellipsing blue circle (seconds)
    fill(178,208,166);
    ellipse(mappedSec, height/2, size, size);

    //white circle (minutes)
    fill(225);
    ellipse(width/2, height/2, mappedMin, mappedMin);

    //yellow arc (hours)
    angleMode(DEGREES);
    stroke(255,248,175);
    noFill();
    strokeWeight(10);
    arc(width/2, height/2, size+50, size+50, 270, mappedHr);



    }

sketch of abstract clock

In this project I was inspired by the waxing and waning of the moon. Every second shifted a background colored circle over the blue circle to give an illusion of an eclipse. The center white circle grows bigger every minute. And the yellow arc on the outside grows longer every hour in a 24 hour period. The most challenging part of this assignment was adjusting the time variables to the right numbers and components.

Joanne Chui – Abstract Clock – 06

sketch

/*
Joanne Chui
Section C 
Project 6
*/

function setup(){
    createCanvas(400,400);
}


function draw(){ 
    var s = second();
    var m = minute();
    var h = hour() % 12;

    background(255, 194, 38);

    stroke(150, 50, 40);
    fill(255, 212, 105);

    //second
    strokeWeight(15);
    noFill();
    stroke(255, 212, 105);
    arc(200, 200, 300, 300, -HALF_PI, TWO_PI * (s/60)-HALF_PI)
  		
  	//minute
  	for(i = 0; i < m; i++){
  		strokeWeight(1);
  		ellipse(200, 200, 300 - (i*5), 300 - (i*5));
  	}

  	//hour
  	strokeWeight(30);
    noFill();
    stroke(255, 225, 150);
    arc(200, 200, 350, 350, -HALF_PI, TWO_PI * (h/12)-HALF_PI)

}

I was interested in visually embedding the amount of time that had passed into the image so that the time was still readable. I was inspired by the various simplistic apple watch faces.

Ammar Hassonjee – Project 06 – Abstract Clock

sketch

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 06 - Abstract Clock
   */

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

function draw() {
    background(0, 0, 30);
    // Time generation
    var h = hour();
    var m = minute();
    var s = second();
    var mappeds = map(s, 0, 59, 33, width - 33);
    var angle = 0;

    //Drawing the hour mountain that grows taller to represent the hour from 1 to 24
    stroke(0, 0, 60);
    strokeWeight(2);
    for (i = 1; i < 25; i++) {
        line(0, height - 15 * i, 480, height - 15 * i);
    }
    noStroke();
    fill(120);
    triangle(0, height, width / 4, (height - 15) - 15 * h, width / 2, height);

    // Drawing the minute stars
    var starx = 0;
    var stary = 0;
    var count = [];
    var arrayCount = 0;
    for (var i = 0; i < 60; i++) {
        count.push(i);
    }

    // For loop that generates 60 stars with minute star being highlighted
    for (let a = 0; a < 20; a += 2) {
        for (let i = 1; i < 7; i++) {
            if (arrayCount == m) {
                fill(255);
                ellipse(width / 2.3 + i * 40, a * 20 + 100, 20, 20);
            }
            else {
                fill(230, 233, 178);

            }
            if (i % 2 == 0 & arrayCount !== m) {
                ellipse(width / 2.3 + i * 40, a * 20 + 105, 10, 10);

              }
            else if (arrayCount !== m){
                ellipse(width / 2.3 + i * 40, a * 20 + 95, 10, 10);

              }
              arrayCount += 1;
                }
            }


    // Drawing the second shooting star at the top
    fill(240, 235, 190);
    var x = [mappeds, mappeds + 11, mappeds + 33, mappeds + 19, mappeds + 21, mappeds, mappeds - 21, mappeds - 19, mappeds - 33, mappeds - 11];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    beginShape();
    for (var i = 0; i < x.length; i++) {
        vertex(x[i], y[i]);
    }
    endShape();
    fill(190);
    // Drawing streaks that follow the star
    triangle(mappeds - 35, 45, mappeds - 30, 50, mappeds - 180, 53);
    triangle(mappeds - 35, 60, mappeds - 30, 65, mappeds - 180, 57);
}

My inspiration for this project came from my fondness for the stars and astronomy. I sought to represent my clock using elements of nature and the sky by using the mountain as an indicator for the hour. Then I used a series of small stars to indicate the minutes due to their repetitive nature, and then finally a shooting star to indicate seconds since its movement corresponds with time passing by.

Sewon Park PO-06

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-06

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {
background(220);

var H = hour();
var M = minute();
var S = second();

fill(255,255,100);
ellipse(320,320,120,120); //Reference circle around second circle
fill(S*(4.25),S*(4.25),S*1.7); //Second circle changes color to match the reference Circle
ellipse(320,320,S*2,S*2); //Second circle grows to match the reference circle

fill(0,0,255);
ellipse(200,200,120,120); //Reference circle around minute cricle
fill(0,0,M*(4.25)); //Minute circle changes color to match the reference circle
ellipse(200,200,M*2,M*2); //Minute circle grows to match the reference circle

fill(255,0,0);
ellipse(80,80,120,120); //Reference circle around hour circle
fill(H*(4.25),0,0); //Hour circle changes color to match the reference circle on a 24 hour scale
ellipse(80,80,H*5,H*5); //Hour circle grows to match the reference circle on a 24 hour scale

push();
noStroke();
fill(255,255,0);
translate(width/2,height/2);
rotate(S*(6));
rotate(-90);
ellipse(85, 0, 50, 50);
pop(); //Yellow circle rotating to match second
    
push();
noStroke();
fill(0, 0, 255)
translate(width/2,height/2);
rotate(M*(6));
rotate(-90);
ellipse(80, 0, 40, 40);
pop(); //Blue Circle rotating to match minute
    
push();
noStroke();
fill(255, 0, 0);
translate(width/2,height/2);
rotate(H*(15)); //on a 24 hour scale
rotate(-90);
ellipse(75, 0, 30, 30);
pop(); //red circle rotating to match hour
   

}

For the abstract clock assignment, I wanted to show how as time passes, your day becomes “full”. As such I put base ellipses that represent the entirety of time (by seconds, minutes, and hours). As such, I used 24 hours as increments as 24 hours represents the entire day. Then, I put ellipses that grow and changes color as time passes to eventually become the base circles. I also created ellipses that spun just as the clock would.

Ankitha Vasudev – Project 06 – Abstract Clock

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 06

//global variables 
var r = 148; // color of background
var g = 222;
var b = 255;
var r1 = 255; // color of starfish
var g1 = 130;
var b1 = 180;
var r2 = 120; // color of seaweed
var g2 = 200;
var b2 = 100;
var fishy = 200; //y position of fish 

var x = [50, 65, 70, 62, 65, 50, 35, 39, 30, 45];
var y = [365, 372, 375, 380, 395, 385, 395, 380, 375, 370];

function setup() {
    createCanvas(400, 400); 
}

function draw() { 

    // Current Time
    var H = hour();
    var M = minute();
    var S = second();

    // Changes background color based on 8-hour periods 
     if (H >= 0 & H <= 8) {
        background(r, g, b);
    } else if (H > 8 & H < 16) {
        background(r-50, g-50, b-20);
    } else if (H >= 16 & H <= 24) {
        background(r-150, g-150, b-50);
    }

    //position of fish according to seconds
    fishx1 = map(S, 0, 59, 0, width+110);
    fishx2 = map(M, 0, 59, width-20, -40);
    fishx3 = map(H, 0, 23, width-20, -30);

    //star color changes every second 
    //becomes lightest at the end of each minute
    r1 = map(S, 0, 59, 200, 255);
    g1 = map(S, 0, 59, 50, 200);
    b1 = map(S, 0, 59, 50, 200);
    
    //changes seaweed color every minute 
    r2 = map(M, 0, 59, 150, 0);
    b2 = map(M, 0, 59, 120, 0);

    //fish moving every second
    noStroke();
    fill(236, 185, 0);
    ellipse(fishx1-55, fishy, 90, 30);
    triangle(fishx1-95, fishy, fishx1-110, fishy-20, fishx1-110, fishy+20);

    //fish moving every minute
    fill(217, 180, 123);
    ellipse(fishx2+20, fishy-100, 40, 15);
    triangle(fishx2+30, fishy-100, fishx2+40, fishy-90, fishx2+40, fishy-110);

    //fish moving every hour
    fill(111, 72, 2);
    ellipse(fishx3, fishy+100, 50, 15);
    triangle(fishx3+20, fishy+100, fishx3+30, fishy+95, fishx3+30, fishy+105);

    //seaweed
    for (i = 0; i < width+5; i += 5) {
        fill(r2, g2, b2);
        triangle(i-5, height-30, i, height-60, i+15, height-30);
    }

   //sand 
    fill(240, 210, 142);
    rect(0, height-40, width, 50);

    //starfish
    fill(r1, g1, b1);
    beginShape();
    for (var i = 0; i < 10; i++) {
        vertex(x[i], y[i]);
    endShape();
}
    //text displaying time as reference 
    fill(100);
    text("Hour: " + H, 10, 20);
    text("Minute: " + M, 10, 35);
    text("Second: " + S, 10, 50);
}

For this project I wanted to create an animation that included changing positions and colors according to the time. Each fish moves at a different pace – one every second, one every minute and one every hour. The starfish changes color every second and camouflages with the sand by the of every minute. The seaweed changes color every minute and is the greenest at the end of every hour. The color of the sea varies at 8-hour intervals to show the time of the day(morning, afternoon or evening). 

Sean Meng-Project 06-Abstract Clock

hmeng-project 06

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-06-Abstract Clock

function setup() {
    createCanvas(500, 500);   
}

function draw() {
    background(214, 200, 224);
//define current time   
    var S = second();
    var M = minute();
    var H = hour();
    var round = 2 * PI;
    var angle = 0;
//convert time value to radian angles
    var ratioS = S / 60;
    var ratioM = M / 60;
    var start0 = 0;
    var start = PI + HALF_PI;
    var size1 = 200;
//diameters of the arc
    var D1 = 200;
    var D2 = 220;
    var D3 = 170;
    var D4 = 120;
    var D5 = 80;
    
    noStroke();
//Second plate graphics
    fill(255, 216, 224);  //Light pink
    ellipse(180, 180, size1 * ratioS, size1 * ratioS);
    fill(255, 186, 224);  //Pink
    ellipse(210, 150, 100 * ratioS, 100 * ratioS);
    fill(255, 136, 204);  //Dark pink
    ellipse(150, 220, 55 * ratioS, 55 * ratioS);
//Second inner ring
    stroke(200, 64, 150);  //Magenta
    strokeWeight(15 * ratioS);
    noFill();
    arc(180, 180, D1, D1, start, start + round * ratioS);
//Second outter ring
    stroke(255);
    strokeWeight(4 / 60 * S);
    arc(180, 180, D2, D2, start, start + round  * ratioS);
//Second starting line
    fill(255);
    rect(175, 0, 5, 90);

//Minute plate
    stroke(255, 242, 255);  //Light purple
    strokeWeight(5);
    noFill();    
//Minute ring1
    arc(350, 310, D3, D3, start0, round);
    stroke(255, 215, 85);  //Yellow
    strokeWeight(30 * ratioM);
    arc(350, 310, D4, D4, start0, round * ratioM);
//Minute ring2    
    stroke(255, 235, 135);  //Light yellow
    strokeWeight(10 * ratioM);
    arc(350, 310, D4, D4, start0, round * ratioM); 
//Minute starting line
    noStroke();
    fill(255, 242, 255);
    rect(425, 305, 100, 10);

//Hour plate
    fill(255);
    ellipse(200, 390, D5, D5);

//12 Hour operator
    if(H > 12) {
        for(var i = 0; i < H - 12; i += 1){
            fill(151, 59, 227);
            ellipse(200, 320 + i * 15, 10, 10);
        }
    } else {
        for(var i = 0; i < H; i += 1){
            fill(151, 59, 227);
            ellipse(200, 320 + i * 15, 10, 10);
        }
    }

}

In this project, I explores the representation and abstraction of the clock by engaging geometries and colors. And visualizing the variation of time in a more creative way.

Joseph Zhang – Project 06 – Abstract Clock

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmu.edu
// Assignment-06C: Simple Clock

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



//translates everything
function draw() {
    // to make sure hour() never goes past 13
    var hr = hour();
    if(hour() > 12) {
        hr = hour() - 12;
    }

    // push and eventual pop so that I can position the clock
    push();
    translate(228 + mouseX / 20, 228 + mouseY / 20);
    drawClock();     
    pop();

    // shows the time
    noStroke();
    fill(map(mouseX, 0, width, 150, 255)); 
    
    text(nf(hr, 2, 0) + ":" + nf(minute(), 2, 0) + ":" + nf(second(), 2, 0), width - 70, height - 30, 100, 30);
}

//draws everything 
function drawClock(){
    threeSixty = 2 * PI;    
    background(30);
    strokeWeight(0);
    
    // radial grid
    for ( i = 1; i < 13; i++) {
        stroke(68);
        strokeWeight(1);
        line(0, 0, 600 * cos(threeSixty * i / 12), 600 * sin(threeSixty * i / 12));
        stroke(0);
    }

    //background circles
    stroke(0);
    fill(0, 0, 0, 80);
    ellipse(0, 0, 300, 300);
    ellipse(0, 0, 140, 140);



    //displays millisecond (smaller circle)
    // stroke(255,255,255, 50);
    strokeWeight(2);
    ellipse(200 * cos(threeSixty * millis() / 60000 - (PI / 2)), 200 * sin(threeSixty * millis() / 60000 - (PI / 2)), 30, 30);
    ellipse(-200 * cos(threeSixty * millis() / 60000 - (PI / 2)), -200 * sin(threeSixty * millis() / 60000 - (PI / 2)), 30, 30);

    // displays minutes (bigger circle)
    strokeWeight(2);
    stroke(255,255,255, 190);
    line(70 * cos(threeSixty * minute() / 60 - (PI / 2)), 
        70 * sin(threeSixty * minute() / 60 - (PI / 2)),
        700 * cos(threeSixty * minute() / 60 - (PI / 2)),
        700 * sin(threeSixty * minute() / 60 - (PI / 2)));
    line(-70 * cos(threeSixty * minute() / 60 - (PI / 2)), 
        -70 * sin(threeSixty * minute() / 60 - (PI / 2)),
        -700 * cos(threeSixty * minute() / 60 - (PI / 2)),
        -700 * sin(threeSixty * minute() / 60 - (PI / 2)));
    fill(0,0,0,255);
    ellipse(70 * cos(threeSixty * minute() / 60 - (PI / 2)), 70 * sin(threeSixty * minute() / 60 - (PI / 2)), 50, 50);
    ellipse(-70 * cos(threeSixty * minute() / 60 - (PI / 2)), -70 * sin(threeSixty * minute() / 60 - (PI / 2)), 50 , 50);
    strokeWeight(1);

    //displays seconds (smaller circle)
    stroke(255, 255, 255, 100);
    strokeWeight(2);
    line(150 * cos(threeSixty * second() / 60 - (PI / 2)),
        150 * sin(threeSixty * second() / 60 - (PI / 2)),
        500 * cos(threeSixty * second() / 60 - (PI / 2)),
        500 * sin(threeSixty * second() / 60 - (PI / 2)));
    line(-150 * cos(threeSixty * second() / 60 - (PI / 2)),
        -150 * sin(threeSixty * second() / 60 - (PI / 2)),
        -500 * cos(threeSixty * second() / 60 - (PI / 2)),
        -500 * sin(threeSixty * second() / 60 - (PI / 2)));
    ellipse(150 * cos(threeSixty * second() / 60 - (PI / 2)), 150 * sin(threeSixty * second() / 60 - (PI / 2)), 30, 30);
    ellipse(-150 * cos(threeSixty * second() / 60 - (PI / 2)), -150 * sin(threeSixty * second() / 60 - (PI / 2)), 30, 30);

    //displays hour
    strokeWeight(2);
    stroke(255, 255, 255, 230);
    line(0, 0, 
    30 * cos(threeSixty * (hour() / 12 + minute() / 720) - (PI / 2)),
    30 * sin(threeSixty * (hour() / 12 + minute() / 720)  - (PI / 2)));
    ellipse(0,0,10,10);
}

For this abstract clock, I really wanted to do something that grow out radially and moves in proportion to its time sequencing. I wanted to build something that gives the resemblance of a clock but doesn’t necessarily function entirely as one. This prompted me to utilize ellipses and to move them around the screen depending on their associated time measurement.

The wider you move out the ring, the more micro the time gets. The innermost ring represents hour while the black circle on the outside represents milliseconds. As you move from innermost ring to outermost ring, the opacity getter lighter and lighter until it becomes black (millisecond).

Mihika Bansal – Project 06 – Abstract Clock

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5


function setup() {
    createCanvas(500, 500);
}
   
  
function draw() {
    
    push(); 
    background(250, 141, 98); // making my background canvas
    translate(width / 2, height / 2); 
    pop(); 

    var s = second(); 
    var m = minute(); 
    var h = hour();

    let sAngle = map(s, 0, 60, 0, 360); 
    let mAngle = map(m, 0, 60, 0, 360);
    let hAngle = map(h, 0, 24, 0, 360); 

    translate(width / 2, height / 2); 
    
    //drawing the second hand circle 
    fill(255);
    noStroke(); 
    push(); 
    for (var i = 0; i < s; i ++){
        rotate(radians(sAngle)); //creates a pattern based on the second that it is currently 
        ellipse(0, -210, 10, 10); 
    }
    pop(); 

    //drawing the minute hand circle 
    push();
    fill(178, 219, 213);
    for (var j = 0; j < m; j ++){
        rotate(radians(mAngle)); // creates a pattern based on what minute it is 
        ellipse(0, -135, 18, 18); 
    }
    pop(); 

    //the hour hand 
    push();
    fill(43, 97, 109);
    for (var k = 0; k < h; k ++){ 
        rotate(radians(hAngle)); //creates a pattern based on what hour it currently is, displays that number
        ellipse(0, -50, 25, 25); 
    }
    pop();
     
}

This project was very fun to create. Playing with animations based on time was very interesting. The patterns that formed through the integration of for loops and based on the number for minutes and seconds was very pleasing.

My sketch for the concept of the clock

Steven Fei-06-Abstract Clock


sketch

Initial idea

For this project, I tried to create an interstellar-style clock with arcs and circles cycle in different rates. The bluish ink-like path represents the current pace of the second. The two horizontal bars represent the current minute and the amount and length of diagonal bars represent the current hour. As I gained the inspiration from an hourglass, I realized that the cycle period didn’t have to be exactly a minute, or an hour. Then I created a web-like form in the center that revolves with a period of 20 seconds and the red arc with a period of 5 minutes.


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

var xarray =[]; // array for ink graphics according to seconds
var x1; //variables for central web form
var stepX1 = 10;// steps of the spacing of the central web form
var circleMove = 0;//blue circles movement

function draw() {
    background("black");
    
    //diagonal bars to represent the growth of every hour and the exact hour of the current time(only look at one side)
    var h = hour();
    var hLength = map(h,0,24,50,440);
    var hColor = map(h,0,24,40,160);
    
    circleMove +=1;
    for (var hz = 0; hz<h; hz++){
        stroke(133,62,hColor);//changing color of the bar
        strokeWeight(8);
        line(0+15*hz,480,0.5*hLength+15*hz-20,480-0.7*hLength+5*hz);//amount of the purple bar to represent time
        stroke(133,62,hColor);//changing color of the bar
        strokeWeight(8);
        line(480-15*hz,0,480-0.5*hLength-15*hz+20,0.7*hLength-5*hz);//amount of the purple bar to represent time
        noStroke();
        fill("blue");//moving blue circles as fun animation
        circle(0.5*hLength+15*hz+circleMove-20,480-0.7*hLength+5*hz-circleMove,5);
        if (circleMove>50){
            circleMove = 0;
        }
    }

    
    //two horizontal bars to represent the grouth of minute overtime
    var m = minute();
    var mAdjusted = map(m,0,60,30,480); //fullfill a full length when one hour passed
    var mColor = map(m,0,60,26,150);
    noStroke();
    fill(180,58,mColor);
    rect(0,50,mAdjusted,8);
    noStroke();
    fill(180,mColor,40);
    rect(480,480-8-50,-mAdjusted,8);
    //second
    if (xarray.length>=6){
        xarray.shift();
    }
    var s = second();
    //create ink-like path to represent the path of seconds
    for (var i = s-8; i<=s; i++){
        xarray.push(i);
        var colorOfCircle = map(i,s-8,s,90,255);
        var sizeOfCircle = map(i,s-8,s,5,30);//define the size of the circle
        push();
        translate(240,240);
        rotate(-PI/2);
        stroke(0);
        fill(colorOfCircle, colorOfCircle, 255);
        noStroke();
        strokeWeight(1);
        rotate(radians(6*i));//the ink like traces will move every second and fullfill a full cycle after 60s
        var px = 180 + random(-5,5);
        var py = 0 + random(-3,3);
        frameRate(9);
        circle(px,py,sizeOfCircle);
        pop();   
    }
    //changing color of the purple circle to represent the growth of a minute
    var colorOfRing0 = map(s,0,60,145,200);
    var colorOfRing1 = map(s,0,60,0,122);
    var colorOfRing2 = map(s,0,60,90,150);
    noFill();
    strokeWeight(20);
    stroke(colorOfRing0, colorOfRing1,colorOfRing2);
    circle(240,240,230);
    //slowly growing red circle
    var mil = millis();
    push();
    translate(240,240);
    frameRate(30);
    noFill();
    stroke("red");
    strokeWeight(15);
    rotate(-PI/2);
    arc(0,0,100,100,0,mil*PI/150000,OPEN); //revolving a circle every 5 min
    pop();
    
    // central rotating web-form
    //    Central White Lines
    push();
    translate(240,240);
    rotate(radians(mil*18/1000));//the web form fulfills a cycle every 20 seconds
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke("white");
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    //     Central blue lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke(109,129,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
//    central light purple lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke(152,109,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    pop();
    
    
}

Paul Greenway – 06 – Abstract Clock

pgreenwa_06

/*Paul Greenway
Section 1A
pgreenwa@andrew.cmu.edu
Project-06-Abstract Clock
*/


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

function draw() {
  
  background(255,90,90);
  
  var S = second();
  var M = minute();
  var H = hour();
  var a = (0,0);
  var b = (480,480);
  
  var colorS = map(S,0,60,0,255);
  
  stroke(255);
  strokeWeight(0.3);
  line(0,0,480,480);
  strokeWeight(2);
  circle(234,234,10,10);
  circle(70,70,10,10);
  circle(480,480,10,10);
  
  stroke(255);
  strokeWeight(0.5);
  noFill();
   
  //hour rings
  for (i = 0; i < 25; i++) {
    
    circle(480, 480, i*24, i*24);
  }
  
  //minute rings
  for (i = 0; i < 13; i++) {
    
    circle(234, 234, i*24, i*24);
  }
      
  //second rings
  circle(70, 70, 200, 200);
  
  
  //fill circles color style
  noStroke();
  fill(0,colorS,90,90);
  
  //hour circle
  circle(480, 480, H*24, H*24);
  
  //second circle
  circle(70, 70, S*3.33, S*3.33);
  
  //minute circle
  circle(234, 234, M*4.8, M*4.8);
  
  
}

For this project, I wanted to create a clock that used various rings to indicate the time. As time passes, the inner circles begin to fill the 3 different sets of outer rings each representing a different measurement of time. I arranged the sets in a diagonal line so that the viewer is able to see each unit of contribute to the next.