Badass JavaScript

CoffeePhysics: A Fast New Physics Engine Written in CoffeeScript

Justin Windle has just released a new physics engine called CoffeePhysics, which as it’s name states, is written in CoffeeScript.  It is quite lightweight (minified, it’s just 8KB), but also very powerful.

There are a number of demos that show the performance and features of the library, including attraction, collision, cloth simulation, a balloon of balls around your mouse, and a chain following the mouse.  I’m getting around 60 frames per second or more in most of the demos in Firefox and Chrome, which is pretty darn impressive.

The source code is very readable, as CoffeeScript often is, and seems very modular and well architected.  There are multiple renderers available as well, the most important of these being WebGL, but there is also a canvas 2d renderer as a fallback, and perhaps a DOM renderer in the works (for really old IE?).  It sounds like 3D support is in the works as well.  In the demos posted online, only the WebGL renderer is used, so make sure you check those out in Chrome or Firefox (it does not appear to work in Safari).  The demo source code is all in the repo, so make sure to check that out as well!

I reached out to Justin earlier this morning and asked a few quick questions.  Here are his responses:

Did you have any particular reason for building CoffeePhysics, or was it just for fun?

I was working on some visual demos of genetic algorithms for my presentation at FITC Amsterdam and found myself writing the same simple particle / spring physics over and over, so decided that abstracting it out to an engine would be a good idea. I’ve been keeping an eye on CoffeeScript for some time now and had actually started using it to build the slide engine for the presentation. It felt like a good fit for the physics engine, mainly because of the ease with which I could implement classes and inheritance; allowing me to give the engine a more formal structure which would come in handy when extending the core functionality though new integrators, renderers and particle behaviours.

I’ve wanted a simple physics engine for JavaScript for some time. With a basic point-mass and spring system, it’s possible to create a lot of different effects, all without the need for more complex, processor intensive features. I plan on extending the engine to 3D (it was designed with this in mind since all the math is done with vector operations and so swapping out the 2d vector class for a 3d one will be almost all that’s required at first). I’ll also work on performance (particularly in collision detection) and a more extensive library of particle behaviours, but the main philosophy was simplicity of use and a clean, intuitive API, so keeping it lean and nimble will remain the focus.

What was the most fun/challenging part of building the library or related demos?

Designing the structure of the engine was the most interesting challenge. I’d worked out most of the math required in previous experiments, so in this respect it was simply a matter of combining those techniques. The API and code structure on the other hand was something I wanted to focus on keeping clean, modular and easy to understand. CoffeeScript helped with this, since (much like writing Python) the syntax feels to me almost like writing pseudo-code - I can ‘sketch’ out the class structures, logic and interfaces and then very little is required after that to actually have working code.

How was your experience with performance? What challenges did you face in getting CoffeePhysics or its demos to run fast?

I released it perhaps too early - I wanted to demo it at FITC and so what’s out there now only amounts to the first draft. Therefore, performance hasn’t yet been a huge priority; instead as I mentioned I wanted to create a stable, easy to use and simple engine first then worry about optimisations later. Currently there are a number of issues across browsers and for practical purposes during the (very quick) first development cycle I’ve only been targeting and testing with Chrome.

The physics though is generally very fast to calculate, especially in JavaScript engines like V8. Rendering is always the significant bottleneck and so I quickly moved from canvas to a simple WebGL renderer (with a canvas fallback). This is why (in Chrome at least) the demos run at a solid 60fps. The engine is also a fixed time step engine, meaning that it’s accurate even if some frames are dropped, so unless there’s a huge lag (something I’m working to eradicate in some browsers) then the simulations will run smoothly and the interactions will feel responsive.

There is a lot of controversy around CoffeeScript in the JS community.  How was your experience with it?

I think that CoffeeScript does some important key things very well. Coding is fun and quick, which to me is very important. As I mentioned, easy classes with inheritance are great to have and the compiler is fast enough to make this intermediate step almost unnoticeable. The aspect I like the most though, is the ability to dive in and start writing logic without having to worry about some of those little JavaScript quirks we all code around on a daily basis. The less time between thought and working code, the easier it is to be creative and expressive; something which to me programming is largely about.

