Apologies if my example is a bit contrived, I've been trying to figure out how to apply matrix transformations to this coordinate problem, and I'm not getting the right output. I need to understand the math for this (some pseudo code might be helpful). See graphic on bottom.

Assume a game world has four properties World => ( ORIENTATION = angle, MAP_SIZE = [mw,ml], CELL_SIZE = [cw, cl])

Now assume we have a World instance called World_A with the following properties:

World_A = ( -90, [4096,4096], [64, 64])

In other words, World_A has a 2-dimensional, 4096 x 4096 pixel map with an initial orientation of -90 degrees (inverse Cartesian plane), which can be divided by 64 x 64 named cells (denoted by their calculated subcoordinates [p,q] e.g. Cell_p_q), and an active cursor (denoted by its rendered position [x,y])

Using the coordinates of an active cursor [x,y] we can calculate which cell the cursor is over (some Cell_p_q) and designate that cell the Active_Cell which is then highlighted. Example: if the cursor is at [8,16] then we determine that it's over Cell_1_1 and Active_Cell = Cell_1_1.

Now-- let's add a special mirror world called World_B where World_B = Isometric(World_A)

Both worlds share the same Cursor with position [x,y].

How do I transform the World_A( Orientation, Map, Cells) to the isometric equivalent of World_B( Orientation, Map, Cells), such that when the Cursor is over either map, the right Active_Cell is highlighted?


Here's a quick screenshot of what I'm experimenting with; you can see in this graph that World_A is overlaying World_B coordinates. My math is brute-force contrived, but it works, what I want is to understand the matrix transformation way of doing this.


  • 1
    \$\begingroup\$ I'm not sure if this is correct so I'll be posting this as a comment. Try this: matrix.identity();, matrix.scale(sqrt(2) / 2, sqrt(2) / 4, 1);, matrix.rotate(0, 0, 1, -45); //degrees, matrix.inverse(); in that order. Then you just multiply your position vector with that matrix (x, y).multiply(matrix);. The result of the final calculation should be your coordinates in iso space. \$\endgroup\$
    – Charanor
    Jun 21, 2017 at 18:29

2 Answers 2


Assuming "up" is to the right top by default (with an orientation of 0) you need to rotate the coordimates by -45° plus the orientation in degrees, then scale it on the y axis by half. This results in the

| cos -45° + orientation, sin -45° + orientation |   |0.5,   0|
|-cos -45° + orientation, sin -45° + orientation | * |0  , 0.5|


  • 1
    \$\begingroup\$ I'm going to slightly leech of of this question and ask you to take a look at my comment since you seem to know what you're doing. Does the math look correct? I can't verify it by myself since I don't have access to a computer. \$\endgroup\$
    – Charanor
    Jun 21, 2017 at 18:39
  • \$\begingroup\$ @Charanor I think you have to scale after you rotate. If you scale before rotating, then you just get a rotated rectangle. (I don't know how that system works, so I may be wrong) Apart from that, it seems right \$\endgroup\$
    – Bálint
    Jun 21, 2017 at 18:52

To convert Cartesian coordinates to isometric the basic matrix operations are:

  1. Rotate 45 degrees
  2. Scale ("squish") along vertical axis

You can composed the rotation and scaling into a single 2X2 matrix. If you want to also include a translation (to move the origin of your isometric projection), you'll have to use a 3X3 matrix.

This related answer goes into more detail with diagrams and pseudo-code. (Note I think there is a slight flaw in the pseudo-code because you need to apply the transformation matrix to the mouse position, too.)


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .