Category: 03

shuann-clock

I had a lot of trouble coming up with ideas, but I really liked one of the ancient time keeping tool that only tracked time to the hours. In addition I also wanted to crate a clock that can blends into the everyday routine that you shouldn't need to pay much attention to.  I was then inspired by "rainy mood (https://rainymood.com/)" which I listen to while working as the rain sound can keep me calm and concentrated. Thus I decided to make this clock that is all about that. It is designed so that you don't really need to pay much attention to the visuals. For every hour that passed by, there will be a thunder sound to remind you that it's now the next hour.

I am overall satisfied with the final product. I originally imagined this to be a full scale projection that blends into a wall to create the illusion of a rainy day. However, I had to scale it down due to 1). time constraints and 2). the style of computer graphics might not be the best to create that illusion(?).

Sketch:

var rain = [];
var offset = 30;
var s;
var m;
var h;
var preH=-1;
var sizeY = 10;
var sizeO = 9;
 
 
function preload() {
    rainSound = loadSound("rain.ogg");
    thunder = loadSound("thunder.ogg");
}
 
function setup() {
  createCanvas(500,500); 
  frameRate(30);
  rainSound.loop();
}
 
function draw() {
  drawBackground();
  s = second();
  m = minute();
  h = hour();
 
  if (h != preH){
    thunder.play();
    preH=h;
  }
 
  if (frameCount % 10 == 0){
    createNewDrop();
  }
 
  push();
  for (var elem=0; elem < rain.length; elem++){
    rain[elem].move();
    if (rain[elem].bound() && elem != rain.length-1){
      rain.splice(elem,1);
    }
    rain[elem].render();
  }
  pop();
 
  drawWall();
  drawCandle();
}
 
function drawCandle(){
  //plate
  push();
  translate(width*2/3-20, height*2/3-20);
  fill("lightpink");
  noStroke();
  rect(-80,0,160,7);
  ellipse(0,7,160,20);
  fill("pink");
  ellipse(0,0,160,20);
  pop();
 
  push();
  translate(width*2/3-20, height*2/3-20);
 
  noStroke();
  fill("offWhite");
  if(h < 12){// candle length mapped to miuntes && burn for 12h each
    //candle1
    var c1 = map(h*60+m, 0, 720, -60, -5);
    ellipse(-30,c1-3,50,10);
    rect(-55,c1-3,50,-c1);
    ellipse(-30,-3,50,10);//stationary
    stroke(0);
    strokeWeight(2);
    line(-30,c1-3,-30,c1-7);
    drawFire(-30,c1-7);
 
    //candle2
    noStroke();
    ellipse(25,-58,50,10);
    rect(0,-58,50,60);
    ellipse(25,2,50,10);//stationary
    stroke(0);
    strokeWeight(2);
    line(25,-58,25,-62);
 
 
  } else {
    ellipse(-30,-8,50,10);
    rect(-55,-8,50,5);
    ellipse(-30,-3,50,10);//stationary
    stroke(100);
    strokeWeight(2);
    line(-30,-8,-30,-12);
 
    var c2 = map(h%12*60+m, 0, 720, -60, -5);
    noStroke();
    ellipse(25,c2+2,50,10);
    rect(0,c2+2,50,-c2);
    ellipse(25,2,50,10);//stationary
    stroke(0);
    strokeWeight(2);
    line(25,c2+2,25,c2-2);
    drawFire(25,c2-2);
  }
  pop();
}
 
function drawFire(x,y){
  push();
  translate(x,y);
  noStroke();
  fill(225,243,94,100);
  if (s%2 == 0){
    sizeY += 0.5;
    sizeO += 0.1;
  } else{
    sizeY -= 0.5;
    sizeO -= 0.1;
  }
  ellipse(0,-4,8,sizeY);
  fill(231,122,19,200);
  ellipse(0,-3,7,sizeO);
  fill(241,60,47,240);
  ellipse(0,-2,4,7);
 
  pop();
}
 
