Simple geometry problem with a complex context

[Brightstar]

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
Note, the app only works in IE9, Firefox 5-6+, Google Chrome, Safari, etc

...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)
}

[greg1313]

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.

From this, it isn't clear which axis is which. Using the usual standard for a 3-D coordinate system, the x-axis goes toward/away from the viewer, the y-axis goes right to left and the z-axis goes up and down. Is this the correct interpretation?

Also, there is nothing visible in the window from time to time and that can be confusing. Can you provide more background about your application? What is the purpose?

[Brightstar]

Greg,

I had never heard of using it that way.
https://commons.wikimedia.org/wiki/File ... system.svg
That was the orientation I was using. Z toward the user. X horizontal. Y vertical.

As to nothing being visible in the window... If it never shows anything, that's a good indication that your browser doesn't support it. I'm using HTML5 Canvas (only supported by chrome, newer versions of firefox, opera, safari and IE9.)

If it's just that the "stars" are disappearing from time to time, the application is far from finished, so it's not completely worked out yet.

The problem I'm having is basically that I'm trying to do a simple transformation in X,Y,Z based on how the user moves the mouse (with a right-click).

The complication 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.

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

[greg1313]

I should have stated usual mathematical standard. I'll see if I can figure something out.

[Brightstar]

Sorry, I don't claim in any way to be proficient at anything other than very basic mathematics. (Algebra and simple geometry). If I was, I'd guess I wouldn't be having so many problems here.

My latest brainstorm was to try just defining my new "rotation" 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)

[Brightstar]

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.

[CRGreathouse]

Glad to see that worked!