Clock.
Clock.
The current time can be read with the second(), minute(), and hour() functions. In this example, sin() and cos() values are used to set the position of the hands.
int cx, cy; float secondsRadius; float minutesRadius; float hoursRadius; float clockDiameter; void setup() { size(640, 360); stroke(255); int radius = min(width, height) / 2; secondsRadius = radius * 0.72; minutesRadius = radius * 0.60; hoursRadius = radius * 0.50; clockDiameter = radius * 1.8; cx = width / 2; cy = height / 2; } void draw() { background(0); // Draw the clock background fill(80); noStroke(); ellipse(cx, cy, clockDiameter, clockDiameter); // Angles for sin() and cos() start at 3 o'clock; // subtract HALF_PI to make them start at the top float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI; float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI; // Draw the hands of the clock stroke(255); strokeWeight(1); line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius); strokeWeight(2); line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius); strokeWeight(4); line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius); // Draw the minute ticks strokeWeight(2); beginShape(POINTS); for (int a = 0; a < 360; a+=6) { float angle = radians(a); float x = cx + cos(angle) * secondsRadius; float y = cy + sin(angle) * secondsRadius; vertex(x, y); } endShape(); }
Functions Used
Determines the smallest value in a sequence of numbers, and then returns that value
Learn MoreUsing the beginShape() and endShape() functions allow creating more complex forms
Learn MoreSets the width of the stroke used for lines, points, and the border around shapes
Learn MoreCalled directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called
Learn MoreThe endShape() function is the companion to beginShape() and may only be called after beginShape()
Learn MoreThe background() function sets the color used for the background of the Processing window
Learn More