I first changed the size of the actual popup from a rectangle down to a square that just barely fit the minute ticks- no point in having horizontal space wasted on the screen, only the essentials!
I then made the background fill from (80) to (500), promoting a simpler color scheme and allowing the user to focus on what’s important; I didn’t see the point in the inclusion of an ugly off-grey circle.
Next, I altered the thickness of the different hands on the clock. I felt like there wasn’t enough differentiation between them, so I made the second hand half as thick, kept the minute hand the same, and the hour hand 1.5x heavier; now it’s a lot easier to differentiate between them!
Finally, just for fun, I made the actual minute ticks 5x larger; I feel like it “completes” the look for whatever reason.
/** * 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(360, 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(500); 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(.5); 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(6); line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius); // Draw the minute ticks strokeWeight(10); 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();}
x
No comments:
Post a Comment