Above 
X_min X_max 
Y_min Y_max
are suggestion, data real range.

Above
X min    X max      Y min    Y max
are user specified range.

You can refer to data real range and specify
the drawing board  axis range.
9712201020

9801022039
Java Script Bible
[[
884 Part IV ✦ JavaScript Core Language Reference
Table 28-1: JavaScript Math Properties
Property Value Description
Math.E 2.718281828459045091 Euler’s constant
Math.LN2 0.6931471805599452862 Natural log of 2
Math.LN10 2.302585092994045901 Natural log of 10
Math.LOG2E 1.442695040888963387 Log base-2 of E
Math.LOG10E 0.4342944819032518167 Log base-10 of E
Math.PI 3.141592653589793116 π
Math.SQRT1_2 0.7071067811865475727 Square root of 0.5
Math.SQRT2 1.414213562373095145 Square root of 2
Because these property expressions return their constant values, you use them in your regular
arithmetic expressions. For example, to obtain the circumference of a circle whose diameter
is in variable d, employ this statement:
circumference = d * Math.PI;
Perhaps the most common mistakes scripters make with these properties are failing to capitalize
the Math object name and observing the case-sensitivity of property names.
Methods
Methods make up the balance of JavaScript Math object powers. With the exception of the
Math.random() method, all Math object methods take one or more values as parameters.
Typical trigonometric methods operate on the single values passed as parameters; others
determine which of the numbers passed along are the highest or lowest of the group. The
Math.random() method takes no parameters but returns a randomized, floating-point value
between 0 and 1 (note that the method does not work on Windows or Macintosh versions of
Navigator 2). Table 28-2 lists all the Math object methods with their syntax and descriptions
of the values they return.
Table 28-2: Math Object Methods
Method Syntax Returns
Math.abs(val) Absolute value of val
Math.acos(val) Arc cosine (in radians) of val
Math.asin(val) Arc sine (in radians) of val
Math.atan(val) Arc tangent (in radians) of val
Math.atan2(val1, val2) Angle of polar coordinates x and y
Math.ceil(val) Next integer greater than or equal to val
Math.cos(val) Cosine of val
Math.exp(val) Euler’s constant to the power of val
Math.floor(val) Next integer less than or equal to val
Math.log(val) Natural logarithm (base e) of val
Math


885 Chapter 28 ✦ The Math, Number, and Boolean Objects
Method Syntax Returns
Math.max(val1, val2) The greater of val1 or val2
Math.min(val1, val2) The lesser of val1 or val2
Math.pow(val1, val2) Val1 to the val2 power
Math.random() Random number between 0 and 1
Math.round(val) N+1 when val >= n.5; otherwise N
Math.sin(val) Sine (in radians) of val
Math.sqrt(val) Square root of val
Math.tan(val) Tangent (in radians) of val
HTML is not exactly a graphic artist’s dream environment, so using trig functions to obtain a
series of values for HTML-generated charting is not a hot JavaScript prospect. Only with the
advent of positionable elements have scripters been able to apply their knowledge of using
these functions to define fancy trajectories for flying elements. For scripters who are not
trained in programming, math is often a major stumbling block. But as you’ve seen so far, you
can accomplish a great deal with JavaScript by using simple arithmetic and a little bit of
logic—leaving the heavy-duty math for those who love it.
Creating random numbers
The Math.random() method returns a floating-point value between 0 and 1. If you design a
script to act like a card game, you need random integers between 1 and 52; for dice, the range
is 1 to 6 per die. To generate a random integer between zero and any top value, use the following
formula:
Math.floor(Math.random() * n)
Here, n is the top number. To generate random numbers between a different range, use this
formula:
Math.floor(Math.random() * (n – m + 1)) + m
Here, m is the lowest possible integer value of the range and n equals the top number of the
range. For the dice game, the formula for each die is
newDieValue = Math.floor(Math.random() * 6) + 1;
Math object shortcut
In Chapter 31, you see details about a JavaScript construction that enables you to simplify
the way you address multiple Math object properties and methods in statements. The trick is
to use the with statement.
In a nutshell, the with statement tells JavaScript that the next group of statements (inside the
braces) refers to a particular object. In the case of the Math object, the basic construction
looks like this:
with (Math) {
//statements
}
Math

886 Part IV ✦ JavaScript Core Language Reference
For all intervening statements, you can omit the specific references to the Math object.
Compare the long reference way of calculating the area of a circle (with a radius of six units)
result = Math.pow(6,2) * Math.PI;
to the shortcut reference way:
with (Math) {
result = pow(6,2) * PI;
}
Though the latter occupies more lines of code, the object references are shorter and more
natural when reading the code. For a longer series of calculations involving Math object properties
and methods, the with construction saves keystrokes and reduces the likelihood of a
case-sensitive mistake with the object name in a reference. You can also include other fullobject
references within the with construction; JavaScript attempts to attach the object
name only to those references lacking an object name. On the downside, the with construction
is not particularly efficient in JavaScript because it must perform a lot of internal tracking
in order to work.

]]


