Y upward coordinates

Pretty much if not all graphics system (at least that I know of) uses a coordinates system that makes y be positive downward and the origin start at the top left corner of the screen. JavaFX is no exception to this.
This is something that always makes my head hurt. Every time I’m drawing something I have to do the extra step of thinking it upside down. Fortunately for me there is an easy workaround: changing the transforms applied to the topmost node container(parent).

Edit: There are also some situations where you really need to invert the coordinate system for example in my case I’m receiving number data from the calculation engine and need to represent it with the y upward.

To do this you’ll have to first invert the y axis of the coordinate system by doing a scale than translate it by the height of the screen – don’t forget that the order in which you apply the transforms makes a difference, so using the translate and scale parameters instead will produce a different result.


public class MyScene extends Scene{

(...)

var objectsGroup: Group = Group {

transforms: bind [Transform.translate(0, height), Transform.scale(1, -1)] // height is the scene height

}; // "topmost" group

(...)

}

There is a catch though: you’ll have to invert the y of every image and text node you insert by aplying a -1 scale to y of the node.

var text:Text = Text{

(...)

scaleY: -1

(...)

};

I hope this information was usefull in some way. See you on the next post 🙂