Name: Colors in GIF Loop Coder
Uploaded: 2016-07-10T08:19:01-05:00
Description: In this lesson we cover the different methods for defining and animating colors 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

In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder.

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

[00:00] Let's look into colors in GIF Loop Coder a bit more. GIF Loop Coder is based on HTML5 canvas and the 2D drawing API. So any way you specify colors there you can use in glc. I've created a bunch of stars here. For the first I'll use a CSS named color string red, then a six-digit hex color string 00FF00, then a three-digit hex string 00F. You can also use RGB and RGBA strings like so. 

[00:41] As I demonstrated earlier, you can animate between any colors defined with any of these methods. Mix and match, it all just works. We can go from a named color string to an RGB string, or a three-digit hex string to a named color string, or any other combination. But still, creating colors with these various types of strings can be tedious. That's why there's a color module built in to GLC. You can see it defined up at the top with color=glc.color, this just makes it easier to type if you wind up using it a lot. 

[01:15] So what can you do with this? For one making RGB colors is much easier, just say color.rgb, passing in values for red, green, and blue, or if you want a shade of gray, just say color.gray, passing in the shade from 0to 255. 

[01:31] In the next few examples I'll just create a bunch of random polygons. I'll predefine the x and y positions for use later, and I'll give them random positions, radii, and number of sides. Now because there are so many and they're all black by default, that's all you see is black. So first I'll assign a color using color.rgb, calculating the red channel by dividing x by width, and multiplying that by 255. This will give us a range of values from black to red as we move from left to right. 

[02:11] You could do this from an RGB string, but you'd need to round the values down to integers, and concatenate the string which is a pain. With the color module it's all just done for you. You can do the same with color.gray as well. Now there are several methods for creating random colors, there's randomRGB. Here you see each of the polygons has a different color. You can also pass in a min and max value, if I pass in 0128 all colors will get values in that range, making the colors darker. Passing in 128,255 makes them all lighter. 

[02:50] Then there's randomGray, now all the polys are different shades of gray. Min max here works as well, darker grays, and lighter grays. There are also a bunch of HSV related functions, HSV standards stands for hue saturation value, and is an alternate way of defining colors. Hue is the base color defined in a spectrum that goes from 0to 360. Here 30 is an orange color. Saturation determines how pure the color will be. Saturation 1 will contain 100 percent of the hue, 05 will be washed out, and 0will be grayscale. 

[03:35] Value determines how dark the color will be, 1 is full brightness, and 05 will be a darkened version of the hue, 0will be black. With these functions you can create various colors with the same or similar hues to create a coordinated color palette. Here I'll set the hue to the x position divided by the width times 360, that should give me a hue range from 0to 360 as the polygons go across the screen, and value and saturation I'll leave at 1. So there's a polygon rainbow. 

[04:10] We can set the hue to be a static 30 for example, and use the same technique to vary the saturation, or the value. Then there's randomHSV this takes two values for each component, a min and a max. If we set a min and max hue both to 30, and a min and max saturation and value both to 05 and 1, we get a range of different colors based on that same orange hue. If we let the hue go from 30 to 60, now we get some base colors tending more toward yellow, or hue between 120 and 160 will give us a blue-green palette. 

[04:52] Now animating HSV colors is a special case, because the HSV values are immediately converted to RGB values. So say we create a circle here and give it an animated fill style using color.HSV, with hues from 0to 360. You might expect this to animate through all the colors in the spectrum, but instead we just get red. This is because HSV(01,1) gets converted to full saturation, full-brightness red, FF0000, and so does 360,1,1. 

[05:28] There's no visible animation, that's the most extreme case, but in general HSV animations done this way are not going to give you what you expect due to this conversion. Luckily there's another method on the color module, animHSV. This, like randomHSV, takes two values for each property. Hue, saturation, and value, and animates between them. Now we can set the fill style to color.animHSV(0360,1,1,1,1) and this will animate through the full spectrum of hues. 

[06:06] I'll extend the duration so you can see the transition more clearly. So there's a taste of color management in GLC, check the docs to see a few more useful methods. 


Colors in GIF Loop Coder

Share this video with your friends

Course

GIF Loop Coder for Creating Animation