function drawBackground(){
  background(150);
  var r0 = 0;
  var g0 = 76;
  var b0 = 153;
  var r1 = 70;
  var g1 = 130;
  var b1 = 180;
  for (var i=0; i < 30; i++){
    noStroke();
    var r = map(i,0,30,r0,r1);
    var g = map(i,0,30,g0,g1);
    var b = map(i,0,30,b0,b1);
    fill(r,g,b);
    rect(0,i*10,width/2+offset*2-5,10);
  }
}
 
function drawWall(){
  push();
  fill(	251, 241, 224);
  noStroke();
  rect(width/2+offset*2,0,width/2+30,height);
  rect(0,height*2/3-38,width,height/2);
 
  push();
  // fill(245,232,202);
  fill(220,210,180);
  translate(width/2+offset*2,0);
  quad(0,0,20,0,20,299,0,290);
  pop();
 
  push();
  fill(255,250,250);
  translate(0,height*2/3-45);
  quad(0,0,width/2+75,0,width/2+80,10,0,10);
  pop();
 
  pop();
  drawFrame();
}
 
function drawFrame(){
  push();
  fill(92,53,33);
  noStroke();
  quad(width/2+offset*2-5,0,width/2+offset*2+15,0,
      width/2+offset*2+15,height*2/3-45,width/2+offset*2-5,height*2/3-60);//right
  fill(97,62,38);
  quad(0,height/2+23,width/2+offset*2-5,height/2+23,
      width/2+offset*2+16,height/2+39,0,height/2+39);//bottom
  pop();
 
  drawStand();
  drawFlower();
  drawBucket();
}
 
function drawBucket(){
  push();
  translate(50,height*0.8);
  strokeWeight(5);
  stroke(80);
  noFill();
  ellipse(0,0,160,20);
 
  push();
  strokeWeight(10);
  stroke(161,122,99);
  strokeJoin(ROUND);
  beginShape();
  curveVertex(60,-60);
  curveVertex(60,-60);
  curveVertex(70,-90);
  curveVertex(78,-100);
  curveVertex(90,-103);
  curveVertex(100,-100);
  curveVertex(104,-94);
  curveVertex(105,-90);
  curveVertex(105,-85);
  curveVertex(103,-85);
  endShape();
  //umbrella
  noStroke();
  scale(1.5);
  translate(-25,0);
  fill(119,191,225);
  triangle(40,-50,70,-40,0,200);
  fill(107,172,229);
  triangle(45,-50,75,-40,0,200);
  fill(115,185,247);
  triangle(50,-50,80,-40,0,200);
  fill(117,199,252);
  triangle(60,-48,80,-42,0,200);
  fill(115,185,247);
  triangle(70,-44,90,-35,0,200);
  pop();
 
  line(80,0,70,100);
  line(80,0,70,5);
  line(70,5,60,8);
  line(60,8,52,100);
  line(60,8,50,9);
  line(50,9,40,9.5);
  line(40,10,35,100);
  line(40,9.5,20,9.5);
  line(20,10,18,100);
  line(20,9.5,10,9.5);
  line(0,10,0,100);
  line(-20,10,-18,100);
  line(-40,9,-35,100);
  pop();
}
 
function drawStand(){
  push();
  translate(width/3-20,height/2+offset*2);
  noStroke();
  fill(216,200,225);
  quad(20,0,380,0,400,30,0,30);
  fill(216,191,216);
  rect(0,30,400,15);
  fill(201,186,209);
  rect(10,45,380,250);
 
  //drawer1
  fill(220,204,209); 
  quad(50,60,430,60,420,70,55,70);
  quad(55,130,430,130,430,135,50,135);
  fill(242,224,230);
  quad(50,60,55,70,55,130,50,135);
 
  //drawer2
  fill(220,204,209);
  quad(50,160,430,160,420,170,55,170);
  fill(242,224,230);
  quad(50,160,55,170,55,230,50,240);
  pop();
}
 
