Jump to content

  • Log In with Google      Sign In   
  • Create Account

Calling all IT Pros from Canada and Australia.. we need your help! Support our site by taking a quick sponsored surveyand win a chance at a $50 Amazon gift card. Click here to get started!


reversing isometric projection


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
2 replies to this topic

#1 Javaguychronox   Members   -  Reputation: 120

Like
0Likes
Like

Posted 06 January 2014 - 02:54 PM

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!

 

Attached Thumbnails

  • unproject.png


Sponsor:

#2 Javaguychronox   Members   -  Reputation: 120

Like
0Likes
Like

Posted 06 January 2014 - 02:59 PM

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. mellow.png



#3 Javaguychronox   Members   -  Reputation: 120

Like
0Likes
Like

Posted 06 January 2014 - 04:01 PM

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






Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS