Version 1.0.0!

This is a pretty big release. The main addition is that GLC now has an integrated code editor!


Up to now, you had to edit your sketch in an external editor and then load the result in the browser. This usually meant editing the html file to have it point to your script, although there was functionality to load a file.

Now, all you have to do is launch the app. The editor is built-in. Write some code, and hit Control-Enter to see your changes. I’ve been using it like this for the past week or so, and I love this workflow. It’s so much more direct. Get to know the keyboard shortcuts. They really make things easier.

Of course, if you still love your external editor, that workflow is still possible for now. See the Tips section of the docs.

You’ll also see that a lot of the functionality of the control panel has been moved up to a top tool bar. And the code editor itself now fills the full screen. This is the first move to remove the QuickSettings UI from the app. I love QuickSettings, and it’s served the app well up until now. But it’s a prototyping UI library, not ideal for the long haul. So the rest of the panels may fade out over time as well.

The code editor is from I’m very impressed. I’m only scratching the surface of all it’s available features. So that’s another area to explore and maybe squeeze some more functionality out.

The next big step will be a standalone cross-platform executable. This should take away a few of the poor user experience items like loading and saving files. Loading a file is ok, but saving is horrible. There’s no connection to what your saving and what you loaded, no way to overwrite an existing file or even specify where you want to save a file. There are other things that having a standalone app will help as well. I’m going to be using Electron. I already have a working version, but need to hook up all the stuff that will make it behave more like a native app – like file saving. And then get the multi-OS builds going. Look for it early in the new year.


GLC started out as a quick experiment and has grown beyond what I expected it to. Because there are quite a few source files, I decided to use require.js to handle dependencies and load the various modules without having a million script tags in the main html file.

This made for a fairly simple html template in the sketches folder, but not perfect. That sketches folder needed to know where all of the GLC library classes were, as well as where require.js was. So it was not very portable. It was a giant tortoise carrying its shell around on its back.

Now that quite a few people are actually using the tool, I’ve decided to make things a lot simpler. I’ve packaged up and minified all of those library files into a single glc-min.js file that can be included in the sketches folder. This makes the sketches folder completely independent of the rest of the code, and 100% portable. All you need to run sketches is what’s in the sketches folder now.

This has also made it much easier to distribute the project. Assuming you don’t really care about all of the source classes and how things work, you can now forget about git, and download GLC here:

The zip you get will contain only the sketches folder and the docs folder. The zips will be versioned, so when changes are made, just grab the new zip.

Of course, the full source will continue to live on github at, and if you’re comfortable with that, you can feel free to continue to get it from there.

As time goes on, there will be other changes designed on making things easier and to get you up and coding as fast as possible.

GLC Tumblr

Just thought I’d note that I set up a GLC tumbr account:

You can submit your own gifs to the page as well, and I’d love to see a nice range of stuff up there. Just make sure that the gif is under 2MB – the tumblr limit, not mine. And as far as I can tell, tumblr won’t credit the poster, so if you want credit, credit yourself in the description. It’s also nice to include or link to the code that created the gif ( is nice for this) but not required.

New Object: Cube

I added a new object to GLC earlier today. The cube. I actually had this one done before I released GLC at all, but held it back because it’s not as feature-complete as it could be. But in the end, I decided that even if it’s not all that it could be, it’s still a fun piece to have there.

Basically, the cube draws a wire-frame 3d cube. You can control its x, y and z position, its size and its rotation on the x, y and z-axes. You can’t fill it, but it respects all of the stroke properties – lineWidth, strokeStyle, etc. and can even be drawn with a shadow.


Not much more to say about it, but you can check out the docs for it, and have fun.

Animation Utilities

As I’ve been developing features for GLC, I needed to constantly generate values that would create things like Bezier curves, paths of points, and shadow parameters. Rather than trying to visualize the numbers that would make a nice curve or path and typing then in manually, or typing out all those long property names for canvas shadows, I made a few utilities that let me do all that stuff visually. They’ll be useful for anyone using GLC once it goes live, and probably useful for people not using GLC as well, so I put them up on the site at

Fiddle with the controls until you get something you like, select an output format, copy and paste into your app.


Here’s a quick preview of the basic GLC user interface.

Actually, that video has a couple of v2 features that won’t be in the initial release – the secondary, full size output panel, and the still image capture. The current UI looks more like this:


The other changes are done, but I had to freeze the code somewhere for v1 and that’s what’ll roll out first.

Welcome to the site…

I’m gearing up to the first release of GLC. Have a few people beta testing it and looking forward to the feedback. In the meantime, I’m adding new features for future releases. Hoping to have a public release in the next week or so.

I just put up a quick WP installation to have a place to announce new features, show examples, make tutorials, give new tips and tricks and get feedback once things are live.