Spherical coordinate builder ; Neat drawing
top GCρ abk ρφθ bx1 bx6 doc Update 2011-02-18
Please use MSIE browser to read this page.
This file is programmed with MSIE 6.0
XYGraph v2.3 - web page graph   ☜☞   donate
This file is personal home work. Output
may contain error. Please verify first.




<boxSec01> Please use MSIE to read this page.
Graph area size, W: H:
x min: , x max: ; y min: , y max: ;
x,y value below should be within range above.
Spherical coordinate center is (x,y,z)=(0,0,0) ; //9912050957
Please specify spherical coordinate data to following boxes.
Great circle, north pole through Greenwich . steps=
Front line color= , width= , SoliDot=
Back line color= , width= , SoliDot=
Greenwich circle front begin at φ= end at φ=
Greenwich ; (ρ,φ,θ)
Great circle, north pole through (ρ,φ,θ) point . steps=
Front line color= , width= , SoliDot=
Back line color= , width= , SoliDot=
(ρ,φ,θ) great circle front begin at φ= end at φ=
Great circle, equator . steps= ExampleA
Front line color= , width= , SoliDot=
Back line color= , width= , SoliDot=
Equator great circle front begin at θ= end at θ=
Equator ; small circle
Small circle, through target, parallel to equator . steps=
Front line color= , width= , SoliDot=
Back line color= , width= , SoliDot=
(ρ,φ,θ) small circle front begin at θ= end at θ=
All back= * % or all back silver
0%:all back=black, 100%:all back=front, 200%:all back=white.
3D perpendicular unit vector set, (ground i,j,k)
color= , width= , SoliDot=
3D perpendicular unit vector set, (rotated l,m,n)
color= , width= , SoliDot=
Triangle color= , width= , SoliDot=
Sphere rim color= , rim steps= ;
(0,0,0) unit vector set (i,j,k), each vector length=
(ρ,φ,θ) unit vector set (l,m,n), each vector length=
http://www.mbceo.com/more_information.php?c=Spherical_coordinate_system
Spherical coordinate radial distance rho ρ //earth center ρ=0
Zenith angle from the positive z-axis phi φ //north pole φ=0
Azimuth angle from positive x-axis theta θ //Greenwich θ=0

ρ= , φ= deg. θ= deg.
Program read (ρ,φ,θ) box above, not (x,y,z) box below.
Set x= , y= , z=
Eye ρφθ ; Up ρφθ
Above two lines are auxiliary. Program do NOT read them.
Eye x,y,z ; Parallel 10to90
Up x,y,z ; h1
Axes cross at x= , y= ,

Output may contain error. Please verify first.


Box 1 output XYGraph code

Click [in] to record 3D data
Click [out] to apply 3D data
Box 2 x,y group
Box 3 3D#
Box 4 xyz group
Box 5 x[],y[],z[]
Box 6 dbg
Box 7 dbg
OK; error ; ;
Input 3D xyz to Box 6, Output 2D xy to Box 7. Eye Up
Box 6 in/7 out ; Box 7 in/6 out
Box 8 dbg





<a name='neatDrawing'> XYGraph model file





<docA001> top GCρ abk ρφθ bx1 bx6
2010-12-16-11-03 start
Why write Spherical coordinate builder
http://freeman2.com/sphere3d.htm
?
One of Liu,Hsinhan's recent study 
book is
[[
<a name="docA002">
A Unified Approach to Dynamics via
Hamilton's Principle
Edited by Stephen H. Crandall
School of Engineering
Massachusetts Institute of Technology
Cambridge 39, Massachusetts 
===== Above is "MIT Hamilton"

<a name="docA003">
Estimated ship date for this item:
 May 5, 2006  
  A unified approach to dynamics via
 Hamilton's principle, - Stephen H Crandall 
$25.79 - Quantity: 1 - Usually ships within 1-2 business days 
Sold by: www-zubal-com

2006-05-03-09-30 place order
2006-05-15 receive book
]]
<a name="docA004">
This is a binding-handout type book.
Not a publisher printed book.

MIT Hamilton page 13, fig.1.3 
contribute to xygraph4.htm build 
code to draw mechanical spring

<a name="docA005">
MIT Hamilton page 23, fig.2.2 
contribute to sphere3d.htm build 
code to draw spherical coordinate.

Spring and spherical coordinate are
both frequently used drawing element.

