Project-06-Abstract-Clock – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

KadeStewart-Project-06-AbstractClock

//Kade Stewart
//Section B
//kades
//Project-05


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

    noStroke();
}

var m;
var sec;
var hr;
var min;


function draw() {
    background(255,255,153);
    sec = second();
    min = minute();
    if ((min / 10) < 1) {
    	min = "0" + min;
    }
    hr = hour() % 12;
    if (hr == 0) {
    	hr = 12;
    }


    noStroke();
    fill(30,144,255);
    textSize(45);
    text(min, width/2 - 25, height - 5);
	fill(255,255,153);
	noStroke();
	rect(width/2 - 30, height - 60 - ((height/60)*sec), 60, (hr * 20) + 40);


	//draw the waterlines for each hour
    for (y=0; y < hr; y++) {
    	//this draws the entire length of the window
        for (i=0; i < width; i++) {
            noStroke();
            if (y % 2 == 0) {
            	fill(255); 			//draw in white and blue, alternating every line
            } else {
            	fill(230, 230, 255);
            }
            //the line is composed of circles
            ellipse(i, ((height + (y*20)) - (height/60)*sec) + sin(i/6), 6, 6);	
        }
    }




    
    //draw the lines of the face
    noFill();
    stroke(0);
    strokeWeight(3);
    arc(width/2, height/2 + 60, 30, 20, PI/2, (5/4) * PI);
    arc(width/2, height/2 + 40, 30, 30, (3/4) * PI, PI);
    line(width/2 - 8, height/2 + 52, width/2 + 2, height/2 + 56);
    arc(width/2, height/2 + 64, 16, 16, (3/2) * PI, (7/4) * PI);
    arc(width/2 - 15, height/2 + 25, 30, 30, 0, PI/2);
    arc(width/2, height/2, 50, 50, PI/2, (3/2) * PI);
    arc(width/2, height/2 - 55, 10, 60, (3/2) * PI, PI/2);

    //draw the tear
    push();
    translate(width/2, height/2 - 25);
    
    m = floor(millis()) % 1000;
    m = map(m, 0, 1000, 0, height - (height/2 - 25));


    fill(30,144,255);
    ellipse(0, m, 12, 12 + m * .025);

    pop();

}

I was listening to my sad song playlist, and to me it seemed that tears were pretty rhythmic. I used them to create the second “hand”, while creating the illusion that the tears were filling up the page with the waterlines. Each line (technically a sine wave) represents an hour on the clock. The minutes are simply show, but only when the water rises above the bottom of the page.

Project 6 Liz Maday

final liz maday 6

var r;
var g;
var b;
var array = [];
var array2 = [];
var array3 = [];

function setup() {
	createCanvas(415, 210);
}
 function draw() {
 	background('lightblue');
 	strokeWeight(1.5);
 	var s = second();
 	var m = minute();
 	var h = hour();

    //lines
    for (var i = 0; i < 7; i += 1) {
    	var space = 60;
    	var x = (i * space) + 20;
    	var y = 0;
    	line(x, y + 50, x, (y + 65));
    	array = ['0s', '10s', '20s', '30s', '40s', '50s', '60s'];
    	array2 = ['0m', '10m', '20m', '30m', '40m', '50m', '60m'];
        textSize(15);
        fill('red');
        text(array[i], x - 10, y + 20);
        fill('green');
        text(array2[i], x - 10, y + 40);
    }
    
    //second boxes
    for (var i = 0; i < s; i += 1) {
    	var x = (i * (space/10)) + 15;
    	var y = 80;

    	fill('red');
    	rect(x, y, 5, 5);

    }

    //minute boxes
    for (var i = 0; i < m; i += 1) {
    	var x = (i * (space/10)) + 15;
    	var y = 90;
    	fill('green');
    	rect(x, y, 5, 15);
    }

    //hour boxes
    for (var i = 0; i < h; i += 1) {
    	var x = (i * 10) + 15;
    	var y = 110;
    	fill('yellow');
    	rect(x, y, 10, 25);

    }

    //hour lines
    for (var i = 0; i < 5; i += 1) {
    	var space = 40;
    	var x = (i * space * 1.5) + 20;
    	var y = 150;
    	line(x, y, x, (y + 15));
    	textSize(15);
    	array3 = ['0hrs', '6hrs', '12hrs', '18hrs', '24hrs'];
    	text(array3[i], x - 10, y + 40);
    	
    }    

 }

