Articles related to JavaFX Script Mike's Weblog

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.

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 {}
 2 
 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 ];
22 
23 for (i in [1..15]) {
24     wormElement[i].parent = wormElement[i-1];
25 }

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 }

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