HTMLで行列(matrix) (2回目)

2021/7/2(金)

HTMLで行列(matrix) (2回目)

 

(by ULproject for HTML,JavaScript,canvas)

 

 

点を並進、回転移動させる行列を作り

ワイヤーフレーム(線画)の立体を

ラジコンや自分が移動する

(1,2キーで切り替え、キー操作はプログラムの

最終行のコメントに書いています)

ように動かしていきます

 

このシリーズは、プログラムを出来るだけ似せて

移植していますので、解説を省略しています

式などに関する説明も省略していますので

詳しくは

N88-BASICで行列(matrix) (2回目)

を見てください

HTML,JavaScript,canvasは、使い慣れていない

ため、不具合などが多々あると思いますが、

ご了承ください

 

ここから、行列は大文字、

ベクトルとスカラーは小文字で表す事にします

行列は4×4(4行4列)とし、

ベクトルは3次元(4次元目は常に1)とします

またベクトル上部の矢印は省いています

 

JavaScriptでは行列Aの成分を、

|A[0] A[4] A[ 8] A[12]|

|A[1] A[5] A[ 9] A[13]|

|A[2] A[6] A[10] A[14]|

|A[3] A[7] A[11] A[15]|

で表す事にします

 

r₁₁ = n₁n₁+(1-n₁n₁)cosθ

r₂₂ = n₂n₂+(1-n₂n₂)cosθ

r₃₃ = n₃n₃+(1-n₃n₃)cosθ

r₁₂ = n₁n₂(1-cosθ)-n₃sinθ

r₂₁ = n₂n₁(1-cosθ)+n₃sinθ

r₁₃ = n₁n₃(1-cosθ)+n₂sinθ

r₃₁ = n₃n₁(1-cosθ)-n₂sinθ

r₂₃ = n₂n₃(1-cosθ)-n₁sinθ

r₃₂ = n₃n₂(1-cosθ)+n₁sinθ

となり、回転行列Aは

  |r₁₁ r₁₂ r₁₃ 0|

A=|r₂₁ r₂₂ r₂₃ 0|

  |r₃₁ r₃₂ r₃₃ 0|

  |0   0   0   1|

並進行列Aは

  |1 0 0 x|

A=|0 1 0 y|

  |0 0 1 z|

  |0 0 0 1|

です

 

blg～.zip(mat002.html)は

以下のリンクからダウンロードできます

VL-BASIC(N88-BASIC互換?)ホームページ

Readme.txtを読んで遊んで下さい

次回のおすすめ

HTMLでクォータニオン(quaternion) (1回目)