3D Math

[fiveworlds]

Trying to setup 3D Math right in svg here's how far I have gotten. The Z axis is obviously a translation on the x and y co-ordinates. At the moment I am using a translation of 1 but I am wondering would it be right to use the square root of 0.5?

<script>

 

function Three_Dimensional_Resolve_Points(matrix){

var svg = {width:800, height: 800}, midpoint = {x:svg.width/2, y:svg.height/2};

Z_Translate = {X : -1, Y : 1}

X = matrix[0] + (matrix[2]*Z_Translate.X) + midpoint.x;

Y = matrix[1] + (matrix[2]*Z_Translate.Y) + midpoint.y;

return [X,Y];

}

 

 

svg = {

width : 800,

height : 800,

midpointx : 800/2,

midpointy : 800/2,

}

 

 

 

axes ='<svg height="'+svg.height+'" width="'+svg.width+'"><line x1="'+svg.midpointx+'" y1="0" x2="'+svg.midpointx+'" y2="'+svg.height+'" style="stroke:rgb(255,0,0);" />';

axes = axes + '<line x1="0" y1="'+svg.midpointy+'" x2="'+svg.width+'" y2="'+svg.midpointx+'" style="stroke:rgb(0,255,0);" />';

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([0,0,-550])[0]+'" y1="'+Three_Dimensional_Resolve_Points([0,0,-550])[1]+'" x2="'+Three_Dimensional_Resolve_Points([0,0,550])[0]+'" y2="'+Three_Dimensional_Resolve_Points([0,0,550])[1]+'" style="stroke:rgb(0,0,255);" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([0,0,-105])[0]+'" y1="'+Three_Dimensional_Resolve_Points([0,0,-105])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,0,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,0,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([100,0,0])[0]+'" y1="'+Three_Dimensional_Resolve_Points([100,0,0])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,0,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,0,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([0,-50,0])[0]+'" y1="'+Three_Dimensional_Resolve_Points([0,-50,0])[1]+'" x2="'+Three_Dimensional_Resolve_Points([0,-50,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([0,-50,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([0,0,-105])[0]+'" y1="'+Three_Dimensional_Resolve_Points([0,0,-105])[1]+'" x2="'+Three_Dimensional_Resolve_Points([0,-50,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([0,-50,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([0,-50,-105])[0]+'" y1="'+Three_Dimensional_Resolve_Points([0,-50,-105])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,-50,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,-50,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([100,0,-105])[0]+'" y1="'+Three_Dimensional_Resolve_Points([100,0,-105])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,-50,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,-50,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([100,0,0])[0]+'" y1="'+Three_Dimensional_Resolve_Points([100,0,0])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,-50,0])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,-50,0])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([0,-50,0])[0]+'" y1="'+Three_Dimensional_Resolve_Points([0,-50,0])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,-50,0])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,-50,0])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<line x1="'+Three_Dimensional_Resolve_Points([100,-50,0])[0]+'" y1="'+Three_Dimensional_Resolve_Points([100,-50,0])[1]+'" x2="'+Three_Dimensional_Resolve_Points([100,-50,-105])[0]+'" y2="'+Three_Dimensional_Resolve_Points([100,-50,-105])[1]+'" style="stroke:rgb(125,125,125)" stroke-width="2" stroke-linecap="butt" stroke-dasharray="1, 2" />';

 

axes = axes + '<circle cx="'+Three_Dimensional_Resolve_Points([100,-50,-105])[0]+'" cy="'+Three_Dimensional_Resolve_Points([100,-50,-105])[1]+'" r="1" stroke="black" stroke-width="3" fill="black" />';

 

axes = axes + '</svg>';

 

document.write(axes);

 

</script>

Edited July 6, 2016 by fiveworlds

[mathematic]

Try computer science forum - you may have better luck.

[fiveworlds]

Try computer science forum - you may have better luck.

 

It is preety much entirely maths though. I am using svg because it has no native 3D support to try and learn how to define 3D because it wasn't really taught all that well in maths class and I wanted to learn it. The solution to the above problem was the Pythagoras Theorem with x^2 +y^2 = 1 and x = y making the unit for z which is a translation of the point x and y by square root of 0.5. I wanted to try rotation about a line but that's fairly difficult maths as far as I could see http://inside.mines.edu/fs_home/gmurray/ArbitraryAxisRotation/

[Sensei]

I don't think so using Z_Translate=1 is good choice.

See Pythagoras's triangle.

If you have a=b=1

c^2 = a^2 + b^2

c=sqrt(a^2+b^2)=sqrt(1^2+1^2)=sqrt(1+1)=sqrt(2)=1.414 (every increase/decrease of z by 1, causes line to have on screen length 1.414, not 1)

But it would look better if line would have length 1.0

1/sqrt(2)=0.707 (because 0.707^2+0.707^2=1)

 

I tried with:

Z_Translate = {X : -0.707, Y : 0.707}

And gfx looks slightly better.

 

But you're free to use whatever you like. After all it's your program.

But better give user option to control it.

They could switch from perspective projection to isometric projection or to other mode they will want.

https://en.wikipedia.org/wiki/3D_projection

https://en.wikipedia.org/wiki/Isometric_projection

 

Rotation is very easy, f.e.:

 

x,y,z,angle_y inputs

 

x1 = x * cos( angle_y ) - z * sin( angle_y );

y1 = y

z1 = x * sin( angle_y ) + z * cos( angle_y );

 

Imagine, angle=0,cos(0)=1,sin(0)=0

so

x1 = x * 1 - z*0=x

y1 = y

z1 = x * 0 + z*1=z

Lack of rotation. Repeat thought experiment with angle=PI/2,PI,PI*3/2,2*PI, or any other angle.

Edited July 7, 2016 by Sensei