function drawFlower(){
  push();
  //draw stem
  translate(width/2+170,height/3+25);
	stroke(52,131,34);
	strokeWeight(4);
	line(-20,-100,55,128);
	line(5,-30,10,-50);
	line(10,-50,50,-90);
	line(10,-50,12,-90);
  line(23,30,60,-40);
	line(10,-9,-70,-60);
	line(-33,-35,-60,-20);
	line(-20,-100,-50,-120);
	line(-20,-100,-20,-130);
 
	//draw buds 
	noStroke();
	fill(220,182,225);
	star(10,-50, 10, 20,7);
	star(50,-90, 13, 25,7);
	star(12,-90, 13, 25,7);
	star(60,-40, 13, 25,7);
	star(-70,-60, 13, 25,7);
	star(-33,-35, 10, 20,7);
	star(-50,-120, 10, 20,7);
	star(-25,-80, 13, 25,7);
	star(-15,-115, 13, 25,7);
	star(0,-15, 13, 25,7);
	star(-60,-20, 10, 20,7);
 
	fill("offwhite");
	ellipse(10,-50,7);
	ellipse(50,-90,7);
	ellipse(12,-90,7);
	ellipse(60,-40,7);
	ellipse(-70,-60,7);
	ellipse(-33,-35,7);
	ellipse(-50,-120,7);
	ellipse(-25,-80,7);
	ellipse(-15,-115,7);
	ellipse(0,-15,7);
	ellipse(-60,-20,7);
	pop();
 
	//draw vessel
	push();
	fill(198,228,255,200);
	noStroke();
	rect(width/2+170,height/3+25,60,130);
	ellipse(width/2+200,height/3+155,60,10);
	pop();
}
 
function createNewDrop(){
  for (var i = 0; i < 10; i++){
    var newDrop = new rainDrop(int(random(-20,width/2+offset*2)), int(random(-20,height/3)));
    rain.push(newDrop);
  }
}
 
function rainDrop(x, y){
  this.x = x;
  this.y = y;
  this.s = 1;
  this.pos = [[this.x, this.y]];
  this.velX = int(random(1,3));
  this.velY = 2;
 
  this.render = function(){
    stroke(204,229,255);
    if (this.pos.length == 1) {
      ellipse(this.x, this.y, this.s, this.s);
    } else {
      for (var i=1; i<this.pos.length; i++){
        strokeWeight(this.s);
        line(this.pos[i-1][0], this.pos[i-1][1], this.pos[i][0], this.pos[i][1]);
      }
    }
  }
 
  this.move = function() {
    this.x += this.velX;
    this.y += this.velY;
    this.pos.push([this.x, this.y]);
 
    if (random() < 0.8){ this.velX = int(random(2)); } else { this.velX = int(random(-2,3)); } this.checkLength(); } pop this.checkLength = function() { if (this.pos.length > 15){
      this.pos.shift(0);
    }
  }
 
  this.bound = function() {
    if (this.pos[0][0] > width/2+offset*2 || this.pos[0][1] > height*2/3-38){
      return true;
    } else {
      return false;
    }
  }
}
 
//taken from:https://p5js.org/examples/form-star.html
function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

 

casher-clock

 

For my clock, I made a graphic that increases the number of sides in the shape according to the hour, has an increasing number of rings according to the minute, and pulses according to the second. The color also changes according to the specific time. I really wished I had had more time to work on this because there were some cool effects that I didn't get the chance to code. I had a lot of other work this week so I actually couldn't find a time to truly start it until tonight; nevertheless, I worked hard, and as you can see my third GIF render is from right now -- 2:10am. Gotta love coding.

I was stuck for a while at the beginning on how to actually generate shapes with sides according to the hour, so that it changes without me having to draw 12 different shapes and call them individually using if statements. Golan told me about beginShape(), so that new function with a bit of trig helped me generate the hourly shapes. And of course, Char came along and aided with the pulsing. However, this code is 100% my own! There were no templates from Golan or chunks from the internet. I am proud of that. Learning is cool!

nannon-03-clock

 

