Name: The Phase Property in GIF Loop Coder
Uploaded: 2016-06-10T18:03:44-05:00
Description: In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

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

In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

https://app.egghead.io/api/v1/lessons/javascript-the-phase-property-in-gif-loop-coder/subtitles

[00:00] Let's look at what I think is one of the most powerful features in Gif Loop Coder, a shape object property called phase. As previously discussed, GLC animates objects by changing an inner T value from zero to one and interpolating all animated properties based on the current value of that T.

[00:17] Here I've been setting up a for loop that goes from 0to 10. Inside of that, I'm creating a circle shape. Each circle will be positioned at an x of i times 80 which will spread them out across the canvas and a y of height divided by two. I'll animate the radius of each circle from 5 to 40. Now we have a row of circles growing and shrinking, not bad but not very special.

[00:42] One of the problems is that they're all growing and shrinking at the same time. That's because all of their animations are based on that single internal T value.

[00:50] This is what the phase property lets us change. Phase shifts the value of the T that each object bases its animation on. If I set a phase of i divided by 10, look what we get. The first circle, circle zero, gets a phase of zero, so it operates with a base T value. Circle one gets a phase of 1 divided by 10 or 01, so it's a little bit further along its animation.

[01:15] Circle two gets 02 so it's just a bit further along than that and so on. That's pretty cool.

[01:22] We can amp up this effect by changing the for loop to go to width and incrementing it by two. Then setting x to i directly and phase to i divided by width. All the circles are blending together. Let's change stroke to two, line width to 025, and fill style to white. That's more interesting.

[01:48] We can increase the radius animation to say 20 80 and animate the y position from, say, 100 to 300. I think that's a pretty neat animation just like that.

[02:02] Phase can be used for other things as well. Let's make a star field. I'll set GLC's styles background color to black, then create a for loop of 1,000 stars. Each star will be a circle with a random xy position, fill style of white. To let them twinkle a bit, I'll let their radii animate from 025 to 075. That's a bit unsatisfying. The entire universe seems to be in sync.

[02:39] We can mix it up by giving each star a random phase, to say phase math random. Much better.

[02:50] Phase can be really effective when used with a grid of shapes. This is actually a snippet for creating a grid. Let's use it. This creates a grid of circles that are 50 pixels in diameter. Let's make them a bit smaller, say, 20 and animate their fill style from red to yellow. As is, kind of boring, but let's mess with it a bit.

[03:16] First, we'll say phase equals math random like we did with the stars. That's a cool techno effect. But let's make something more linear with phase equals x divided by width. That's pretty interesting. We can change that to y divided by height obviously. We even reverse the direction by saying minus y divided by height.

[03:47] Or you can combine the two by saying x plus y divided by width plus height. You get a diagonal animation.

[03:58] One of my favorite techniques is to have the phase relate to the distance from the center of the canvas. To find that, we'll go up to just inside the inner for loop and calculate dx as the distance from the current x to the center of the canvas on the x axis and dy as the same on the y axis.

[04:18] We can get the total distance to the center using the Pythagorean theorem. Square the distances on each axis, add them together, and take the square root of that.

[04:29] We set phase to distance divided some arbitrary number, say 300. Now we have an animating ring of color.

[04:38] Change that 300 to, say, 100, that increases the phase values which creates more rings of color. Again, making it negative reverses the effect. Of course since the size and position of each circle is all based on that res variable, we can create a much more high res version of it by changing that to 10. The rest of the code just works.

[05:01] As I said earlier, I consider this one of the most powerful features in GLC, especially when animating a large number of objects.

The Phase Property in GIF Loop Coder

Share this video with your friends

Course

GIF Loop Coder for Creating Animation