Hello! This post is about how we’ll deal with coordinate system In Motion way. This goes while I build the editor.
I decided to go with the Cartesian System, centered in the middle for 2 main reasons:
We are used to it, what makes it simple! And, It is not bounded to any edge, what makes it adaptable for no matter how big the editor canvas gets.
Notice that is does differ from the HTML5 Canvas Tag orientation, where all the values are positive, as illustrated here.
The translation is very easy to be done from the raw click to the InMotion system:
x: click.x – canvas.center_x,
y: canvas.center_y – click.y
Also, going the opposite conversion is just the inverse.
See the In Motion JS preview