I understand the reservations people have and I’ve certainly come across aspects of the language I would like to be different, but when you consider the time and effort that goes into making JavaScript behave sometimes, I’d happily trade that for ease and pleasure of use, in the right circumstances of course.

Anything else you think we should know?

CoffeePhysics is a personal project I decided to release somewhat prematurely and so is not yet in the state I want it to be in for version 1. That said, the whole point of opening it up to the community is to get early feedback and have help with tracking down issues, so I’m not worried about it being unfit for immediate use. I’m also keen to stress that it isn’t intended to be a full blown engine. I’ll be interested to see what I (and hopefully others) can eventually do with it, but my intention is to focus on doing a few basic things well, keeping it fun and easy to use and exchanging features for speed and usability.

Nice work, Justin! Now, go check it out on Github, and play with the demos!

Seriously.js: A Realtime, Node-Based Video Compositor for the Web

We covered a demo earlier this week showing real time video processing with WebGL, but Seriously.js taking this concept even further: seriously!

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

It features an optimized rendering path that is built with WebGL making it entirely hardware accelerated at 60 frames per second.  You can use videos, images, canvases and pixel arrays as input sources to the compositor and then apply various video effects to the resulting image, and apply 2d transforms to any layer (3d is coming).  The available effects are numerous ranging from chroma key and night vision to edge detection and other common effects.  Additionally, and perhaps the best feature of the library is that you can add your own effects as plugins and use them just as you would the built in effects… In fact, the built in effects are actually just plugins themselves!

The demo combines a number of different effects and sources.  The video is chroma-keyed so that you can actually change the background as it’s playing in real time, and then various effects are applied on top of everything changing the feel of the music video dramatically.  There is a underwater scene, a night vision scene, and a creepy black one.  I think this idea of user modifiable music videos is a very neat one indeed!

So want to get started with Seriously.js yourself?  Luckily for you, there is a tutorial to help you out and even some documentation!  So how easy is it to apply effects to an HTML5 video?  This easy:

var seriously = new Seriously(),
    video = seriously.source('#myvideo'), // get video element by CSS selector
    target = seriously.target('#canvas'), // output canvas
    vignette = seriously.effect('vignette');

// connect all our nodes in the right order
vignette.source = video;
target.source = vignette;
seriously.go();

Obviously you can connect multiple nodes together in a chain-like fashion, adjust effect parameters and more, so check out the tutorial for all of that!

Who knew that JavaScript was going to be doing realtime video compositing and effects even a few years ago?  Seriously.js is seriously impressive, it is open source on Github, and you should check it out… seriously!

GLGE: Taking the pain out of WebGL

GLGE is a library for WebGL that aims to “mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.”  It has a pretty impressive list of features:

1. Keyframe animation
2. Perpixel lighting directional lights, spot lights and point lights
3. Normal mapping 
4. Animated materials
5. Skeletal animation
6. Collada format support
7. Parallax Mapping
8. Text rendering
9. Fog
10. Depth Shadows
11. Shader based picking
12. Environment mapping
13. Reflections/Refractions
14. Collada Animations
15. 2D Filters
16. Video and Canvas Textures
17. …And many more!

Dennis Ippel has written a getting started guide for using GLGE, which shows just how easy it is to create your very own 3d scene using data exported from Blender and a bit of XML.

