{"id":104,"date":"2018-10-20T02:43:56","date_gmt":"2018-10-20T00:43:56","guid":{"rendered":"https:\/\/devwork.space\/?p=104"},"modified":"2018-11-01T22:21:06","modified_gmt":"2018-11-01T21:21:06","slug":"animation-framework-for-my-skateboard-slowly-taking-shape","status":"publish","type":"post","link":"https:\/\/devwork.space\/?p=104","title":{"rendered":"Animation framework for my skateboard slowly taking shape"},"content":{"rendered":"<pre id=\"1539993890864.2327\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">int main() {\r\n\tinitialize();\r\n\r\n\tfor (;;) {\r\n\t\tsequential_animation&lt;animation_loop,\r\n\t\t\trepeat&lt;speed&lt;to_grb888&lt;rainbow_animation&gt;, 8&gt;, 8&gt;,\r\n\t\t\trepeat&lt;speed&lt;to_grb888&lt;rainbow_animation&gt;, 4&gt;, 4&gt;,\r\n\t\t\trepeat&lt;speed&lt;to_grb888&lt;rainbow_animation&gt;, 2&gt;, 2&gt;&gt;();\r\n\t}\r\n\r\n\treturn 0;\r\n}<input id=\"7232.4680983999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539993890864.2327\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<div style=\"width: 840px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-104-1\" width=\"840\" height=\"473\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devwork.space\/wp-content\/uploads\/2018\/10\/VID_20181020_022924.mp4?_=1\" \/><a href=\"https:\/\/devwork.space\/wp-content\/uploads\/2018\/10\/VID_20181020_022924.mp4\">https:\/\/devwork.space\/wp-content\/uploads\/2018\/10\/VID_20181020_022924.mp4<\/a><\/video><\/div>\n<p>I&#8217;m working on animation framework that&#8217;s semi-type driven. If you&#8217;re not sure how it works I&#8217;ll try to explain.<\/p>\n<p>Let&#8217;s examine the <em>rainbow_animation<\/em>, this is an animation object that storing current animation progress. It has three methods:<\/p>\n<ul>\n<li><em>value()<\/em>, that&#8217;s storing current rgb value of animation<\/li>\n<li><em>step()<\/em>, after call step, animation will do one iteration<\/li>\n<li><em>is_finished()<\/em>, hold state of end condition<\/li>\n<\/ul>\n<p>Basic use of <em>rainbow_animation<\/em> will be looking like this:<\/p>\n<pre id=\"1539993601885.4731\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">rainbow_animation animation;\r\nwhile (!animation.is_finished())\r\n{\r\n    const auto current_color = animation.value();\r\n    doSomethingWithColor(current_color);\r\n    animation.step();\r\n}<input id=\"1374.5881063999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539993601885.4731\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>To hide details about animation loop, we can create a templated function like this:<\/p>\n<pre id=\"1539994114075.8394\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">run_animation&lt;doSomethingWithColorFunction, rainbow_animation&gt;()<input id=\"4938.5704114999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539994114075.8394\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>But if we want to run multiple animations we will end with:<\/p>\n<pre id=\"1539994239247.1904\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">run_animation&lt;doSomethingWithColorFunction, rainbow_animation&gt;();\r\nrun_animation&lt;doSomethingWithColorFunction, custom_color_animation&gt;();\r\nrun_animation&lt;doSomethingWithColorFunction, other_color_animation&gt;();<input id=\"4091.7429324999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539994239247.1904\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>Until we&#8217;ll take advantage of variadic template that will call run_annimation multiple times, for every type that we&#8217;ll pass.<\/p>\n<pre id=\"1539994459703.8018\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">sequential_animation&lt;doSomethingWithColorFunction, rainbow_animation, custom_color_animation, other_color_animation&gt;();<input id=\"8108.3079544999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539994459703.8018\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>But what if we want repeat a <em>custom_color_animation <\/em>5 times?<\/p>\n<pre id=\"1539994655386.994\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">sequential_animation&lt;doSomethingWithColorFunction, rainbow_animation, custom_color_animation, custom_color_animation, custom_color_animation, custom_color_animation, custom_color_animation, other_color_animation&gt;();<input id=\"499.6835564999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539994655386.994\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>Is this a little ugly? To fix this problem we can create a class wrapper that will call <em>custom_color_animation<\/em> as many times as we declare.<\/p>\n<pre id=\"1539994924891.452\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">template &lt;animation_interface animation_type, auto times&gt;\r\nclass repeat {\r\n\tstatic_assert(times &gt; 0);\r\n\r\npublic:\r\n\tconstexpr auto value() const noexcept {\r\n\t\treturn m_animation.value();\r\n\t}\r\n\r\n\tvoid step() {\r\n\t\tm_animation.step();\r\n\t\tif (m_animation.is_finished()) {\r\n\t\t\tm_finished = (--m_steps) == 0;\r\n\t\t\tm_animation = decltype(m_animation){};\r\n\t\t}\r\n\t}\r\n\r\n\tconstexpr bool is_finished() const noexcept {\r\n\t\treturn m_finished;\r\n\t}\r\n\r\nprivate:\r\n\tint m_steps = times;\r\n\tanimation_type m_animation;\r\n\tbool m_finished{false};\r\n};<input id=\"254.1984294999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539994924891.452\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>And now we can fix code using repeat wrapper:<\/p>\n<pre id=\"1539994980230.2954\" class=\"prettyprint\" style=\"padding: 10px; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; overflow: auto; background-color: #ffffff; font-size: 13px;\" data-highlight=\"\">sequential_animation&lt;doSomethingWithColorFunction, rainbow_animation, repeat&lt;custom_color_animation, 5&gt;, other_color_animation&gt;();<input id=\"4592.0320894999351\" class=\"cdbx-try-code cdbx-btn-main\" style=\"background-color: #ffffff; margin-bottom: 0; color: #008b8b; border: 1px solid rgba(231, 231, 230, 1); border-radius: 10px; font-size: 13px; height: 30px; min-width: 60px; max-width: 150px; padding: 4px; font-weight: normal; outline: none; display: none; float: right;\" type=\"button\" value=\"Run\" data-code=\"1539994980230.2954\" data-highlight=\"\" data-lang=\"1\" data-filename=\"Filename\" \/><\/pre>\n<p>For palette conversion and animation speed, we can do similar wrappers. You can find more code there: <a href=\"https:\/\/github.com\/dev-0x7C6\/ledboard\/tree\/master\/src\/animation\">https:\/\/github.com\/dev-0x7C6\/ledboard\/tree\/master\/src\/animation<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>int main() { initialize(); for (;;) { sequential_animation&lt;animation_loop, repeat&lt;speed&lt;to_grb888&lt;rainbow_animation&gt;, 8&gt;, 8&gt;, repeat&lt;speed&lt;to_grb888&lt;rainbow_animation&gt;, 4&gt;, 4&gt;, repeat&lt;speed&lt;to_grb888&lt;rainbow_animation&gt;, 2&gt;, 2&gt;&gt;(); } return 0; } I&#8217;m working on animation framework that&#8217;s semi-type driven. If you&#8217;re not sure how it works I&#8217;ll try to explain. Let&#8217;s examine the rainbow_animation, this is an animation object that storing current animation progress. It &hellip; <a href=\"https:\/\/devwork.space\/?p=104\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Animation framework for my skateboard slowly taking shape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[3,2,15,16,13,14],"class_list":["post-104","post","type-post","status-publish","format-standard","hentry","category-bez-kategorii","tag-c20","tag-concepts","tag-ledboard","tag-skateboard","tag-templates","tag-ws2812b"],"_links":{"self":[{"href":"https:\/\/devwork.space\/index.php?rest_route=\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/devwork.space\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devwork.space\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devwork.space\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devwork.space\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":9,"href":"https:\/\/devwork.space\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/devwork.space\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/devwork.space\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devwork.space\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devwork.space\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}