hyperbolic cosine use
0.5*(exp(x)+exp(-x))

hyperbolic sine use
0.5*(exp(x)-exp(-x))
 9507211232



97,12,29,21,06
This file curve3d2.htm has Gamma function
y(t)=gamma(t)
and has step function
y(t) = 
-3.097*stepf(t,-2)*(1-stepf(t,2))*sin(t)+stepf(t,2)*(1-stepf(t,5))*exp(-(t-PI))*sin(t-PI)+stepf(t,5)*(1-stepf(t,8))*(t*t*t/108.75-1)
97,12,29,21,24 

Output may contain error. Please verify first. 

2008-12-30-11-37 begin
Be able to draw math curves, that is always Liu's
wish. On 2006-06-12-18-21 Liu accessed XYGraph at
http://www.structura.info/XYGraph/XYGraph.zip
On 2006-06-12-20-00 XYGraph.js
On 2006-06-12-20-14 Examples.htm
Draw curve on web page is possible.

2006-06-12 received XYGraph code, 14 days later
2006-06-26 done program graph03e.htm two and half
years later,
2008-12-30 done space curve projector curve3d1.htm

XYGraph is plane graph program. Need only x,y coord.
But space curve each point has x,y,z three values. How
to display x,y,z points on x,y screen? This is not an
easy job. Until need it, then start write converter
code. Need what? On 2008-12-04 read atan2(x,y) function
I hope to see what it look like. 2008-12-15 start write
curve3d1.htm  2008-12-30 done.

How to use this program curve3d2.htm ?

Step 1: You need to create 3D curve points data.
Very similar to next

0, 6, 0
-0.0582, 5.8250, 0.5646
-0.1072, 5.3612, 0.9320
-0.1431, 4.7706, 0.9738
.....
Every three number represent one point x,y,z coord.
in space. Use about 100 points to about 1000 points,
paste them to Box 1  input x,y,z .
Step 2: fill in eye coordinate x, y, z       
Step 3: fill in Distance percent ratio of screen to eye
Step 4: fill in Screen-up direction x, y, z 
Step 5: click "3D data to 2D data" button. Program change
 x,y,z values to  x,y values. Store result to Box 2.
Step 6: click "Draw 2D data" button to get figure.
2008-12-30-12-12 here

To create 3D x,y,z coordinate data is not an easy job.
If space curve can be expressed by parameter equation
then this program can help you to create 3D data. Please
fill in the parameter equation in the following boxes.
x(t):  
y(t):  
z(t): 
How to make parameter equation? Please click "Example:"
there are eight example parameter equations.


"atan2()" is the starting point of this program.
"calabash" draw 3D calabash picture.
"equator wave" close to electron orbit around nuclear.
"spring" is a spring along x axis.
"solid doughnut" a doughnut less hole
"hollow doughnut"  a doughnut more hole
"ball" is a ball
"flat tire" is a flat tire. function stepf create
this flat effect.
"hollow doughnut" height function is z(t): 1*sin(60*t)
which is not flat.
"flat tire" height function is 
z(t): stepf(t,2)*(1-stepf(t,5))*1*sin(60*t)
Added gate function "stepf(t,2)*(1-stepf(t,5))*",
When parameter t value is in [2,5] gate function let
height function be what it should be.
When parameter t value is outside of [2,5] gate function
let height function be zero.
A zero height is a flat picture.

After click example button, program display parameter
equations, not draw immediately. User can modify eqn.
or change t range. After satisfy, click "Once for all"

If user get 3D data from other source, paste it into 
Box 1, this moment, 
user can click "3D data to 2D data"
user can click "Draw 2D data"
user can NOT click "Create 3D curve data"
user can NOT click "once for all"

can NOT click, that is because, if click "Create 3D 
curve data", program read x(t), y(t), z(t) definition
and create a set of 3D data, then store it in Box 1.
This action destroy user's imported data.
2008-12-30-12-35 here

Program read user supplied eye coordinates, screen-up
direction and determine point projection on screen.
If you like parallel projection, which is equivalent
to put eye at infinite distance. Check the box at
Parallel projection [ ]=eye at infinite.

Program default draw plane x,y axis, if you do not want
it, Check the box at
[ ]Del x,y axis from screen 