This is a 24 hour clock that grows back into itself. I actually had a hard time coming up with a solid concept for this project, and it definitely impacted the work. I originally wanted to do a "clock" based on the days of the user's life, with multiple spheres representing each day--spheres would alter in size and color, with different layers representing amount of fulfillment in relationships, work, etc. I had the sphere code from the beginning, but it became hard to scrape data and/or create user input in processing, at which point I decided to scope down. I'm not totally satisfied with =the simplification of the representation of multiple days to just a single day with a sphere, since it falls to close to just a normal clock. However, I like the emphasis on the regrowth visual/symbolism in the piece. Definitely need to focus on scoping down and making sure I have the capabilities for my vision in the next project thank you for the real talk @golan!!

 

 

 

--Process --

playing around with adding spheres (layers) on key pressed (earlier idea).

import peasy.*;
 
PeasyCam cam;
 
int time = 6;
int time2;
 void keyPressed() {
   if (keyCode == UP) {
     time2 = time++%24;
     println(time2);
   }
   if (keyCode == DOWN) {
     time2 = time--%24;
   }
 }
 
 
PVector[][] globe;
int total = 72;
float[][] firsts = new float[total+1][3];
float[][] lasts =  new float[total+1][3];
 
 
 
void setup() {
  size(640, 640, P3D);
  cam = new PeasyCam(this, 500);
  globe = new PVector[total+1][total+1];
 
 
}
 
void draw() {
 
 
 
  //println(hour());
  background(255);
  pushMatrix();
  textSize(20);
 
  fill(100);
 
  text(str(time2)+":00", -30,300);
  popMatrix();
  noFill();
  stroke(240);
  lights();
  float smallRad = map(time2*3, 0, 72,0,200);
  sphere(smallRad);
 
  float r = 200;
  for (int i = 0; i < total+1; i++) {
    float lat = map(i, 0, total, 0, PI);
    for (int j = 0; j < total+1; j++) {
      float lon = map(j, 0, total, 0, TWO_PI);
      float x = r * sin(lat) * cos(lon);
      float y = r * sin(lat) * sin(lon);
      float z = r * cos(lat);
      globe[i][j] = new PVector(x, y, z);
    }
  }
 
  for (int i = 0; i < total; i++) {
    beginShape(TRIANGLE_STRIP);
    int curHour= 72-(time2*72)/24;
    //println(curHour);
    for (int j = 0; j < curHour; j++) {
 
      PVector v1 = globe[i][j];
      vertex(v1.x, v1.y, v1.z);
      PVector v2 = globe[i+1][j];
      vertex(v2.x, v2.y, v2.z);
      if (j==0) {
        firsts[i][0] = v1.x;
        firsts[i][1] = v1.y;
        firsts[i][2] = v1.z;
      }
      if (j==curHour-1) {
        lasts[i][0] = v2.x;
        lasts[i][1] = v2.y;
        lasts[i][2] = v2.z;
      }
 
    }
    endShape();
  }
 
  fill(100);
  beginShape();
  vertex(0,0,0);
  for (int i=0; i < total; i++) {
    vertex(firsts[i][0], firsts[i][1], firsts[i][2]);
  }
   vertex(0,0,cos(72)*200);
  endShape();
 
  fill(100);
  beginShape();
  vertex(0,0,0);
 vertex(firsts[0][0], firsts[0][1], firsts[0][2]);
  for (int i=0; i < total; i++) {
    vertex(lasts[i][0], lasts[i][1], lasts[i][2]);
  }
  //vertex(firsts[0][0], firsts[0][1], firsts[0][2]);
  vertex(0,0,cos(2*PI)*r);
  endShape();
 
 
}

Sepho – Reading03

I found this page really interesting to me because up until recently I believed mostly in creating last word art mainly because that is simply what I had been told was art. To me art had to be a response, it had to carry a message or be the result of a plan, especially computer based art. Nobody in their right mind can code something if they don't know that they're coding right?

