Expression Based PathTransitions in JavaFX

Jose MartinezSeptember 13th, 2012Last Updated: October 26th, 2012

0 79 3 minutes read

In JavaFX you are able to animate nodes along a path using PathTransition objects. PathTransitions use Shape objects to describe the path they need to animate along. JavaFX provides various types of Shapes (e.g. Polygon, Circle, PolyLine, Path). The Path shape is interesting in that it allows you to create complicated shapes using various movements called PathElement. Some PathElements are ArcTo, CubicCurveTo, HLineTo, LineTo, MoveTo, QuadCurveTo, VLineTo. Their names imply what they do.

While the PathElemetns are great for descrbing complex paths, I found that I would rather describe my paths using mathematical expressions. All the years of working with graphs in math class have affected the way my mind thinks. Quadratic and trigonometric expressions have a warm and cozy feel to them. As such, I sought to create PathTransitions that are described using mathematical expressions. I describe my solution in this post in the case that anyone wishes to accomplish the same.

To accomplish this, the first thing one needs is a way to solve mathematical expressions, like x*sin(x), or x^2/45, or (x^2)/sin(x-2), or whatever else you can imagine. For this I was lucky enough to stumble upon Lawrence Dol’s Software Monkey web site. Lawrence created a super light Java class, named MathEval, that evaluates mathematical expressions. The class is only 31KB and is very easy to use. I used MathEval to plot the points of given expression.

The JavaFx class Polyline is used to store the plotted points that MathEval solved for and turn them into a Shape object that PathTransition can take as input.

The class I ended up creating is called ExpressionTransitionMaker – sorry, no Javadoc, but you can find the source code here. This class is supposed to be very easy to use. It has two main methods that are worth mentioning. The first is:

public void addExpressionEntry(double start, double end, double poll, GraphType type, String expression) throws IllegalArgumentException;

This method is used to add expression entries, which consist of an expression with supporting information like the start and end positions on a graph, poll interval, and GraphType. ExpressionTransitionMaker can make three different types of graphs described by this GraphType enum:

public enum GraphType {

        vertical("y"), horizontal("x"), polar("a");
        private String var;

        GraphType(String var) {
            this.var = var;
        }

        public String getVar() {
            return var;
        }
    }

Each expression entry requires one expression. For horizontal graphs the expression needs to be in the form f(x); g(y) for vertical; and r(a) for polar. That is to say that the horizontal graph needs an expressions where the only variable is the letter “x”, and the vertical graph needs an expression where the only variable is the letter “y”, and the polar graph needs an expression where the only variable is the letter “a”, where “a” signifies the angle in radians. Muliple expression entries can be added.

As the names imply the horizontal and vertical graphs are intended for graphs that go left-and-right and up-and-down respectively. Polar graphs are intended for graphs that move along a circular or spiral path. All three can go in the opposite direction if given a negative poll value and the appropriate start and end points.

The second method worth mentioning is:

public SequentialTransition getSequentialTransition();

Because multiple expressions can be added into the ExpressionTransitionMaker, a SequentialTransition object is used to play all the PathTransitions that ExpressionTransitionMaker can create. The returned SequentialTransition is populated with multiple PathTransitions, one for each expression added. The SequentialTransition will play all its transitions in sequential order.

Well that’s about it. There is one or two more public methods in ExpressionTransitionMaker that a user might find handy but was left out for brevity. I created a simple little app that tests out the ExpressionTransitionMaker and can be found here. The app can be played over a browser and it allows you to enter in multiple expressions which are used to animate an image along the screen.