Simple Geometry Question about a Complex Situation -Spherical/3D cartesian

BrightstarVI

I'm working with 3D geometry, and I've been at this for days. I'm beating my head against a wall, because I'm nearly done with the project. There's only one glitch in my system.

The Situation:
I have a 3D cartesian coordinate system with a Spherical system overlaid over it (the "poles" correspond with the Z axis, so that if you're looking from 90 degrees (polar north) you're looking down the Z axis.
I'm writing a computer program that does 3D geometric translations to "move" the points in the coordinate system.


The problem:
I have MOST of it working.
My only problem is when the user does a "translation" after a couple of rotations.

So basically,
Rotate the coordinate system by N degrees azimuth (at 0 degrees elevation)
Do an X, Y translation
Rotate the coordinate system back to the previous position
Now what was the translation in terms of X,Y,Z coordinates (at the new rotation)



Here's the program:
http://www.energematrice6.com/gview/index.html

...In order to make it mess up, do the following.
Click at the top of the view area and drag to the bottom (rotate from 90 degrees elevation to 0)

Click and drag from right to left or left to right a couple of times. (rotates in azimuth)

Now right click and drag. (Yes I know the direction it moves is inverted so that you drag left it goes right you drag right it goes left). ...What it's NOT supposed to do is move closer and farther away.



In something resembling math language, here is the code I've been using:

TXtmp = Amount of X translation
TYtmp = Amount of Y translation
TZtmp = 0 (there is no Z translation)
Cos11 = Cosine of Azimuth Rotation
Sin11 = Sine of Azimuth Rotation
Cos12 = Cosine of Elevation Rotation
Sin12 = Sine of Elevation Rotation

TXtmp2 = TXtmp
TYtmp2 = TYtmp*Cos12 - TZtmp*Sin12
TZtmp2 = TYtmp*Sin12 + TZtmp*Cos12
Final X = TXtmp2*Cos11 - TYtmp2*Sin11
Final Y = TXtmp2*Sin11 + TYtmp2*Cos11
Final Z = TZtmp2



The raw code is below:

function galFEnd(){
TXtmp = Math.round(pointerX - pointerEndX)
TYtmp = Math.round(pointerY - pointerEndY)
TZtmp = 0

var Cos11 = -Math.cos(Cam1[1]*Math.PI/180)
var Sin11 = -Math.sin(Cam1[1]*Math.PI/180)
var TempAng = Cam[2]-Cam1[2]
var Cos12 = -Math.cos(TempAng*Math.PI/180)
var Sin12 = -Math.sin(TempAng*Math.PI/180)

TXtmp2 = TXtmp
TYtmp2 = TYtmp*Cos12 - TZtmp*Sin12
TZtmp2 = TYtmp*Sin12 + TZtmp*Cos12

TXtmp3 = TXtmp2*Cos11 - TYtmp2*Sin11
TYtmp3 = TXtmp2*Sin11 + TYtmp2*Cos11
TZtmp3 = TZtmp2
//Set the new focus position
Cam1[4] = Math.round((Cam1[4] + TXtmp3)/2)
Cam1[5] = Math.round((Cam1[5] + TYtmp3)/2)
Cam1[6] = Math.round((Cam1[6] + TZtmp3)/2)
}


Help would be appreciated. I'm getting terribly frustrated.

Thanks!

BrightstarVI

Oh, just to note, the program only works in Internet Explorer 9, Firefox 5-6+, Google Chrome, or newer versions of Safari. (Sorry I forgot to mention it)

chiro

Hey BrightstarVI and welcome to the forums.

I'm not exactly sure what you are trying to do, but are you trying to set your new position when you right click to what the mouse shows you when it creates an X?

In other words do you want your linear transformations to generate your new coordinate that corresponds to the X that is created when you right click?

BrightstarVI

Hi Chiro,

Thanks for the welcome.

Basically, I'm trying to do a simple transformation in X,Y,Z based on how the user moves the mouse.

The complication (the problem) is that everything is based on the original position of the X,Y,Z system, so when the user clicks+drags the screen in a given direction, it has to reverse-calculate whatever rotation is on the camera before it applies the x,y,z translation.

...Basically, I have to figure out, given the user's current camera rotation (and assuming that X, Y are left/right, up/down respectively at the CURRENT rotation) what the X,Y,Z translation is at the original camera angle.

BrightstarVI

My latest brainstorm was to try just defining my new "translation" point on the spherical coordinate system, rotating it, then re-converting the location to cartesian coordinates.

It seems to have worked even less spectacularly.

function galFEnd(){
TXtmp = Math.round(pointerX - pointerEndX)
TYtmp = Math.round(pointerY - pointerEndY)
TZtmp = 25//Math.round(Math.sqrt(25*25+TXtmp*TXtmp+TYtmp*TYtmp))
var TempAng = Cam1[2] - Cam[2]
TXtmp2 = Math.sqrt(TXtmp*TXtmp + TYtmp*TYtmp + TZtmp*TZtmp) //actually r
TYtmp2 = Math.acos(TZtmp/TXtmp2)*180/Math.PI; //actually theta
TZtmp2 = Math.atan2(TYtmp,TXtmp)*180/Math.PI; //actually phi
var Rtmp = TXtmp2 //r
var Ttmp = TYtmp2 - TempAng //new theta
var Ptmp = TZtmp2 - Cam1[1] //new phi
var CosP = Math.cos(Ptmp*Math.PI/180)
var SinP = Math.sin(Ptmp*Math.PI/180)
var CosT = Math.cos(Ttmp*Math.PI/180)
var SinT = Math.sin(Ttmp*Math.PI/180)
TXtmp3 = Rtmp*SinT*CosP
TYtmp3 = Rtmp*SinT*SinP
TZtmp3 = Rtmp*CosT
Cam1[4] = Math.round(Cam1[4] + TXtmp3)
Cam1[5] = Math.round(Cam1[5] + TYtmp3)
Cam1[6] = Math.round(Cam1[6] + TZtmp3 - 25)

chiro

I see what you are doing, but I would recommend you write your code with a matrix class: it makes it more readable and allows you to understand things more easily.

I see how you are converting spherical to cartesian and that seems to make sense.

One thing I will tell you is that this code is a little messy. The spherical conversion part looks ok but I'm worried about these lines in particular:

var Ttmp = TYtmp2 - TempAng //new theta
var Ptmp = TZtmp2 - Cam1[1] //new phi

Also this line:

var Ttmp = TYtmp2 - TempAng //new theta
var Ptmp = TZtmp2 - Cam1[1] //new phi

From the code both are in the correct format (angles that are radians), but I need to know how you are calculating all of this stuff.
What are your data types for these objects?

It would be a hell of a lot easier in the future if you just used matrix code and created the right transformations in the right order.

I need to know what the TempAng var is and what those variables are based on. If you are basing these on the wrong values then I think you will be creating a mess.

My thoughts are that if you coded up a matrix subroutine that worked after you tested it, and tested how it performed composition of maps (fancy way to say matrix multiplication), then you could do a very quick addition that converted spherical data to cartesian data and by using the same matrix routines you would get the right result with less hassle.

Also the other reason to do it this way is because any new camera code you have (for example looking at a point from another point, following a curve, or some other camera effect) is really really easy once you've done the above.

BrightstarVI

First, regarding matrices:
I have no real objection to using this system, but I also have no real idea HOW. That means that in order to do it, I would have to read up on it and learn it, basically from scratch. The hour or two of research I DID do on matrices tells me that it will take some serious time to learn it (unless you have a suggestion on where to go for a relatively simple tutorial).

...So in essence, I wouldn't mind using matrices... but this project is almost finished. If i can fix this problem, then all of the camera handling is finished. If there's a simple fix without worrying about matrices then that's the way to go for me.


As to the code:
Yes it's messy. That last bit that I posted was something I hacked together rather quickly. I haven't cleaned any of it up or simplified it.

The coding language is javascript, so there are no datatypes. It's a loosely-typed language, meaning these variables can hold anything you want to put in them. The scripting engine does the determinations for data types.


Now regarding what my data sources are:
pointerX, pointerY and pointerEndX, pointerEndY are the pointer coordinates at the beginning and end of the click+drag

The Cam[] array is for storing my base camera positions. Cam[2] is base elevation (always 90). Cam1[] is the array for current camera positions. Cam1[2] is the new camera elevation (whatever the camera is currently).
Cam1[1] is current azimuth.

Cam1[4],Cam1[5],Cam1[6] are the X,Y,Z coordinates of the camera focus (respectively).


And here's a slightly more cleaned up version of the code for you:

TXtmp = Math.round(pointerX - pointerEndX) //Intended X translation;
TYtmp = Math.round(pointerY - pointerEndY) //Intended Y translation;
TZtmp = 25 //Z distance of translation from camera focus;
var TempAng = Cam1[2] - Cam[2];
var TRad = Math.sqrt(TXtmp*TXtmp + TYtmp*TYtmp + TZtmp*TZtmp);
var TTheta = Math.acos(TZtmp/TRad)*180/Math.PI;
var TPhi = Math.atan2(TYtmp,TXtmp)*180/Math.PI;
var Rtmp = TRad;
var Ttmp = Theta - TempAng
var Ptmp = TPhi - Cam1[1]
var CosP = Math.cos(Ptmp*Math.PI/180)
var SinP = Math.sin(Ptmp*Math.PI/180)
var CosT = Math.cos(Ttmp*Math.PI/180)
var SinT = Math.sin(Ttmp*Math.PI/180)
var TXtmp3 = Rtmp*SinT*CosP
var TYtmp3 = Rtmp*SinT*SinP
var TZtmp3 = Rtmp*CosT
Cam1[4] = Math.round(Cam1[4] + TXtmp3)
Cam1[5] = Math.round(Cam1[5] + TYtmp3)
Cam1[6] = Math.round(Cam1[6] + TZtmp3 - 25)

BrightstarVI

The answer turned out to be as simple as i thought it was.

var Cos11 = -Math.cos(Cam1[1]*Math.PI/180)
var Sin11 = -Math.sin(Cam1[1]*Math.PI/180)

should have been

var Cos11 = Math.cos(Cam1[1]*Math.PI/180*-1)
var Sin11 = Math.sin(Cam1[1]*Math.PI/180*-1)


Don't ask me why or what made the difference, but this fixed it.