Since a few months ago I have been slowly leaning away from last word art and slowly I have started to gain an interest of art as an exploration of an idea or medium. Why do people have to have an end goal in their projects? What happens if i start a project with a specific medium or the seed for an idea and simply let it direct me where it pleases. I now think that art can be a language with which to share an idea with the world, but it can also be used as a vehicle for exploring new feelings and ideas.

yuvian-Reading03

I found Naimark's short essay on "first word art" and "last word art" interesting and novel as I had never previously considered why it mattered when artworks are deemed experimental and new or just a continuation within well-known territory. Personally, I'm not quite sure where my interests lie along this spectrum. I think it's daring to create something entirely new and although it may be exciting, the fact that nothing else like it exists seems to pose a challenge within its creation. To me, it seems that the world has been inundated with "new" ideas and paradoxically, nothing seems truly "new" anymore. Although the author mentions that some believe that "last word art" must not really be art because it is nothing never-before-seen, I would have to disagree because I think artists can always find ways to evolve an existing idea, adapting to our ever-changing environments. Our society constantly demands artists and designers to create something novel yet this request is nothing new. Quick, bold ideas that change every quarter seem to be most desirable within technology whereas the art world generally likes to cling onto the work of the past. Thus the middle-ground between these two worlds must be an environment in which we are heavily influenced by past ideas while at the same time, being driven to create something entirely new.

rigatoni – clock

let measure = 10
let size = 150
 
var sWave
var mWave
var hWave
 
var sChunks
var mChunks
 
function setup() {
  createCanvas(720, 720);
  sWave = new p5.Oscillator()
  mWave = new p5.Oscillator()
  hWave = new p5.Oscillator()
 
  sWave.setType("sin")
  sWave.amp(0.2)
  sWave.freq(second()*25)
 
  mWave.setType("triangle")
  mWave.amp(0.3)
  mWave.freq(minute()*20)
 
  hWave.setType("saw")
  hWave.amp(0.5)
  hWave.freq(hour()*5)
 
  sChunks = new SlimeChunks(0, 0)
  mChunks = new SlimeChunks(0, 0)
  hChunks = new SlimeChunks(0, 0)
  sWave.start()
  mWave.start()
  hWave.start()
}
 
function draw() {
  sWave.freq(second()*25)
  mWave.freq(minute()*10)
  hWave.freq(hour()*5)
 
  var s = second()
  var m = minute()
  var h = hour()
  background(0, 30)
  DrawTallyYear()
 
  var sPeriod = measure/second()
  var mPeriod = measure/minute()
  var hPeriod = measure/hour()
  var angle = map(millis()%(1000*measure), 0, 1000, 0, TWO_PI)
 
  var sXPos = map(millis()%(measure*1000), 0, measure*1000, -85, width+85)
  var mXPos = map(millis()%(measure*1000), 0, measure*1000, -85, width+85)
  var hXPos = map(millis()%(measure*1000), 0, measure*1000, -85, width+85)
 
  var sYPos = height/2 + 25*sin(angle/sPeriod)+(2*size)
  var mYPos = height/2 + 25*sin(angle/mPeriod)+0
  var hYPos = height/2 + 25*sin(angle/hPeriod)-(2*size)
 
 
 
  noStroke()
 
  fill(0, 255, 20)
  ellipse(sXPos, sYPos*1.5-390, size, size)
  fill(0, 155, 20)
  ellipse(mXPos, mYPos*1.5-170, size, size)
  fill(0, 135, 20)
  ellipse(hXPos, hYPos*1.5+30, size, size)
  fill(40)
  blendMode(HARD_LIGHT)
  ellipse(width/2, height/2-190, size*0.8, size*0.8)
  ellipse(width/2, height/2, size*0.8, size*0.8)
  ellipse(width/2, height/2+210, size*0.8, size*0.8)
 
	if(sYPos<=(height/2 + -25+(2.01*size)) ) {
		sChunks.AddChunk()
  }
  if(mYPos<=(height/2-24.9) ) {
		mChunks.AddChunk()
  }
 
  sChunks.DrawChunks()
  sChunks.UpdatePos(sXPos, sYPos)
  sChunks.UpdateChunks()
 
  mChunks.DrawChunks()
  mChunks.UpdatePos(mXPos, mYPos+75)
  mChunks.UpdateChunks()
}
 
