What is a Bone object ?

Figure 1: Single Bone

A bone is the fundamental building block for inverse kinematics with the library javafx-ik. A bone has a length and a joint around which it can be rotated. The end with the joint is called the head of the bone, the other end is called the tail. Figure 1 shows a single bone, its head, tail, and length.

In the library javafx-ik, a bone is resembled by the class Bone. To initialize it, the length has to be passed as a minimum, but usually also the angle is set during construction. The code sample above sets up a bone with a length of 50 and a rotation of 0, which means it will point horizontally to the right.

Assembling bones

Figure 2: Assembling two Bones

Bones can be assembled to define the skeleton of an animated object. Two bones are linked by attaching the tail of one bone b1 to the head of another bone b2. Bone b1 is called the parent of bone b2, bone b2 is called a child of bone b1. Figure 2 shows two connected bones b1 and b2.

The class Bone offers two properties for the structure. The read-only property parent stores the parent of a bone, the property children is an ObservableList of all child-bones. The following snippet shows how two bones b1 and b2 can be connected:

Figure 3: Structure of the Dummy

The read-only property angle defines the rotation between a bone and the extension of its parent bone. A value of 0 results in a straight line, a value of 180 results in the child bone overlapping its parent, but pointing in the opposite direction.

Although having parents and children imposes an order on the bones in a skeleton, it usually makes no difference, which bone is the parent and which is the child.

By repeatedly linking heads and tails of Bone objects, it is possible to create a chain. This simple structure is used in the caterpillar sample. Complex objects are defined using a tree of bones.

The exact position of a bone depends on the position of the parent and the rotation.

The bone at the top of the tree, which does not have a parent, is called the root bone. The root bone is treated slightly different during initialization. The property angle of a root bone defines its rotation in the overall scene. You can think of it as having a parent bone which points horizontally to the right.

Now we are able to define the structure of our dummy, as shown in Figure 3. The code to generate the skeleton of the dummy can be seen in the code sample below.

Attaching Visual Components

Bones themselves are not visible. They are only defining the structure. The property content, which is an ObservableList of Node objects, can be used to attach visible elements to a bone.

Figure 4: Adding visual elements

The position and rotation of the attached Node objects is determined by the underlying bone. The origin of the local coordinate system for all attached nodes is the head position of the bone. If the head position is moved, so are all its nodes.

The rotation of a bone is also passed to the nodes. If the bone is not rotated at all and angle has the value 0, it is pointing horizontally to the right. In the code sample above a bone is defined with two circles and an ellipse attached. This bone is shown in Figure 4.

The code sample below shows the required changes that define the appearance of our dummy by attaching circles and ellipses. The resulting dummy can be seen in Figure 5. In the picture, I added symbols for the bones to make them visible.

Note that none of the visual components are rotated themselves and all positions are local to the bone. The final positions and rotations in the scene are calculated from the positions and rotations of the bones only.

Adding everything to the scenegraph

Figure 5: Dummy with all visual elements attached

Now there is just one final piece missing to be able to render the dummy on the screen: the class Skeleton. The class Skeleton is the bridge between the Scenegraph and the bones with the attached Node objects. It extends Parent and can therefore be added anywhere in the Scenegraph. It can be translated, rotated, scaled and transformed like any other node in the Scenegraph.

A Skeleton object and the bones of an animated object are linked by setting the property skeleton of any bone. You will notice that the property skeleton of all bones in the same structure will be updated to point to the same Skeleton object afterwards. It is not possible that two bones in the same structure point to different Skeleton objects.

To see the result, download the full Dummy.java file. To compile the script, you need to add the library javafx-ik to your classpath. You can download the sources from GitHub.

What’s next?

The first part of this tutorial showed how to define the static structure – or skeleton – of an animated object and how to attach visible components. The second part will explain how this structure can be animated to create naturally looking animations.

Fig. 1: Screenshot Caterpillar

The original library was written in JavaFX Script and looking at the code created some cozy nostalgic feelings. What a beautiful language! Doing the port was pretty interesting, because even though Java and JavaFX Script had many similarities, some of the concepts were extremely different. Definitely it was a fun exercise.