I liked how this project made me think about how time can be efficiently displayed in a more simplistic way than a typical clock. My concept for this project had to adjust a few times, as I was still figuring out how to manipulate the time functions.

Yingying Yan – Project 06 – Abstract Clock

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-06
*/

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

function draw() {

    background(13, 18, 54)

	translate(240,240)
    //change hour, min and sec into variables
	var hr = hour();
    var min = minute();
    var sec = second();

    //rotate the entire canvas so people can read it as a clock

    rotate(-90);
    noFill();

    //remap hour into 360 degree angles and draw an
    //arc that keeps track of the hours
    var mappedHr = map(hr % 12, 0, 12, 0, 360);
    push();
    stroke(5, 167, 221);
    strokeWeight (20);
    arc(0,0,300,300, 0, mappedHr);
    pop();
    //remap min into 360 degree angles and draw an
    //arc that keeps track of the minutes
    var mappedMin = map(min, 0, 59, 0, 360);
    push();
    stroke(223, 230, 244);
    strokeWeight(10);
    arc(0,0,200,200, 0, mappedMin);
    pop();

    //remap second into 360 degree angles
    var mappedSec = map(sec, 0, 59, 0, 360);

    //re rotate the circlces or planets
    push()
    rotate(-45)

    //planet one which follows the hour
    push()
    rotate(mappedHr);
    noStroke()
    fill(42, 51, 127, 100);
    ellipse(100, 100, 50, 50);
    pop();

    //planet two which follows the minutes
    push()
    rotate(mappedMin);
    noStroke()
    fill(181, 175, 215);
    ellipse(70, 70, 25, 25);
    pop()
    
    //planet three which follows the seconds
    push();
    rotate(mappedSec);
    strokeWeight(2);
    fill(38, 13, 52);
    ellipse(50, 50, 10, 10);
    line(0,0,47.5,47.5);
    pop();
    pop();

}

For this project, I wanted to make a simple clock without hands or number. But something similar to how one planet rotates around another in a certain amount of time. So I choose to keep track of hour, minutes and sections with a circle similar to the shapes of the planets. I began with something very complicated but I could not figure out how to do that, so I changed my mind to make something simple and abstract.

Romi Jin – Project-05-Abstract Clock

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-06
*/

var hr;
var min;
var sec;

var secMap;
var minMap1;
var minMap2;
//var hrMap;

function setup() {
    createCanvas(480, 900);
    background(255, 228, 225);
    angleMode(DEGREES);

    //carrots redraw
    for(var i = 0; i < second(); i++) {
        push();
        carrots(i*(width/60));
        pop();
    }
}

function draw() {

    hr = hour();
    min = minute();
    sec = second();

    secMap = map(sec, 0, 60, 0, width);
    minMap1 = map(min, 0, 60, 50, height-100);
    minMap2 = map(min, 0, 60, 101, height-50);
    //hrMap = map(hr % 12, 0, 12, 0, height);

    push();
    balloons(minMap1);
    pop();
    push();
    bunny(minMap2);
    pop();
    push();
    carrots(secMap);
    pop();
    grass();

    //redraw canvas after one minute so the carrots begin at 0 again
    if (sec==59) {
        background(255,228,225);
        push();
        balloons(50+min+10);
        pop();
        push();
        bunny(101+min+10);
        pop();
        grass();
    }

}

function carrots(xpos) {

    translate(xpos+5, height-13);
    noStroke();

    //left stem 
    push();
    rotate(-20);
    fill(114, 173, 101);
    ellipse(2, -10, 2, 4);
    pop();

    //right stem
    push();
    rotate(20);
    fill(114, 173, 101);
    ellipse(-2, -10, 2, 4);
    pop();

    //middle stem
    fill(114, 173, 101);
    ellipse(0, -10, 3, 6);

    //carrot body
    fill(249, 181, 118);
    ellipse(0, 0, 6, 18);

}

