SVG/pylamidVer - a羅針盤

ピラミッドの垂直回転 †

y軸上の値の計算方法 †

ピラミッド(四角すい)を垂直回転(x軸を中心にして回転)させます。
ピラミッドの垂直方向の回転を考える前に、高さのある(z軸方向がプラス)点が、座標がx軸を中心にして回転したときに、画面上どの位置になるかを考えます。

ピタゴラスの定理より原点Oから 点p(y,z)までの長さrは r 2 = y 2 + z 2 r = \sqrt(y 2 + z 2) 角度θは 正接（タンジェント）：tan θ = z / y 逆正接（アークタンジェント）：θ = tan -1 z/y 点pのy軸上の値は y = r cos( θ ) 以上より、軸がΔθ傾いた時の点p'(y',z')の 元の座標y-zのy軸上への写像y"は y" = r cos( θ + Δθ) これをJavascriptで記述すると、 y : 元のy軸上の値 z : 元のz軸上の値 deg : y'-z'座標の傾き角度 の時 var r = Math.sqrt( y*y + z*z); var t = Math.atan2(z,y) + deg * Math.PI / 180; ここでzとyの順番に注意すること。 new_y = r * Math.cos( t );

右のViewbox内でマウスを押下した状態で左右に動かしてみて下さい。

↑

ピラミッドの垂直回転 †

ピラミッドを垂直回転させてみましょう。
下のViewbox内でマウスを押下した状態で上下に動かしてみて下さい。
ピラミッドのサイズは縦 x 横 x 高さ = 200 x 200 x 100 pxです。
各面の表示順は背面、左右の面、前面の順番です。
陰線処理をしていないので、背面(青色）が他の面よりも前面になった時でも背面が隠れてしまいます。
225°～-45°の間は正しく表示されます。とりあえずここでは0°～90°で正しく表示できれば良しとします。

元の座標を記憶しておく方法は色々ありますが、ここでは以下のようにpathノードの中にpointsという本来含まれない属性（pointsとは別の名前でもよい）を記述し、その中に各点のx、y、z座標の値を入れておきます。

　　　<path id="angle1" d="M 0,0 L 100,100 -100,100" fill="blue"
　　　　　　　　　points="0,0,100 100,100,0 -100,100,0"/>

そしてgetAttributeメソッドで

  var attrPoints = angle.getAttribute("points");

というようにしてpoints全体の値を取得します。その後、splitメソッドを2回行い各値を計算します。
他に何かいい方法があればその方法でもかまいません。

前へ　 SVG目次

Last-modified: 2014-03-11 (火) 01:58:42 (3698d)