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=”http://www.bit-101.com/blog/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?

This entry was posted in Flash. Bookmark the permalink.

15 Responses to More on Verlet IK System

  1. noah says:

    I think you should call it: BitstIK, or BitstIKs.

    Looks like a really useful engine!

  2. jon says:

    in this example:

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

    when creating the VerletStick, why pass a string reference (“a”, “b”) instead of the VerletPoint object?

  3. eme says:

    i should play a bit with it to ask for new features, but the second thing that comes to my mind when seeing the examples is skinning (first is ‘uooh! awesome, man!’)

    as for the name, i like KAPPA or iKAPPA:

    KAPPA for Keith Peters
    KAPPA greek letter for K:
    Greek letters are usually used in physics
    cool logo: http://en.wikipedia.org/wiki/Kappa
    KAPPA: the first thing in wiki i found: Kappa are legendary creatures, a type of water sprite ๐Ÿ˜‰ http://en.wikipedia.org/wiki/Kappa_%28folklore%29

    iKAPPA would add the IK thing

  4. kp says:

    the plan is that it can be a string id or a reference to a point. the string is useful when using the verlet system and particularly in using xml.

  5. hush says:

    “Sticks And Stones Engine” ;]

    Nice work, looking forward to playing with this baby ;]

  6. Dan says:

    Looks awsome! One requirement .. well, when playing with APE I had the problem that groups of particles connected with constraints would sometimes ‘collapse’ i.e. flip positions when hitting against an obstacle really hard. Some easy mechanism to prevent that would be nice, other that having to add loads of cross-constraints.

  7. wonderwhy-er says:

    Well such things are always interesting to play with ๐Ÿ™‚

    Well first thing is some control over stick characteristics. I suppose you have some parameters of how they interact with points.

    Mmm. Then control over gravity in varlet system would be nice ๐Ÿ™‚

    And then exporting current VarletSystem state back to XML.

    Well adding collisions would be next step.

    Anyways it will be interesting to see where you will get with it ๐Ÿ™‚ Was playing with such things my self ๐Ÿ˜€ http://wonderwhy-er.deviantart.com/art/Ball-world-2-Constraints-48575042

  8. kp says:

    jon, actually, my error. the VerletPoint constructor does not take strings. it takes references to VerletPoints, as you mentioned.
    I was thinking of the VerletSystem.addStick() method, which can take strings or references. this is so you don’t need to store references if using the system:

    vs.addPoint(100, 100, “a”);
    vs.addPoint(200, 200, “b”);
    vs.addStick(“a”, “b”, “firstStick”);

    I corrected the code in the posting above.

  9. Laurent says:

    Hi Pete,

    For the name what about “Viktor”

    or Victor….It’s just a very cool name, I know one very cool Victor, my little cousin, perhaps that’s why Victor sounds cool to me ๐Ÿ™‚

    And then…it’s like Vector, and vectors are awesome mathematical object, very usefull, perhpas as usefull as your engine can be, I have to try it first, but this introduction makes it familiar and handy.

    and Tor…tor….tortion, twisting, physics, super heroe…

    L

  10. Laurent says:

    “A tor is a rock,
    outcrop formed by weathering, usually found on or near the summit of a hill. In the South West of England, where the term originated, it is also a word used for the hills themselves รขโ‚ฌโ€œ particularly the high points of Dartmoor in Devon and Bodmin Moor in Cornwall.”

    sounds fantasy… :]

  11. laurent says:

    hm…I make up a word there, tortion is my mistakly way of saying torsion.

    cheers
    L

  12. abbas says:

    requests : maybe if you add a drag property to the VerletSystem
    VerletSystem.draggable = true
    so the sticks would be drag from any point and interact in physical way

    “abbas” would be a cool name for the engine ๐Ÿ™‚

  13. Matt says:

    There was something else like this made in.. Java I believe. It was called soda constructor. I’m glad to finally see a similar thing in flash ๐Ÿ™‚
    As for a name… Hm. Confluence?

  14. goliatone says:

    Hi there,
    i was wondering if the engine ever got released, and the state of the project.
    btw, im reading making things move, and im having tons of fun!

    regards,
    goliatone

  15. Dorian says:

    I’m also wondering if this project is currently active or if you’re willing to expose the source as it exists right now. I need to implement some IK and the CS4 classes are not going to do the job. Thanks!

Leave a Reply