The
efnx code blog.

I have a new ongoing project, it’s called Bang. It’s a canvas-tag based display list written in Javascript. I’m going to be using it in place of AS3/Flash in my web authoring tool chain. Bang on Github. There are three main elements of Bang that make it special:

Modules

When writing a project with Bang you keep your code separated in modules. Each module exposes a Javascript Object, like a constructor function. The modules object is passed into each module definition, exposing your module to other modules that depend on it. Keeping your code in modules like this means you need only expose one global variable, the list of modules. Any modules loaded this way are essentially sandboxed in that modules object.
You define a module in a similar manner to RequireJS and the AMD:

The module system is another project of mine called Mod. I’ve written about it before. It’s very small and simple and it gets the job done (the job of code separation and later compilation).
Bang adds support for Google’s Closure Compiler to Mod, so once your project is ready to ship you can compile (in a sense), compress, obfuscate and pack your code down into a deployable script or a neato mosquito PNG. I like the PNG method because it’s slightly more obfuscated and adds further sandboxing, but that’s a topic for a later post.

It’s like Flash, but not too much like Flash…

Bang is enough like Flash/AS3 to be familiar, but sacrifices some AS3 similarities in exchange for simplicity and consistency. The complexity in Bang is very small. There aren’t any tricks to make it more Flash-like than it has to be and it won’t protect you from learning canvas operations. In fact, you’ll have to learn about the CanvasRenderingContext2D to do any real drawing. I’m not aliasing those calls and hiding it in a mock Graphics object for you! And you should be learning these new technologies without crutches. Think of Bang not as a set of crutches, but as a set of wings, or at least a hammer and chisel. No one likes masonry-by-hand.

It is fast.

The original pre-alpha version of Bang takes Douglas Crockford‘s extremism literally. There are no uses of the keywords ‘this’ or ‘new’. It accomplishes (multiple) inheritance through special constructor functions that add functions and closures to objects (or creates new ones). This, although a departure from AS3 at first, actually gives projects written in Bang an AS3++ feel. Multiple inheritance is awesome. Private variables are awesome. With prototypal inheritance you lose private variables so by using special constructor functions we can create private variables through closures. These features are awesome, but as Martin Hunt of GameClosure pointed out to me, it’s not fast. Processing time will go up linearly with the number of properties and methods created in the class. This means that if you’re creating a lot of complex game objects every frame tick, the project will likely start chugging. This is not fast. Apps have to be fast! For this reason I started a new branch of Bang that uses traditional prototypal inheritance. This branch will include a dirty rectangles implementation for really lazy redrawing, and I have plans for using WebGL for rendering down the line. Stay tuned!

A tiny demo

<--- __
    |  |__ ___ _ _____ _____
    |  _  |  _  |     |  _  |
    |_____|___!_|__!__|___  |
                      |_____|
    you know, for javascripts-->

Now that I’ve been writing a lot less Actionscript and a lot more Javascript I’ve found that I often need a system for separating my code out into modules. Javascript doesn’t provide a convenient way to load scripts and define modules so I wrote a tool I call ‘mod‘ that uses either XMLHTTPRequests or script tag injection to load scripts.

mod uses initialization objects to define modules. A module object takes a name, an init function and optionally an array of dependencies (paths to other scripts you’d like to load before initializing the current module). You can also supply an optional callback to execute after the module has been initialized. Both init() and callback() are passed an object that contains all the initialized modules thus far.

Defining a module looks like this:

In this first call mod packages your module initialization object and starts loading its dependencies (either through XMLHttpRequest or script tag injection). Once the dependencies are loaded (which may or may not define more modules and load more scripts), the result of the init function is stored in mod.modules, in this case as mod.modules.Main. The loaded modules are exposed to your init and callback functions as the only parameter, so they don’t clutter global space. As an added benefit, you can share data between modules using mod.modules.

If you use mod to write lots of modules (like I do when working on a big project), mod can ‘compile’ your project for you, removing all script loading. It essentially takes all your init and callback functions, wraps them inside an island closure and prints them to one monolithic file which you can then compress with YUI or a google ‘something-or-other’.
To do this, load your project in your browser, open the js console and type mod.printCompilation(). Alternatively, to store in a string, type var compilation = mod.compile();.

I’ve written a small python script to export a blender object to javascript for use with WebGL (or whatever else you might be running 3d in). It currently copies the entire file output to the clipboard, and only works on mac, but stick around for a write-to-file cross platform version shortly. You can get the script at my github.
blender 2.5 to javascript