セレクトボックスから描画させたい関数を選択します。 いくつかのセクションに分かれていますが、これについては後で説明します。 関数が選択されると、画面の右側上部に、式が表示されます。 [Start] ボタンを押すことで曲面が描画されます。

描画に使用するラインの数を設定します。 "Calc."は計算で使用するライン数です。 "Drawing"は実際に描画するライン数です。 ライン数を大きくするとメッシュが密になり曲面がなめらかに表示されますが、 計算量が増えるので、描画された曲面を回転させるときの動きがギクシャクすることがあります。 デフォルトは"Calc.", "Drawing"とも 20 です。※註

"Drawing"は"Calc."で選択されたライン数と同じか、1/2, 1/4などの数を選択することができます。

変更後は[Start] ボタンを押すことで、再描画されます。

SpacingとScalingは表示のみで、入力や選択はできません。 Spacingは描画領域におけるラインの間隔です。 Scalingは3次元で曲面を収める箱(x/y:12、z:6)に対する描画範囲の拡大(縮小)率です。

x, y, zごとの描画範囲を設定します。

入力用のボックスはテキストボックなので、変更する場合は直接数値を入力します。 デフォルトはx, y, zとも -2～2 です。※註

変更後は[Start] ボタンを押すことで、再描画されます。

zについては関数の値がレンジを超えた場合は、x-y面と平行な平面が描かれます。 これだと境界が分かりづらいのでz : max, 0, minの3ヶ所で等高線を描くことで、 境界を明確にしています。 次に説明するAngleの設定でgamma(上下の視点位置)を90度にセットすると 陰関数のグラフが描画されます。

"$\alpha$" は視点位置の水平方向(z軸廻り)の角度を設定します。 "$\gamma$" は視点位置の上下方向の角度(俯角[-]/仰角[+])を設定します。 テクストボックスなので直接数値を入力することもできますが、 描画ウインドウ右のスライダーが "$\alpha$" に、下のスライダーが "$\gamma$" に連動しているので、 スライダーを動かすとそのときの角度が表示されます。 デフォルトは"$\alpha$" : 30度、"$\gamma$" ：-30度です。※註

変更後は[Start] ボタンを押すことで、再描画されます。

スライダーを動かすと、[Reset] ボタンが使用できるようになります。 ボタンを押すと、"Angle" がデフォルトの角度に戻ります。 "Mesh", "Range"で変更があった場合は、その変更は保持されます。

※註 :

つれづれなるままに増やしていった関数がストックされています。 なめらかな曲面は特に問題ないと思いますが、 不連続な曲面(分数で定義される関数の分母が0になる場合など)ではいわゆる0割が発生する可能性がありますが、 Javascriptの仕様に従って、以下のように対処しています。

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

    

   描画へ

   $ \omega = x + iy $ とすると

   $ \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} $

   

   実際の計算は$ |\sin(\omega)| $ の右辺の式を使っています。 x軸が実部、y軸が虚部に相当します。 後述する「ユーザー定義」で複素関数の絶対値を描画する場合は、 $ |\sin(\omega)| $ の右辺のように虚数$i$が消去された式を定義する必要があります。 あと、グラブの概形を示すサムネイルの背景が白くなっていますが、 これについては後ほど、説明します。

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

    

   描画へ

   $ \omega = x + iy $ とすると

   $ \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} $

   $\sin$ が出たついでです。$\cos$ も実際の計算は$ |\cos(\omega)| $ の右辺の式を使っています。 x軸が実部、y軸が虚部に相当します。

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

    

   描画へ

   gamma関数です。

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

   

   実際の計算は$ |\Gamma(x + iy)| $ の右辺の式を使って、 $ n $ 15まで近似しています。 x軸が実部、y軸が虚部に相当します。 $n$ を15としたのは途中で式を書くのが面倒くさくなり、 とりあえず描画させてみたら、それっぽいグラフが描けたので、 まぁ、良しとした次第です。一度、gamma関数のグラフを描いて見たかったのです。

1. Cassini(カシニ)の燈形

    

   描画へ

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

   パラメータ  (デフォルト) : $ a = 0.6,   b =0.4 $

   

   陰関数は $ (x^2 + y^2 + a^2)^2 - 4a^2x^2 - b^4 = 0$ です。

   パラメータ $a$ は0.6で固定して、$b$ を0.4, 0.6, 0.8 と変化させて曲面を描画させたとき、
   $ z = 0 $ (x-y平面) の位置に示される等高線が、陰関数のグラフと一致します。

   係数の入力ボックスにマウスカーソルを近づけるとスピンボタンのような上下矢印が現れますが、 使いづらいので、直接 "0.6" などと入力する方が楽だと思います。

   立体図は分かりづらいので、"$\gamma$" の角度が $ \pm 90$ になるまで スライダーを移動させてみて下さい。 目的の曲線が描画されていると思います。

   $a$	$b$	曲線の特徴	グラフの概形
   0.6	0.4	原点対称の2つの閉曲線
   0.6	0.6	原点を通る曲線
   0.6	0.8	楕円っぽい曲線

   $ a = b $ のとき、Lemniscate(レムニスケート)と呼ばれる曲線になります。
   この場合、$ a = 0.6, \quad b = 0.6 $ のときの曲線がLemniccateです。

2. 三角関数の周期性が反映された曲面の例

    

   描画へ

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

   

   この曲面を見て、私は台所で使う波形のスポンジを連想しました。 この曲面を $z = \alpha $ の位置で切り取ったときに示される等高線が 「 微分方程式 解曲線の描画 4-12 」で描かれる 解軌道と一致します。

   この例では、カシニの橙形とは異なり、変更可能なパラメータはありませんが、 描画範囲 z値のMax, Minを変更することで陰関数のグラフを再現することができます。 右側のサムネイルは $ z = \pm 1$ のときのグラフを真上から見た場合です。

[描画へ] (或いはその上の図) をクリックすると、以下の画面が表示されます。 任意の関数を入力して、その曲面を確認することができます。 STARTボタンを押すと入力ボックスの下に入力した式がTeX形式で表示され、描画が開始されます。 入力された式の評価には Math.js を利用しています。 エラーメッセージが表示された場合は、入力した式を確認して、適宜修正して下さい。

※ 入力する式には $a, b$ などのパラメータを含めることはできません。 係数には"2"、"-3"などの直値を入力して下さい。

※ 不連続な曲面(分数で定義される関数の分母が0になる可能性がある場合など)については、 Javascriptの仕様に従って $z$値を調整していますので、特に場合分けを行う必要はありません。

以下に、入力例を示します。

以下に、入力のサンプルを示します。

1. 入力例で示した関数

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

    

   描画へ

2. 長い式の入力例で示した関数

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

    

   描画へ