BIT-101 [2003-2017]

More on Verlet IK System


I wanted to clarify a few details about the Verlet IK engine I posted some videos on earlier. First of all, it’s not just the editor you see there. It is an engine comprised of several classes that I will be open sourcing as soon as it’s ready. So you can use it by creating instances of points and sticks like so:

[as]new VerletPoint(x, y, weight, id);
new VerletStick(pointA, pointB, id);[/as]

For example:

[as]var pointA:VerletPoint = new VerletPoint(100, 100, 1, “a”);
var pointB:VerletPoint = new VerletPoint(200, 200, 1, “b”);
new VerletStick(pointA, pointB, “firstStick”);[/as]

You then store your points and sticks in arrays and loop through them. Usually first you’ll want to update the points, then update the sticks:

[as]for(var i:int = 0; i < points.length; i++)
{
points[i].update();
}

for(var i:int = 0; i < sticks.length; i++)
{
sticks[i].update();
}[/as]

You can also choose to add gravity and constrain points to a rectangle.

Then, you can render the sticks with the drawing api:

[as]graphics.lineStyle(0);
for(var i:int = 0; i < sticks.length; i++)
{
sticks[i].render(graphics);
}[/as]

Or, you can assign a stick a skin, which can be any display object:

[as]firstStick.skin = someSprite;[/as]

Then you can update the skin on the stick:

[as]firstStick.updateSkin()[/as]

This will rotate and scale the skin so it fits between the two points that make up the stick.

If you don’t want to go so low level, you can use the VerletSystem class, which would look something like this:

[as]var vs:VerletSystem = new VerletSystem();
vs.addPoint(100, 100, “a”);
vs.addPoint(200, 200, “b”);
vs.addStick(“a”, “b”, “firstStick”);[/as]

Then in your enterFrame or timer handler, you update the whole system with a couple of lines:

[as]vs.update(stageRect);
vs.renderSticks(graphics);[/as]

Or you can make it even simpler by passing in an XML document to the VerletSystem’s constructor:

[as]new VerletSystem(xmlDoc);[/as]

The XML looks something like this:

[xml]




[/xml]

Furthermore, with the VerletSystem, you can get at any point or stick with it’s id:

[as]var stick:VerletStick = vs.getStickByID(“stick0”);
var point:VerletPoint = vs.getPointByID(“point0″);[/as]

Then you can manipulate its position, velocity, weight, fixedness, length, etc. or even delete it, like in the following example. Click on the stage to delete the left hanging stick.

[kml_flashembed movie=“https://www.bit-101.com/2003/wp-content/uploads/2008/04/deletestickdemo.swf” width=“500″ height=“500″/]

Of course, this also opens up the door to direct interaction with points or sticks based on mouse position or whatever.

So the Editor uses the XML method. It loops through the points and sticks you made and creates an XML document and a new VerletSystem. You can also copy the XML to the clipboard and use it with your own app.

Two requests:

Any features you’d like to see, or implementations that would make it more useful?

Any idea for a cool name for the engine?

« Previous Post
Next Post »