sphere3d.htm started on 2010-12-05.
Done on 2010-12-15. 
<docA006> top GCρ abk ρφθ bx1 bx6
Control panel has the following 
sections
Graph area size
Great circle, north pole through Greenwich
Great circle, north pole through (ρ,φ,θ) point
Great circle, equator
Small circle, through target, parallel to equator
All back=
<a name="docA007">
3D perpendicular unit vector set, (ground i,j,k)
3D perpendicular unit vector set, (rotated l,m,n)
Triangle color= ...
Sphere rim color= ...
<a name="docA008">
ρ= , φ= deg. θ= deg
Set x= , y= , z=
Eye ρφθ ; Up ρφθ
Eye x,y,z ; Parallel 10to90
Up x,y,z ; Del x,y axis
ExampleC
<a name="docA009">
2010-12-16-11-47 here
Graph area size
section determine drawing board
width, height, x/y min/max.

<a name="docA010">
There are four circles in this drawing
Great circle, Greenwich
Great circle, (ρ,φ,θ)
Great circle, equator
Small circle, (ρ,φ,θ)
Each circle has two sections, front
and back. Allow user to specify 
different color, line width, solid
or dot etc.

<docA011> top GCρ abk ρφθ bx1 bx6
Great circle, north pole through 
Greenwich is x-z plane 
where y=constant=0
Front line color=green, width=1, SoliDot=solid
Back line color=silver, width=1, SoliDot=solid
Greenwich circle front begin at φ=0 end at φ=90
<a name="docA012">
Color can be aqua, black, blue,
fuchsia, gray, green, lime, maroon, 
navy, olive, purple, red, silver, 
teal, white, yellow. These names 
are W3C standard color name.
All other colors must use hex
number like '#abc987' or '#321def'

<a name="docA013">
width box can be 1 up to reasonable
integer.
SoliDot box can be solid, dash, dot.

<a name="docA014">
circle front begin at φ=0 end at φ=90 
allow user specify where front arc 
start and end. Number in degree range
from -180 to +180. in-range is front.
out-range is back.

<a name="docA015">
Back arc can be gray color, or white 
color or lighter than front arc.
All back= section help user decide 
back color easily.

Click "[ ] all back silver"
get   "[v] all back white" 
at this point all back color box 
filled with 'white'

<docA016> top GCρ abk ρφθ bx1 bx6
Click "[v] all back white" 
get   "[ ] all back silver"
at this point all back color box 
filled with 'silver'

Above click let all back be same
color. 
<a name="docA017">
Next click let all back be different 
color and close to front color.
All back= [front] * [160]%
If specify 100%, back arc has same
color as front arc.
If specify 0%, back arc all be black
If specify 200%, back all be white.

<a name="docA018">
If specify 160%, back all be lighter
color then its front. 150% or 170%
are the same, just different degree.

If specify 70%<100%, back all be 
darker than front. If front is
black, any #%<100% scale between
black and black. Back color no
change.

<a name="docA019">
Next three circles are same as
Greenwich above.
Great circle, north pole through
      (ρ,φ,θ) point 
Great circle, equator 
Small circle, through target,
      parallel to equator 

All back= is done above

<a name="docA020">
3D perpendicular unit vector set, 
(ground i,j,k) is a unit vector
set. 'unit' hint it has length one.
But program let user specify length.
Ground i,j,k set default silver
color, usually not a main concern.

<docA021> top GCρ abk ρφθ bx1 bx6
3D perpendicular unit vector set, 
(rotated l,m,n) is a unit vector
set in space and rotated relative
to ground i,j,k. [l,m,n] set base 
point is at point (ρ,φ,θ). 
[l,m,n] set default length one
[l,m,n] set default color red.

<a name="docA022">
Triangle color= ...
Triangle is a connection between
(0,0,0) (ρ,φ,θ) (ρ,90,θ) three
points. Plus two foot to x,y axis.
Triangle 3D data output to box 6 .
<a name="docA023">
If click [3Dto2D] button, program
change 3D data to 2D data. Only
2D data can be plotted on drawing 
board.
box 6 data is provided in case you
need drop some triangle lines or
change color. You can modify box 7
data before draw new triangle.

<a name="docA024">
Sphere rim color= ...
is a over all 2D circle contain all
3D loops. User can specify color
and steps.

If you see some curve has visible
broken line. Increase step number
then curve will be smooth.

<a name="docA025">
ρ=  , φ=  deg. θ=  deg
is the main data of this program.
radial distance rho ρ
Zenith angle  phi φ
Azimuth angle theta θ
This file use (ρ,φ,θ) expression
NOT use the other one (ρ,θ,φ).

