The coordinate system – InMotion

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.


An example of the translation

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s