onEnterFrame, onExitFrame, and what’s all that 3d stuff?

Gif Loop Coder has its roots in two earlier programs I made for my own use.

One was 2-3 years ago and was for making sprite sheets for a game I made. It had a rough prototype of a scheduler, with a callback function that allowed you to draw whatever you want to the canvas, then would take those frames and assemble them into a sprite sheet. Pretty much what you see in the sprite sheet export functionality in GLC.

The second one was a year or so ago. Same basic scheduler and callback, and contained the same GIF encoder that GLC has. I was into fractals at that time, and used it to create images like this:


When I started to create GLC, I wanted to make it easier for others to use. So I gave it a UI with my QuickSettings library, and made a bunch of predefined, easy to animate shapes to use. But once in a while, I found I wanted to have raw access to the canvas like I did in the other apps I’d created.

I started to create a brand new app, which I was going to call GIF Frame Coder. In it, I ripped out all the shapes and render list and just left the scheduler, UI and GIF encoder. It worked great, but then I missed having the shapes. I realized that having two separate programs was a dumb idea. It was easy enough to provide the direct canvas access right in GLC.

And so now you have all of that. Render shapes with the render list like you’ve been doing all along, or dive into direct canvas access and write your own code to do whatever you want.

This is all done simply by providing you with two new variables: glc.canvas and glc.context and two new methods that you can define: glc.onEnterFrame and glc.onExitFrame. Yeah, I know, I’m coming closer and closer to recreating Flash 3. I don’t mind that at all.

Read more about it here:

Some of you might have seen some of the gifs I’ve posted in the last couple of days, showing some 3d stuff. This is not a direct part of GLC, but uses the new functionality. I pulled up an old 3d library I created back in 2011, when I was first diving into JS. (Has it really been that long???) It’s called WireLib. I have to say, it’s not horrible JavaScript. Not as bad as I would have thought for my early endeavors. I started reworking it though, to make it more compatible with how GLC works. And at some point I started a full rewrite, calling it wire3d. It’s still a work in progress, but it’s growing to look a lot like how GLC’s render list works. Example:

x: 100,
y: 100,
z: 100,
w: 200,
h: 50,
d: 100,
rotationX: 0.2

All parameters optional of course. I don’t plan on putting this into GLC as core functionality, but with the new enter and exit frame features, it works great as an add on library. Stay tuned.

Oh yeah, updated code is up on github, or download at version 0.9.4.

Sprite Sheets

This is one that has been on the list for a while. And it’s been mostly complete for a while, too. Buckled down and got it done tonight.

Now you can export a sprite sheet from your animation in GLC. This is pretty straightforward. Just click the button and see the sprite sheet. But you can read a bit more about it in the docs.

I’ve also included a sprite sheet utility in the animation utilities section. This just lets you browse to your saved sprite sheet to load it in, and then view it in all its animated glory. It’ll also give you a bit of sample code, suggesting how you might implement the sprite sheet in HTML.

I’m not sure how useful this feature will wind up being overall, but if someone gets some use out of it, that’s great.

Check out the code from github, or get 0.9.3 in the downloads section.

0.9.2 – Parents

Just a quick note to say that a new version is up.

This contains one huge change. You can now specify objects as the parents for other objects. Since I already wrote it up in the docs, I’ll refer you to what I wrote.

To accommodate this, there’s also a new object, the container.

All the credit for this new feature goes to Lincoln Anderson, who has also been creating some amazing gifs with GLC.



If you check out this image, you’ll see a couple new items in the control panel. My goal is to make GLC as easy as possible to use, without making the user worry about html, paths, build systems, module loading etc. Ideally I see two different versions of the app, one could live on line as a web page on this site, another would be a standalone, cross platform desktop application.

To make either of these fully possible, I need to remove the need for the user to hack around with html files to specify which sketch to load. So this release takes the first steps towards that by providing a way to load external files.

Now, you can ignore the html altogether and just launch the app in a browser, click the open file button and choose a file. That sketch will be loaded right into the UI.

Make some changes to the sketch in your favorite editor? Hit the reload button and those changes will be re-loaded. But of course, you can still specify the sketch you want to load in the html, just like before.

This took more work than I expected, as before, the entire page and app was being reloaded and refreshed when you loaded a new sketch. When loading a new sketch without restarting the entire app, there were sometimes things from the old sketch hanging around messing with the new one. Hopefully I got those all sorted out.

You’ll see the start of some other nifty features like keyboard shortcuts here as well. I hope this makes the app easier to work with.

You can check out the full code for these changes now, or download the zip at It’s version 0.9.1.

This is only the start of the changes I have planned. The obvious next step is an integrated code editor. It’s in progress.

And as much as I love my QuickSettings panels, they were intended for prototyping. They’ve served me well on this project so far, but it’s probably getting to the point where a better UI is in order.

Then there are other features like scenes, and sprite sheet export. Those are both largely done as well, but need polishing up and documenting.

Then a live web version and a standalone app, both with that integrated editor. Exciting, I think.