{"id":329,"date":"2022-01-31T02:05:13","date_gmt":"2022-01-31T07:05:13","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/?page_id=329"},"modified":"2022-02-02T02:13:21","modified_gmt":"2022-02-02T07:13:21","slug":"shaping-functions","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/daily-notes\/01-31-begin-again-time\/shaping-functions\/","title":{"rendered":"Shaping Functions"},"content":{"rendered":"<h3>Shaping Functions<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-431\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/02\/windows-spinning.gif\" alt=\"\" width=\"160\" height=\"110\" \/><\/p>\n<p><strong>Shaping functions<\/strong> (also called easing functions, tweens, and unit generators) can be used to create expressive nonlinear movement. They are a key building block of animation \u2014 it\u2019s what people are referring to when they talk about \u201cease-in, ease-out\u201d. In this lecture we consider the (very simple!) code necessary to make them.<\/p>\n<p><iframe loading=\"lazy\" title=\"6. Slow In &amp; Slow Out - 12 Principles of Animation\" src=\"https:\/\/www.youtube.com\/embed\/fQBFsTqbKhY?feature=oembed\" width=\"840\" height=\"473\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-330\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/1_53GgH9lFyLuj5QNT8KgxrQ.gif\" alt=\"\" width=\"600\" height=\"341\" \/><\/p>\n<p>About 20 years ago,\u00a0<a href=\"http:\/\/robertpenner.com\/easing\/\">Robert Penner released code<\/a>\u00a0for a bunch of common easing functions. You\u2019ll see them everywhere; there are implementations for every computer language:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-331\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/easing.gif\" alt=\"\" width=\"640\" height=\"480\" \/><\/p>\n<p>It can be interesting to control different properties of movement (e.g. x and y) with different easing functions.\u00a0<a href=\"https:\/\/spicyyoghurt.com\/tools\/easing-functions\">This interactive demo<\/a>\u00a0shows that.<\/p>\n<p>Some of the most useful easing functions go back-and-forth:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-332\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/4947823a1ac8ddef3a55ef7042f4edcf.gif\" alt=\"\" width=\"600\" height=\"338\" \/><\/p>\n<ul>\n<li>You can produce easing functions\u00a0<em>trivially<\/em>\u00a0with something as simple as the\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/map\"><em>map<\/em><\/a>() function, squaring and square rooting,\u00a0<em><a href=\"https:\/\/p5js.org\/reference\/#\/p5\/sq\">sq<\/a><\/em>() and\u00a0<em><a href=\"https:\/\/p5js.org\/reference\/#\/p5\/sqrt\">sqrt<\/a><\/em>(). Boom, done.<\/li>\n<li>For a wider range of options, Luke DuBois\u2019\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\"><em>p5.js-func<\/em><\/a>\u00a0(JavaScript) is a proper p5.js library for easing functions which you can include into your project. We\u2019ll discuss this in a few minutes, below.<\/li>\n<\/ul>\n<p><strong>For my own 12-minute overview of this topic<\/strong>\u00a0that you can view on your own time, see\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=wJRgAs6rbUY\">this video<\/a>:<\/p>\n<p><iframe loading=\"lazy\" title=\"Shaping Functions in p5.js\" src=\"https:\/\/www.youtube.com\/embed\/wJRgAs6rbUY?feature=oembed\" width=\"840\" height=\"473\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/p5.createloop\">p5-createloop<\/a>\u00a0(which we are using to generate GIF loops for us) provides a useful number called\u00a0<strong><em>animLoop.progress<\/em><\/strong>, valued from 0\u20261, which represents the percentage of how far we are in the loop at any given moment. 0 represents the beginning of the loop, 1 is the end.<\/p>\n<p>Here\u2019s a\u00a0sketch showing the use of\u00a0<em>animLoop.progress<\/em>\u00a0[@<a href=\"https:\/\/openprocessing.org\/sketch\/1464775\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/EmjMT6z_P\">Editor.p5<\/a>] It also introduces some of the simplest possible shaping functions (<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/sq\">sq<\/a>\u00a0and\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/sqrt\">sqrt<\/a>):<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-333\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/c93ebcc4-54dd-47f8-a70d-fb4c72e1a2b9.gif\" alt=\"\" width=\"600\" height=\"400\" \/><\/p>\n<p>This sketch [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464779\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/Vr8Wop-1Q\">Editor.p5<\/a>] demonstrates some ways in which the <em>animLoop.progress<\/em> variable can be used to govern many different kinds of visual properties\u2014 such as size, angle, rotation, opacity, count, etc.:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-334\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/b79a43b0-5601-43e1-812f-ba55702f1e61.gif\" alt=\"\" width=\"600\" height=\"400\" \/><\/p>\n<p>Here\u2019s a reminder [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464781\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/s42vcR_pO\">Editor.p5<\/a>] that you can eliminate visual discontinuity by going all the way offscreen:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-321\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/5cb33ff4-4fed-493f-abe4-ae6596b02144.gif\" alt=\"\" width=\"600\" height=\"300\" \/><\/p>\n<p>The\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\"><em>p5.js-func<\/em><\/a> library gives us a very wide range of easing functions. (<em>To use it in OpenProcessing you&#8217;ll need to upload a copy of p5.func.js to your sketch, and link it correctly with the OP Libraries selector.<\/em>)<\/p>\n<ul>\n<li><a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/#reference\">p5-func reference and download<\/a><\/li>\n<li>See Luke\u2019s audiovisual animation demo [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464794\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/OycW5EdIs\">Editor.p5<\/a>]<\/li>\n<li>Golan\u2019s\u00a0ultra-minimal p5.func demo [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464785\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/hgWwANeyG\">Editor.p5<\/a>]<\/li>\n<li>Golan\u2019s\u00a0plot demo [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464789\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/_D7c9PM2-\">Editor.p5<\/a>]<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-335\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/Screen-Shot-2021-03-03-at-1.16.08-PM.png\" alt=\"\" width=\"600\" height=\"453\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/Screen-Shot-2021-03-03-at-1.16.08-PM.png 1020w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/Screen-Shot-2021-03-03-at-1.16.08-PM-636x480.png 636w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/Screen-Shot-2021-03-03-at-1.16.08-PM-768x580.png 768w\" sizes=\"(max-width: 600px) 85vw, 600px\" \/><\/p>\n<p>Here\u2019s a sketch [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464806\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/2omZJhdjD\">Editor.p5<\/a>] that uses both the p5-func library for easing functions, <strong>AND<\/strong>\u00a0the p5-createloop library to generate GIFs. Note how some of the easing functions take parameters (knobs) that articulate how they perform.<em>\u00a0You might want to use this as a technical template for your homework\u2026<\/em>..<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-336\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/9d14ac8c-cfe7-43fc-b739-5431451ed3df.gif\" alt=\"\" width=\"600\" height=\"500\" \/><\/p>\n<p>Here\u2019s a sketch [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464811\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/VtoIchw8Zo\">Editor.p5<\/a>] showing the use of shaping functions to alter the periodic behavior of a sinusoid. Notice how you can create smooth periodic motions with a \u201climp\u201d or other irregular timing:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-337\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/shaped-sinusoid.gif\" alt=\"\" width=\"600\" height=\"600\" \/><\/p>\n<p>\u2014 Of course, you also have this template project for a seamless noise loop: [@<a href=\"https:\/\/openprocessing.org\/sketch\/1464818\">OpenProcessing<\/a> \/ @<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/KAF80owRC\">Editor.p5<\/a>]:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-317\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/01\/ad98f619-d906-46d8-8f63-fc2e21e69b3f.gif\" alt=\"\" width=\"600\" height=\"600\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shaping Functions Shaping functions (also called easing functions, tweens, and unit generators) can be used to create expressive nonlinear movement. They are a key building block of animation \u2014 it\u2019s what people are referring to when they talk about \u201cease-in, ease-out\u201d. In this lecture we consider the (very simple!) code necessary to make them. About &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/daily-notes\/01-31-begin-again-time\/shaping-functions\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Shaping Functions&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":307,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/329"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/comments?post=329"}],"version-history":[{"count":11,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/329\/revisions"}],"predecessor-version":[{"id":436,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/329\/revisions\/436"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/pages\/307"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/media?parent=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}