Name: Shape Objects in GIF Loop Coder
Uploaded: 2016-07-10T08:20:31-05:00
Description: This lesson is a quick tour of the predefined shape objects in GIF Loop Coder.

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 lesson is a quick tour of the predefined shape objects in GIF Loop Coder.

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

[00:00] The core of GIF Loop Coder is the library of shape objects that you can create and animate. Let's take a whirlwind tour of them. All of the objects are created by calling one of the add methods on the glc.renderList object, this has been aliased to list in the template for ease of use. So we can just say list.addRect, run that, and we have a rectangle. All objects have default values that affect how they look and animate. To change the defaults, pass in an object that has the properties you want to change. 

[00:31] Here I'll use an object that has an x and y that will center the rect, and for width I'll give it an animation of 200,100 and a height animation of 100,200, that creates a neat effect. Another simple shape is the oval. I'll just change addRect to addOval, and w and h to rx and ry, these represent the radius on the x and y axes. Probably not the most correct wording, but it gets the concept across. Shapes like these can be stroked or filled. I can say stroked = true, lineWidth = 10, and strokeStyle = red and you can see that. 

[01:15] Of course we can change the fill style, or make it unfilled by saying fill = false. Other types of shapes are more line-based such as the line object created with addLine. This can accept two points defined by x0, y0, and x1, y1, and it will draw a line between the two. Of course you can animate any of these parameters. I'll leave most of them fixed, but let the second y position range from 10 to height-10. 

[01:49] There are also various curved lines, the simplest being addCurve. This takes three points represented by x0, y0, x1, y1, and x2, y2. 0and 2 are the end points, and point 1 is the control point which shapes where the line curves towards. I'll put the end points on the left and ride side of the bottom of the canvas, and I'll animate the control point back and forth along the top of the canvas. This gives us a curve that sways to and fro. 

[02:23] There's also a Bezier curve that takes two control points, as well as an arc shape and a spiral. There are a bunch more complex shapes such as the arrow, heart, star, polygon, gear, etc., all of these have specific parameters that help define those custom shapes. 

[02:40] For example, let's add a gear with addGear. It has the usual x and y, it also has a radius which is pretty straightforward. Obviously you need a way to specify the number of teeth in the gear, which is the teeth parameter, let' say 12. You might want those teeth to be more pronounced, this is done with the toothHeight parameter, set that to 20 and now they're really sticking out. 

[03:04] Then there's toothAngle that controls the slope of the sides of the gear, this is not actually an angle but a number from 0to 1, 0being a straight line to the center, and 1 sloping the maximum possible amount, turning each tooth into a triangle. We can animate this value to see how the different values affect the teeth. 

[03:35] You see a few different shapes with segment in their names, these form some sort of line or curve, but then only draws part of that curve. Segments are automatically animated. For example, we'll create a BezierSegment, you can see the segment of the Bezier curve is automatically animated. You can control the size of that segment with the percent property. Set it higher, and we have a longer segment of the curve moving back and forth. 

[04:01] From there we move on to a few 3D or pseudo-3D objects. The cube object creates a wireframe cube. You can position it in 3D space with the x, y, and z properties, and rotate it on all three axes all at the same time. There are two isometric 3D object, the isobox and the isotube. The isobox creates a square isometric tile. The size parameter sets the size from the left to the right corner, and the h parameter sets its height. This is fun to animate. 

[04:50] Note that if you give it a negative height, it actually creates a hole in the "ground." Also note the use of the color module's HSV function to create the colors for the top, right, and left sides of the box. 

[05:07] Two other special objects are the image object and the text object. With image you can set a URL to an image file. This can be an HTTP URL to an image on the Web, or a file URL to an image on your local computer. You can then draw that image and animate its position, size, rotation, and so on. Text allows you to set a string of text to display, as well as some control over the font, font size, and text style, and of course animate it all. 

[05:44] So that's a quick view of some of the objects available, look in the documentation to see the full range of all objects and all of their parameters. 

Shape Objects in GIF Loop Coder

Share this video with your friends

Course

GIF Loop Coder for Creating Animation