As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Monday, April 6, 2020

Clock code modification

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