ピラミッドの垂直回転

y軸上の値の計算方法

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

ピタゴラスの定理より原点Oから
点p(y,z)までの長さrは
r 2 = y2 + z2
r = √(y2 + z2)

角度θは
正接(タンジェント):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内でマウスを押下した状態で左右に動かしてみて下さい。
Vertical Rotation Logic Analysis y軸の傾きΔθ = 0° y" = 200 r y y" z O θ p(200,100) /* foot */ /* visible/hidden */ /* X axis */ /* Y axis */ /* Angle */ /* visible/hidden */ /* X axis */ /* X axis */ /* Y axis */ /* Angle */

ピラミッドの垂直回転

ピラミッドを垂直回転させてみましょう。
下の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回行い各値を計算します。
他に何かいい方法があればその方法でもかまいません。

Vertical Pylamid Lotation x軸の回転Δθ = 0° /* visible/hidden */ /* 上 */ /* 左 */ /* 右 */ /* 下 */ O x y /* visible/hidden */ /* X axis & Arrow */ /* Y axis & Arrow */
 
 

最終更新のRSS
Last-modified: 2014-03-11 (火) 01:58:42 (2514d)