{"id":532,"date":"2020-04-01T14:21:12","date_gmt":"2020-04-01T14:21:12","guid":{"rendered":"http:\/\/diffuse-write-ups\/?p=514"},"modified":"2021-10-03T08:21:42","modified_gmt":"2021-10-03T08:21:42","slug":"move-eased-dot-along-a-curve","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/move-eased-dot-along-a-curve\/","title":{"rendered":"Move eased dot along a curve"},"content":{"rendered":"\n
\n

Demonstration of the effect of timing functions on an animation, using a Bezier curve controller.<\/p>\n\n\n\n

How to use: Drag the handles (green dots) of the control below to adjust the way the red dot runs its loop. It starts and ends in its ‘home’, but the speed may vary, and the dot may even temporarily go backwards. <\/p>\n\n\n\n

\n
\n \n \n <\/path>\n <\/circle>\n <\/circle>\n <\/circle>\n <\/g>\n<\/svg>\n <\/div>\n \n
<\/div>\n <\/div>\n<\/div><\/div>\n\n\n\n

In the Bezier curve, perceived as a graph, the horizontal axis shows the time passed, on a scale of zero (at the start) to one (at the end point). The vertical axis shows the progress in distance covered, also from zero (no progress) to one (loop completed), although progress can dive below zero or exceed the value 1.<\/p>\n\n\n\n

The CSS analogue<\/h3>\n\n\n\n

Perhaps you know Lea Verou’s cubic Bezier tool<\/a> for CSS transitions and animations. In our case, the Bezier curve influences a JavaScript animation, instead of a CSS animation.<\/p>\n\n\n\n

Open paths<\/h3>\n\n\n\n

The curve does not have to be a closed path. However, for a curve that does not end where it has started it makes no sense to define a timing function with undershoot (values smaller than zero) or overshoot (values larger than 1). Therefor in this case the value is clipped to the interval [0, 1].<\/p>\n\n\n\n

Let’s try that out on the path used before in Move a dot along a path<\/a>.<\/p>\n\n\n\n

\n
\n \n <\/path>\n <\/circle>\n<\/svg>\n <\/div>\n \n
<\/div>\n <\/div>\n\n\n\n

Ease sound<\/h2>\n\n\n\n

In the same vein, sound variables may be treated. See this experiment<\/a> to play with easing the frequency of a note, creating a portamento.<\/p>\n","protected":false},"excerpt":{"rendered":"

Demonstration of the effect of timing functions on an animation, using a Bezier curve controller. How to use: Drag the handles (green dots) of the control below to adjust the way the red dot runs its loop. It starts and ends in its ‘home’, but the speed may vary, and the dot may even temporarily […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,50,20,7],"tags":[31,33,15,34],"class_list":["post-532","post","type-post","status-publish","format-standard","hentry","category-animation","category-graphics","category-javascript","category-web-development","tag-bezier","tag-easing","tag-svg","tag-timing-function"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":2,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":571,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/532\/revisions\/571"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}