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);
	}
}