function grass() {

    translate(2, height);
    stroke(203, 232, 189);
    strokeWeight(2);

    //vertical
    var x = 0; //spacing
    for (i = 0; i < width; i++) {
        line(i + x, 0, i + x, -15);
        x += 5; 
    }

    //diagonal
    var x = 0; //spacing
    for (i = 3; i < width; i++) {
        line(i + x, 0, i + x + 3, -15);
        x += 5; 
    }

}

function balloons(ypos) {

    var vals = [240, 220, 210, 265, 235, 255];
    var balloonD = 30;

    //strings
    push();
    stroke(0);
    strokeWeight(0.25);
    line(vals[0], ypos+17.5, width/2, ypos+100);
    line(vals[1], ypos+17.5, width/2, ypos+100);
    line(vals[2], ypos+17.5, width/2, ypos+100);
    line(vals[3], ypos+17.5, width/2, ypos+100);
    line(vals[4], ypos+17.5, width/2, ypos+100);
    line(vals[5], ypos+17.5, width/2, ypos+100);
    pop();

    //balloons
    push();
    noStroke();

    fill(255, 250, 165);
    ellipse(vals[1], ypos+10, balloonD, balloonD+5);
    fill(255, 250, 200);
    ellipse(vals[2], ypos-10, balloonD, balloonD+5);
    fill(190, 240, 235);
    ellipse(vals[3], ypos+10, balloonD-5, balloonD);
    fill(190, 250, 200);
    ellipse(vals[4], ypos-20, balloonD, balloonD+5);
    fill(190, 225, 200);
    ellipse(vals[5], ypos-15, balloonD, balloonD+5);
    fill(255, 221, 165);
    ellipse(vals[0], ypos, balloonD, balloonD+5);
    pop();

}

function bunny(ypos) {

    fill(255);
    stroke(0);
    strokeWeight(0.75);
    //right ear
    push();
    translate(width/2+4, ypos);
    rotate(10);
    ellipse(0, 0, 5, 15);
    pop();
    //left ear
    push();
    translate(width/2-4, ypos);
    rotate(30);
    ellipse(0, 0, 5, 15);
    pop();
    //tail
    ellipse(width/2-15, ypos+41, 8);
    //right foot
    push();
    translate(width/2-10, ypos+49);
    rotate(-45);
    ellipse(18, 15, 8, 12);
    pop();
    //body
    ellipse(width/2, ypos+27, 40, 50);
    //left foot
    push();
    translate(width/2-10, ypos+49);
    rotate(-45);
    arc(3, 4, 8, 12, -10, 260, OPEN);
    pop();
    //left cheek
    push();
    noStroke();
    fill(255, 228, 225);
    ellipse(width/2-7, ypos+19, 6);
    pop();
    //right cheek
    push();
    noStroke();
    fill(255, 228, 225);
    ellipse(width/2+14, ypos+18, 6);
    pop();
    //left eye
    push();
    strokeWeight(3);
    point(width/2-5, ypos+17);
    pop();
    //right eye
    push();
    strokeWeight(3);
    point(width/2+12, ypos+16);
    pop();
    //nose
    line(243, ypos+18, 244, ypos+19);
    line(244, ypos+19, 245, ypos+18);
    //left hand
    push();
    translate(width/2-10, ypos+31);
    rotate(-45);
    arc(3, 4, 6, 8, -10, 250, OPEN);
    pop();
    //right hand
    push();
    translate(width/2-10, ypos+33);
    rotate(-45);
    arc(18, 15, 6, 8, -10, 250, OPEN);
    pop();

}

For my clock, I illustrated a bunny floating down on balloons as time passes. The carrots at the bottom indicate the seconds passed, the bunny moves down as each minute passes, and the bunny resets (goes back to the top) after 12 hours. I wanted to do a lot more with this project (i.e. make the balloons different colors and disappear after each minute went by (it would begin with 60 balloons) and the bunny moving down every hour instead of ever minute), but I ran out of time and was more difficult than I thought it’d be. However, I had so much fun making this project and loved coming up with ideas to make a non-conventional clock! (also, it looks like an iPhone wallpaper I would use!!)

Philip Gates – Project 06 – Abstract Clock

sketch

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

