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
8 }
9 currentHead: Point { x: 30 y: 30 }
10 currentLength: 20
11 },
12 for (i in [1..15])
13 Bone {
14 content: Circle {
15
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).
Like this:
Like Loading...
9 responses to “Inverse Kinematics with JavaFX Script”
Crashes Firefox on OS X 🙁 (but works in Safari)
Only shows "starting applet…" and a gray area on Firefox/Ubuntu-AMD64.
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.
wht
works great i saw it and is very nice really
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.
works great on xp/ff3. Nice animation – look forward to seeing more of this
@72.229.238.107:
As far as I know, inverse kinematics was just recently added to Flash. 🙂
@javanut:
I just posted a new sample yesterday: http://blogs.sun.com/michaelheinrichs/entry/thank_you_and_a_tutorial
Hope you like it.