Followers 0

# reversing isometric projection

## 2 posts in this topic

Hello,

Sorry about this, I gather isometric questions are quite commonplace but I couldn't find anyone with exactly the issue I'm having. I'm creating a pretty basic isometric grid in JavaScript and am using http://sylvester.jcoglan.com/docs.html Sylvester to provide matrix / vector objects to actually do the projection. I followed a Wikipedia article http://en.wikipedia.org/wiki/Isometric_projection to actually create a matrix to transform from world co-ordinates  to screen co-ordinates (isometric) but modified the angles they suggest slightly as per a different source for nice even lines.

My transformation matrix building code looks like this:

var transform = Matrix.RotationX(60 * (Math.PI / 180)).x(Matrix.RotationZ(45 * (Math.PI / 180)));

I then for each tile co-ordinate multiply that matrix by the vector to get a transformed vector:

tileToScreen: function(x, y) {
var out = transform.dup().x(Vector.create([x, y, 1]));
return {x: out.e(1), y: out.e(2)};
}, 

This all works and I end up with a nice looking isometric grid. As such I was hoping it'd be pretty simple to reverse the transformation and get back the original tile co-ordinates for the purposes of picking but I seem to be entirely unable to do so. My experience with such transforms is pretty limited unfortunately.

I'd been hoping to simply reverse the order & sign of my transform matrix generation methods:

screenToTile: function(x, y) {
var v = Vector.create([x, y, 1]);
var out = Matrix.RotationZ(-45 * (Math.PI / 180)).x(Matrix.RotationX(-60 * (Math.PI / 180)).x(v));
return {x: out.e(1), y: out.e(2)};
}


I've attached the result I get. I suspect I'm making a pretty silly amateur mistake here but I'd be grateful if anyone were able to help or point me in the direction of some resources on this subject that I might've missed!

0

##### Share on other sites

Oh sorry I've just seen the for beginners part of the forums where this is probably better placed. Don't know quite how I missed it.

0

##### Share on other sites

Ah silly me I wasn't including the transformed Z co-ordinate in my screenToTile function.

0

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account