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

Question

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.

Answer 1

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.

Answer 2

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.)