function draw() {
    
    //fetches increments of time
    var H = hour();
    var M = minute();
    var S = second();
    var totalSec = ((H * 3600) + (M * 60) + S); //calculates total # seconds in day so far

    //maps increments of time to circle size
    var mappedH = map(H, 0, 23, 0, 200); 
    var mappedM = map(M, 0, 59, 0, 150); 
    var mappedS = map(S, 0, 59, 0, 100);

    //maps increments of time to color values
    var colorH = map(H, 0, 23, 255, 0); 
    var colorM = map(M, 0, 59, 255, 0); 
    var colorS = map(S, 0, 59, 255, 0); 
    
    //creates grayscale roughly in accordance with time of day
    var sky1 = map(totalSec, 0, 43200, 0, 255); //midnight-noon goes from black to white
    var sky2 = map(totalSec, 43201, 86400, 255, 0); //noon-midnight goes from white to black
    
    background(255);

    //draw background circle, fill according to time of day
    if (totalSec <= 43200) {
        fill(sky1);
    }   else {
        fill(sky2);
    }   ellipse(width/2,height/2,width,height);

    //draw circles that expand as increments of time grow
    //fill with colors that get more saturated as increments of time increase
    noStroke();
    fill(colorH,255,255);
    ellipse(150, 130, mappedH, mappedH); //hour
    fill(255,colorM,255);
    ellipse(260, 270, mappedM, mappedM); //minute
    fill(255,255,colorS);
    ellipse(135, 280, mappedS, mappedS); //second
}

I wanted to keep circles as an integral part of the design, because my own experience of time feels most attuned to cycles— the calendar, circadian rhythms, etc. The movement and color of the inner circles are tied to “human” time (hours, minutes, seconds), while the color of the background circle is tied (very approximately, using noon as the brightest point and midnight as the darkest) to the position of the sun in the sky. The map function came in very handy for this project.

Robert Oh- Project07- Abstract Clock

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-06-Abstract_Clock

//assigning variables
var i = 0;
var rainArrayX = [];
var rainArrayY = [];
var currSec = 0;

//making the rain cloud
function cloud(x, y) {
    noStroke();
    fill(255);
    ellipse(x - 40, y, 60, 50);
    ellipse(x - 20, y, 50, 55);
    ellipse(x, y, 50, 55);
    ellipse(x + 25, y, 60, 50);
}

//x and y are the bottom left part of the cup, y2 is the water level
function cup(x, y, y2) {
    //the actual cup
    fill(198, 201, 255);
    quad(x, y, x - 5, y - 40, x + 25, y - 40, x + 20, y);

    //the water level
    fill(155, 255, 238);
    quad(x, y, x - ((y - y2) / 40 * 5), y2, x + 20 + ((y - y2) / 40 * 5), y2, x + 20, y);
}

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

function draw() {
    background(116, 121, 232);
    var H = hour() % 12;
    var M = minute();
    var S = second();

    //this nested for loop draws all the cups and correct water levels
    for (i = 0; i < 2; i++){
        for (j = 0; j < 6; j ++){
            if (i * 6 + j < H){
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80 - 40);
            }
            else if (i * 6 + j == H){
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80 - (40 * M / 60));
            }
            else {
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80);
            }
        }
    }

    //drawing the cloud
    cloud(H % 6 * 65 + 40, 50);

    //checking which cup row to go to
    if (H % 12 < 6){
        var k = 0;
    }
    else {
        var k = 1;
    }

    //adding a rain drop every second by using an array
    if (currSec != S){
        rainArrayX.push(H % 6 * 65 + 30);
        rainArrayY.push(80);
        currSec = S;
    }
    
    for (m = 0; m < rainArrayX.length; m ++){
        if (rainArrayY[m] >= (300 + k * 80 - 8)){
            rainArrayX.shift();
            rainArrayY.shift();
            m --;
        }
        else {
            fill(155, 255, 238)
            rect(rainArrayX[m], rainArrayY[m], 2, 8);
            rainArrayY[m] += 1;
        }
    }
}

I remember when I started brainstorming for this project, I looked outside my window and noticed that it was raining. And so, I thought to myself, “how can I add rain to this project?” After a lot more thinking, I was able to come up this project. I really enjoyed incorporating time into this project. Each cup represents the hour (in a 12-hour cycle), each minute increases the water level, and each second adds another rain drop.