variable t step size[   ] begin[  ] end[  ]
are three numbers, step size must be positive,
begin must < end

More control parameter <== More control boxes. 9712201009 
has more boxes to control output

If input data has four column, ignore column one
check box.

Drawing board size
x,y axis range

Draw ground x,y,z axis? 
This is 3D ground axis, not 2D screen axis.

If screen X,Y range too small, for example -1<x<+1 ; -1<y<+1
If drawing range is too big, for example  |x| > 2 ; |y| > 2
If curve is a doughnut, then screen show nothing. In this case
please read tje range in
X_min X_max 
Y_min Y_max
and adjust the range in
X min    X max      Y min    Y max 

2008-12-30-12-51 here



Box 3 print eye coordinate and screen-up direction,
both are supplied by user. and corrected screen-up 
direction, This corrected vector is key point.
Program require eye vector and screen-up vector are
perpendicular to each other.
If eye vector is 12.34,8.56,-6.24
If screen-up vector is 1.23,-3.45,0.65
Who can make a screen-up vector perpendicular to eye
vector? It is very hard to do so. Program read user 
input, and auto adjust screen-up vector. The result
is displayed in Box 3. Let user to verify.

Box 4 print ground x,y,z coordinate on-screen location.
If user specify screen-up direction is 1,0,0, then 
ground x axis (that is '1' in '1,0,0') must show up
on screen as (0, positive_value). Because screen y
value is up direction to eye.

Box 5 print rotation matrix rotxyz and its transpose
matrix transpRot.
rotxyz is created from eye vector and screen-up vector.
transpRot is transpose of rotxyz. transpRot is main tool.

rotxyz column 1 (not row 1) come from eye vector.
rotxyz column 3 (not row 3) come from screen-up vector.
rotxyz column 2 (not row 2) come from col3 cross col1

rotxyz value also store to M matrix
If click
[M to q] from above M matrix to quaternion and rotation angle/axis (below) 
get rotation angle/axis and quaternion values.

M matrix is rotxyz matrix. This program use matrix to
rotate, not use quaternion to rotate. Display rotation
angle/axis and quaternion values, that is to provide
further thinking how to use quaternion to rotate in the
future.
2008-12-30-13-23 here

This program draw 3D curve, lack of 3D felling. Liu
attempted to draw curve with different color proportional
to point distance to eye. But failed, because Liu do not
know VML language.

During color thinking, need to calculate color ratio, 
which use decimal number. To display color use hex number. 
This program included general base change function at page
end. Not deleted, user can play with it.
2008-12-30-13-30 stop


2009-01-03-11-46 start
What shape atan2(x,y) look like?
It is a 3D curve. Take a mechanical spring, remove one
loop from spring. At the cutting point, pull two ends
apart along spring axis. This result an approximate
curve to atan2(x,y) curve.  Or remember the old movie
which has a cylindrical light house. The stair way inside
it, take one loop. This one-loop-stair-way has a shape
close to that of atan2(x,y). Why require one loop?
Because atan2(x,y) is defined between -PI to +PI, that
is exact 360 degree, exact one loop. 
Out side of this range atan2(x,y) is undefined.
2009-01-03-11-53 stop

2009-01-03-21-50
3D space use x,y,z coord. If they are not related,
then this is a point freely move in 3D space. If
x,y,z are restricted, then space point can reach 
reduced. If assign one degree of freedom to be a
constant, for example, let z=1. Only x,y are free
to change. Then it become 2D space.

If Space Curve Projector draw plane curve?
The answer is yes. Please click example "Gamma"
button, then click "once for all" button.
Key point is to use Parallel projection. If let
z=constant, then eye must be on z axis. Who can
watch movie, if he stand at side of movie screen?
2009-01-03-21-58

Output may contain error. Please verify first. 

2008-12-13-16-30 start
Curve of function atan(x) and
curve of function atan2(sin(t), cos(t)) 
is it possible to put two curves in one figure
and compare?
The answer is no.

Input of atan(x) need just one variable x
together with its output y(x) (x,y) form a
two dimensional curve. It can be plot on
a paper.

But input of atan(x) need two independent 
variables x and y. Together with its output z(x,y)
(x,y,z) form a three dimensional surface. It 
can not be plot on a paper. They can not be put 
side by side and compare.
2008-12-13-16-39 stop

2008-12-15-08-06 start
Above "two independent variables x and y" is wrong.
Because in atan2(sin(t), cos(t)) it represent
x(t)=sin(t), y(t)=cos(t), both x and y depend on
same variable t. variables x and y depend on each
other. We can say that atan2(sin(t), cos(t)) is a 
space curve, (not a surface).
In the future, Liu may find more error, will correct
error in the future version. When you read this file
Please put question mark more frequently.
2008-12-15-08-08

