New version of library for inverse kinematics released

Yesterday I uploaded the new version 1.2 of the library FXUtil for inverse kinematics with JavaFX Script.

The new features:

  • The main focus was to release a version, which is compatible with the JavaFX SDK 1.2 (finally…).
  • The animation classes TranslateHeadTransition and TranslateTailTransition are now derived from the class javafx.animation.Timeline. This enables developers to create more complex animations by assembling them in ParallelTransition and SequentiellTransition objects (both in the package javafx.animation.transition).
  • Two bugs were fixed.

Tutorial for Inverse Kinematics Part 1 is published

Screenshot of Tutorial Part 1

Figure 1: Screenshot Tutorial Part 1

Today I published the first part of the tutorial for doing inverse kinematics with the library FXUtil. It focuses on the static structure – or skeleton – of an animated object. The tutorial explains what bones are, how they are assembled and how everything is linked with visual elements.

The second part will focus on how to animate an object bu pulling single bones of the skeleton. It is almost done and will be published shortly. Stay tuned!

Thank you and a Tutorial-Teaser

Yesterday was probably the best day of my (admittedly short) life as a blogger. Mike’s Weblog made it into the Popular Blogs section at For amazing 16 hours (I checked last time shortly before I went to bed) my blog was at eye level with Sun’s most famous blogs – ok, not really, but almost.

I was not able to defend the positon till the end, but a total of more than 800 hits is absolutely phantastic. So I can only say:

Thank you, thank you, thank you!

Thank you so much for reading my blog and all the great positive feedback I got in the last couple of days. This is truly motivating and gives me enough drive to go on and on and on.

Tutorial Teaser

Today I will share a little sample “Drag the Dummy ” to play with. It’s a teaser for my upcoming tutorial. In the course of it this script es written and it explains the basics of FXUtil, my library for inverse kinematics with JavaFX Script.

Drag the head, elbows, hands, knees or feet of the dummy and see inverse kinematics at play. Have fun!

Drag the Dummy

Library for Inverse Kinematics with JavaFX Script is published

Screenshot of

Figure 1: Screenshot

It took me longer than I had expected to get everything finished, mainly because half of my family became sick and I had to play the nurse. But now you can download the library.

I created a website, which features the library and API documentation: I want to publish tutorials there, too, but unfortunately they are not finished yet. I am working hard to get them done asap.

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). :-)