[AS3] Isometric conversion (Mathematics), for a clueless guy ._.

[Valaran]

Hello!

I'm a guy who didn't study to much math back in school, but I'd really like to learn a few things without taking on any major study. One of the things I'm currently curious about is the math behind 2D to Isometric conversion (as in X,Y plane conversion to X,Y,Z, and the other way round of course). During my search for some base material (Due to the fact that I don't know much math) I found the library as3isolib (http://code.google.com/p/as3isolib/) which naturally had its own conversion functions for XY > XYZ and XYZ > XY.

Being Open Source I figure I can paste the code straight here.


/*

as3isolib - An open-source ActionScript 3.0 Isometric Library developed to assist
in creating isometrically projected content (such as games and graphics)
targeted for the Flash player platform

http://code.google.com/p/as3isolib/

Copyright (c) 2006 - 2008 J.W.Opitz, All Rights Reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
package as3isolib.geom
{
/**
* IsoMath provides functions for converting pts back and forth between 3D isometric space and cartesian coordinates.
*/
public class IsoMath
{
/**
* Converts a given pt in cartesian coordinates to 3D isometric space.
*
* @param screenPt The pt in cartesian coordinates.
* @param createNew Flag indicating whether to affect the provided pt or to return a converted copy.
* @return pt A pt in 3D isometric space.
*/
static public function screenToIso (screenPt:Pt, createNew:Boolean = false):Pt
{
var z:Number = screenPt.z / Math.sqrt(1.25);
var y:Number = (2 * screenPt.y - screenPt.x) / 2 + screenPt.z;
var x:Number = screenPt.x + y;

if (createNew)
return new Pt(x, y, z);

else
{
screenPt.x = x;
screenPt.y = y;
screenPt.z = z;

return screenPt;
}
}

/**
* Converts a given pt in 3D isometric space to cartesian coordinates.
*
* @param isoPt The pt in 3D isometric space.
* @param createNew Flag indicating whether to affect the provided pt or to return a converted copy.
* @return pt A pt in cartesian coordinates.
*/
static public function isoToScreen (isoPt:Pt, createNew:Boolean = false):Pt
{
var z:Number = isoPt.z * Math.sqrt(1.25);
var y:Number = 0.5 * (isoPt.x + isoPt.y) - isoPt.z;
var x:Number = isoPt.x - isoPt.y;

if (createNew)
return new Pt(x, y, z);

else
{
isoPt.x = x;
isoPt.y = y;
isoPt.z = z;

return isoPt;
}
}
}
}


I found that these conversions where off by about 1% when converting from XYZ to XY, so here I am! So if anyone could literally spell it out for me how to do a conversion like this (without the 1% inaccuracy) or link me some crazy tutorial/guide/helplines I'd be very happy.

Note: I'm not asking for code! I want to understand the math.


Thanks for you time,
Matt

[mathew.er]

Hi, these are methods that I once used for some isometric transform, I have no idea where they come from or how accurate they are... the default angle was 30 degrees, dunno what the real iso iso angle is :)

public static function isoPointTo2d ( i : IsoPoint ) : Point
{
var p : Point = new Point ( isoXTo2d ( i ), isoYTo2d ( i ) );

return p;
}

public static function isoXTo2d ( i : IsoPoint ) : Number
{
var x : Number = ( i.x - i.z ) * Math.cos ( angleRadians );

return ( x + originX );
}

public static function isoYTo2d ( i : IsoPoint ) : Number
{
var y : Number = i.y + ( i.x + i.z ) * Math.sin ( angleRadians );

return ( -y + originY );
}
(IsoPoint was just a simple class with x/y/z coordinates and invalidation mechanism specific to what I used it for)

[Valaran]

Thanks for the reply Mathew, I recognise that set of functions, I think they come from a isometric tutorial here on Kirupa actually (http://www.kirupa.com/developer/actionscript/isometric_transforms.htm).

Any explanation of the math would be appreciated (by anyone of course). Also please note that I'd like some way to convert back to XYZ after I've converted it to XY, so I want to be able to do conversions both ways.

[mathew.er]

That's possible :)

I'm not really sure, if you can convert back from iso XY to normal XYZ... the 3D co-ordinates get calculated into the X and Y of the transformed point. When you want to reverse the algorithm, there would be multiple possible options (I'm no math expert, so don't count on that). Maybe if you keep the transformation 2D and store the Z co-ordinate separately. Then even the math shouldn't be that complicated... just rotate a point by 45 degrees and divide the new Y by 2 + add Z / 2 for a kind of height offset (and vice versa). But this really depends on what you need to do :)

[Valaran]

Thanks again for the reply Mathew, I'm sure you should be able to convert back from XY to XYZ, you could include Z into the XY function, just that it would always remain 0 (The first algorithms I posted did this) with inaccuracy like said however ._.

Anyway, your post got me thinking, instead of converting back, I could just make a custom class, that keeps track of everytime a XY position is calculated, it would save the XYZ being converted, in that manner, making a lookup table of sorts, so if x200, y10, z10 convert to say.. 190, 12 (arbitrary number) customClass[x + "-" y] (customClass["190-12"]) would return a isoPoint with x200, y10, and z10.

[.ral:cr]

you should get the book ActionScript Animation for shure.

[Valaran]

you should get the book ActionScript Animation for shure.

Have you got any link to where I could get that as cheaply as possible? :)

[.ral:cr]

amazon is cheap, but take a look here for details about the book: http://www.friendsofed.com/book.html?isbn=1590597915

[Valaran]

Reviving my own thread never feels good ;( I've read the book suggested by .ral:cr, it did however not cover any specifics on what I was looking for, so therefore I say: Flashgod, revive my thread!

And so it shall be!

Any replies are welcome!

[jwopitz]

Valaran are you still trying to work this out? I know it's 9 months too late but someone pointed me to this post. I am the creator of the as3isolib and would be happy to try to explain any of the translations behind it if you like.