Select the function you'ld like to plot from the select box. Although it is divided into several sections, I will explain this later. Once a function is selected, its formula will be displayed at the top right of the screen. Pressing [start] button will plot the surface.

Set the number of lines used for drawing. "Calc." refers to the number of lines used for calculation. "Drawing" refers to the number of lines actually drawn. Increasing the number of lines makes the mesh denser and the surface smoother, but it also increases the computational load, which may cause choppy movements when rotating the rendered surface. The initial value for both "Calc." and "Drawing" is 20. *note

"Drawing" can be set to the same number of lines as selected in "Calc." or the number of lines like 1/2, 1/4, etc in "Calc.".

After changes, press the [Start] button to redraw the surface.

"Spacing" and "Scaling" are display-only fields and cannot be input or selected. "Scaling" refers to the enlargement (reduction) rate of the drawing range relative to a box (x / y: 12, z: 6) that encloses the surface in 3D space.

Set the drawing range for x, y, and z axes.

The input boxes are text boxes, so you should directly enter numerical values to change them. The default range is -2 to 2 for x, y, and z. *note

After changes, press [Start] button to redraw the surface.

For the z-axis, if the function's values exceed the range, a plane parallel to the x-y plane will be drawn. To make the boundaries clearer, contour lines are drawn at three points: z : max, 0, min. When the gamma angle (vertical viewpoint) is set to 90 or -90 degrees the implicit function's graph will be drawn.

"$\alpha$" sets the horizontal angle (around the z-axis) of the viewpoint. "$\gamma$" sets the vertical angle (downward [-] / upward [+]) of the viewpoint. Although you can directly enter numerical values in the text boxes, the right slider of the drawing window corresponds to "$\alpha$" and the bottom slider corresponds to "$\gamma$", so moving the sliders will display the respective angles. The default is "$\alpha$" : 30 degrees and "$\gamma$" : -30 degrees. *Note

After changes, press [Start] button to redraw the surface.

Moving the sliders enables the [Reset] button. Pressing the button resets "Angle" to the default values. Changes made to "Mesh" and "Range will be retained.

*note :

Functions that have been incrementally added are stocked here. Smooth surfaces should not pose any problems, but for discontinuous surfaces (e.g., functions defined by fractions where the denominator may become 0), division by zero might occur. In such cases, we handle them according to the following rules based on JavaScript's specifications.

1. $ f(x, y) = |\sin(\omega)|,   \omega = x + iy $

    

   to Plot

   Let   $ \omega = x + iy $

   From   $ \sin(\omega) = \sin x \cosh y + i \cos x \sinh y $

   $ |\sin(\omega)| = \sqrt{\sin^2 x \cosh^2 y + \cos^2 x \sinh^2 y} $

   

   The actual calculations use the expression on the right-hand side of $ |\sin(\omega)| $. The x-axis corresponds to the real part, and the y-axis corresponds to the imaginary part. When plotting the absolute value of a complex function under "User Defined" described later, you need to define an expression where the imaginary unit $i$ is eliminated, like on the right-hand side of $ |\sin(\omega)| $. By the way, although the background of the thumbnail indicating the surface shape is white, I will explain this later.

2. $ f(x, y) = |\cos(\omega)|,   \omega = x + iy $

    

   to Plot

   Let   $ \omega = x + iy $

   From   $ \cos(\omega) = \cos x \cosh y + i \sin x \sinh y $

   $ |\cos(\omega)| = \sqrt{\cos^2 x \cosh^2 y + \sin^2 x \sinh^2 y} $

   Let's also mention $\cos$. The actual calculation of $\cos$ uses the expression on the right hand side of $|\cos(\omega)| $. The x-axis corresponds to the real part, and the y-axis corresponds to the imaginary part.

3. $ f(x, y) = |Γ(\omega)|,   \omega = x + iy $

    

   to Plot

   Gamma function

   $ |\Gamma(x + iy)| = |\Gamma(x)| / \prod \sqrt{1 + (y / (n + x))^2}, \quad n:0～∞ $

   

   The actual calculation used the right-hand side of $ |\Gamma(x + iy)| $, approximating up to $ n $ 15. The x-axis corresponds to the real part, and the y-axis corresponds to the imaginary part. The reason $n$ was set to 15 is that I got lazy with entering the formulas halfway through, and when I tried rendering the graph, it looks decent enough, so I called it good. I wanted to try rendering a gamma function graph once.

1. Cassini Oval

    

   to Plot

   $ f(x, y) = (x^2 + y^2 + a^2)^2 - 4a^2x^2 - b^4 $
   
   

   Parameters   (Default) : $ a = 0.6,   b =0.4 $

   

   The implicit function is $ (x^2 + y^2 + a^2)^2 - 4a^2x^2 - b^4 = 0 $.

   When you fix the parameter $a$ at 0.6 and vary $b$ as 0.4, 0.6, and 0.8 to render the surface, the contour shown at $ z = 0 $ (the x-y plane) matches the graph of the implicit function.

   When you move your mouse cursor near the coefficient input box, up and down arrows like a spin button will appear, but it's easier to input the values directly, such as "0.6".

   The 3D plot can be difficult to understand, so try moving the slider until the "$\gamma$" reaches $ \pm 90$. I think the purpose curves(contour lines) have been plotting.

   $a$	$b$	Curve Features	Graph Outline
   0.6	0.4	Two closed curves symmetrical around the origin
   0.6	0.6	Curve through the origin
   0.6	0.8	Ellipse-like curve

   When $ a = b $, the curve is called a Lemniscate. In this case, the curve with $ a = 0.6, \quad b = 0.6 $ is the Lemniscate.

2. Example of a surface that reflects the periodicity of trigonometric functions

    

   toPlot

   $ f(x,y) = \cos(y) - \cos(x) $

   

   When I looked at this surface first time, I am reminded of a wavy sponge used in the kitchen. If this surface is cut at $z = \alpha$, the contour matches the graph of solution trajectory plotted in "Differential Equations: Plotting Trajectory of Solutions 4-12".

   Unlike "Cassini Oval", there are no changeable parameters in this example, but by changing the Max and Min values of the "Range" - z, you can reproduce the graph of the "implicit function". The thumbnail on the right shows the graph viewed from just above when $ z = \pm 1$.

When you click "to Plot" (or the picture avobe that), the following screen will be displayed. You can enter any function and check its surface. When you press [Start] button, the formula you entered will be displayed in TeX format below the input box, and drawing will begin. The evaluation of the entered formula uses Math.js. If an error message is displayed, please check and correct the equation you entered as needed.

* You cannot include parameters like $a$ or $b$ in the formula you enter. Enter a direct value such as "2" or "-3" for the coefficient.

* For discontinuous surfaces (such as when the denominator of a function defined as a fraction can be 0), the $z$ value is adjusted according to the Javascript specifications, so there is no need to any special diviside into cases.

Below are some examples of input.

Below are some samples input:

1. Function shown in the example of input

   $ x^3 - 3*x*y + y^3 $

    

   to Plot

2. Function shown in long formula

   $ x * (1 - 2 * r) - y * (1 + 2 * r) * (r^2 - (x^2 - y^2)) \quad $ where, $ \; r= x^2 + y^2 $

    

   to Plot