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 11 = n 1 n 1 +(1-n 1 n 1 )cosθ r 22 = n 2 n 2 +(1-n 2 n 2 )cosθ r 33 = n 3 n 3 +(1-n 3 n 3 )cosθ r 12 = n 1 n 2 (1-cosθ)-n 3 sinθ r 21 = n 2 n 1 (1-cosθ)+n 3 sinθ r 13 = n 1 n 3 (1-cosθ)+n 2 sinθ r 31 = n 3 n 1 (1-cosθ)-n 2 sinθ r 23 = n 2 n 3 (1-cosθ)-n 1 sinθ r 32 = n 3 n 2 (1-cosθ)+n 1 sinθ となり、回転行列 A は ...