• Black Vimeo Icon

©2020 BY JENNY LIN

Creative Clock

Updated: Oct 28, 2019

So far I have been having trouble creating dots that following a round track or move within a circle, therefore, I thought of challenging myself with an intense amount of it to practice!

After watching Dan Shiffman's video on how to make a clock, I came up with my own. In order to make it more intuitive and legible, I added "S" indicating seconds, "M" indicating minutes, and "H" indicating hours. I also added the 12 dots on the outer circle, hoping people would be able to tell the time just by looking at it.



Here is the realtime creative clock:

Can you tell what time is it now?

In addition, when you hover over the center of the clock, you could see the hidden "J" as it's my design and signature! ;)

Try click on the center "J" logo, and see what would happen.


I guess the clock is shocked ;P


Feel free to look at the code and modify it to your own clock by clicking the link beow! https://editor.p5js.org/wcl341@nyu.edu/sketches/HJbxNfg97




Codes


let secondAngle;

let minuteAngle;

let hourAngle;

let time;

let alphabet;

let c, d;


function setup() {

createCanvas(500, 500);

angleMode(DEGREES);

c = {

x: width / 2,

y: height / 2

}

}


function draw() {

background(30, 10, 40, 50);

time = {

sc: second(),

mn: minute(),

hr: hour()

}

clock();

logo();

}


function clock() {

stripes();

timeWord();

motion();

clockNum();

}


function clockNum() {

number(0);

number(30);

number(60);

number(90);

number(120);

number(150);

number(180);

number(210);

number(240);

number(270);

number(300);

number(330);

}


function motion() {

runningDots(255, 255, 255, 150, 50, 1000, 5);

runningDots(10, 255, 200, 100, 100, 1000, 10);

runningDots(100, 50, 255, 100, 150, 1000, 10);

runningDots(255, 10, 150, 100, 200, 1000, 10);

}


function timeWord() {

timeIndicater('S', 0.388);

timeIndicater('M', 0.288);

timeIndicater('H', 0.188);

}


function stripes() {

clockIndicater(0.8, 255, 10, 150, 255, secondAngle);

clockIndicater(0.6, 100, 50, 255, 255, minuteAngle);

clockIndicater(0.4, 10, 255, 200, 255, hourAngle);

}


function clockIndicater(radius, strr, strg, strb, stra, angle) {

push();

if (mouseIsPressed) {

if (d < 45) {

c.x += random(-0.5, 0.5);

c.y += random(-0.5, 0.5);

strr -= 50;

strg -= 50;

strb -= 50;

stra -= 250;

stroke(strr, strg, strb, stra);

}

}

translate(c.x, c.y);

rotate(-90);

noFill();

stroke(strr, strg, strb, stra);

strokeWeight(50);

secondAngle = map(time.sc, 0, 60, 0, 360);

minuteAngle = map(time.mn, 0, 60, 0, 360);

hourAngle = map(time.hr % 12, 0, 12, 0, 360);

arc(0, 0, width * radius, height * radius, 0, angle);

pop();

}


function timeIndicater(word, r) {

push();

translate(c.x, c.y);

fill(255);

textSize(20);

textAlign(RIGHT);

text(word, -width * 0.07, -height * r);

pop();

}


function runningDots(dotr, dotg, dotb, dota, innerR, t, r) {

push();

translate(c.x, c.y);

fill(dotr, dotg, dotb, dota);

let innerAngle = map(millis(), 0, t, 0, 360);

noStroke();

ellipse(innerR * cos(innerAngle), innerR * sin(innerAngle), r);

pop();

}


function logo() {

textSize(44);

textStyle(ITALIC);

textAlign(CENTER);

fill(255);

text("J", c.x, c.y * 1.07);

d = dist(mouseX, mouseY, c.x, c.y);

if (d < 45/2)

fill(20, 20, 200, 50);

else fill(20, 20, 200);

noStroke();

ellipse(c.x, c.y, 45);

}


function number(dotAngle) {

push();

translate(c.x, c.y);

rotate(-90);

noStroke();

fill(255, 50);

ellipse(width * 0.47 * cos(dotAngle), height * 0.47 * sin(dotAngle), 5);

pop();

}


#ITP #ICM #ComputationalMedia #coding #programming #clock #creative #time