スタートページ>
Javascript>
CANVAS
座標変換・3次元座標
x軸正側から時計回りに角度auにu軸、角度avにv軸をとったuv座標系を設定します。uv座標系での点をxy座標系に変換したグラフを表示します。
uv座標系に垂直のw軸(y軸に一致)を加えれば3次元座標系になります。それにより w = u*u/2-v のような2変数グラフを表示することができます。
実例
例1:UV座標系での点
例2:UV座標軸でのグラフ y = x(x-1)(x-2)
例3:3次元での点
例4:3次元グラフ w = u*u/2 - v
説明
例1
- xy軸はaqua、u軸はyellow、v軸はredで示した。u、v軸は正側を太線、負側を細線にしているが、角度によっては逆になる場合がある。
- u軸、v軸の角度はx軸正側から時計回りで与えられる。
例1では、u軸の角度auは(45/180)πで右下方向、v軸の角度avは(135/180)πで左下方向が正側になる。
もし、u軸をx軸、v軸をy軸とするには、au=0, av=-(90/180)πとする。
- u=1の線は、u軸(yellow線)の1の位置からv軸(red線)に平行の線(redの細線)になる。v=2の線は、v軸(red線)の2の位置からu軸(yellow線)に平行の線(yellowredの細線)になる。
それで、uv座標系の点P(1,2)は、図の白い点の位置になる。
- uv座標系の点 (u, v) は、次の式でxy座標系に変換される。
x = u*Math.cos(au) + v*Math.cos(av);
y = -u*Math.sin(au) - v*Math.sin(av);
与件では、
x = 1*cos(45°) + 2*cos(135°) = 1/√2 + 2*(-1/√2) = -1/√2 = -0.707
y = -1+sin(45°) - 2*sin(135°) =-1/√2 - 2/√2 = -3/√2 = -2.121
すなわち (-0.707, -2.121) となる。
例2
- v = u(u-1)(u-2)のグラフ
- u軸(yellow)は、-(45/180)*Math.PI(x軸から上側に45°)v軸(red)は、-(120/180)*Math.PI(x軸から上側に120°=y軸から左側に30°)傾いている。
例3
- このような座標系の特徴は、3次元表示に発展できることにある。
ここでは、2独立変数の式 w = u*u/2 - v でu=1、v=2のとき、w= 1.5 になる。このときの点(1, 2, -1.5)は、図での点Wになる。
- w=0のとき (1, 2) は、例1と同じなので点P(-0.707, -2.121) である。点Wは、それより1.5下になるので、W(-0.707, -3.621) になる。
例4
- -3≦u≦2、-3≦v≦2の範囲で、u、vを変化して、w = u*u/2 -v からwを計算し、3次元の点(u, v, w)をプロットした。独立変数が2つなので、曲線ではなく曲面になる。
- 式をいろいろ変えると、思いがけない美しい局面が描ける。u*u*vを試みられたい。