GIF Loop Coder - Animating with Arrays

[00:01] Since GIF Loop Coder's focus is on animation, it makes sense to dive in a bit on how to animate objects. Again, animation is produced by changing something over time. The simplest method of animating in GLC is to supply a two-value array to a property.

[00:14] Here, I'll create a rectangle centered on the canvas. The width will be 100, and the height I'll give an array of 50, 200. You can see that the height of the box is animating.

[00:27] Now, you can animate almost any property of an object, and you can animate as many properties as you want on the same object. I'll change the width to an array of 200, 50. Note that the numbers are reversed compared to the height, so that when the width is 200, the height will be 50 and vice versa. This gives an organic squishy-looking effect.

[00:48] You could continue to animate other properties on the same object such as the X and Y location, etc. All those animations will compile into the final product.

[00:58] Animating between two numbers is pretty straightforward, but what about other types of properties? In the previous video, we also animated colors. Again, this is as simple as passing in an array of two color values to a color style property. Here, I'll set fillStyle to red, yellow. Now, the rectangle will smoothly move between those two colors.

[01:17] I mentioned before that color management is one of the strong points of GLC. We'll see a bit of that here.

[01:23] In addition to named colors like red and yellow, you can use an animate with RGB-formatted strings in both three and six digits. You can change the array to something like #0F0 for green and #0000FF for blue, or you can use RGB and RGBA strings like RGB(255, 255, 0and RGBA(0255, 0075).

[01:47] You can mix and match with all of these different formats like pale violet, red, and #F38702. It's all good. If that's not enough, there's a color module that I talk about in another video that'll give you even more options.

[02:07] Now, I said that most properties are animatable, but what about Boolean properties like stroke and fill? Obviously, you can't smoothly interpolate between true and false, so what GLC does is choose one of those values based on the current animation time.

[02:21] I've removed all the other animation properties on this rectangle and set the fill style to yellow. I'm going to set the stroke to an array of false, true and set the line width up to around 20 so we can see it clearly. When we run this, we set the stroke blinking on and off.

[02:36] Let's pause the animation and scrub through it to see what's going on. At zero, we get the first value, false, so there's no stroke. At 05, we get true, so we have a stroke. Then back to false, no stroke, at one. If we go slower, we can see that there's no stroke right up until 025, which is halfway to 05. Then, the stroke switches on and stays on until 075, which is halfway from 05 to 1.

[03:04] Admittedly, this isn't quite as useful as interpolating between numbers or colors, but it's there if you need it.

[03:10] I'll quickly mention the string data type, as only one object uses it -- text. I'll add some text and set its text property to an array containing the strings "hello" and "world." Now, there are different strategies to interpolate between two strings.

[03:24] In practice, in an animation, it looks like a chaotic jumble of random letters that only makes sense for the briefest of moments at the start and end of the animation, so strings take the same strategy as Booleans. Here, you'll see "hello" for the first part of the animation and "world" for the next part.

[03:41] The last data type we'll mention is arrays. Now, there are a couple of properties that take arrays as their base values. One of these is the path property of a path object, which holds an array of point positions. The other is line-dash, which is an array of numbers used to define a dotted or dashed line.

[03:59] I've created a simple path here so you can see how that works. Each number is an X- or Y-coordinate of a point in the path. Here, we have eight numbers forming four points. You can see the path they create.

[04:11] Now, since we use arrays for holding animated properties and we use an array for paths, we need to pass an array of two arrays to animate a path. I'll copy this path and put both copies inside of another array. Then, I'll just randomly change some of the numbers.

[04:28] When we run this, GLC will go through each element for the array and interpolate between them on each frame, forming a new path and rendering that. You can see how this path animates.

[04:40] Next up, you might ask, "What if you pass an array with more than two parameters?" It would be nice if GLC smoothly interpolated between all values, but that's not what happens, at least not at this point. What happens is more like the Boolean example. If you pass an array of three elements, it will choose one of those three elements depending on the current animation progress.

[05:01] Let's make a new sketch and add a polygon with addpoly. I'll increase the radius and give fillStyle an array of red, green, and blue. Running it, we can see those three colors flashing.

[05:14] Scrubbing through it, we can see that it gets red for the first third of the animation between zero and five, green for the second third, and then blue for the last, and then back through blue, green, and red for the second half of the animation.