Ghoscher's Blog

A few weeks ago (during exams period 😛 ) I was playing with spring physics, it turned out to be easy to implement and the results were cool enough for me to write a demo in Android, Microsoft XNA, and Javascript :D.

Before I talk too much, here see the results for yourself, this is the web version :  SpringLab Web Version.

Reminds you of World of Goo 😀 ?

I came across this tutorial, from which I learned this lovely vector equation:

 F = -k(|x|-d)(x/|x|) - bv

I applied it to 2D springs and it gave amazing results especially when having a mesh of nodes connected through springs! the mesh looks like a 2D cloth simulation!.

Essentially I update all the springs (code below) then update the nodes (adding acceleration to velocity, velocity to position)

 /// <summary>
/// Update physics (Applies force and adds to the acceleration of connected nodes)
/// </summary>
public void Update()
{
	//    F = -k(|x|-d)(x/|x|) - bv
	float xAbs = Vector2.Distance(node1.p, node2.p);
	if (isString && xAbs < d) return;

	Vector2 F1 = -k * (xAbs - d) * (Vector2.Normalize(node2.p - node1.p) / xAbs) - b * (node1.v - node2.v);
	Vector2 F2 = -k * (xAbs - d) * (Vector2.Normalize(node1.p - node2.p) / xAbs) - b * (node2.v - node1.v);

	// Nans propagate through the nodes network, we don't want that
	if (F1.IsNan() || F2.IsNan()) return;

	// Add acceleration. Updating velocity\positions should happen after all springs are updated
	node1.a += F1 / node1.m;
	node2.a += F2 / node2.m;
}

I added many features like dragging and creating nodes and springs and changing parameters at runtime.

I made a short video to demonstrate what you can do using this simple equation, I hope you watch it 🙂 it took some time to make it:

XNA Version:

Why did I use a dying technology? because XNA allowed me to make a prototype really fast!.

Anyway, the XNA version is faster and smoother than the web version, you can try it here:

SpringLab PC (60KB) – you will need to install Microsoft XNA Framework Redistributable 4.0 (6.7MB) if you don’t have XNA Game Studio installed.

SpringLab PC Source (78 KB) – XNA4, VisualStudio 2010

If you want to take a look at the source code of the project I recommend this source code, since it’s much easier to read than the Java or the Javascript version.

HTML5 Version:

I’m not sure if it’s mouthful to say “HTML5 version” :D, anyway no images are used in this version since all the rendering is done through the canvas object.

I had to write this version or otherwise no one will try the app, people become less interested when it comes to downloading files ;), the web version is much slower than the other two versions, I’m not sure why but if you can help me increase the performance I’ll be happy to hear from you.

SpringLabMin.html (10KB) – Javascript code minified using jscompress.com

SpringLab HTML5 Source.zip (12KB) – Aptana Studio project

I tried the web version on my Android, both logic and rendering worked perfectly but there’s always this scrolling and zooming issues with phone browsers, If you want to move a node you’ll scroll the page and it won’t work, event handling tends to be more difficult on mobile phone browser.

Android Version:

I made this version after finishing both the web version and the desktop one, the best thing about this version is the multi-touch support :D, I made sure to make the app support as many fingers as your device can recognize :D.

You’ll need an Android 2.2+ to try this app (sorry if you are from the other 0.2%!)

SpringLab.apk (216 KB)  – Android 2.2+

Works on BlueStacks too :).

SpringLab Android Source.zip (460 KB) – Eclipse project

“Was it worth wasting your time implementing three different versions?”

To be honest: I’m not sure, I mean if you’re making a game you’ll have to make sure you support many platforms, I consider the time I spent on this project as some sort of training for the future :).

One thing worth mentioning: creating a working version didn’t take much time, most time was spent on the small details to make each version look better.

I hope you like it 🙂 , you can do much with simple spring physics, the equation above works on 3D too.