<docA026> top GCρ abk ρφθ bx1 bx6
If you have (x,y,z) in hand,
instead of (ρ,φ,θ). Fill x,y,z
data to
Set x=[  ] , y=[  ] , z=[  ]  
then click [to ρ,φ,θ box] button.

<a name="docA027">
For a 3D drawing, user must specify
eye location and up direction.
Default is eye location [1,0,0]
and up direction [0,0,1]
Eye x,y,z    ;  Parallel  10to90 
Up x,y,z      ;  Del x,y axis 

<a name="docA028">
If you have eye location in ρ,φ,θ
expression, paste ρ,φ,θ data to
Eye ρφθ [ ] box and click 'eye xyz'
button. Program convert from ρ,φ,θ 
data to x,y,z data and fill to right
boxes.
Samething for up direction Up ρφθ.

<a name="docA029">
Next control box is
Parallel projection and
Perspective projection 
□ Parallel [  ] 10to90 
or 
▣ Perspective [50] 10to90 
<a name="docA030">
If figure is a circle normal to
eye. Rays from circle rim to eye
form a cone.
Perspective projection is a cone.
When eye move to infinity, become
Parallel projection, a cylinder.

<docA031> top GCρ abk ρφθ bx1 bx6
If user choose
□ Parallel [ dimmed ] 10to90 
Drawing is same as most textbook 
drawing. Eye location is not used
in calculation

<a name="docA032">
If user choose
▣ Perspective [50] 10to90 
percentage decide output shape.
10to90 suggest fill in 10% to 90%
100% is screen at eye location,
result all figure become one dot.
200% is screen at beck of eye,
result all figure up side down.
50% is screen at middle of eye 
location and 3D ball. 
<a name="docA033">
If user specify eye location too 
close to ball or put eye inside 
of ball result all figure mess up.
When click [%%Build] button, if
choose ▣ Perspective, and if eye
is inside of ball, program show
warning Eye is inside ball
If continue click "%%Draw", expect
a broken drawing.

<a name="docA034">
Next control box is
□ Del x,y axis 
or
▣ Use x,y axis
Normal display, use "□ Del x,y axis"
If you want to add arraw head to
line segment, use "▣ Use x,y axis"
to find arraw head x,y location.
<a name="docA035">
Goto 
http://freeman2.com/xygraph2.htm
to draw arraw head. Please pay
attention to the arrow main bar.
main bar two ends can not be the
same (x,y) value. Must be different
slightly let program know the main 
bar direction.

<docA036> top GCρ abk ρφθ bx1 bx6
Next control button is
ExampleC
Click "%%Build" first to get
XYGrapg code in 
Box 1 output XYGraph code
<a name="docA037">
Next click "%%Draw" button. Program
use eval() function to convert Box 1
commands to drawing. This design make 
sure that Box 1 output XYGraph code
is a working version.

<a name="docA038">
ExampleA, ExampleB and ExampleC are
all the same two examples. A,B,C 
identify different location, easier
for debug.
Example 1 use 
Azimuth angle, north pole theta θ=0
Example 2 use 
Latitude angle, equator theta θ=0

<a name="docA039">
This program Spherical coordinate 
builder is complicate and not
perfect. Program may still contain
unknown error. If Liu,Hsinhan find
any bug, LiuHH will correct in future 
update. Please re-visit frequently.

Thank you for visiting Freeman's 
web site
Freeman (Liu, HsinHan)
2010-12-16-13-28

<a name="docA040">
2010-12-17-14-34 start
Today 2010-12-17 add one function
at Box 3. 3D# [in]  [out]
If click [in], all current 3D data
(66 boxes) are recorded at Box 3.
If click [out], Box 3 data over-
write all 66 3D data boxes.
Reason is the following.
<docA041> top GCρ abk ρφθ bx1 bx6
After done "Spherical coordinate 
builder" sphere3d.htm LiuHH write
xygraphe.htm which is a model file
for new graph page. LiuHH created
two examples. One is from
http://en.wikipedia.org/wiki/Spherical%20coordinate%20system
Look at wiki picture, fill (ρ,φ,θ)
and eye (x,y,z) to sphere3d.htm
input boxes and created a wiki-like
example graph. When 
<a name="docA042">
write document for xygraphe.htm, 
other example can be dresribed with 
detail, but this re-produced wiki 
picture can not. Because after 
build 2D data, LiuHH forget what 
(ρ,φ,θ) and what eye (x,y,z) used.
<a name="docA043">
It is impossible to recover 
3D data from 2D data in hand !!
After this experience, LiuHH decide
to write function inOut3D(arg1). If 
you are satisfied with one Spherical 
coordinate drawing and hope to 
re-produce in the future, please
click [in] button next to "3D#"
Save Box 3 data to a file. In the
future, copy-paste data to Box 3
and click [out], all 3D data auto
fill in to right boxes.