<?xml version="1.0" ?>
<glge>
	<mesh id="box">
		<positions>1.000000,0.999999,1.000000,1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,0.999999,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,0.999999,-1.000001,1.000000,-1.000000,-1.000000,-1.000000,0.999999,-1.000001,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,1.000000,0.999999,1.000000,1.000000,-1.000000,-1.000000,1.000000,0.999999,1.000000,0.999999,-1.000001,1.000000,1.000000,-1.000000,-1.000000,1.000000,0.999999,1.000000,-1.000000,1.000000,1.000000,0.999999,-1.000001,1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,1.000000,0.999999,-1.000001,1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,-1.000000</positions>
		<normals>0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-0.000000,-1.000000,-0.000000,-0.000000,-1.000000,-0.000000,-0.000000,-1.000000,-0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,-0.000001,0.000000,1.000000,-0.000001,0.000000,1.000000,-0.000001,0.000000,-0.000000,-0.000000,1.000000,-0.000000,-0.000000,1.000000,-0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,0.000000,-1.000000,0.000000,0.000000,-1.000000,0.000000,0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000</normals>
		<uv1>0.333333,0.498471,0.001020,0.500000,0.000000,0.001529,0.333333,0.498471,0.000000,0.001529,0.332314,0.000000,0.000000,0.998471,0.001020,0.500000,0.333333,0.501529,0.000000,0.998471,0.333333,0.501529,0.332314,1.000000,0.665647,0.500000,0.666667,0.998471,0.333333,0.501529,0.666667,0.998471,0.334353,1.000000,0.333333,0.501529,0.998981,0.000000,1.000000,0.498471,0.666667,0.001529,1.000000,0.498471,0.667686,0.500000,0.666667,0.001529,1.000000,0.501529,0.998981,1.000000,0.667686,0.500000,0.998981,1.000000,0.666667,0.998471,0.667686,0.500000,0.334353,0.500000,0.333333,0.001529,0.665647,0.000000,0.334353,0.500000,0.665647,0.000000,0.666667,0.498471</uv1>
		<faces>0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35</faces>
	</mesh>

	<camera id="maincamera" loc_z="20" />

	<material id="boxmaterial" color="#900" />

	<scene id="mainscene" camera="#maincamera" ambient_color="#fff">
		<light id="mainlight" loc_y="5" type="L_POINT" />
		<object id="box" mesh="#box" rot_x="-.8" rot_y=".5" material="#boxmaterial" />
	</scene>
</glge>

Then, load and render the scene using JavaScript.

var doc = new GLGE.Document();

doc.onLoad = function() {
	var renderer = new GLGE.Renderer(document.getElementById("canvas"));
	var scene = doc.getElement("mainscene");
	renderer.setScene(scene);

	//render each millisecond
	setInterval(renderer.render, 1);
}

// load the xml containing the scene data
doc.load("scene1.xml");

After adding some simple textures and animations to the XML scene definition, you get something looking like this:

As you can see, GLGE makes it extremely easy to get started with writing 3d hardware accelerated 3d applications in JavaScript.  Awesome work!

You can check out lots more demos on the GLGE website, the code on Github, and Dennis Ippel’s fantastic GLGE tutorial here.

Visualizing and Manipulating Audio in the Browser

The Firefox team has been busy working on the HTML5 Audio Data API, which lets JavaScript code interact with the Audio tag in a bidirectional manner.  Developers have been busy putting together some cool demos of what the API enables, including visualizations using the Canvas element, as well as playing interactive audio generated by JavaScript itself.

Jacob Seidelin has written some Winamp style visualizations for live audio playing in the browser.  If you are not running the experimental version of Firefox that this API is a part of, the audio playback will fall back to Soundmanager2 (Flash audio).  This shows what is now possible in the browser in real time.  I hope that other browsers implement the API soon!

Another demo, this time using WebGL for hardware-accelerated 3d graphics, was written by Charles Cliffe and does beat detection.  It uses the CubicVR 3D engine built on WebGL as well as Processing.js for the rendering.  Very cool!

At the beginning of this post, I mentioned that the API worked in the opposite direction as well: audio output from JavaScript.  One of the demos showcasing this technology, was written by Alistair MacDonald, and is an instrument inspired by Brian Eno’s Bloom iPhone application.  Check out the demo video, below.

Finally, check out this text-to-speech engine written in JavaScript using the Mozilla Audio API.  It is a real showcase of what the browser is now able to do.  Awesome work, everyone.  For more demos, check out this post on the Bocoup blog by Alistair MacDonald.  JavaScript FTW!