Perspective Transformations

In my attempt to master JavaFX I got a lot of help from various sources. First of all the javafx.com website has many great samples that explain how JavaFX could be used. One of the samples intrigued me most and that is the Perspective Transformation. You can find a good sample named: Photo Flip. It rotates a picture over its vertical axis.

override public function create():Node { return Group { content: [ Group { content: backNode visible: bind (time0) effect: bind getPT(time) }, ] } } The above code shows elegantly how the back side and front side of a Node flips when time changes from negative to positive or vice versa. More general for the outline of a circle yields that it is equal to 2?R. So when between -? and 0 we will see the back side and between 0 and +? the front side. The Math.Sin() function will help us out here, so generalized:

override public function create():Node { return Group { content: [ Group { content: backNode visible: bind (Math.sin(time)0) effect: bind getPT(time) }, ] } } The other change in the Timeline is to accommodate any start and end values for time. In the Photo Flip sample you will find the following Timeline (you need to open the Main.fx file)

public var anim = Timeline { keyFrames: [ at(0s) { time=> Math.PI/2 tween Interpolator.LINEAR }, at(1s) { time=> -Math.PI/2 tween Interpolator.LINEAR }, KeyFrame { time: 1.0s action: function() { flipped = not flipped; } } ] } As you might understand by now is that the above code will now work for any values of time also for less then -? and greater than +?. The only addition we need to make is to calculate end position of the Node, whether we see the front or the back side.

public var anim = Timeline { keyFrames: [ at(0s) { time=> Math.PI/2 tween Interpolator.LINEAR }, at(1s) { time=> Math.PI/8.5 tween Interpolator.LINEAR }, KeyFrame { time: 1.0s action: function() { flipped = (Math.sin(time)