Murphy's page

ohai! Recently I found myself needing some diversion again, so I decided to do some game programming again. Javascript has gotten a lot of nice libs for game programming lately, but physics engines somehow aren't quite there yet imho.

The only engines I know of in JS are ports of either Box2D or Bullet. My thoughts about them so far:

• There are two Javascript ports of Bullet: (bullet.js and ammo.js) but I don't think they perform so well with many objects due to Bullet being a 3D engine.
• Box2D also has two ports (Box2dJS and ). I just don't like the Box2D API, that's pretty much all. Box2dJS also is outdated and requires Prototype (for whatever reason).
• With the exception of bullet.js all of these have been converted from C or Actionscript to Javascript.

The last point is especially important to me, because that means they will most certainly clutter the global namespace. I started using AMD script loaders for almost all of my projects in the last months and I really don't want to go back to this global mess.. (: So I decided to take a shot at doing a physics engine port that's AMD compatible and has a nice API.

The Chipmunk engine has a really nice API, so I chose to port that. After about two months of work besides work and exams I finally reached a point where most parts work and I feel comfortable to put it out.

I still consider it to be an early alpha version, so it's probably not recommend to use it in any serious project yet. Nevertheless, you can check out the code on Github.

It's not a 1:1 port, since Chipmunk is written in C and I wanted an object oriented library. But it's a really close port when it comes to naming things. For instance cpSpaceAddShape(space, shape) in Chipmunk became space.addShape(shape) (space being an instance of cp/Space) in Chipmunk.js. I think I managed to stay as close as possible to the method signatures of Chipmunk.

Alright, here's the current state:

Features:

• Collision primitives for segments, circles and convex polygons
• Uses fast contact persistence algorithm by Erin Catto (of Box2D fame)
• Neat constraints like damped springs or motors.
• Almost no dependencies. Chipmunk.js only requires (he he he) an AMD script loader.
• No global namespace pollution. I'm not in your global, polluting your windowz. (o:

To do:

• Sleeping bodies not supported. The code is already ported, but contains a crucial bug that leads to a freezing browser. More in this issue on Github.
• Write some unit tests for all classes.
• Almost no optimization for Javascript in place. Still very close to the original C code. I want to do that once all important features are done and tested.
• Find a tool for JS code documentation that does not suck that bad and make some nice API docs.

Demos:

I made a page where I will put a few demos (two until now) here and other stuff such as API docs.

TLDR;

OOP-port of Chipmunk to Javascript; still alpha; Code here; Demos here; API docs coming as soon as possible.

A few people might have noticed that the Dizzy editor now (finally) has an user interface that one can use without wanting to puke (at least I hope so). In the old version much of the UI was made in the SVG file itself (like the Zebra), which wasn't exactly a good idea.

So I moved (almost) everything out of the SVG and into the surrounding page.

In my opinion this is a much cleaner approach, althought the Zebra might not look as nice now as it has before.

Since it's not an image anymore but basically just a few divs with some CSS magic, it looks quite different in most browsers. Check this out:

This is due to the way Browsers handle dotted/dashed borders in combination with border radius (see this issue), but an issue that does not affect the functionality and I hope it will be fixed soon.

Anyway, here's what's new in the editor so far:

New features:

• Link to remote images
• Load and save SVG presentation
• Modify embedded stylesheet
• change the z-index of groups (through the new zebra-toolbar)

Missing features:

• More tools for drawing stuff on the canvas, like lines, arrows, circles...
• More options for stuff on the page. Includes font options for text, color chooser, etc..
• More jQuery. (o:

Known bugs:

• Saving a SVG that contains an image does not work in Chrome (this browser has so many problems with that Feature..)
• Changing the font-size through the stylesheet does not change the line height of multiline text
• Firefox captures too many keys in default mode (should only capture letters and backspace)

Another really awesome thing is that it seems like Internet Explorer 9 finally has decent SVG support! I had a look at IE9 a few days ago and at least the demo on the Dizzy page worked.

Once I find the time to install a Windows VM on my machine I will test the editor and report back to you (;

I just pushed a beta version of the new page for dizzy.js online.
It still lacks content, but it contains a feature I've been working on quite some time now: an editor (:
Until now, new presentations had to be done by hand or in Inkscape, but I hope this won't be neccessary anymore.

The editor is part of the new version 0.4.0, codename: "Forever alone" (yes, I do use internet memes as code names).

The core features are supported:

• Create and delete text
• Drag images from the file system on the canvas (I'm kinda proud this works so well), in FF and Chrome
• Create and modify path through nodes
• Presentation mode
• Save SVG (somewhat buggy in Chrome)

Of course there are quite a few bugs and a lot of features I do want to have in the editor:

Missing features:

• Loading a locally save SVG file to the editor
• Adding images in Browsers that don't support dragging from the file system (through linking)
• More tools for drawing stuff on the canvas, like lines, arrows, circles...
• More options for stuff on the page. Includes font options for text, color chooser, etc..
• Moar jQuery. (o:

Known bugs:

• Saving a SVG that contains an image does not work in Chrome (this browser has so many problems with that Feature..)
• Some other, that I forgot just now.

I'm going to push the changes to github soon, want to clean up a little first. (;
So, go ahead and try it. It would be awesome if you'd report bugs and quirks you find and give some feedback in general.