2008-12-15-14-12 Above correction let Liu write
function atan3D()
that is to write Space Curve Projector program.

2008-12-30-18-45
Curve has broken section, why it is so? Liu do 
not know.
How to delete back side, not visible curve?
Liu do not know.
If you want no-broken, no-back graph, you need to
buy a professional 3D-drawing program. Go to search
engine, look for "3D graph", "space curve" etc.
you will find many 3D graph programs.

The following is a free profressional program.
(But Liu is not sure if they draw 3D curve)

2008-12-27-11-40
http://www.rene-grothmann.de/euler.html
Euler Math Toolbox

2008-12-27-11-4-06
http://mathsrv.ku-eichstaett.de/MGF/homes/grothmann/euler/

2008-12-27-11-47-29 download page
http://mathsrv.ku-eichstaett.de/MGF/homes/grothmann/euler/download.html

Newest version is Euler 6.30 File size is (35 MB)
2008-12-30-18-58 stop



2008-12-30-19-02 start
Time stamp in this file
At 9712261203 end use of geometry proportional method
At 9712261703 begin use rotation matrix method.

geometry proportional method is poor method, if error
it is hard to locate the trouble.
rotation matrix method is better method. if error, it
is easy to locate the trouble. Just exam rotation matrix
that should solve most trouble.

Part old notes (before 9712261203) it has nothing to do
with transform from 3D to 2D. Those note are still useful.
But note for geometry proportional method are deleted.
2008-12-30-19-13 stop

2008-12-30-22-01 start
from 2008-12-29-11-35 begin case study
to   2008-12-29-13-39 several special cases OK

from 97,12,30,21,29 begin perturbation test
to   97,12,30,21,53 put eye on axis, on coordinate
surface, no sudden big change direction
2008-12-30-22-04 stop



2008-12-30-22-19 above is eye perturbation
Actually, need worry screen-up direction 
perturbation. Because screen-up direction 
code is divided into eight code sections

[[
9712311124 "eight code sections" are deleted.
]]

2008-12-30-22-21
eye x, y, z = 10,-4,7
screen-up x, y, z  = 1,0,0
next is ground x axis end point [3, 0, 0] 
project to screen.
5.0885221961986345e-17,  1.1506841765115545
Above OK, below wrong
eye x, y, z = 10,-4,7
screen-up x, y, z  = 1,0.001,0  (0.001 is perturbation)
next is ground x axis end point [3, 0, 0] 
project to screen.
-0.0015907986197512594,  -1.150683076886866

2008-12-30-22-24 sudden jump !!
from 1.1506841765115545 to -1.150683076886866

2008-12-31-09-28 case study too much work
Use known eye vector cross product known given
screen-up vector, get corrected screen-up vector
quickly!

2008-12-31-10-07
given screen-up vector
corrected screen-up vector
eye cross product given screen-up vector

eye vector given
given screen-up vector given
corrected screen-up vector unknown

eye, given screen-up, corrected screen-up
are in same plane.
eye and corrected screen-up perpendicular to
each other.

eye vector cross product with given screen-up vector
get crossed-result-vector.
crossed-result-vector cross product with eye vector
get corrected screen-up
2008-12-31-10-10

"eight code sections" are deleted. change to next codes.
wkxyz=eyeXup(eyexyz,scrUPxyz); //9712311039
function eyeXup(eye0,up0) //9712311005
function v1Xv2(v1,v2) //9712311019
function length1(inVec) //9712311031
2008-12-31-11-29 record

[[
eye x, y, z = 10,-4,7
screen-up x, y, z  = 1,0,0
0,  1.1506841765115545
Right, because (0, positive) represent up direction

eye x, y, z = 10,-4,7
screen-up x, y, z  = 1,0.001,0  (0.001 is perturbation)
-0.0015907986197512594,  -1.150683076886866
Wrong, ask x axis to be up, but it is downward.
2008-12-30-22-29
]]
from 1.1506841765115545
to  -1.150683076886866
that is big change, start from perturbation 0.001

Above is geometry proportional method, get error.
Below is rotation matrix method, get correct result.


2008-12-31-10-59 test new code (time stamp is //9712311039)
eye x, y, z = 10,-4,7
screen-up x, y, z  = 1,0,0
next is x axis end point [3, 0, 0] projection to screen
-5.0885221961986345e-17,  1.1506841765115547

eye x, y, z = 10,-4,7
screen-up x, y, z  = 1,0.001,0  (0.001 is perturbation)
next is x axis end point [3, 0, 0] projection to screen
0.0015907986197512085,  1.1506830768868663
2008-12-31-11-02 no sudden change, safe.

from 1.1506841765115547 
to   1.1506830768868663
no sudden change
2008-12-31-11-34

2008-12-31-13-07 begin (9712311307)
eye x, y, z short as eyeX,eyeY,eyeZ
screen-up x, y, z  short as upX,upY,upZ
These two vectors are both user assigned.
It is hard for user to assign two perpendicular
vectors. If user do not assign two parallel
vectors, then program find out corrected screen-up
direction. short as topX,topY,topZ.

geometry proportional method (discarded) consider
eye on axis (three), eye on coordinate plane (three)
screen up = (1,0,0) (one case) and general case.
total eight cases. If each case use correct code
It is possible not get sudden big jump.

eyeX,eyeY,eyeZ
upX,upY,upZ
topX,topY,topZ
three vectors, has three unknown topX,topY,topZ
need three equations, they are
three vectors in same plane. a linear equation
eyeX,eyeY,eyeZ and topX,topY,topZ perpendicular
 a linear equation
and
topX,topY,topZ vector length = 1. that is
topX*topX+topY*topY+topZ*topZ=1
a nonlinear equation. To simplify work, normalize
topX,topY,topZ vector at last stage. It is OK(?)
to set topZ=1 let topX,topY be two unknown to
meet two linear equation. After solve topX,topY
then require topX*topX+topY*topY+topZ*topZ=1

The trouble is at "to set topZ=1" , because for
a quadratic equation topX*topX+topY*topY+topZ*topZ=1
topZ=-1 is also a solution. When it is the case of
topZ=-1, program still set topZ=+1 ? result is
tiny perturbation cause three ground x,y,z axis
sudden big rotate 180 degree!! A stunning scene.

After thinking, discarded eight code section,
change to
[0,0,0]_to_eye cross-product given screen-up 
get crossed-result-vector, then
crossed-result-vector cross-product with eye
vector to get corrected screen-up

Carry out cross product twice and normalize once
get corrected screen-up. This is a smooth process
no sudden change.
2008-12-31-13-37 stop

2009-01-06-09-15
2009-01-03-23-34 (U.S. Pacific time) first time upload
this file curve3d2.htm to Internet at
http://freeman2.com/curve3d2.htm
2009-01-04-09-16 upload rocsitee.js for announcement.
2009-01-05-09-51 upload screen-back curve, that is
"Did you say you leave home without it? Do not worry about it."
.....2009-01-04-16-09
2009-01-06-10-06 upload statistic curve, that is
'Paste statistic data to Box 2, click "Draw 2D data".'
This example prints Chinese flag sun shine part.
It is not a math curve, close to statistic example.
2009-01-06-09-33

2009-01-07-19-56
This file curve3d2.htm allow user to put one
statistic curve data to box 2. If you need to
put more statistic curve in one graph, goto
http://freeman2.com/graph03e.htm
graph03e.htm allow you put at most five curves.

2009-01-07 add coin curve. Coin has three 
surface. Top, side and bottom. Program use
stepf() to control when draw what.

When independent variable 0< t <3
switch function
stepf(t,0)*(1-stepf(t,3))*
turn on for following definition (bottom)
x(t):sin(t)*cos(60*t)
y(t):sin(t)*sin(60*t)
z(t):0.3

When independent variable 3< t <5
switch function
stepf(t,3)*(1-stepf(t,5))*
turn on for following definition (side)
x(t):cos(60*t)
y(t):sin(60*t)
z(t):t/10

When independent variable 5< t <8
switch function
stepf(t,5)*(1-stepf(t,8))*
turn on for following definition (Top)
x(t):sin(t)*cos(60*t)
y(t):sin(t)*sin(60*t)
z(t):0.5

When t=3, side height z(t):t/10=3/10=0.3
Match bottom height z(t):0.3

When t=5, side height  z(t):t/10=5/10=0.5
Match top height z(t):0.5

This match is necessary, otherwise three
parts separate.

This 'just right' need oneself bend his 
finger to calculate, it is not coincidence
This file take care only height match.
Did not take care each part begin/end match
You can find long straight line in the coin.
2009-01-07-20-19

2009-01-07-23-00
change 'coin' to 'dumbbell', look better.
2009-01-07-23-01

2009-01-08-08-29
This file use matrix rotation method to
transform curve point coordinate from ground
coordinate to rotated eye coordinate.
Quarternion can also rotate. On
2009-01-07-15-30 Quarternion rotation success.
No new function, just increase file size.
Decide not upload Quarternion rotation code.
2009-01-08-08-32