Desmosでも3次元で遊べる

<div class="title2">概要</div>点や線を3次元にプロットして擬似的に表示できます。物体を回したり視点を動かすこともできます。
デフォルトではx軸右・y軸奥・z軸上になっています。

問題点も結構あります
・重くなりやすい
・座標を2度入力する必要がある
・若干端が歪んで見える
・スクロールすると歪みが大きくなる(値をずらして視点を移動させる必要がある)
・点の大きさと線の太さが一定なので立体感が出にくいことがある

こんな感じです↓右下からリンク飛ぶと色々いじれます
<iframe src="https://www.desmos.com/calculator/gmisoyne5m?embed" width="500px" height="300px" style="border: 1px solid #ccc" frameborder=0></iframe>

<div class="title2">作り方</div>先に完成系と使い方を示しておきます。そのまま真似して打ち込めばOKです。ナンバリングは解説と関係してるので解説がどうでもよければ気にしなくていいです。

①-1
\(X(x,y,z)=\frac{sx_1(x,y,z)}{\sqrt{y_1(x,y,z)}^2}\)

①-2
\(Y(x,y,z)=\frac{sz_1(x,y,z)}{\sqrt{y_1(x,y,z)}^2}\)

②-1
\(y_1(x,y,z)=y_2(x,y,z)\cos{q}+z_3(x,y,z)\sin{q}\)

②-2
\(z_1(x,y,z)=-y_2(x,y,z)\sin{q}+z_3(x,y,z)\cos{q}\)

③-1
\(x_1(x,y,z)=x_3(x,y,z)\cos{p}-y_3(x,y,z)\sin{p}\)

③-2
\(y_2(x,y,z)=x_3(x,y,z)\sin{p}+y_3(x,y,z)\cos{p}\)

④-1
\(x_3(x,y,z)=x_4(x,y,z)-i\)

④-2
\(y_3(x,y,z)=y_4(x,y,z)-j\)

④-3
\(z_3(x,y,z)=z-k\)

⑤-1
\(x_4(x,y,z)=x\cos{o}-y\sin{o}\)

⑤-2
\(y_4(x,y,z)=x\sin{o}+y\cos{o}\)

※\(x_2,z_2\)は飛んでます

<div class="title2">使い方</div>点をプロットする時は、\((X(2,3,4),Y(2,3,4))\) ((2,3,4)に点を打つ例)のようにします。
線のプロットは媒介変数tを用いて \((X(0,t,2),Y(0,t,2))\) (-3≦t≦3) ((0,-3,2)から(0,3,2)までを結ぶ線分を引く例)のようにします。

変数は以下のようになっています。
o：物体のz軸回転
i,j,k：視点のx,y,z軸方向移動
p：視点の左右移動
q：視点の上下移動
s：拡大率

視点を動かしたいときは、スクロールではなく上のような値を変化させることで視点を動かします。

\(z=f(x,y)\) のような関数を書きたい場合、網目のようにする方法があります。下の式はx,yが-50〜50の範囲に幅0.5の網目で表示する例です。

\(l=[-50,-49.5,...,50]\)
\(f(x,y)=表示したい関数\)
\((X(l,t,f(l,t)),Y(l,t,f(l,t))\)
\((X(t,l,f(t,l)),Y(t,l,f(t,l))\)

うまく表示できる関数は少ないです(重なりの表現が難しい)
上のサンプルでは網目の細かさとか変えやすくなっています。

u,vパラメータで書きたい場合、各座標をu,vの関数で設定するとできます。

例(網目の細かさ等の設定も含めて)：\[X_1=u,\ Y_1=v,\ Z_1=\sin{u}\cos{v}\]\[l_u=[-w_u,-w_u+\frac{2w_u}{d_u},...,w_u]\\ l_v=[-w_v,-w_v+\frac{2w_v}{d_v},...,w_v]\ (w,dには数値を設定、dは自然数)\]\[(X(X_1(t,l_v),Y_1(t,l_v),Z_1(t,l_v)),Y(X_1(t,l_v),Y_1(t,l_v),Z_1(t,l_v)))\ (-w_u\le t\le w_u)\\ (X(X_1(l_u,t),Y_1(l_u,t),Z_1(l_u,t)),Y(X_1(l_u,t),Y_1(l_u,t),Z_1(l_u,t)))\ (-w_v\le t\le w_v)\]

<div class="title2">仕組み</div>⑤で物体をz軸で回転(o)→④で視点をx,y,z軸方向に移動(i,j,k)→③で視点を左右に回転(p)→②で視点を上下に回転(q)→①で立体的に表示
という感じです。「視点を移動」は、そう感じられるように物体を動かします。例えば視点を右にずらしたい時は物体を左にずらします。

<div class="title3">⑤物体を回転</div>元々(x,y,z)にあった点がz軸(上下方向)中心に上から見て反時計回り角度oだけ回ったとき、新しいx座標は \(x\cos{o}-y\sin{o}\) 、y座標は \(x\sin{o}+y\cos{o}\) になります。

原点からその点を結んだベクトルをx軸成分とy軸成分に分解して(z軸成分は無視)、それぞれを回転させると、
x軸成分だったものは \(\left(\begin{array}{cc}x_{4x}\\ y_{4x}\end{array}\right)=\left(\begin{array}{cc}x\cos{o}\\ x\sin{o}\end{array}\right)\)
y軸成分だったものは \(\left(\begin{array}{cc}x_{4y}\\ y_{4y}\end{array}\right)=\left(\begin{array}{cc}-y\sin{o}\\ y\cos{o}\end{array}\right)\)
になります。
これを行列にまとめると\[\left(\begin{array}{cc}x_4\\ y_4\end{array}\right)=\left(\begin{array}{cc}x\cos{o}-y\sin{o}\\ x\sin{o}+y\cos{o}\end{array}\right)=\left(\begin{array}{cc}\cos{o} & -\sin{o}\\ \sin{o} & \cos{o}\end{array}\right)\left(\begin{array}{cc}x\\ y\end{array}\right)\]右にあるのは回転行列というやつです。列ごとに見ていくと上の考え方と繋がりがみえてくると思います。
<img src="images/12.jpeg">

<div class="title3">④視点を移動</div>⑤で物体を回転したものをx,y,z軸方向に動かします。視点がi,j,kに応じて動くようにしたいので、物体を反対方向に動かします。
3つまとめて書くと\[\left(\begin{array}{ccc}x_3\\ y_3\\ z_3\end{array}\right)=\left(\begin{array}{ccc}x_4-i\\ y_4-j\\ z-k\end{array}\right)\]となります。

<div class="title3">③視点を左右に回転</div>回転した物体の周りを移動してから周囲を見渡します(今度は自分に刺さったz軸を中心に回転します。(さっきのは元々置いていたz軸が中心))
そのままz軸を中心に回転させる感じで大丈夫です。(自分が原点なので)
Desmosの変数のバーを右にずらしたとき(値が大きくなるとき)右を向くようにしたいので、pが大きくなるとき物体が反時計回りに回るようにすれば良いです。⑤と同じです。\[\left(\begin{array}{cc}x_1\\ y_2\end{array}\right)=\left(\begin{array}{cc}x_3\cos{p}-y_3\sin{p}\\ x_3\sin{p}+y_3\cos{p}\end{array}\right)\]

<div class="title3">②視点を上下に回転</div>次は上下を見渡します。qの値が大きくなるほど上を向くように=自分が見てる側の物体が下向きに回転するようにします。さっきのとは逆ですがsinだけ符号を逆にすれば良いです。(cosは中身の符号を変えてもcosの値は変わらない)
今度は(自分を貫くほうの)x軸中心の回転になるので、x,y→y,zにします。\[\left(\begin{array}{cc}y_1\\ z_1\end{array}\right)=\left(\begin{array}{cc}y_2\cos{q}+z_3\sin{q}\\ -y_2\sin{q}+z_3\cos{q}\end{array}\right)\]

<div class="title3">①立体的に表示</div>⑤〜②を経てできた新しい座標\((x_1,y_1,z_1)\)を画面に表示します。
表示する大きさは、自分がいる場所から距離sだけ離れたところの物体を実物大に表示するとします。この距離sを基準として、例えば2s離れたところは大きさ(長さ)が半分に見えます。
<img src="images/13.jpeg">

横x、縦zなので、奥行きyに応じてx,zの大きさを変化させると立体感を表せます。その変化させたxをグラフのx座標に、変化させたzをグラフのy座標にします。
y=sのとき等倍、y=2sのとき半分、…となるように\[X=\frac{sx_1}{\sqrt{y_1}^2},\ Y=\frac{sz_1}{\sqrt{y_1}^2}\]となります。
ルートに入れて2乗しているのは、yが負(自分の後ろ側)になる場合に表示させないためです。場合分けでもできると思いますが打つのが面倒なので定義域から攻めてます。

もう少し機能を増やしたい・機能を変えたい・この機能いらないとなったらこの解説を参考にいい感じに変えてみてください。

戻る