function DrawTallyYear() {
	var tallies = floor(2018/5)
  var rem = 2018%5
  var cellSize = 100
  push()
  translate(-60, 40)
  for(var i=0; i<width; i+=cellSize) {
		for(var j=0; j<height; j+=cellSize) {
			DrawTallyMark(i, j, 5, 10)
    }
  }
  pop()
}
 
function DrawTallyMark(x, y, c, w) {
	for(var i=0; i<c*w; i+=w) {
    stroke(135)
		line(x+i+map(random(), 0, 1, -2, 2), y+map(random(), 0, 1, -2, 2), 
        x+i+map(random(), 0, 1, -2, 2), y+c*w+map(random(), 0, 1, -2, 2))
  }
  line(x-w+map(random(), 0, 1, -2, 2), y-w+map(random(), 0, 1, -2, 2), 
    	 x+c*w+map(random(), 0, 1, -2, 2), y+c*w+map(random(), 0, 1, -2, 2))
}
 
function SlimeChunks(x, y, amount=1) {
	this.x = x
  this.y = y
  this.amount = amount
  this.chunks = []
 
  this.AddChunk = function() {
		this.chunks.push([this.x+round(random()*25), this.y]) 
  }
 
  this.DrawChunks = function() {
		for(i=0; i<this.chunks.length; i++) {
      fill(0, 140, 0)
			ellipse(this.chunks[i][0], this.chunks[i][1], 10, 10) 
    }
  }
 
  this.UpdatePos = function(x, y) {
		this.x = x
    this.y = y
  }
 
  this.UpdateChunks = function() {
		for(i=0; i<this.chunks.length; i++) {
      this.chunks[i][0] -= noise(this.chunks[i][0])
      this.chunks[i][1] += 3
    }
  }
}

For my interpretation of the Clocks I wanted to create a sonic representation of time. Time is almost exclusively expressed visually, through clocks, sundials, or some other perpetual accumulation of visual data. In the context of sound though, even in a simple interpretation like mine, there's a tension of evolving dissonance and harmony; some points in time are pleasing to experience while others are unsettling and strange. In retrospect, this project would have been stronger had I left the visual component out altogether. In my rush to explore how far I could push different representations of oscillation I undermined my original idea, that being the audio representation of time.

sapeck-Reading03

While I agree with Naimark's claim, I don't think that it can should be used as a scale to evaluate work. Between every first and last word is an always-growing, still-significant body of work. If the first word is determined chronologically but the last word is determined by comparison of importance, then there is no definition for what else is notable. The general public may best remember the first and last word artists best (e.x. Beethoven, Pollock, Warhol), but that doesn't void the value of other artists.

The intent to develop first or last word art also creates a dilemma. If an artists attempts to create a last word art piece, then they will work forever and maybe never create a final work unless they are the next Beethoven. As Naimark's article notes, Beethoven's work has withstood the test of time. If an artist works to create as many first word pieces as possible, then their body of work will be rushed and never reach beyond a shallow degree of complexity.

Sepho – Clock

For my clock I chose to create a clock that doesn't tell people what time it is, it tells people what time it 'feels like.' When planning for this project I began thinking a lot on how weirdly arbitrary and meaningless measuring time really was. It was interesting to think of how we need this abstraction of miscellaneous systems such as the earths rotation to keep order in our lives. What interested me the most about our measurements of time was how absent subjectivity and the humanistic experience of time were from these measurements. With my clock my goal was to subvert the objective, factual nature of "clock" and how we view it. Suddenly time is something subjective and fickle with absolutely no foundations in reality.

For my process I really wanted to keep the actual clock pretty simple and let the idea do the talking, and I learned that for me, keeping things simple is the most complex thing ever. In order to replicate the face of a digital clock I had to draw my own font out of shapes and in order to get the average between times I needed to convert times to degrees on a circle.

