Name: Custom Drawing in GIF Loop Coder
Uploaded: 2016-06-10T18:11:38-05:00
Description: We'll look at how you can access the raw HTML5 Canvas in GIF Loop Coder and use it to draw whatever you want, in addition to the animated shapes that are a core part of GLC.

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

We'll look at how you can access the raw HTML5 Canvas in GIF Loop Coder and use it to draw whatever you want, in addition to the animated shapes that are a core part of GLC.

https://app.egghead.io/api/v1/lessons/javascript-custom-drawing-in-gif-loop-coder-0f430829/subtitles

[00:00] While it's very easy to use the built-in shape objects GIF Loop Coder offers, sometimes you need the flexibility to do something more complex.

[00:07] There are two functions that allow you to do pretty much whatever you want to with the raw HTML5 canvas that GLC uses. These functions are onEnterFrame and onExitFrame.

[00:21] Starting with a new file, I'm adding the line GLC onEnterFrame = function t. This onEnterFrame function will now be called once every frame, just as GLC starts rendering a frame.

[00:36] The t parameter is the t value that gets used for the animation interpolation. We can log that to the console. Then, open the console and watch the value of that change.

[00:48] To draw on GLC's canvas, access the glc.context object, which is a 2D rendering context that GLC is using. We can say GLC fillStyle = red. GLC fillRect 100, 100, 100, 100. Yes, we've drawn a rectangle.

[01:07] You can manually use the t value to create your own animations here. For example, instead of a static 100 for the exposition, I can say t times width. Now, the rectangle's moving.

[01:19] For a simple example like this, there's no real benefit to not using a built-in render list add functions. Let's do something more complex, like a very basic 3D renderer.

[01:30] First, I'll make a bunch of 3D points. They'll be stored in an array called points. I'll loop through 50 times and make each point an object with X,Y, and Z properties. Each set will run a value between -200 and 200.

[01:45] In the onEnterFrame function, I'll save the context, translate it to the center of the canvas, set the stroke style to black, and begin a path. I'll loop through the points array and get a reference to each point.

[02:08] I'll have to project each 3D point on to the 2D canvas. I won't go into the details of this much, but I'll use the Z value or depth of each point to calculate a scale. I'll say GLC context line two, px times scale, py times scale. Once Z is higher, the scale will be smaller. The points will be scaled smaller and appear closer to the center of the canvas.

[02:35] Finally, when all the lines are drawn, I'll call GLC context stroke and restore. There you go. A bunch of random 3D points connected by lines. Actually, it looks like a bunch of 2D lines. Maybe if we rotate the points, they'll see more three-dimensional.

[02:53] I'll throw in a call to rotate the top of onEnterFrame. We'll define that function. Again, this is going to loop through the points array and get a reference to each one. Note that there's a ton of optimization that can be done here. I'm keeping it simple and clear.

[03:09] We need to do some 3D coordinate rotation. Again, there's no time to dive into details. This is a standard formula to rotate a given point around the origin by a given angle. This is based on 3D matrix multiplication, paired down to the essential elements we need for rotation.

[03:26] We're rotating around the Y-axis. This will give us new X and Z values. We'll assign those back to the original point object. Run it again and now we have something that actually looks 3D.

[03:43] I mentioned two functions, onEnterFrame and onExitFrame. What's the difference? The sequence of actions GLC does in each frame is, one, clear the screen. Two, run the onEnterFrame function. Three, render any shapes in the render list. Finally, four, run the onExitFrame function.

[04:06] I'll add a shape to the canvas to see this in action, a yellow rectangle. You can see that the 3D lines are drawn. The yellow rectangle is drawn on top of them.

[04:19] If you want your custom drawing to appear on top of the render list shapes, put it on the onExitFrame function. I'll do that now. You can see that the 3D lines are drawn on top of the yellow rectangle.

[04:31] As a note, you can have an onEnterFrame and onExitFrame in render list shapes on the same sketch, essentially giving you three layers to draw on.

Custom Drawing in GIF Loop Coder

Share this video with your friends

Course

GIF Loop Coder for Creating Animation