<a name="docA044">
Next, describe seven big boxes

Box 1 output XYGraph code   
Box 2 x,y group   
Box 3 , 3D#  [in]  [out]
Box 4 xyz group   
Box 5 x[],y[],z[]
Box 6 dbg   
Box 7 dbg 

<a name="docA045">
When program work, first create
sphere 3D data, record result to
Box 4 xyz group   
Box 5 x[],y[],z[]

Box 4 is xyz side-by-side data.
From box 6 to box 7 need xyz side-
by-side data.

<docA046> top GCρ abk ρφθ bx1 bx6
Box 5 is x[] array, y[] array and
z[] array. Similar to XYGraph 
x[] array, y[] array. May be some
application need Box 5 format.

<a name="docA047">
When program work, Second convert 
3D data to 2D data. This conversion
depend on eye x,y,z and up x,y,z.
Output 2D x,y side-by-side data to
Box 2 x,y group. and output 2D 
x array and y array to Box 1.
Box 1 has main result. Program
evaluate Box 1 string and draw
graph.

<a name="docA048">
Box 6 dbg and Box 7 dbg has several
click button below boxes. They are
bye09v02
bye09
bye09Array
cleanData
3Dto2D
hex2dec
dec2hex

<a name="docA049">
When test run Spherical coordinate
codes, one set data draw broken 
circle. Trace code back to 
function bye09() found 
bye09(-.999999999) get 1, 
     but should be -1
bye09(-0.999999999) get 0, 
     but should be -1
Then modify function bye09() and
save as function bye09v02()

<a name="docA050">
Both bye09() and bye09v02() read
just one number. Click button
bye09Array call
function bye09a()
which read array of numbers.

<docA051> top GCρ abk ρφθ bx1 bx6
cleanData is a function convert
several possible data separator
(',' or ' ' or newline or tab)
to ' ' allow programmer use
string.split(' ') to convert one
string of many numbers to array
of numbers. Each array cell has 
only one number.

<a name="docA052">
Other buttons are debug purpose.
But click button "3Dto2D" is a
utility function. Put your 3D 
xyz side-by-side data to box 6
and click "3Dto2D" button, output
to box 7. During this conversion, 
program read eye xyz, up xyz data.
3D data can not be drawn, 2D can.
Paste 2D data to Box 1 and click
"%%Draw" button to exam 3D data.

<a name="docA053">
Click button
hex2dec
convert from hex to decimal. For
example, from abcdef to 11259375
Click button
dec2hex
do the reverse.

<a name="docA054">
Except Click button dec2hex, 
all other click button input at
box 6 output to box 7.
Click button dec2hex input at
box 7 output to box 6.

<a name="docA055">
The reason to include hex2dec and
dec2hex is that three Great circles
and one small circle, all use front
and back two colors. Back color has
simple choice click button for
silver or white. But 
<docA056> top GCρ abk ρφθ bx1 bx6
it would be nice if back arc be 
lighter than its front arc. Four 
front arc have different colors 
and so does four back, not unified 
silver or white.

<a name="docA057">
function colorscale() read front
color and read back to front relative
percentage. Calculate for proper
color code for back arc. Color code
use hex number. Percentage calculation
use decimal number. After done, need
to convert new back color to hex.
This process need both hex2dec and
dec2hex. 

<a name="docA058">
All back= [front] * [160]% 
Program set   0% at black #000000
Program set 100% at front color
Program set 200% at white #ffffff
If you specify percentage greater
than 100, all back arc will be 
lighter color than its front.
If you specify percentage smaller
than 100, all back arc will be 
draker color than its front.

<a name="docA059">
Hope you like this lighter back 
color design.
2010-12-17-15-42

<a name="docA060">
2010-12-21-15-25 start
Today 2010-12-21 add one function.
If paste the string "2.2, 58, -32"
to ρ= box, program split and paste
to ρ=[2.2] , φ=[58] deg. θ=[-32] 
three boxes. Without this function
user must paste three times. There
are four boxes have this function.
They are ρ= box, Set x= box, 
Eye x,y,z first box and Up x,y,z 
first box.
2010-12-21-15-36 stop

