Inverse Kinematics with JavaFX Script

During our vacation we had some snow, which was nice, but not enough for skiing. That gave me enough time to work on this little library I was thinking about. It allows to use inverse kinematics to animate objects in JavaFX Script.

Below you can find a simple example, which uses the library. Press anywhere in the black area and see what happens.

Worm Sample

Nice, isn't it? But what makes it really cool is how short and simple the required code is. First the structure of the worm must be defined. The required code is shown in code sample 1.
 1 def skeleton = Skeleton {}
 3 def wormElement: Bone[] = [
 4     Bone {
 5         skeleton: skeleton
 6         content: Circle {
 7             // ... more attributes here
 8         }
 9         currentHead: Point { x: 30   y: 30 }
10         currentLength: 20
11     },
12     for (i in [1..15])
13         Bone {
14             content: Circle {
15                 // ... more attributes here
16             }
17             currentLength: 20
18             minAngle: -60
19             maxAngle: 60
20         }
21 ];
23 for (i in [1..15]) {
24     wormElement[i].parent = wormElement[i-1];
25 }

Code Sample 1: Definition of the structure

The heart of the library is the class Bone. Bones are assembled to define the structure of the object, which is going to be animated. In this example, the bones just form a linked list, but arbitrary trees are possible. The other interesting class in this code sample is the class Skeleton. It is the bridge between bones and the scenegraph - it is a container-class for bones and extends Node. It can be plugged anywhere in a scene and takes care that all bones are drawn. Code sample 2 shows how the worm is animated. Only the head of the worm needs to be moved, the rest is calculated. The class TranslateTransition in this snippet is not the same as the one in the package javafx.animation.transition, because animations with inverse kinematics are a little different. But I tried to be as close to the original as possible.
 1 onMousePressed: function(evt: MouseEvent) {
 2     var target = Point {
 3         x: evt.sceneX
 4         y: evt.sceneY
 5     }
 6     TranslateTransition {
 7         bone: wormElement[0];
 8         duration: Duration.valueOf(target.distance(wormElement[0].currentHead));
 9         toTarget: target
10     }.play();
11 }

Code Sample 2: Definition of the animation

These two code sample are all that is required to animate the worm! I want to publish the library pretty soon, but first I need to do some homework: write a small tutorial, organize some web space, read the JavaFX license etc. Stay tuned, it can't take too long (at least I hope so). :-)

9 responses to “Inverse Kinematics with JavaFX Script”

  1. Tim Yates Avatar
    Tim Yates

    Crashes Firefox on OS X 🙁 (but works in Safari)

  2. SwitchBL8 Avatar

    Only shows "starting applet…" and a gray area on Firefox/Ubuntu-AMD64.

  3. Michael Heinrichs Avatar
    Michael Heinrichs

    It looks like the JavaFX launcher and my blogging software don’t like each other…

    I will look into this tonight (European time). Sorry for that.

  4.  Avatar


  5.  Avatar

    works great i saw it and is very nice really

  6.  Avatar

    on MAC the screen jumps and the application turns to white every time I scroll the page a little. from a bystanderd’s pov this looks like a sad attempt at really bad Flash from 1997.

  7. javanut Avatar

    works great on xp/ff3. Nice animation – look forward to seeing more of this

  8. Michael Heinrichs Avatar

    As far as I know, inverse kinematics was just recently added to Flash. 🙂

  9. Michael Heinrichs Avatar

    I just posted a new sample yesterday:
    Hope you like it.