- Shaping Functions
- Work session
- Small group breakouts
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 — it’s what people are referring to when they talk about “ease-in, ease-out”. In this lecture we consider the (very simple!) code necessary to make them.
About 20 years ago, Robert Penner released code for a bunch of common easing functions. You’ll see them everywhere; there are implementations for every computer language:
It can be interesting to control different properties of movement (e.g. x and y) with different easing functions. This demo shows that.
Some of the most useful easing functions go back-and-forth:
- You can produce easing functions trivially with something as simple as the map() function, squaring and square rooting, sq() and sqrt(). Boom, done.
For my own 12-minute overview of this topic that you can view on your own time, see this video:
p5-createloop (which we are using to generate GIF loops for us) provides a useful number called animLoop.progress, valued from 0…1, 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.
This sketch demonstrates some ways in which the animLoop.progress variable can be used to govern many different kinds of visual properties— such as size, angle, rotation, opacity, count, etc.
Here’s a reminder that you can eliminate visual discontinuity by going all the way offscreen:
The p5.js-func library gives us a very wide range of easing functions:
Here’s a sketch that uses both the p5-func library for easing functions, AND the p5-createloop library to generate GIFs. Note how some of the easing functions take parameters (knobs) that articulate how they perform. You might want to use this as a technical template for your homework…..
Here’s a sketch showing the use of shaping functions to alter the periodic behavior of a sinusoid. Notice how you can create smooth periodic motions with a “limp” or other irregular timing:
— Of course, you still have this template project for a seamless noise loop:
How to use p5func in the Editor:
- Go to https://idmnyu.github.io/p5.js-func/. Download the zip.
- Unzip the archive. Locate p5func.js in its ‘lib’ folder.
- At the https://editor.p5js.org/, create a new sketch (File > New).
- In your sketch, click on the small > character to open up your files.
- Click the V character, select ‘Upload file’.
- Drag the p5func.js into the indicated region.
- In your index.html file, add the p5.func.min.js script to the head. (See the image below.)
Your index.html and project should look like this: