Search code examples
geometrycoordinatestrigonometryprojectionisometric

How to calculate transformation from screen coordinates to isometric screen coordinates?

I've got the 2d coordinates:

0,   0
200, 0
200, 100
400, 100
400, 200
0,   200

The coordinates represent the following shape: enter image description here

But I want to dynamically calculate the screen coordinate for each point transformed to isometric projection. So I have the coordinate list of literally screen coordinates, and I want to generate screen coordinates from it, that represent the isometric 'version' of the shape. Please note that I don't want to calculate the coordinates in the 'isometric world', I want to get the literal screen coordinates. (rotated 45 degrees, and scaled vertically by 0.5)

enter image description here

Where on the screen is each point with question marks? It's very likely that some coordinates would become negative, but that's fine. This can be logically solved by calculating an offset, so that the most left x coordinate is at zero.

Solution

  • rotated 45 degrees, and scaled vertically by 0.5

    This is affine transform:
    shift by center of rotation (xc, yc) coordinates
    rotation
    shift back by xc and some yc (you might need another y-shift to align with screen edge) scale by y-axis

       sq = Sqrt(2)/2   //Cos and Sin of 45
   x_new = xc + (x_old - xc) * sq - (y_old - yc) * sq
   y_new = 0.5 * (yc + (x_old - xc) * sq + (y_old - yc) * sq)

    (probably you have to change sign combination in brackets from (+-)(++) to (++)(-+) depending on your coordinate system orientation)