Custom Drawing in GIF Loop Coder

[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.