{"id":291,"date":"2011-11-21T01:01:59","date_gmt":"2011-11-21T09:01:59","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=291"},"modified":"2011-11-28T20:23:39","modified_gmt":"2011-11-29T04:23:39","slug":"analog-clock","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/analog-clock\/","title":{"rendered":"Analog Clock"},"content":{"rendered":"<p><script type=\"application\/processing\">\/\/ Simple analog clock - Jim Bumgardner\n\nvoid setup()\n{\n  size(500,500);\n  smooth();\n  frameRate(2);\n}\n\nvoid draw()\n{\n  background(0);\n  float as = map(second(),0,60,0,TWO_PI); \/\/ angle of second hand, from 12\n  float am = map(minute()+second()\/60.0,0,60,0,TWO_PI); \/\/ angle of minute hand, from 12\n  float ah = map(hour()+minute()\/60.0,0,24,0,TWO_PI*2); \/\/ angle of hour hand, from 12\n  float mLen = height*.4; \/\/ length of hands (m,s,h)\n  float sLen = height*.4;\n  float hLen =  height*.25;\n\n  pushMatrix();\n    translate(width\/2,height\/2); \/\/ Much simpler if we translate to the center of the screen\n    fill(255);\n    ellipse(0,0,width*.9, height*.9);\n    fill(0);\n    \n    \/\/ draw hour markers\n    strokeWeight(5);\n    for (int i = 0; i < 12; ++i) {\n      pushMatrix();\n        rotate(radians(i*30));\n        line(width*.38,0,width*.42,0);\n      popMatrix();\n    }\n    strokeWeight(1);\n\n    \/\/ draw second hand\n    pushMatrix();\n      rotate(as);\n      stroke(255,0,0);\n      line(0,10,0,-sLen); \/\/ draw as if it's at noon, rotation takes care of the rest\n      stroke(0);\n    popMatrix();\n\n    \/\/ draw minute hand\n    pushMatrix();\n      rotate(am);\n      triangle(-5,10,0,-mLen,5,10); \/\/ draw as if it's at noon, rotation takes care of the rest\n    popMatrix();\n\n    \/\/ draw hour hand\n    pushMatrix();\n      rotate(ah);\n      triangle(-5,10,0,-hLen,5,10); \/\/ draw as if it's at noon, rotation takes care of the rest\n    popMatrix();\n\n  popMatrix();\n}\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=analog_clock\">source<\/a><\/div>\n<p>The world really doesn&#8217;t need another analog clock program, but I thought I&#8217;d make one, to illustrate why pushMatrix and popMatrix are cool.  Here I&#8217;m  using them to rotate each hand into the correct position. <\/p>\n<p>Want some numbers instead of the minimal notches shown here?  Replace the loop that draws the hour markers with this (it looks good with a 48 point font).<\/p>\n<pre>\r\n    \/\/ draw hour markers\r\n    textAlign(CENTER, CENTER);\r\n    for (int i = 0; i < 12; ++i) {\r\n      pushMatrix();\r\n        rotate(radians(i*30));\r\n        pushMatrix();\r\n        translate(0,-width*.39);\r\n        rotate(-radians(i*30));\r\n        text(i==0? 12 : i, 0, 0);\r\n        popMatrix();\r\n      popMatrix();\r\n    }\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>source The world really doesn&#8217;t need another analog clock program, but I thought I&#8217;d make one, to illustrate why pushMatrix and popMatrix are cool. Here I&#8217;m using them to rotate each hand into the correct position. Want some numbers instead of the minimal notches shown here? Replace the loop that draws the hour markers with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11,9,26,8,24],"class_list":["post-291","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-animation","tag-circles","tag-clock","tag-intermediate","tag-time"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/comments?post=291"}],"version-history":[{"count":9,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/291\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/291\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}