<docA061> top GCρ abk ρφθ bx1 bx6
2011-01-09-13-31 start
Update 2011-01-10 made the following
changes.

<a name="docA062"> 
(1) Axes cross at x= , 
    time stamp a001071812
Added function xyatL(), xyaxis01() 
at time stamp a001071821
Allow drawing x_axis and y_axis
cross at non-(0,0) point.

<a name="docA063"> 
(2) Test run Spherical coordinate 
    builder program. At one set
input data, output ground i,j,k 
triad drawing be left_handed !!
But it should be right_handed !!
(i,j,k) is left_handed because i
vector should be on +x axis, now
i vector is on -x axis. A big 
surprise. 
Create Box 8 for debug (a001081429)
<a name="docA064"> 
Debug trace back to 
var projRatio=(eyedist-scrPercent*eyedist)
    /(eyedist-matVecOut[0]); //9712271249
Conclude that left_handed (i,j,k)
is a result of eye_close_to_object.
If put eye inside of ball (eye to
[0,0,0] distance is less than 
radius rho) and choose 
Perspective projection (other
choice is Parallel, no trouble)
eye see a big mess.
<a name="docA065"> 
Now eye is outside of ball
(eye to [0,0,0] distance is greater
 than radius rho)
but eye is near ball and (i,j,k) 
triad length is greater than eye 
to (0,0,0) distance. In this case
one's nose push i vector from +x
to -x. To solve this problem, add
distance to eye coordinate. 
<docA066> top GCρ abk ρφθ bx1 bx6
LiuHH did not modify code for this
[ground i,j,k triad drawing be 
 left_handed] case.
During this debug process, at
a001081422 drop '*1' twice and
use "*1*1" key string for search
purpose.
Debug code deleted, Box 8 saved.

<a name="docA067"> 
(3) There are four boxes have the
    function split three numbers
and distribute to three boxes.
LiuHH hope to color these four.
Finally found style definition
(find key string "bgColor1")
Four boxes have 
background-color: #eeff00;
and text color red 
and text-align:center;
Easy to identify.

<a name="docA068"> 
(4) There are a moment confuse,
    and change drawing board top 
start up message to
Output may contain error. Please verify first. 

<a name="docA069"> 
(5) Fifth and sixth points are 
    discussion, not change code.
If you want to know which arc 
specification (color,width and
solid/dot) match which drawing
part. It is easy to see if you 
change one line width from 1
to 3 and change color to red.
Run this drawing, output let 
the target arc stand out.

<a name="docA070"> 
(6) One way to verify Perspective
    projection is that eye height
(that is eye_z_coordinate) be the
same as small circle, then we see
small circle edge on and it is a
straight line. To do this, change
ρ= [box] (or φ=  deg. θ= ) from 2
to 2. Just add one dot, then one
line below message become
Equivalent x=1.01807, y=0.58779, z=1.61803
<docA071> top GCρ abk ρφθ bx1 bx6
Now copy z value 1.61803 to eye z
box. Fill in eye x,y box with any
value, but big enough let one's
nose stay away from graph parts.
Next click "%%Build" and "%%Draw"
If output show small circle be one
straight line, this is a necessary
condition for correct drawing.
("necessary" mean that may still
 have other error.)
Only perspective projection has 
"small circle be one straight line"
Parallel projection do not.

<a name="docA072"> 
LiuHH still do not have confidence
about the drawing output. Because
LiuHH can not find other similar 
program for comparison.
2011-01-09-14-27 stop

<a name="docA073">
2011-01-17-09-49 start
Update 2011-01-17 change the code
of neat drawing list. Load twice
and print once, not print twice.
2011-01-17-09-51 stop

<a name="docA074">
2011-02-16-21-07 start
Update 2011-02-18 change 
from 'tripod' to 'triad'.
2011-02-16-21-08 stop




Javascript index
http://freeman2.com/jsindex2.htm   local
Save graph code to same folder as htm files.
http://freeman2.com/jsgraph2.js   local


This file sphere3d.htm is created on 2010-12-05

This page URL
http://freeman2.com/sphere3d.htm
Chinese version URL
http://freeman2.com/sphere3c.htm
First upload 2010-12-22

Thank you for visiting Freeman's web site
Freeman 2010-12-21-20-37
(Freeman's name is Liu, HsinHan 劉鑫漢)