Name: GIF Loop Coder - Interpolation
Uploaded: 2016-03-06T11:35:23-06:00
Description: This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change that interpolation to add variety to your animations.

GIF Loop Coder - Introduction

GIF Loop Coder - Animating with Arrays

GIF Loop Coder - Interpolation

GIF Loop Coder - Animation Functions

Colors in GIF Loop Coder

Shape Objects in GIF Loop Coder

Parenting in GIF Loop Coder

GIF Loop Coder Single Mode

The Phase Property in GIF Loop Coder

Outputting Animations from GIF Loop Coder

Custom Drawing in GIF Loop Coder

GIF Loop Coder for Creating Animation

This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change that interpolation to add variety to your animations.

https://app.egghead.io/api/v1/lessons/javascript-gif-loop-coder-interpolation/subtitles

[00:00] Interpolation is the act of finding intermediate data points within a range of data. When we set up an animation in GIF Loop Coder, we're giving an array of two values for properties such as width or fill style. This forms a range by defining start and end values.

[00:15] As we move through the animation, GLC needs to find the current value of that property within that range for that moment of animation. It does that internally through a few functions that perform this interpolation.

[00:26] Here, I've set up three circles that just move back and forth across the canvas. By default, GLC's interpolation returns the start value at the beginning of the animation, the end value at the middle of the animation, and back down to the start value at the completion of the animation. When it starts the second loop, the value is back to where it started and it loops perfectly.

[00:47] In GLC, this is known as bounce mode interpolation, because it goes from one value to another and then bounces back to the start.

[00:54] There's also some easing in there. Easing causes the animation to start off slowly and then speed up. It slows down again as it approaches the ending value, and speeds up once again as it moves back towards the starting value. Finally, it slows down again as it returns to that starting value.

[01:11] Also, notice that all animations on all objects are perfectly in sync. They all start, speed up, slow down, reverse and end at exactly the same time.

[01:20] All these default behaviors make it super easy to create simple animations in GLC by simply supplying a range of values for a property. But there are several ways to change how that interpolation is done and create more interesting animations.

[01:33] Two of these techniques affect the animation as a whole and two are applied to individual objects.

[01:38] First, let's look at the overall animation ones. These can be directly controlled in real time by controls in the Properties panel, the Mode drop down and the Easing check box.

[01:48] I said that the default interpolation mode is bounce, and you can see that the mode drop down is set to bounce. Let's change that to single and see what happens.

[01:57] This changes the interpolation function to simply return the start value at the beginning of the animation and the end value at the end of the animation, as you can see when we scrub through it. But when we play this animation, you see that we've lost all that automatic looping. When the second loop starts, the object jumps back to its starting value.

[02:17] This may seem useless at first, but single mode can create some fantastic animations that have a very different feel than bounce mode animations. It just takes a bit of manual work to make sure that they loop correctly.

[02:28] I won't go into depth on it here as there'll be a whole other video on that subject.

[02:34] Now, going back to bounce mode, let's look at easing. An animation with easing looks so natural that it's easy to overlook the fact that anything special is happening there. Circles are just naturally moving back and forth. But let's see how it looks if we turn easing off.

[02:47] It's kind of jarring. The objects are moving at the exact same speed at all times. They hit the end of the animation at full speed and go back in the opposite direction at full speed. Looks unnatural. But with easing, things just seem more correct.

[03:02] Easing works on single mode as well. Turn it off and you can see these straight linear movement.

[03:07] In general, bounce mode animations almost all look better with easing, but single mode animations often benefit from turning it off. But always be willing to experiment with different settings and see what effects they create.

[03:19] It's worth noting, too, how you can set these behaviors in your code. You notice that among the commented out functions up at the top are calls to GLC's set mode and GLC's set easing. Note that right now we're in single mode with easing off. But if I recompile by pressing the Compile button or Control Enter, we're back to the default of bounce mode and easing on.

[03:41] If you decide that your animation looks better in single mode or without easing, you can set that in the code, so that it remains a permanent part of the sketch.

[03:49] Now, I want to recompile. We're back to single mode with no easing. Note also that the Properties panel has updated to reflect this.

[03:58] In the same way, you can set the duration, frame rate and other properties with similar functions. I'll set these back to the defaults and we'll look at the properties that affect the interpolation of individual objects.

[04:10] First is speed mult. Again, note that all objects are perfectly in sync. They start, reverse, and end at the same time, and move at the same speed. Speed mult lets you change the speed that an object moves.

[04:23] As its name suggests, it multiplies the speed by a given factor. If I set speed mult two in the second circle here, you can see that it's moving faster than the other two. In fact, you can see that it completes two full back and forth cycles in the same time the other circles complete one.

[04:39] Setting speed mult to three in the third object causes that one to move three times as fast. For bounce mode, automatic perfect looping is maintained, well, as long as you use integers for speed mult values.

[04:52] If we set this middle one to 1.5, for example, you can see that it completes 1.5 cycles, and then jumps back to beginning. But you can see how it's just a couple lines of code. We have a far more interesting animation than the original, where everything was perfectly synced.

[05:07] The last property I'll discuss here is phase. Personally, I think phase is one of the most important properties in GLC, allowing for some of the most amazing effects to be created, all by adding just a single line of code.

[05:20] Speed mult causes the animations to run at different speeds, but notice that they still start and end at the same time. Phase keeps the animations at the same speeds, but shifts them in time.

[05:31] It's like the rounds you used to sing in school, such as "Row, Row, Row Your Boat." Everyone is singing the same lines, but they are starting at different times and it creates some wonderful harmony. Phase does the same thing for visually animating objects.

[05:46] If you consider that an animation's time runs from zero to one, the phase value will shift by a certain amount on that timeline. A phase value of 05 will shift the animation so that it starts at the halfway point. I remove the speed mult and I'll add a 05 phase to the middle circle. You can see now that it's totally out of sync with the others. It's at the left side when the others are at the right and vice versa.

[06:12] I'll give that one a phase of 0333, and the last circle a phase of 0666. Now you get a wave motion.

[06:22] Again, phase is super powerful and can be used to create all kinds of cool effects. There will be a whole video just on that.

GIF Loop Coder - Interpolation

Share this video with your friends

Course

GIF Loop Coder for Creating Animation