Ideally, this clock would exist as any other clock would, for example as a simply alarm clock on a night-stand. I really enjoy the idea of taking something so personal such as what time it "feels" and presenting as fact by putting it on a clock.

yalbert-reading03

Although I recognize the importance of first word art, I generally enjoy last word art more. I think this is because in many ways I'm comforted by its traditional nature and find it easier to appreciate the master of craft that is associated with it.

Technologies have an extraordinary impact on culture. One particularly interesting example of this is how modern technology shapes the way we absorb culture. The methods of consumption, instagram, facebook, youtube, affect how we interpret modern culture and therefore the content itself. On the flip side, culture has a tremendous affect on our technology. In particular, America's culture of capitalism and innovation has shaped Silicon Valley's endless drive to innovate, to both negative and positive effects.

I think that when work is technologically novel it ages poorly because work made in new media can't help but be scrappy. No one knows how to use the media yet so the craft is inevitably poor. Making something the second time around is bound to be better simply from learning from the original works' process.

yuvian-clock

new clock

For my first clock, I chose to represent time in a way similar to that of a normal clock. With a familiar elliptical shape, I used three rings to represent the hour, minute, and second. According to the time, I placed dots along the three rings which are evenly divided between the 360 degrees of a circle. Because it may get hard to read at times, I also added a feature that would allow the user to see the actual time when they move their mouse over the center of the clock. Afterwards, I added some styling to the clock - namely, the grey ring and circle to help differentiate between hours, minutes, and seconds.

//60212 CLOCK SKETCH

var h, m, s;

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

function draw() {
  background(0);
  
  h = hour();
  m = minute();
  s = second();
  
  ellipseMode(CENTER);
  
  //white circle bg for hours
  stroke(90);
  noFill();
  strokeWeight(15)
  ellipse(width/2,height/2, 380)
  
  
  //grey circle bg for seconds
  fill(30);
  noStroke();
  ellipse(width/2,height/2, 200,200)
  
  if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY < 300) {
    displayTime();
  }
  
  push();
    translate(width/2, height/2);
    angleMode(DEGREES)
    rotate(-90)
    dotSize = 3;
    noStroke();
    ///////////////////////////////////
    var hRad = 190;
    // var hColor = map(h,0,23,50,255);
    var hColor = color(0)
    // var hColor = color(226, 9, 63)
    var hDotSize = 5;
    fill(hColor);
    for (var i = 0; i <= 360; i+= 360/h) {
			if (h == 0) {
				h = 12
			} else {
				ellipse(cos(i) * hRad, sin(i) * hRad,hDotSize,hDotSize);
			}
      
    }
    ///////////////////////////////////
    var mRad = 130;
    var mColor = map(m,0,59,50,255);
    // var mColor = color(53, 87, 255)
    fill(mColor);
    for (var i = 0; i <= 360; i+= 360/m) {
      if (m > 0) {
        ellipse(cos(i) * mRad, sin(i) * mRad,dotSize,dotSize);
      }
    }
    ///////////////////////////////////
    var sRad= 90;
    var sColor = map(s,0,59,50,255);
    // var sColor = color(255, 86, 128)
    fill(sColor)
    for (var i = 0; i <= 360; i+= 360/s) {
      if (s > 0) {
        ellipse(cos(i) * sRad, sin(i) * sRad,dotSize,dotSize);
      }
    }
    ///////////////////////////////////
  pop();
}

function displayTime() {
  noStroke();
  fill(255);
  textAlign(CENTER);
  textSize(15);
  // xTime = 60
  // yTime = 40
  xTime = width/2;
  yTime = height/2;
	
	if (h==0) {
		h = 12
	}
  
	//display zero in front of single digit second
  if (s < 10 && m >= 10) {
    text(h + " : " + m + " : 0" + s, xTime, yTime);
	}
	//display zero in front of single digit minute
  else if (s >= 10 && m < 10) {
    text(h + " : 0" + m + " : " + s, xTime, yTime);
	}
	//display zeroes in front of single digit seconds and minutes
  else if (s < 10 && m < 10) {
    text(h + " : 0" +m + " : 0" + s, xTime, yTime);
	}
	//keep seconds and minutes as is when two digits
  else {
    text(h + " : " + m + " : " + s, xTime, yTime);
	}
}

