# How do you transform a coordinate system from Cartesian to Isometric?

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.

• 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. Commented Jun 21, 2017 at 18:29

## 2 Answers

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|


matrix.

• 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. Commented Jun 21, 2017 at 18:39
• @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 Commented 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.)