# Reversed isometric transformations

**URL:** <https://forum.kirupa.com/t/reversed-isometric-transformations/238725>\
**Category:** flash\
**Created:** [September 14, 2007, 9:24am UTC](https://forum.kirupa.com/t/reversed-isometric-transformations/238725 "2007-09-14T09:24:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Danko](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Danko](https://forum.kirupa.com/u/Danko)\
**Post date:** [September 14, 2007, 9:24am UTC](https://forum.kirupa.com/t/reversed-isometric-transformations/238725/1 "2007-09-14T09:24:44Z")

</div>

A few people asked me how to get isometric (3d) coordinates from the mouse click (2d).

The answer is: you have to assume that one of the x, y or z coordinates is fixed.

The original tutorial: [http://kirupa.com/developer/actionscript/isometric\_transforms.htm](http://kirupa.com/developer/actionscript/isometric_transforms.htm)

Original equations:

```auto
xFla = (x-z)*Math.cos(0.46365) + xOrigin
yFla = yOrigin - y - (x+z)*Math.sin(0.46365)

```

Legend:

xOrigin, yOrigin - on screen coordinates of the isometric (0, 0, 0)  
x, y, z - isometric coordinates  
xFla, yFla - on screen coordinates transformed from isometric coordinates

* * *

You have to assume which coordinate will be fixed before transforming your equations. So, let’s assume that y is fixed, because it represents the “height” of the room.

(For instance, with fixing the y = 0 we are clicking on the room floor. By setting y = 400 we are clicking on the surface 400 units above the floor. By fixing x = 0 or z = 0, we do clicking on walls.)

Now we have:

y = fixed  
x, z -\> variables

## Transformation:

## xFla - xOrigin = (x-z)\*Math.cos(0.46365) yFla + y - yOrigin = - (x+z)\*Math.sin(0.46365)

## (xFla - xOrigin)/Math.cos(0.46365) = (x - z) (yFla + y - yOrigin)/Math.sin(0.46365) = - (x + z)

## (xFla - xOrigin)/Math.cos(0.46365) = x - z (yFla + y - yOrigin)/Math.sin(0.46365) = - x - z

1. sum these equations to get z
2. substract them to get x

* * *

1. sum  
(xFla - xOrigin)/Math.cos(0.46365) + (yFla + y - yOrigin)/Math.sin(0.46365) = -2z  
z = - ((xFla - xOrigin)/Math.cos(0.46365) + (yFla + y - yOrigin)/Math.sin(0.46365))/2

2. substract  
(xFla - xOrigin)/Math.cos(0.46365) - (yFla + y - yOrigin)/Math.sin(0.46365) = 2x  
x = ((xFla - xOrigin)/Math.cos(0.46365) - (yFla + y - yOrigin)/Math.sin(0.46365))/2

* * *

Flash functions:

```auto
// transforms screen xFla,yFla coordinates into x isometric 3d coordinate, assuming that y is fixed
x = function (xFla, yFla, y) { 
return ((xFla - xOrigin)/Math.cos(0.46365) - (yFla + y - yOrigin)/Math.sin(0.46365))/2
}; 

// transforms screen xFla,yFla coordinates into z isometric 3d coordinate, assuming that y is fixed
z = function (xFla, yFla, y) { 
return (- ((xFla - xOrigin)/Math.cos(0.46365) + (yFla + y - yOrigin)/Math.sin(0.46365)))/2
}; 

```

* * *

So, using these 2 equations and putting xFla, yFla and y you get the remaining x and z Isometric coordinates.  
xFla and yFla received from the mouse click and y coordinate is fixed (e.g. y = 0 -\> room floor) or received from another controller (e.g. keyboard UP/DOWN sets the y).

Tip: when changing the y coordinate with UP/DOWN cursor keys, you could animate some semi-transparent “floor-shaped” surface moving up&down in the room and give a feedback to the user.

Of course, you should optimize these equations by replacing values like Math.sin(0.46365) with calculated ones, so it won’t be calculated on every onEnterFrame event…

Optimized:

```auto
// transforms screen xFla,yFla coordinates into x isometric 3d coordinate, assuming that y is fixed
x = function (xFla, yFla, y) { 
return ((xFla - xOrigin)/0.89443 - (yFla + y - yOrigin)/0.44721)/2
}; 

// transforms screen xFla,yFla coordinates into z isometric 3d coordinate, assuming that y is fixed
z = function (xFla, yFla, y) { 
return (- ((xFla - xOrigin)/0.89443 + (yFla + y - yOrigin)/0.44721))/2
};

```

---

<div class="post-metadata">

**Author:** ![comkee](https://avatars.discourse-cdn.com/v4/letter/c/e56c9b/32.png) [@comkee](https://forum.kirupa.com/u/comkee)\
**Post date:** [July 2, 2008, 11:24pm UTC](https://forum.kirupa.com/t/reversed-isometric-transformations/238725/2 "2008-07-02T23:24:32Z")

</div>

Hey Danko,

I started some days ago playing around with isometrics – got quite fare with some other algo using sinY, cosX and cosY. Worked pretty well including rotating the coord-system, but I struggled by defining the mouse position. Now I’m using your draft and wondered if you have any idea how to implement the rotation part?

regards -comkee

---

<div class="post-metadata">

**Author:** ![Danko](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Danko](https://forum.kirupa.com/u/Danko)\
**Post date:** [July 3, 2008, 8:27am UTC](https://forum.kirupa.com/t/reversed-isometric-transformations/238725/3 "2008-07-03T08:27:46Z")

</div>

Can you be more specific pls?