face clock


Now this clock is much more interesting to look at. For this project, I altered another clock I had previously made. In this sketch, I incorporated color, animation (somewhat), and gave this "clock" a lot more personality.

var hr, mn, sc;
var end_hr, end_mn, end_sc;

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

function draw() {
  background(255);
  
  hr = hour();
  mn = minute();
  sc = second();
  end_hr = map(hr % 12,0,12,0,360);
  end_mn = map(mn, 0, 60, 0, 360);
  end_sc = map(sc, 0, 60, 0, 360);
  
  /////////// time /////////////////////////
  
  //Display time
  if (sc < 10) {
    noStroke();
    fill(135, 158, 163);
    textAlign(CENTER);
    textSize(20);
    strokeWeight(5);
    text(hr + " : " + mn + " : 0" + sc, 80, 30);
  } else {
    noStroke();
    fill(135, 158, 163);
    textAlign(CENTER);
    textSize(20);
    strokeWeight(5);
    text(hr + " : " + mn + " : " + sc, 80, 30);
  }
  
  push();
  strokeWeight(8);
  noFill();
  angleMode(DEGREES);
  translate(width/2,height/2);
  rotate(-90);
  //seconds - innermost
  stroke(164, 206, 216);
  arc(0, 0, 250, 250, 0, end_sc);
	
  //minutes - middle
  stroke(35, 126, 196); 
  arc(0, 0, 320, 320, 0, end_mn);

  //hours - outside
  stroke(31, 56, 119); 
  arc(0,0,345,345,0,end_hr);
  pop();
  
  ///////////// static face ///////////////
  push();
  angleMode(DEGREES);
  translate(width/2,height/2);
  rotate(-90);
  
  //Top of face
  stroke(0);
  strokeWeight(7);
  noFill();
  arc(0,0,280,280,280,80);
  
  //Bottom of face
  noFill();
  arc(0,0,300,300,150,210);
  pop();

  //black eyebrows 
  stroke(0);
  fill(0);
  rectMode(CENTER);
  rect(130, 150, 25, 5, 15);
  rect(270, 150, 25, 5, 15);
  
  //eyes
  ellipseMode(CENTER);
  ellipse(120, 200, 20, 20);
  ellipse(280, 200, 20, 20);
  
  //nose
  noStroke();
  strokeWeight(6);
  fill(204, 95, 95);
  rect(width/2, 230, 15, 30, 20);
  
  //lips
  stroke(0);
  noFill();
  rect(width/2, 280, 60, 20, 20);
  
  //teeth
  line(width/2, 270, width/2, 290);
  line(width/2 - 15, 270, width/2 - 15, 290);
  line(width/2 + 15, 270, width/2 + 15, 290);
  
  ///////// face animations ///////////////
  
  if (sc % 2 == 0) {
    //eyebrows raise
    //cover old eyebrows w white
      stroke(255);
      strokeWeight(8);
      rectMode(CENTER);
      rect(130, 150, 25, 5, 15);
      rect(270, 150, 25, 5, 15);
    //new raised eyebrows
      strokeWeight(5);
      stroke(0);
      rect(130, 140, 25, 5, 15);
      rect(270, 140, 25, 5, 15);
    
    //mouth becomes smaller
    //cover old mouth
      //lips
      strokeWeight(10);
      stroke(255);
      noFill();
      rect(width/2, 280, 60, 20, 20);
      //teeth
      line(width/2, 270, width/2, 290);
      line(width/2 - 15, 270, width/2 - 15, 290);
      line(width/2 + 15, 270, width/2 + 15, 290);
    //new small mouth
      strokeWeight(6);
      stroke(0);
      ellipse(width/2, 280, 20,20);
	}
}