{"id":6,"date":"2016-02-13T12:25:08","date_gmt":"2016-02-13T20:25:08","guid":{"rendered":"http:\/\/www.nathanbak.com\/?p=6"},"modified":"2026-01-02T20:00:39","modified_gmt":"2026-01-03T04:00:39","slug":"analog-clock","status":"publish","type":"post","link":"https:\/\/nathanbak.com\/?p=6","title":{"rendered":"Analog Clock"},"content":{"rendered":"<div class=\"clock\" style=\"float: left;\"><\/div>\n<p><script src=\"http:\/\/www.nathanbak.com\/js\/clock.js\"><\/script><br \/>\n<script>\/\/ <![CDATA[\nclock();\n\/\/ ]]><\/script><\/p>\n<p>When I was about six, I wanted a digital watch.\u00a0 I still thought they were, as Douglas Adams would phrase it, &#8220;<span class=\"st\">a pretty neat ide<\/span>a&#8221;.\u00a0 I actually wasn&#8217;t that interested in having ready access to a time device, but rather I wanted a watch with a game on it.\u00a0 Many kids my age desired a watch with Pac-Man, but I wanted a watch with a top-down shooter like Space Invaders.\u00a0 Of course, like many childhood desires for immediate gratification, I was thwarted by my mother.<\/p>\n<p>My father liked to build things with electronics and over the years he had produced various digital clocks packaged in Radio Shack plastic cases.\u00a0 Thus I managed to be sufficiently informed of the time without having learned to read a traditional, analog clock.\u00a0 I saw no problem with the status quo, but my mother saw this deficiency as a flaw in my education.\u00a0 After various whining, complaining, and fussing on my part and unyielding patience on the part of my mother, an agreement was reached.\u00a0 Once I mastered reading an analog clock (and my mother was clear I couldn&#8217;t just have a general idea about the process), I would be permitted to purchase the desired digital device.<\/p>\n<p>I learned.\u00a0 I got the watch.\u00a0 I owned a few digital watches during the subsequent years.\u00a0 Then Swatches became en vogue and so of course I jumped on that bandwagon.\u00a0 Here I benefited from my mother&#8217;s insistence of mastery because most Swatches didn&#8217;t have tick marks or numbers.\u00a0 I soon discovered that I preferred the analog face to a digital readout&#8211;to me the progression 60 minutes makes more sense when displayed in a circular fashion.\u00a0 Since then, I have generally not worn digital watches.<\/p>\n<p>Last night as I was going to sleep, I was thinking about how in the web world that digital displays are much more prevalent on web pages than analog.\u00a0 So for fun, this morning I created a very simple, analog clock that can be displayed on a web page.<\/p>\n<p>There are three basic technologies involved in my primitive clock:\u00a0 HTML, JavaScript, and SVG (Scalable Vector Graphics).\u00a0 Here&#8217;s what an HTML file looks like that displays the clock (with the important parts in <strong>bold<\/strong>):<\/p>\n<pre>&lt;html&gt;\r\n\u00a0\u00a0 \u00a0&lt;head&gt;\r\n        &lt;!-- I downloaded jQuery from http:\/\/code.jquery.com\/jquery-2.2.0.min.js--&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<strong>&lt;script src=\"jquery-2.2.0.min.js\"&gt;&lt;\/script&gt;<\/strong>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 <strong> &lt;script src=\"clock.js\"&gt;&lt;\/script&gt;<\/strong>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;title&gt;Analog Clock&lt;\/title&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/head&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;body&gt;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<strong>&lt;div class=\"clock\"&gt;&lt;\/div&gt;<\/strong>\r\n\r\n<strong>\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;script&gt;<\/strong>\r\n<strong>\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0clock();<\/strong>\r\n<strong>\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;\/script&gt;<\/strong>\r\n\r\n\u00a0\u00a0 \u00a0&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>All the HTML really does is pull in the JavaScript goodness and kick off the clock() function that puts the clock into the &#8220;div&#8221; element.\u00a0 I used jQuery to make it easier to find and modify various elements.<\/p>\n<p>Below is the clock.js content.\u00a0 There are some &#8220;magic&#8221; numbers:\u00a0 300 is both the height and width and 150 is the midpoint (both vertical and horizontal).\u00a0 The 1000 the 1000 milliseconds (one second) interval to wait between updates.<\/p>\n<pre>function clock() {\r\n\u00a0\u00a0 \u00a0setupClock();\r\n\u00a0\u00a0 \u00a0updateClock();\r\n\u00a0\u00a0 \u00a0window.setInterval(function(){ updateClock(); }, 1000);\r\n}\r\n\r\nvar radius = 120;\r\n\r\nfunction setupClock() {\r\n\u00a0\u00a0 \u00a0var svg = \"&lt;svg class='clockSvg' viewBox='0 0 300 300' width='300' height='300' &gt;\" +\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"&lt;circle class='circle' cx='150' cy='150' r='50' stroke='black' stroke-width='2' fill='none' \/&gt;\" + \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"&lt;line class='hourHand' x1='150' y1='150' x2='0' y2='150' style='stroke:rgb(0,0,0);stroke-width:2;' \/&gt;\" +\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"&lt;line class='minuteHand' x1='150' y1='150' x2='150' y2='0' style='stroke:rgb(0,0,0);stroke-width:2;' \/&gt;\" +\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"&lt;line class='secondHand' x1='150' y1='150' x2='150' y2='0' style='stroke:rgb(0,0,0);stroke-width:1;' \/&gt;\" +\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\"&lt;\/svg&gt;\";\r\n\u00a0\u00a0 \u00a0$('.clock').html(svg);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$('.circle').attr('r', radius);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0var now = new Date();\r\n\u00a0\u00a0 \u00a0updateSecondHand(now.getSeconds());\r\n\u00a0\u00a0 \u00a0updateMinuteHand(now.getMinutes());\r\n\u00a0\u00a0 \u00a0updateHourHand(now.getHours(), now.getMinutes());\r\n}\r\n\r\nfunction updateClock() {\r\n\u00a0\u00a0 \u00a0var now = new Date();\r\n\u00a0\u00a0 \u00a0var seconds = now.getSeconds();\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0updateSecondHand(seconds);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0if (seconds == 0) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0updateMinuteHand(now.getMinutes());\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0updateHourHand(now.getHours(), now.getMinutes());\r\n\u00a0\u00a0 \u00a0}\r\n};\r\n\r\nfunction updateSecondHand(seconds) {\r\n\u00a0\u00a0 \u00a0var degrees = 6 * seconds - 90;\r\n\u00a0\u00a0 \u00a0updateHand('secondHand', degrees, .9 * radius);\r\n}\r\n\r\nfunction updateMinuteHand(minutes) {\r\n\u00a0\u00a0 \u00a0var degrees = 6 * minutes - 90;\r\n\u00a0\u00a0 \u00a0updateHand('minuteHand', degrees, .9 * radius);\r\n}\r\n\r\nfunction updateHourHand(hours, minutes) {\r\n\u00a0\u00a0 \u00a0hours %= 12;\r\n\u00a0\u00a0 \u00a0hours += minutes\/60;\r\n\u00a0\u00a0 \u00a0var degrees = 30 * hours - 90;\r\n\u00a0\u00a0 \u00a0updateHand('hourHand', degrees, .7 * radius);\r\n}\r\n\r\nfunction updateHand(hand, degrees, length) {\r\n\u00a0\u00a0 \u00a0var rads = degrees \/ 180 * Math.PI;\r\n\r\n\u00a0\u00a0\u00a0 x2 = parseInt(150 + length * Math.cos(rads));\r\n\u00a0\u00a0\u00a0 y2 = parseInt(150 + length * Math.sin(rads));\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 $('.' + hand).attr('x2', x2);\r\n\u00a0\u00a0\u00a0 $('.' + hand).attr('y2', y2);\r\n}<\/pre>\n<p>Drawing a clock face with SVG is simple&#8211;it is just a circle and some\u00a0 lines and that is what the setupClock() function does.\u00a0 All the various &#8220;update&#8221; functions do is move one of the ends of each of the lines.<\/p>\n<p>After I put this together, I did a quick search for &#8220;svg clock&#8221; and of course found many fancier, more complicated implementations.\u00a0 But I made this one and I don&#8217;t need numbers or tick marks or anything else&#8211;thanks to my mother . . .<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I was about six, I wanted a digital watch.\u00a0 I still thought they were, as Douglas Adams would phrase it, &#8220;a pretty neat idea&#8221;.\u00a0 I actually wasn&#8217;t that interested in having ready access to a time device, but rather I wanted a watch with a game on it.\u00a0 Many kids my age desired a &hellip; <a href=\"https:\/\/nathanbak.com\/?p=6\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Analog Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7],"class_list":["post-6","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-family"],"_links":{"self":[{"href":"https:\/\/nathanbak.com\/index.php?rest_route=\/wp\/v2\/posts\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nathanbak.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nathanbak.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nathanbak.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nathanbak.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":10,"href":"https:\/\/nathanbak.com\/index.php?rest_route=\/wp\/v2\/posts\/6\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/nathanbak.com\/index.php?rest_route=\/wp\/v2\/posts\/6\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/nathanbak.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nathanbak.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nathanbak.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}