Sean Meng – Project 06

meng-sketch

//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 06

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


function draw (){
    background(0);
    var h = hour();
    var m = minute();
    var s = second(); 

    stroke(27, 101, 211)
    for (var i = 0; i < 100; i += 3)
        line(width/5 + i*10, 0, 0, height + i*(-10))

    stroke(145, 200, 224)
    for (var i = 0; i < 100; i += 2)
        line(width/20 + i*10, 0, 0, height + i*(-10))
    
    stroke(27, 101, 211)
    for (var i = 0; i < 100; i += 3)
        line(width/20 + i*10, height, width, height + i*(-10))
   
    stroke(145, 200, 224)
    for (var i = 0; i < 100; i +=2)
        line(width/5 + i*10, height, width, height + i*(-10))

    
    push();
    noStroke();
    fill(20, 27, 226);
    translate(width/2,height/2);
    rotate(s*(360/60));
    rotate(-90);
    rect(120, 0, 90, 10);
    pop();
    
    push();
    noStroke();
    fill(125, 114, 224)
    translate(width/2,height/2);
    rotate(m*(360/60));
    rotate(-90);
    rect(30, 0, 50, 5);
    pop();
    
    push();
    noStroke();
    fill(171, 45, 206);
    translate(width/2,height/2);
    rotate(h*(360/12));
    rotate(-90);
    rect(50, 0, 20, 2);
    pop();

    noStroke()
    fill(211, 107, 196)
    ellipse(width/2, height/2, 30, 30)
}

In this project, I wanna combine the previous work with my abstract clock design, the three rectangles represents three hands of the clocks and their colors varies.

yinjiet-project-06

sketch

//Yinjie Tian
//Section B
//yinjiet@andrew.cmu.edu
//Assignment 06

var x = []; 
var y = [];
var dx = []; 
var dy = []; 
var col = []; 

function setup() { 
    createCanvas(480, 480);
    angleMode(DEGREES);
    for (i = 0; i < 100; i++) { 
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        col[i] = color(random(255), random(255), random(255));
    }
    frameRate(5);
}


function draw() {
 
    background(80, 200, 100);
 
 //bubbles at the background   
    noStroke();
    for (i = 0; i < 100; i++) {  // for each rectangle ...
        fill(col[i]);
        ellipse(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];
        
        if (x[i] > width) x[i] = 0;        //horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       //vertically
        else if (y[i] < 0) y[i] = height;
    }

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

//clock bubbles
    push();
    noStroke();
    fill(200, 200, s * 5);
    translate(width/2,height/2);
    rotate(s * (360/60));
    
    ellipse(200, 0, 60, 60);
    line()

    pop();
    
    push();
    noStroke();
    fill(200, m * 5, 200);
    translate(width/2,height/2);
    rotate(m*(360/60));
    
    ellipse(60, 0, 40, 40);
    pop();
    
    push();
    noStroke();
    fill(h * 25, 200, 200);
    translate(width/2,height/2);
    rotate(h*(360/12));
    
    ellipse(100, 0, 20, 20);
    pop();

//center point
    strokeWeight(4);
    stroke(0)
    line(width / 2 - 25, height / 2, width / 2 + 25, height / 2);
    line(width / 2, height / 2 - 25, width / 2, height / 2 + 25);
    fill(255, 0, 0);
    ellipse(width/2, height/2, 10, 10); 

}

The background is a bunch of randomly moving rectangle with random colors. A cross with a red dot representing the center for the clock. Three bubbles with constantly changing colors based on time orbiting around the cross indicates the time. Second is the largest and furthers bubble and hour is the smallest and closest bubble.

Han Yu Project 06 Abstract Clock

sketch

// Han Yu
// hyu1@andrew.cmu.edu
// Section D
// Project 06

var bubbley = 480;
var noiseParam = 0;
var otherbubbley = 510;


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



