{"id":319,"date":"2016-02-08T01:41:31","date_gmt":"2016-02-08T00:41:31","guid":{"rendered":"http:\/\/bulletin-board.de\/watchfaces\/?p=319"},"modified":"2016-02-20T17:07:35","modified_gmt":"2016-02-20T16:07:35","slug":"back-to-trigonometry","status":"publish","type":"post","link":"https:\/\/bulletin-board.de\/watchfaces\/back-to-trigonometry\/","title":{"rendered":"Back to trigonometry"},"content":{"rendered":"<p>Since I&#8217;m scripting watch faces for smart watches, I was confronted with mathematical issues from my school days nearly 30\u00a0years ago.<\/p>\n<h2>The basics<\/h2>\n<p>The circle is\u00a0the main geometric form to support using watch faces. And so I was confronted with\u00a0\u03c0,\u00a0sine, angles and some other things from the trigonometry.<\/p>\n<div style=\"width: 1200px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Circle-trig6.svg#\/media\/File:Circle-trig6.svg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/9d\/Circle-trig6.svg\/1200px-Circle-trig6.svg.png\" alt=\"Circle-trig6.svg\" width=\"1200\" height=\"834\" \/><\/a><p class=\"wp-caption-text\">By This is a <a class=\"extiw\" title=\"en:vector graphics\" href=\"\/\/en.wikipedia.org\/wiki\/vector_graphics\">vector graphic<\/a> version of <a class=\"new\" title=\"File:Circle-trig6.png (page does not exist)\" href=\"\/\/commons.wikimedia.org\/w\/index.php?title=File:Circle-trig6.png&amp;action=edit&amp;redlink=1\">Image:Circle-trig6.png<\/a> by <a title=\"User:Tttrung\" href=\"\/\/commons.wikimedia.org\/wiki\/User:Tttrung\">user:Tttrung<\/a> which was licensed under the <a class=\"mw-redirect\" title=\"GNU Free Documentation License\" href=\"\/\/commons.wikimedia.org\/wiki\/GNU_Free_Documentation_License\">GFDL<\/a>. Based on <a class=\"extiw\" title=\"en:Image:Circle-trig6.png\" href=\"\/\/en.wikipedia.org\/wiki\/Image:Circle-trig6.png\">en:Image:Circle-trig6.png<\/a>, which was donated to Wikipedia under GFDL by <a title=\"User:Stevenj\" href=\"\/\/commons.wikimedia.org\/wiki\/User:Stevenj\">Steven G. Johnson<\/a>. &#8211; This is a <a class=\"extiw\" title=\"en:vector graphics\" href=\"\/\/en.wikipedia.org\/wiki\/vector_graphics\">vector graphic<\/a> version of <a class=\"new\" title=\"File:Circle-trig6.png (page does not exist)\" href=\"\/\/commons.wikimedia.org\/w\/index.php?title=File:Circle-trig6.png&amp;action=edit&amp;redlink=1\">Image:Circle-trig6.png<\/a> by <a title=\"User:Tttrung\" href=\"\/\/commons.wikimedia.org\/wiki\/User:Tttrung\">user:Tttrung<\/a> which was licensed under the <a class=\"mw-redirect\" title=\"GNU Free Documentation License\" href=\"\/\/commons.wikimedia.org\/wiki\/GNU_Free_Documentation_License\">GFDL<\/a>.\u00a0; Based on <a class=\"extiw\" title=\"en:Image:Circle-trig6.png\" href=\"\/\/en.wikipedia.org\/wiki\/Image:Circle-trig6.png\">en:Image:Circle-trig6.png<\/a>, which was donated to Wikipedia under GFDL by <a title=\"User:Stevenj\" href=\"\/\/commons.wikimedia.org\/wiki\/User:Stevenj\">Steven G. Johnson<\/a>., <a title=\"Creative Commons Attribution-Share Alike 3.0\" href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\">CC BY-SA 3.0<\/a>, https:\/\/commons.wikimedia.org\/w\/index.php?curid=770792<\/p><\/div>\n<p>One main use for my watch faces so far, was, to move objects around a circle to a corresponding time value like I did with the eye movements of Homer in my <a href=\"http:\/\/bulletin-board.de\/watchfaces\/portfolio\/homer-simpson-duff-beer-watch\/\">Homer watch face<\/a>\u00a0or with the hours and minutes bobbles in <a href=\"http:\/\/bulletin-board.de\/watchfaces\/portfolio\/trigoio\/\">TriGoIO<\/a>.<\/p>\n<p>I needed a function to place an object with the x and y coordinates in position of a circle to a given value of time. To do this, I needed sine, cosine\u00a0and\u00a0\u03c0.<\/p>\n<div style=\"width: 740px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Sine_curve_drawing_animation.gif#\/media\/File:Sine_curve_drawing_animation.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/Sine_curve_drawing_animation.gif\" alt=\"Sine curve drawing animation.gif\" width=\"740\" height=\"240\" \/><\/a><p class=\"wp-caption-text\">By <a title=\"User:Kieff\" href=\"\/\/commons.wikimedia.org\/wiki\/User:Kieff\">Lucas V. Barbosa<\/a> &#8211; <span class=\"int-own-work\" lang=\"en\">Own work<\/span>, Public Domain, https:\/\/commons.wikimedia.org\/w\/index.php?curid=21360683<\/p><\/div>\n<h2>The\u00a0seconds<\/h2>\n<p>To move Homer&#8217;s eyes by seconds, we use the WatchMaker variable {ds}, which represents the seconds in a minute from 0 to 60.<\/p>\n<p>Because we want to calculate the x and y coordinates to place the object depending of the seconds, we need to use the sine and cosine functions.<\/p>\n<p>As the illustration above shows, a full circle is <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=2+%5Cpi&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"2 &#92;pi\" class=\"latex\" \/>.<\/p>\n<p>To move an object around a circle we need values from <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=0&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"0\" class=\"latex\" \/> to <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=2+%5Cpi&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"2 &#92;pi\" class=\"latex\" \/>, so we need to convert the 0 to 60 seconds to a value from 0 to 1 and multiply this with <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=2+%5Cpi&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"2 &#92;pi\" class=\"latex\" \/>. So 60 seconds would be represented by 1 after the conversion which would result in <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=2+%5Cpi&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"2 &#92;pi\" class=\"latex\" \/> when multiplied with <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=2+%5Cpi&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"2 &#92;pi\" class=\"latex\" \/>, which is the full circle position.<\/p>\n<p>To convert the seconds, we simple have to multiply them by <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=%5Cfrac%7B1%7D%7B60%7D&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"&#92;frac{1}{60}\" class=\"latex\" \/>. The formula, where &#8220;ds&#8221; stands for the seconds, is:\u00a0<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"ds * &#92;frac{1}{60} * 2 &#92;pi\" class=\"latex\" \/>.<\/p>\n<p>To get the horizontal position in the clockwise movement we use the cosine function and we use the sine function for the vertical position.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=x+%3D+%5Ccos%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"x = &#92;cos(ds * &#92;frac{1}{60} * 2 &#92;pi)\" class=\"latex\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=y+%3D+%5Csin%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"y = &#92;sin(ds * &#92;frac{1}{60} * 2 &#92;pi)\" class=\"latex\" \/><\/p>\n<p>Because the clock begins counting at the top of the watch face, we\u00a0need to subtract <img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=%5Cfrac%7B%5Cpi%7D%7B2%7D&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"&#92;frac{&#92;pi}{2}\" class=\"latex\" \/> inside the cosine and sine functions.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=x+%3D+%5Ccos%28%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29+-+%5Cfrac%7B%5Cpi%7D%7B2%7D%29&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"x = &#92;cos((ds * &#92;frac{1}{60} * 2 &#92;pi) - &#92;frac{&#92;pi}{2})\" class=\"latex\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=y+%3D+%5Csin%28%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29+-+%5Cfrac%7B%5Cpi%7D%7B2%7D%29&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"y = &#92;sin((ds * &#92;frac{1}{60} * 2 &#92;pi) - &#92;frac{&#92;pi}{2})\" class=\"latex\" \/><\/p>\n<p>That&#8217;s it.<\/p>\n<p>Of course you can control the size of the circle by simply multiplying a desired value to it.<br \/>\nAnd if you wish to change the position of the circle, just add or subtract a value.<br \/>\nAnd if you would like\u00a0to use hours, just use the {dh} variable and divide by 12 instead of 60.<\/p>\n<h2>Homer&#8217;s eyes<\/h2>\n<p>For Homer&#8217;s eyes in the <a href=\"http:\/\/bulletin-board.de\/watchfaces\/portfolio\/homer-simpson-duff-beer-watch\/\">Homer watch face<\/a>, which have a specific size and position, I&#8217;ve used this formula:<\/p>\n<p>Homer&#8217;s left eye:<br \/>\n<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=x+%3D+-48+%2B+%5Ccos%28%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29+-+%5Cfrac%7B%5Cpi%7D%7B2%7D%29+%2A+25&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"x = -48 + &#92;cos((ds * &#92;frac{1}{60} * 2 &#92;pi) - &#92;frac{&#92;pi}{2}) * 25\" class=\"latex\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=y+%3D+-42+%2B+%5Csin%28%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29+-+%5Cfrac%7B%5Cpi%7D%7B2%7D%29+%2A+25&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"y = -42 + &#92;sin((ds * &#92;frac{1}{60} * 2 &#92;pi) - &#92;frac{&#92;pi}{2}) * 25\" class=\"latex\" \/><\/p>\n<p>Homer&#8217;s right eye:<br \/>\n<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=x+%3D+48+%2B+%5Ccos%28%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29+-+%5Cfrac%7B%5Cpi%7D%7B2%7D%29+%2A+25&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"x = 48 + &#92;cos((ds * &#92;frac{1}{60} * 2 &#92;pi) - &#92;frac{&#92;pi}{2}) * 25\" class=\"latex\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/s0.wp.com\/latex.php?latex=y+%3D+-42+%2B+%5Csin%28%28ds+%2A+%5Cfrac%7B1%7D%7B60%7D+%2A+2+%5Cpi%29+-+%5Cfrac%7B%5Cpi%7D%7B2%7D%29+%2A+25&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"y = -42 + &#92;sin((ds * &#92;frac{1}{60} * 2 &#92;pi) - &#92;frac{&#92;pi}{2}) * 25\" class=\"latex\" \/><\/p>\n<p>The same in Lua script for WatchMaker as follows.<\/p>\n<p>Tap on the object and set the values for &#8220;Position X&#8221; and &#8220;Position Y&#8221; to:<br \/>\n<pre><code class=\"lua\">x=\"-48 + math.cos(({ds}*0.016666*math.pi*2)- math.pi\/2) * 25\"<br \/>\ny=\"-42 + math.sin(({ds}*0.016666*math.pi*2)- math.pi\/2) * 25\"<\/code><\/pre><\/p>\n<p>And for the other eye:<br \/>\n<pre><code class=\"lua\">x=\"48 + math.cos(({ds}*0.016666*math.pi*2)- math.pi\/2) * 25\"<br \/>\ny=\"-42 + math.sin(({ds}*0.016666*math.pi*2)- math.pi\/2) * 25\"<\/code><\/pre><\/p>\n<h2>Updates<\/h2>\n<p>Additional formula:\u00a0<a href=\"http:\/\/bulletin-board.de\/watchfaces\/move-objects-in-a-circle-smoothly\/\">Move objects in a circle smoothly<\/a><br \/>\nAlternative formula:\u00a0<a href=\"http:\/\/bulletin-board.de\/watchfaces\/moving-around-the-easy-way\/\">Moving around &#8211; the easy way<\/a><\/p>\n<div class=\"twoclick-intro\"><div class=\"sharedaddy\">\n<h3 class=\"sd-title\">Like this on:<\/h3>\n<p>For privacy save likes click 2 times. Hover the <em>i<\/em> button for further information.\n<\/div>\n<\/div><div class=\"twoclick_social_bookmarks_post_319 social_share_privacy clearfix 1.6.4 locale-en_US sprite-en_US\"><\/div><div class=\"twoclick-js\"><script type=\"text\/javascript\">\/* <![CDATA[ *\/\njQuery(document).ready(function($){if($('.twoclick_social_bookmarks_post_319')){$('.twoclick_social_bookmarks_post_319').socialSharePrivacy({\"services\":{\"facebook\":{\"status\":\"on\",\"txt_info\":\"2 clicks for more privacy: The first click activates the like button, which already sends information to Facebook. The second click gives this content a Like.\",\"perma_option\":\"off\",\"action\":\"like\",\"language\":\"en_US\"},\"gplus\":{\"status\":\"on\",\"txt_info\":\"2 clicks for more privacy: The first click activates the like button, which already sends information to Google. The second click gives this content a Like.\",\"perma_option\":\"off\",\"referrer_track\":\"\"},\"pinterest\":{\"status\":\"on\",\"the_excerpt\":\"Back to trigonometry  #circle #geometry #math #trigonometry\",\"txt_info\":\"2 clicks for more privacy: The first click activates the like button, which already sends information to Pinterest. The second click gives this content a Like.\",\"perma_option\":\"off\",\"media\":\"https:\\\/\\\/upload.wikimedia.org\\\/wikipedia\\\/commons\\\/thumb\\\/9\\\/9d\\\/Circle-trig6.svg\\\/1200px-Circle-trig6.svg.png\"}},\"txt_help\":\"If you activate these fields by clicking, information will be send to Facebook, Twitter, Pinterest or Google. Click on the <em>i<\\\/em> button for further information.\",\"settings_perma\":\"Permanently activate the like buttons:\",\"info_link\":\"http:\\\/\\\/www.heise.de\\\/ct\\\/artikel\\\/2-Klicks-fuer-mehr-Datenschutz-1333879.html\",\"uri\":\"https:\\\/\\\/bulletin-board.de\\\/watchfaces\\\/back-to-trigonometry\\\/\",\"post_id\":319,\"post_title_referrer_track\":\"Back+to+trigonometry\",\"display_infobox\":\"on\"});}});\n\/* ]]> *\/<\/script><\/div>","protected":false},"excerpt":{"rendered":"<p>Since I&#8217;m scripting watch faces for smart watches, I was confronted with mathematical issues from my school days nearly 30\u00a0years ago. The basics The circle is\u00a0the main geometric form to support using watch faces. And so I was confronted with\u00a0\u03c0,\u00a0sine, angles and some other things from the trigonometry. One main use for my watch faces&hellip; <a href=\"https:\/\/bulletin-board.de\/watchfaces\/back-to-trigonometry\/\">Continue reading <span class=\"screen-reader-text\">Back to trigonometry<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1,72],"tags":[84,83,82,81],"class_list":["post-319","post","type-post","status-publish","format-standard","hentry","category-makers","category-lua","tag-circle","tag-geometry","tag-math","tag-trigonometry"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5aacI-59","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":388,"url":"https:\/\/bulletin-board.de\/watchfaces\/move-objects-in-a-circle-smoothly\/","url_meta":{"origin":319,"position":0},"title":"Move objects in a circle smoothly","author":"Tamio Honma","date":"February 11, 2016","format":false,"excerpt":"Some days ago, I posted an article called \"Back to trigonometry\" about moving objects in a circle by seconds, minutes or hours with a trigonometric formula. Today I write about the making of my new watch face Burner. Before writing about trigonometry again, I describe the production of the asset\u2026","rel":"","context":"In &quot;For the Makers&quot;","block_context":{"text":"For the Makers","link":"https:\/\/bulletin-board.de\/watchfaces\/category\/makers\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/Burner-Photoshop-300x223.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/Burner-Photoshop-300x223.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/Burner-Photoshop-300x223.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/Burner-Photoshop-300x223.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":415,"url":"https:\/\/bulletin-board.de\/watchfaces\/moving-around-the-easy-way\/","url_meta":{"origin":319,"position":1},"title":"Moving around &#8211; the easy way","author":"Tamio Honma","date":"February 20, 2016","format":false,"excerpt":"In my recent\u00a0articles Back to Trigonometry\u00a0and\u00a0Move objects in a circle smoothly, I described a formula to move objects around a circle. Since WatchMaker also offers rotation values in degrees for time, we can simplify those formulas and make them more efficient to calculate. In the original formulas I've used {ds},\u2026","rel":"","context":"In &quot;For the Makers&quot;","block_context":{"text":"For the Makers","link":"https:\/\/bulletin-board.de\/watchfaces\/category\/makers\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":451,"url":"https:\/\/bulletin-board.de\/watchfaces\/rotate-forms-for-round-watch-faces\/","url_meta":{"origin":319,"position":2},"title":"Rotate forms for round watch faces","author":"Tamio Honma","date":"February 29, 2016","format":false,"excerpt":"Especially in the beginning of designing round watch faces, I had to get used to place forms to\u00a0the right place in a circle. This is needed for markers, numbers and some\u00a0decoration elements. Photoshop doesn't offer circular guide lines or other help functions for these kind of layouts. In fact, it's\u2026","rel":"","context":"In &quot;Photoshop&quot;","block_context":{"text":"Photoshop","link":"https:\/\/bulletin-board.de\/watchfaces\/category\/makers\/photoshop\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/rotate-hour-3.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/rotate-hour-3.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/rotate-hour-3.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/rotate-hour-3.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/rotate-hour-3.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":367,"url":"https:\/\/bulletin-board.de\/watchfaces\/supporting-round-and-square-watches-in-one-watch-face\/","url_meta":{"origin":319,"position":3},"title":"Supporting round and square watches in one watch face","author":"Tamio Honma","date":"February 9, 2016","format":false,"excerpt":"Shortly after I've released my Homer watch face for round smart watches, a user suggested that I should support square watches as well. So I did. It doesn't matter, if you usually design your watch faces on a square watch or on a round one. You can support both watches\u2026","rel":"","context":"In &quot;For the Makers&quot;","block_context":{"text":"For the Makers","link":"https:\/\/bulletin-board.de\/watchfaces\/category\/makers\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/duff_0000_Rahmen-150x150.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":298,"url":"https:\/\/bulletin-board.de\/watchfaces\/bouncing-seconds\/","url_meta":{"origin":319,"position":4},"title":"Bouncing seconds","author":"Tamio Honma","date":"February 7, 2016","format":false,"excerpt":"When I thought I was finished with the Homer watch face, I stumbled upon a video of the real Homer clock and saw a bouncing seconds hand. https:\/\/www.youtube.com\/watch?v=mEpl94fHuKw So I stopped my intention to load the watch face up and made the hand bounce like as follows: I set the\u2026","rel":"","context":"In &quot;For the Makers&quot;","block_context":{"text":"For the Makers","link":"https:\/\/bulletin-board.de\/watchfaces\/category\/makers\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/mEpl94fHuKw\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":710,"url":"https:\/\/bulletin-board.de\/watchfaces\/multiple-colors-ucolor\/","url_meta":{"origin":319,"position":5},"title":"How to use multiple colors based on the new user color selector for {ucolor}","author":"Tamio Honma","date":"April 4, 2017","format":false,"excerpt":"The Watchmaker app was\u00a0updated some weeks ago and introduced a new cool color selector right inside the app. This is very convenient for both: The users and the designers \/\u00a0developers. As a developer you just have to use the variable {ucolor} instead of a color code or your own color\u2026","rel":"","context":"In &quot;Editor&quot;","block_context":{"text":"Editor","link":"https:\/\/bulletin-board.de\/watchfaces\/category\/makers\/editor\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2017\/04\/ucolor.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/comments?post=319"}],"version-history":[{"count":49,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts\/319\/revisions"}],"predecessor-version":[{"id":427,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts\/319\/revisions\/427"}],"wp:attachment":[{"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/media?parent=319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/categories?post=319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/tags?post=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}