An initial version is ready and can be used. I plan to add more features later, which means the API may change at some point. There is no documentation ready right now except for some basic comments in the source code. But I added two examples, which are probably a good starting point. JavaFX veterans might remember these samples, because they are direct ports from the samples of the first version of the library.

Fig. 2: Screenshot Dummy

First there is the Caterpillar Demo. You can click anywhere in the window and the caterpillar will move there. Only the head is actually animated directly, the rest of the body is moved automatically using inverse kinematics.

The second example is a little dummy figure. You can drag the parts of its body and the rest will follow.

I also found the text of a tutorial I had written. Rewriting it to match the new Java API should not be a problem, but unfortunately I could not find the images that belong to the tutorial yet. I keep searching!

And finally, the most important part: the link. You can find the sources of the library including the code of the two samples on GitHub. Sources of javafx-ik.

JavaFX for Business Application Developers

First the slides of the session “JavaFX for Business Application Developers”.

Edit:

I am not sure, if the session was recorded. If additional material becomes available, I will update this post.
There is more material including a video available.

Live-Coding BOF: Writing a Game with JavaFX

Below is the link of the NetBeans project I created during the BOF. It is almost the original code, I just reordered some of the statements and made the constants private. For those of you who did not attend the BOF:  I am considering to make a tutorial out of this and post it here on the blog. Please tell me, if you would be interested in that.

FxGame Sources

Edit:

There is more material including a video available.

FXGame by Michael Heinrichs is licensed under a Creative Commons Attribution 3.0 Unported License.

The AnimationTimer provides an extremely simple, but very useful and flexible feature. It allows to specify a method, that will be called in every frame. What this method is used for is not limited and, as already mentioned, does not have anything to do with animation. The only requirement is, that it has to return fast, because otherwise it can easily become the bottleneck of a system.

To use it, a developer has to extend AnimationTimer and implement the abstract method handle(). This is the method that will be called in every frame while the AnimationTimer is active. A single parameter is passed to handle(). It contains the current time in nanoseconds, the same as what you would get when calling System.nanoTime().

Why should one use the passed in value instead of calling System.nanoTime() or its little brother System.currentTimeMillis() oneself? There are several reasons, but the most important probably is, that it makes your life a lot easier while debugging. If you ever tried to debug code, that depended on these two methods, you know that you are basically screwed. But the JavaFX runtime goes into a paused state while it is waiting to execute the next step during debugging and the internal clock does not proceed during this pause. In other words no matter if you wait two seconds or two hours before you resume a halted program while debugging, the increment of the parameter will roughly be the same!

AnimationTimer has two methods start() and stop() to activate and deactivate it. If you override them, it is important that you call these methods in the super class.

The Animation API comes with many feature rich classes, that make defining an animation very simple. There are predefined Transition classes, it is possible to define a key-frame based animation using Timeline, and one can even write a custom Transition easily. But in which cases does it make sense to use an AnimationTimer instead? – Almost always you want to use one of the standard classes. But if you want to specify many simple animations, using an AnimationTimer can be the better choice.

The feature richness of the standard animation classes comes with a price. Every single animation requires a whole bunch of variables to be tracked – variables that you often do not need for simple animations. Plus these classes are optimized for speed, not for small memory footprint. Some of the variables are stored twice, once in the format the public API requires and once in a format that helps faster calculation while playing.

Below is a simple example that shows a star field. It animates thousands of rectangles flying from the center to the outer edges. Using an AnimationTimer allows to store only the values that are needed. The calculation is extremely simple compared to the calculation within a Timeline for example, because no advanced features (loops, animation rate, direction etc.) have to be considered.

package fxsandbox;

