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.

<script src="http://dl.javafx.com/dtfx.js"></script> <script> javafx( { archive: "http://blogs.sun.com/michaelheinrichs/resource/IK/WormSample.jar", draggable: true, width: 640, height: 480, code: "wormsample.Main", name: "WormSample" } ); </script>


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 {}
 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 }

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

Comments:

Crashes Firefox on OS X :-( (but works in Safari)

Posted by Tim Yates on January 07, 2009 at 04:48 PM CET #

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

Posted by SwitchBL8 on January 08, 2009 at 03:49 AM CET #

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.

Posted by Michael Heinrichs on January 08, 2009 at 04:02 AM CET #

wht

Posted by guest on January 20, 2009 at 05:39 AM CET #

works great i saw it and is very nice really

Posted by guest on February 02, 2009 at 09:23 PM CET #

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.

Posted by guest on February 23, 2009 at 10:23 PM CET #

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

Posted by javanut on February 28, 2009 at 05:52 AM CET #

@72.229.238.107:
As far as I know, inverse kinematics was just recently added to Flash. :-)

Posted by Michael Heinrichs on February 28, 2009 at 09:08 AM CET #

@javanut:
I just posted a new sample yesterday: http://blogs.sun.com/michaelheinrichs/entry/thank_you_and_a_tutorial
Hope you like it.

Posted by Michael Heinrichs on February 28, 2009 at 09:11 AM CET #

Post a Comment:
Comments are closed for this entry.
About

Michael Heinrichs

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today