GIF Loop Coder - Introduction

[00:00] GIF Loop Coder, or GLC, is an application we're creating looping animated GIFs with JavaScript and HTML5 Canvas. You can download the program for Windows, Mac, or Linux at gifloopcoder.com. It's also opensourced to github.com.

[00:14] When you download and open the program, you'll see an interface like this. Across the top is a toolbar. On the left is the code editor. To the right of that is the canvas panel, and then the properties panel.

[00:24] Code editor is pre-loaded with a basic template. This template creates a non-GLC function that gets called Kick off your Animation. This gets past an instance of a GLC object that has some useful properties and methods.

[00:36] You can see some of those commented out and some assigned to local variables for ease of use. GLC has a render list which has been assigned to the local variable list here. You add shapes to the render list by calling various add methods.

[00:50] Let's add a circle by saying, "List, add circle." Hit the compile button, or press control, enter, and there's your circle. An important concept in GLC is that all objects have default properties that will be used if you don't override them.

[01:05] To override the defaults, pass in a simple JavaScript object that defines the properties you want to change. Here I'll set X to width, divided by two, and Y to height, divided by two. Note that width and height were taken from GLCW and GLCH above.

[01:21] Control, enter, and now our circle is centered. Let's change the radius by setting radius to 150. The style properties match the HTML Canvas drawing API. To change the color of the circle, you can pass in, "Fill style, yellow." Now we have a yellow circle.

[01:39] By default, most shapes are filled and not stroked. This can be changed with the stroke and fill properties. I'll set stroke true, stroke style, red, and line width, 20. We can turn fill off by saying, "Fill, false," but I'll leave it on.

[01:57] There are lots of other properties you can assign to change the look and style of the circle, but let's take a look at how to animate a shape. Animation occurs when something visually changes over time.

[02:08] Virtually all the properties of every shape can be animated. To change a property, you will need to have two values -- what you will see at the start of the animation, and what you will see at the end.

[02:16] The simplest way to do that is to pass in an array to the property you want to animate. Instead of a single value, 150 for radius, let's pass in the array 20/150. Now when we compile it, we have animation.

[02:28] You might have noticed the progress bar moving across the top of the canvas panel before. Let's pause the animation. We can now see that the progress bar is actually an interactive slider that lets you step through the animation, frame-by-frame.

[02:41] Note that when the value of the slider is zero, the radius of the circle is at its smallest value, 20. As it approaches the 05 mark, it moves to its largest value, 150. Then back down to 20 when the slider reaches 1. This will create a perfect looping animation every time.

[02:57] Now I'll change the radius back to being fixed. Before, I said that virtually every property can be animated. This includes colors. For the fill style, I'll set an array of yellow and blue. For stroke style, red and cyan. See how the colors smoothly interpolate.

[03:17] Actually, color management is one of the strengths of GLC. I'll have a whole other video just on colors. You can create a number of objects, easily thousands, in a single animation. You can animate any number of properties in all of them.

[03:32] Here I'll create a four-loop with 100 iterations. In that, I'll add a star to the list. For X and Y, I'll set it to math random, times width, and math random, times height. Stars have an outer radius and inner radius property.

[03:49] I'll assign outer, 30 plus math random times 30, and inner, 10 plus math random times 20. For fill style, I'll use one of the color methods in GLC color.radomrgb. For rotation, an array of 0180. Control, enter, and we have 100 random stars spinning back and forth.

[04:14] Now let's look at the top two sliders in the properties panel. The duration slider controls the length and seconds of the animation. It defaults to two seconds, but you can adjust it anywhere from half a second up to 30 seconds.

[04:27] The FPS slider controls how many frames will be used in every single second of animation. It defaults to 30, which will generally give you an excellent quality animation. However, you can push this as high as 60 frames per second, if you have the need for that.

[04:43] Depending on the size and complexity of the animation, the frame rate you'll see in the canvas panel may be slower than the frame rate you set. But the exported GIF will usually be pretty close to the target frame rate, because it doesn't need to do all that calculating and rendering. It just flips from one pre-rendered frame to the next.

[05:00] You can also lower the FPS down to a single frame per second. Frame rate has a very direct impact on the file size of your exported GIF. You can go down as low as 20 FPS and still often have a relatively smooth animation. It's far smaller than the same animation at 30 FPS. You'll have to work out the trade-off between quality and size.

[05:21] When you have an animation you like, you can export it as an animated GIF. Hit pause, or control space, and then the Make GIF button, or control G. The animation will play through a single time, capturing each frame and encoding it into a GIF.

[05:36] When it's done, it will display that GIF, along with some information about the animation, including the estimated file size. This is useful if you plan to upload the animation to a site that has a size limit on GIFs. Hit the save button to save your animation.

[05:51] There are other output formats beyond GIF that I'll discuss in another video. Now we look in that folder and there's our animated GIF. That's a quick start. Check out the documentation at gifloopcoder.com/docs for a lot more detail on all the available objects, properties on each one, and lots of other tips and tricks.