I'm contemplating a cool storyboard effect in osu! but I'm not sure how to do it properly because I can't wrap my head around the math.

Essentially I want to create a 3d effect with a bunch of stars (white dots) on a 2-d surface and rotate the camera around the sphere, varying the z distance to the origin.

I'd also like to account for changing the location of the origin, and rotating the camera. I think I can grasp those concepts in my head, I just need a little help with the maths. Maybe an aspiring whiz can help me out?

Let's say the camera is at 10,10,10 looking at the origin 0,0,0. Assuming the Y axis is "up" for the camera, where do I draw point 7,5,2 on my camera screen, which is 854x480?

Here's a very crude example:

I don't really know the math involved, but I've been playing with it anyway. xD

Also usually you just get a result that is determined by the aspect ratio and scaled to the screen size...

Edit:
tl;dr: Look in to opengl. I only give a half-answer, and you don't need any of this math for the most part.
You could probably also google it, I'm sure there are hundreds of answers of doing it like this.
/Edit

It might be easier to just use OpenGL (which is what I do -- it does most of the math for you for stuff like this), but if you want to do the math yourself you can start with some reading about projection matrices and rotation and translation matrices...
http://en.wikipedia.org/wiki/3D_projection#Perspective_projection
http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions

Basically you need to make a projection matrix (which I have no idea how to do, I have openGL functions to make it for me), and then make a modelview matrix, which I know more how to do (since this is the one that determines where stuff is drawn and where the camera is).
Start with identity...
M=
[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[0 0 0 1]

Also note this may appear to have four dimensions .. don't be fooled, the rightmost column of the matrix just holds the (x,y,z) set... You'll see them as (x,y,z,1) and the 1 can be mostly disregarded.

Translate away from camera position...
M=
[1 0 0 10]
[0 1 0 -10] (in blender 10 makes it below the plane .. I don't know though)
[0 0 1 10]
[0 0 0 1]

Multiply by some rotation matrices... (You can combine them in to one by multiplying them)
Rx=
[1 0 0 0]
[0 cos(55°) -sin(55°) 0]
[0 sin(55°) cos(55°) 0]
[0 0 0 1]

Rz=
[cos(45°) -sin(45°) 0 0]
[sin(45°) cos(45°) 0 0]
[0 0 1 0]
[0 0 0 1]

M=MRxRz

Then multiply by your point coordinates...
P=
[1 0 0 7]
[0 1 0 5]
[0 0 1 2]
[0 0 0 1]

M=MP

... Then multiply that by the perspective matrix. xD

EDIT:
Ultimately M becomes something like..
[0.707 -.707 0.000 11.414]
[0.406 0.406 -.819 -6.771]
[0.579 0.579 0.574 18.098]
[0.000 0.000 0.000 1.000]
or something.

In openGL it's basically just make your worldview matrix, load identity to modelview matrix, translate camera position & rotation, translate model/points you are drawing's position/rotation (which is what I have outlined here) then draw points (which I think just multiplies them by the modelview then the perspective matrices).


Oh, wait, that last translation (multiplying by 'P') is unnecessary... You'd just multiply by the coordinate vector (7,5,2,1) there instead of a whole matrix ... Having the matrix like that is what you do for models with lots of points relative to the same origin, and not just solitary points. You can multiply the matrix I gave by the vector (0,0,0,1) and get the same 3D coordinates you need, but the result is just the rightmost column of that matrix (11.414, -6.771, 18.098). That's what you multiply by the perspective matrix ...

EDIT:
http://puu.sh/7XikH.jpg
A projection matrix. xD

n = .1 (near clipping plane)
f = 100 (far clipping plane)
FOV = 90° (should be enough, and is easy math xD)
e = 1/tan(FOV/2)
a = 480 / 854

Gives a matrix of:
[1 0 0 0]
[0 1.779 0 0]
[0 0 -1.002 -2.002]
[0 0 -1 0]

Multiplying this projection matrix by the vector retrieved before yields a vector of (11.414, -12.047, -18.334, -18.098)...
If I understand, and it is very likely that I don't, then you get...
screen.x = x/z = 11.414 / -18.334 = -.623, then multiply by halfwidth + halfwidth = 161
screen.y = y/z = -12.047 / -18.334 = .657, then multiply by halfheight + halfheight = 398
(*half + half so that 0,0 is the center of the screen, since the results should be in the range of [-1,1])

Post has been edited 24 time(s), last time on Sep 17 2014, 8:47 am by FaRTy1billion.