function draw() {
	
	background(41,221,245);
	// fectch time
	var H=hour();
	var M=minute();
	var S=second();
	// compute location of fish
	var hourfish=map(H, 0, 23, 35, width-51);
	var minutefish=map(M, 0, 59, 50, width-71);
	var secondfish=map(S, 0, 59, 40, width-41);

	//bubbles
	//sets sidemove to noise value
	var sideMove = noise(noiseParam);
	//map time sidemove between -20 and 20
	sideMove = map(sideMove, 0, 1, -20, 20);
	//color of bubble
	fill(51,231,255);
	//draws bubbles in diff sizes y and x
	ellipse(width/2+sideMove,bubbley,50,50);
	ellipse(width/2+sideMove+50,bubbley-30,30,30);
	ellipse(width/3+sideMove/2, otherbubbley, 40,40);
	//make it go up
	bubbley -= 10;
	otherbubbley -= 5;
	//resets to bottome when at top
	if (bubbley < -25) {
		bubbley = 480			
	}
	if (otherbubbley < -20) {
		otherbubbley = 510
	}
	//increase parameter by 0.3
	noiseParam += 0.3
	
	

	// hour fish
	fill(252,237,60);
	ellipse(hourfish, 100, 70, 35);
	triangle(hourfish+30, 100, hourfish+50, 
			 80, hourfish+50, 120);
	// minute fish
	fill(246,214,48);
	ellipse(minutefish, 200, 100, 50);
	triangle(minutefish+45, 200, minutefish+65, 
			 180, minutefish+65, 220);
	// second fish
	fill(245,184,44);
	ellipse(secondfish, 340, 80, 50);
	triangle(secondfish-35, 340, secondfish-55, 
			 320, secondfish-55, 360);

	// sand
	fill(255,249,207);
	rect(0, 410, width, height);


}

I started out this project hoping to represent time more interactively, something more than just a clock. I have always been fond of the underwater so I chose it as the theme of my abstract clock. My initial design is attached below. I changed around a bit because I later found out the constant shit of colors is not a good representation of time. Overall I enjoyed doing this project, it helped it lot with learning time application and randomness.

Xindi Lyu-Project 06- Abstract Clock-Section A

sketch

/*
Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-06-Abstract Clock
*/
var angleS=0;

function setup() {
 createCanvas(550,500);
 background(230);



}
   
    
function draw() {
        var S=second();
        var M=minute()
        var H=hour();
        noStroke();
      fill(70,100,70)
     ellipse(270,250,500,500);
        strokeWeight(2);
                 for(c=0;c<360;c=c+15){
            push();
        stroke(0);
        translate(270,250);//creating 24 strokes representing each hour of a day
        rotate(radians(c));
         line(0,0,250,0);//creating the base image for the hour section
        pop();
    }
    push();
            translate(270,250);
            rotate(radians(15*H));
            stroke(255);//highlighting the hour represented
            line(0,0,250,0)
            
            pop();
            push();
            translate(270,250);
            rotate(radians(15*H-15));
            stroke(0);
            line(0,0,250,0)//reseting the hours passed
            
            pop();
             
                noStroke();
    fill(70,100,70);
    ellipse(220,250,300,300)


        for(b=0;b<360;b=b+6){
            push();
        stroke(0);//creating 60 strokes representing each minute within an hour
        translate(220,250);
        rotate(radians(b));
         line(0,0,150,0);//creating the base image for the minute section
        
        pop();
    }
    
    push();
            translate(220,250);
            rotate(radians(6*M));
            stroke(255);
            line(0,0,150,0)
            
            pop();
             
             push();
            translate(220,250);
            rotate(radians(6*M-6));
            stroke(0);
            line(0,0,150,0)
            
            pop();

    noStroke();
    fill(70,100,70);
    ellipse(250,250,200,200)

 

        for(a=0;a<360;a=a+6){
            push();
        stroke(0);
        translate(250,250);
        rotate(radians(a));//creating 60 strokes representing each second within a minute
         line(0,0,100,0);
        pop();

        }
             push();
            translate(250,250);
            rotate(radians(6*S));
            stroke(255);
            line(0,0,100,0)
            
            pop();
              
        push();
        stroke(0);
        translate(250,250);
        rotate(radians(6*S-6));
         line(0,0,100,0);
        pop();
    noStroke();
    fill(70,100,70);
    ellipse(230,250,130,130)
}

I experimented with the offsetting circles and how lines cooperated with this geometry. I used simple colors and ways to indicated the time changes to maintain the visual clarity.