{"id":311,"date":"2016-02-07T18:49:33","date_gmt":"2016-02-07T17:49:33","guid":{"rendered":"http:\/\/bulletin-board.de\/watchfaces\/?p=311"},"modified":"2016-06-18T13:06:27","modified_gmt":"2016-06-18T11:06:27","slug":"color-changing","status":"publish","type":"post","link":"https:\/\/bulletin-board.de\/watchfaces\/color-changing\/","title":{"rendered":"Color changing"},"content":{"rendered":"<p>Shortly after releasing my <a href=\"http:\/\/bulletin-board.de\/watchfaces\/portfolio\/homer-simpson-duff-beer-watch\/\">Homer watch face<\/a>, one user suggested a feature to change the colors of the watch face background.<\/p>\n<p>I liked the idea, so I implemented a color change function, which I describe now.<\/p>\n<h2>Asset production<\/h2>\n<p>The first thing to do, is to remove the colors of\u00a0the graphic assets, which should be affected by the color change function. The graphic assets should be as white as possible and only contain grey scale colors to represent\u00a0structure or shadows. Of course you can use any graphics program. I use Photoshop like so:<\/p>\n<div data-carousel-extra='{&quot;blog_id&quot;:1,&quot;permalink&quot;:&quot;https:\/\/bulletin-board.de\/watchfaces\/color-changing\/&quot;}' id='gallery-1' class='gallery galleryid-311 gallery-columns-3 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1.png'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"182\" src=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-300x182.png\" class=\"attachment-medium size-medium\" alt=\"\" aria-describedby=\"gallery-1-314\" srcset=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-300x182.png 300w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-768x466.png 768w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-840x510.png 840w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-600x364.png 600w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-800x486.png 800w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1.png 901w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" data-attachment-id=\"314\" data-permalink=\"https:\/\/bulletin-board.de\/watchfaces\/color-changing\/photoshop-homer-asset-1\/\" data-orig-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1.png\" data-orig-size=\"901,547\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"photoshop-homer-asset-1\" data-image-description=\"&lt;p&gt;Select the Black&amp;#038;White adjustment layer or dialog.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Black&amp;#038;White adjustment&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1-300x182.png\" data-large-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-1.png\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-314'>\n\t\t\t\tBlack&#038;White adjustment\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2.png'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"180\" src=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-300x180.png\" class=\"attachment-medium size-medium\" alt=\"\" aria-describedby=\"gallery-1-313\" srcset=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-300x180.png 300w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-768x462.png 768w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-840x505.png 840w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-600x361.png 600w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-800x481.png 800w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2.png 895w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" data-attachment-id=\"313\" data-permalink=\"https:\/\/bulletin-board.de\/watchfaces\/color-changing\/photoshop-homer-asset-2\/\" data-orig-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2.png\" data-orig-size=\"895,538\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"photoshop-homer-asset-2\" data-image-description=\"&lt;p&gt;Pick the color to be adjusted. In this case its cyan.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Pick the &amp;#8220;color&amp;#8221; to be converted&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2-300x180.png\" data-large-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-2.png\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-313'>\n\t\t\t\tPick the &#8220;color&#8221; to be converted\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3.png'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"178\" src=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-300x178.png\" class=\"attachment-medium size-medium\" alt=\"\" aria-describedby=\"gallery-1-312\" srcset=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-300x178.png 300w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-768x456.png 768w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-840x499.png 840w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-600x356.png 600w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-800x475.png 800w, https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3.png 894w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" data-attachment-id=\"312\" data-permalink=\"https:\/\/bulletin-board.de\/watchfaces\/color-changing\/photoshop-homer-asset-3\/\" data-orig-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3.png\" data-orig-size=\"894,531\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Homer Asset Color Change\" data-image-description=\"&lt;p&gt;Whiten the area, which should be colored later by script, as far as possible without loosing the shadow and structure information in grey.&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;Whiten it&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3-300x178.png\" data-large-file=\"https:\/\/bulletin-board.de\/watchfaces\/wp-content\/uploads\/2016\/02\/photoshop-homer-asset-3.png\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-312'>\n\t\t\t\tWhiten it\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<p>Please note, that this procedure isn&#8217;t the same as just removing color out of a colored image by pulling down the\u00a0saturation. With the black &amp; white adjustment function, you can control how the color is translated to black, white or a grey color. You can get more information about this in Adobe&#8217;s tutorial:\u00a0<a href=\"https:\/\/helpx.adobe.com\/photoshop\/using\/convert-color-image-black-white.html\">Convert a color image to black and white<\/a>.<\/p>\n<h2>Scripting the color change<\/h2>\n<p>Now, back to WatchMaker: replace the original background image with the new whitened asset.<\/p>\n<h3>Preparing the script<\/h3>\n<p>In the main script we need to\u00a0set up an\u00a0array variable which contains the\u00a0color codes:<\/p>\n<pre><code class=\"lua\">var_color = {'21d5ff', '2160ff', 'c821ff','f2ff21','ffbe21','21ff7f','37ca52','ff2121','b04040','000000','fefefe','999999'}<\/code><\/pre>\n<p>To select\u00a0one of these\u00a0colors, we need an index variable, which contains the index of the first color code as default:<\/p>\n<pre><code class=\"lua\">var_index = 1<\/code><\/pre>\n<p>Now you can set the tint color of the whitened background image to:<\/p>\n<pre><code class=\"lua\">var_color[var_index]<\/code><\/pre>\n<p>This means: Display the color (var_color) of the current index number (var_index).<\/p>\n<p>The white background should be displayed in cyan, because this is the first color of the colors array.<\/p>\n<h3>Implementing the change function<\/h3>\n<p>Now we need a function to change the color.<\/p>\n<p>In the script part we include a very simple color change function, which simply increments the index value (var_index):<\/p>\n<pre><code class=\"lua\">function click_col_change()<br \/>\nvar_index = var_index + 1<br \/>\nend<\/code><\/pre>\n<p>Each time, the function is called, it increments the value of the index by one. It&#8217;s easy to imagine, that we don&#8217;t have infinite colors in our colors array. So we need to reset the index value to the first index number, if the number of available colors are exceeded.<\/p>\n<p>To get the number of colors, we simply have to count the number of array entries with the length function &#8220;#&#8221;.\u00a0To save calculation resources, we store the result of the count in a\u00a0separate\u00a0variable.<\/p>\n<pre><code class=\"lua\">var_num_cols = #var_color<\/code><\/pre>\n<p>Now we can check, if the number of available colors are reached and reset the index variable inside the color change function:<\/p>\n<pre><code class=\"lua\">function click_col_change()<br \/>\nif (var_index &gt;= var_num_cols) then var_index = 0 end<br \/>\nvar_index = var_index + 1<br \/>\nend<\/code><\/pre>\n<p>I thought, the easiest way for the user is to change the color by simply tapping in the middle of the watch face.<\/p>\n<p>The only thing to do is to tap on\u00a0the background image and apply a tap action for scripts which consists of the function call:<\/p>\n<pre><code class=\"lua\">click_col_change()<\/code><\/pre>\n<p>Now, we are done with the background color change function.<\/p>\n<h3>Adding more color changes<\/h3>\n<p>We can use the tint function for any other graphic asset or any other colored elements by simply applying\u00a0<pre><code class=\"lua\">var_color[var_index]<\/code><\/pre> instead of a single color code.<\/p>\n<p>If you want to use corresponding foreground colors, you only need another array of colors with the same amount of colors as the first array of colors.\u00a0I used that for the hours and minutes hand.<\/p>\n<p>Here&#8217;s the complete script:<\/p>\n<pre><code class=\"lua\">var_color = {'21d5ff', '2160ff', 'c821ff','f2ff21','ffbe21','21ff7f','37ca52','ff2121','b04040','000000','fefefe','999999'}<br \/>\nvar_color2 = {'da1a01', 'da1a01','da1a01', 'da1a01','da1a01','da1a01','da1a01','011ada','6069c0','da1a01','da1a01','da1a01'}<br \/>\nvar_num_cols = #var_color<br \/>\nvar_index = 1<\/p>\n<p>function click_col_change()<br \/>\nif (var_index &gt;= var_num_cols) then var_index = 0 end<br \/>\nvar_index = var_index + 1<br \/>\nend<\/code><\/pre>\n<p><script src=\"\/\/repl.it\/embed\/C3bQ\/0.js\"><\/script><\/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_311 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_311')){$('.twoclick_social_bookmarks_post_311').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\":\"\"}},\"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\\\/color-changing\\\/\",\"post_id\":311,\"post_title_referrer_track\":\"Color+changing\",\"display_infobox\":\"on\"});}});\n\/* ]]> *\/<\/script><\/div>","protected":false},"excerpt":{"rendered":"<p>Shortly after releasing my Homer watch face, one user suggested a feature to change the colors of the watch face background. I liked the idea, so I implemented a color change function, which I describe now. Asset production The first thing to do, is to remove the colors of\u00a0the graphic assets, which should be affected&hellip; <a href=\"https:\/\/bulletin-board.de\/watchfaces\/color-changing\/\">Continue reading <span class=\"screen-reader-text\">Color changing<\/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,73],"tags":[80,78,79],"class_list":["post-311","post","type-post","status-publish","format-standard","hentry","category-makers","category-lua","category-photoshop","tag-assets","tag-colors","tag-interaction"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5aacI-51","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":710,"url":"https:\/\/bulletin-board.de\/watchfaces\/multiple-colors-ucolor\/","url_meta":{"origin":311,"position":0},"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":[]},{"id":451,"url":"https:\/\/bulletin-board.de\/watchfaces\/rotate-forms-for-round-watch-faces\/","url_meta":{"origin":311,"position":1},"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":388,"url":"https:\/\/bulletin-board.de\/watchfaces\/move-objects-in-a-circle-smoothly\/","url_meta":{"origin":311,"position":2},"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":367,"url":"https:\/\/bulletin-board.de\/watchfaces\/supporting-round-and-square-watches-in-one-watch-face\/","url_meta":{"origin":311,"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":319,"url":"https:\/\/bulletin-board.de\/watchfaces\/back-to-trigonometry\/","url_meta":{"origin":311,"position":4},"title":"Back to trigonometry","author":"Tamio Honma","date":"February 8, 2016","format":false,"excerpt":"Since I'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\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":"Circle-trig6.svg","src":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/9d\/Circle-trig6.svg\/1200px-Circle-trig6.svg.png","width":350,"height":200,"srcset":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/9d\/Circle-trig6.svg\/1200px-Circle-trig6.svg.png 1x, https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/9d\/Circle-trig6.svg\/1200px-Circle-trig6.svg.png 1.5x, https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/9d\/Circle-trig6.svg\/1200px-Circle-trig6.svg.png 2x, https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/9d\/Circle-trig6.svg\/1200px-Circle-trig6.svg.png 3x"},"classes":[]},{"id":298,"url":"https:\/\/bulletin-board.de\/watchfaces\/bouncing-seconds\/","url_meta":{"origin":311,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts\/311","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=311"}],"version-history":[{"count":6,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":609,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/posts\/311\/revisions\/609"}],"wp:attachment":[{"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bulletin-board.de\/watchfaces\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}