import java.util.Random;
import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class FXSandbox extends Application {
    
    private static final int STAR_COUNT = 20000;
    
    private final Rectangle[] nodes = new Rectangle[STAR_COUNT];
    private final double[] angles = new double[STAR_COUNT];
    private final long[] start = new long[STAR_COUNT];
    
    private final Random random = new Random();

    @Override
    public void start(final Stage primaryStage) {
        for (int i=0; i<STAR_COUNT; i++) {
            nodes[i] = new Rectangle(1, 1, Color.WHITE);
            angles[i] = 2.0 * Math.PI * random.nextDouble();
            start[i] = random.nextInt(2000000000);
        }
        final Scene scene = new Scene(new Group(nodes), 800, 600, Color.BLACK);
        primaryStage.setScene(scene);
        primaryStage.show();
        
        new AnimationTimer() {
            @Override
            public void handle(long now) {
                final double width = 0.5 * primaryStage.getWidth();
                final double height = 0.5 * primaryStage.getHeight();
                final double radius = Math.sqrt(2) * Math.max(width, height);
                for (int i=0; i<STAR_COUNT; i++) {
                    final Node node = nodes[i];
                    final double angle = angles[i];
                    final long t = (now - start[i]) % 2000000000;
                    final double d = t * radius / 2000000000.0;
                    node.setTranslateX(Math.cos(angle) * d + width);
                    node.setTranslateY(Math.sin(angle) * d + height);
                }
            }
        }.start();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
    
}

Too bad I still have not figured out, how I can add a script to the slides. I know I can add notes, but they are very well hidden in my opinion. There must be a better way.

Pretty much every time when I have a new idea and want to create some initial drafts, I do not really know which tool to use. My favorite currently is using a real whiteboard. But unfortunately you cannot take it with you and you cannot keep the content for very long. My phone is full of pictures from whiteboard drawings, I guess that sounds familiar to most of you…

Paper and pen is certainly another possible solution, but the drawbacks are very similar. It is hard to find your notes later. Plus it is cumbersome to copy everything into the computer when you want to continue with your idea.

Using a web application looks like a natural choice, because it allows you to keep everything forever while making it easy to find old notes. You can continue to work from anywhere. And your drafts are already in the computer, you do not have to copy them.

But unfortunately the available tools do not really work for me. They are usually great for creating presentable content, giving you all kinds of options to make the result look good. But that is only the second step, first you want to sketch out your ideas roughly and quickly – worrying about pixel perfect alignment etc. is hindering rather than helping.

And here SketchHatch comes in. I tried to make the user interface as close to a real whiteboard as possible. For instance you will notice, that the sticky notes are tilted, just like real ones. Or all lines and rectangles are not straight, but a little wiggly just like hand drawn lines.

I encourage you to give it a try. Pretty much all the people that have tried the application so far agreed that the user interface is fun and really different from anything they have seen so far. So please try SketchHatch (and do not forget to send me your feedback, even if you do not like the application)!

Thanks in advance for all replies,

Michael

The application provides an online whiteboard. You can attach sticky notes and draw on the canvas directly. It is pretty flexible. My original idea was a tool that helps me while brainstorming new ideas. But looking at the final result now, I guess you can use it for all sorts of things you would usually use a whiteboard for. Maybe even as a Scrum board or a Kanban board.

Below is a screenshot. If this looks interesting, stay tuned for the announcement sometime next week.

It took me a while to pick up CSS in JavaFX to be honest. One reason was, that it uses some features of CSS 3, that I was not familiar with. It was interesting to learn this stuff. Another reason was, that names for the same thing differ between JavaFX and “standard CSS” (e.g. color vs. -fx-text-fill). But I heard there are plans to fix that. Though the main reason why it took a while to use it efficiently was, that I did not know how to style a concrete control class. I ended up looking at the default stylesheet caspian.css to figure it out.

Overall I am very impressed and like CSS in JavaFX a lot. (Disclaimer: I was not involved in the design or implementation of the CSS functionality at any point. This is my honest opinion without any hidden motives.)

I think it is worth mentioning, that all of the examples are fully functional applications, layouts continued to work, and the Java code was not changed at all – all is done in CSS, even the bracket shapes in the last example. No images were used.

The Horse in Motion

There are many very good articles out there describing predefined Transitions (TranslateTransition, RotateTransition etc.) and Timelines. Most of the time these approaches are sufficient, but in some cases one just needs more flexibility. And that is when the Transition class comes into play, which can be extended to define a custom animation.

To write your own animation class by extending Transition, two steps are required:

1. Specify the duration of a single cycle
2. Implement the interpolate() method

Duration of a single cycle

You can set the duration of a cycle by calling the protected method setCycleDuration(). Most of the time the duration is either fixed (if the animation is used only once) or configurable by the user. Almost all predefined Transitions in the JavaFX runtime fall into the second category. They expose their cycle duration via the duration property, you probably want to do that in your class, too. In rare cases the duration of a cycle depends on other values. For example the duration of a SequentialTransition and ParallelTransition depend on the duration of their children.

You can change the cycle duration as often as you like, but note that it does not effect a currently running animation. Only after an animation is stopped and started again is the new cycle duration taken into account.

The interpolate() method

The interpolate() method is abstract and needs to be overridden. It defines actual behavior of the animation. The method interpolate() is called by the runtime in every frame while the animation is playing. A value frac, a double between 0.0 and 1.0 (both inclusive) is passed in, which specifies the current position. The value 0.0 marks the start of the animation, the value 1.0 the end. Any value in between defines the relative position. Note that a possible Interpolator is already taken into account when the value of frac is calculated.

The class SpriteAnimation

To demonstrate how a custom transition is defined, we will look at a class that allows us to do Sprite animations. It takes an image that has several frames and moves the viewport from one frame to the other over time. We will test this class with the famous “The Horse in Motion” by Eadweard Muybridge. Enough talk, here is the code:

package sandboxfx;

import javafx.animation.Interpolator;
import javafx.animation.Transition;
import javafx.geometry.Rectangle2D;
import javafx.scene.image.ImageView;
import javafx.util.Duration;

public class SpriteAnimation extends Transition {

    private final ImageView imageView;
    private final int count;
    private final int columns;
    private final int offsetX;
    private final int offsetY;
    private final int width;
    private final int height;

    private int lastIndex;

    public SpriteAnimation(
            ImageView imageView, 
            Duration duration, 
            int count,   int columns,
            int offsetX, int offsetY,
            int width,   int height) {
        this.imageView = imageView;
        this.count     = count;
        this.columns   = columns;
        this.offsetX   = offsetX;
        this.offsetY   = offsetY;
        this.width     = width;
        this.height    = height;
        setCycleDuration(duration);
        setInterpolator(Interpolator.LINEAR);
    }

    protected void interpolate(double k) {
        final int index = Math.min((int) Math.floor(k * count), count - 1);
        if (index != lastIndex) {
            final int x = (index % columns) * width  + offsetX;
            final int y = (index / columns) * height + offsetY;
            imageView.setViewport(new Rectangle2D(x, y, width, height));
            lastIndex = index;
        }
    }
}

Listing 1: The class SpriteAnimation

For the sake of simplicity, this example class just takes all parameters in the constructor and does not allow to change them later. In most cases this is sufficient.

The class expects an ImageView, the duration of a single cycle (that is how long it should take to go through all frames), the number of frames, the number of columns (how many frames are in one row in the image), the offset of the first frame, and the width and height of all frames. The duration of the full cycle is passed to the super class by calling setCycleDuration(), all other values are stored. As a last step in the constructor, the interpolator is set to linear. By default an easing interpolator is set for all transitions, because that is what usually gives the best results. But in our case we want to run through all frames with the same speed and an easing interpolator would look weird.

The interpolate() method takes the passed in value and calculates which frame needs to be displayed at the moment. If it changed since the last time interpolate() was called, the position of the new frame is calculated and the viewport of the ImageView set accordingly. That’s it.

The Horse in Motion

To demonstrate the SpriteAnimation class, we will animate The Horse in Motion. The code to do that is straightforward, most of the work is already done. It creates an ImageView with the viewport set to the first frame and instantiates the SpriteAnimation class. The parameters are just estimates, you may want to tweak them a little.

package sandboxfx;

import javafx.animation.Animation;
import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import javafx.util.Duration;

public class SandboxFX extends Application {

    private static final Image IMAGE = new Image("http://upload.wikimedia.org/wikipedia/commons/7/73/The_Horse_in_Motion.jpg");

    private static final int COLUMNS  =   4;
    private static final int COUNT    =  10;
    private static final int OFFSET_X =  18;
    private static final int OFFSET_Y =  25;
    private static final int WIDTH    = 374;
    private static final int HEIGHT   = 243;

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {
        primaryStage.setTitle("The Horse in Motion");

        final ImageView imageView = new ImageView(IMAGE);
        imageView.setViewport(new Rectangle2D(OFFSET_X, OFFSET_Y, WIDTH, HEIGHT));

        final Animation animation = new SpriteAnimation(
                imageView,
                Duration.millis(1000),
                COUNT, COLUMNS,
                OFFSET_X, OFFSET_Y,
                WIDTH, HEIGHT
        );
        animation.setCycleCount(Animation.INDEFINITE);
        animation.play();

        primaryStage.setScene(new Scene(new Group(imageView)));
        primaryStage.show();
    }
}

Listing 2: The Horse in Motion with JavaFX

Conclusion

Defining your own animation by extending the Transition class is simple and straightforward. It is an extremely powerful approach though, because an animation created this way has all the functionality regular animations have. For example you can play it slower and faster by changing the rate and you can play it even backwards. You can run it in a loop and you can use it within ParallelTransition and SequentialTransition to create even more complex animations.

• What about JavaFX on the iPad or other mobile devices?
• Is Swing dead now?
• How do I migrate my Swing application?

Jfokus is definitely one of the top Java conferences in Europe. There is a nice trip report from Arun Gupta and another trip report form Markus Eisele. There were many great moments and I enjoyed the conference a lot, but the one thing I liked the most was the fact that I actually helped a good cause. Speakers sometimes get little presents from the conference organizers, but the awesome Jfokus team had a better idea. Instead of a present, they donated a package of 30 doses of measles vaccine and 40 doses of polio vaccine to Unicef for every speaker. What a great idea, I hope it finds lots of copycats!

After my JavaFX talk, I got a lot of interesting questions and I realized a pattern, because there are three question, that I am always asked. They are pretty tough questions and I cannot answer them as much as I would like, but I will do my best.

What about JavaFX on the iPad or other mobile devices?

I am sorry, but I am not allowed to comment.

As much as I would like to answer this question, I am not allowed to. You can believe me, this really bugs me, especially since I hear time after time how important (and cool) JavaFX on these devices would be. All I can say is, that we presented prototypes of JavaFX on different tablets at JavaOne last year and asked, if this is something the community wants. The feedback was overwhelming. We continue to look into this, but for now I can only humbly ask you for your patience.

Is Swing dead now?

No, but…

Swing is not dead. And as the JavaFX FAQs say: “Swing will remain part of the Java SE specification for the foreseeable future, and is included in the JRE”. – But it is in maintenance mode now, no new features are being developed at this point. So if you want to use the new and cool stuff that was developed for JavaFX, you have to migrate to JavaFX or embed JavaFX in your Swing application. Which leads me directly to the last question.

How do I migrate my Swing application?

Honestly? I do not know.

I do not have an answer for this question yet. As a library developer, I do not write JavaFX applications. The only time I actually use the JavaFX runtime, is when I write small scripts to reproduce a bug or in my unit tests.

So for a start, here is what I am aware of. There is a tutorial about how to integrate JavaFX into a Swing application. I know there are efforts going on to build a JavaFX RCPs (Rich Client Platforms) on top of NetBeans and Eclipse although I do not know much about these projects. They may help, if your application was build on top of the NetBeans or the Eclipse platform. And on our mail alias, there is currently an interesting debate about an application framework for JavaFX going on, that you are welcome to join (openjfx-dev@openjdk.java.net).

This is certainly just a start, but at least I became (finally… ) aware of this question and I hereby promise, that I will do my homework and try to find better answers.