Вниз  JavaScript
- 25.11.2019 / 18:18copy  #513460
Askalite
  Пользователь

Askalite 
Сейчас: Offline
Матрицы

  1. <canvas id="c" width="200" height="200"></canvas>
  2. <button id="mul">mul</button>
  3. <script>
  4. function multiplyMatrix(ae, be){
  5.     let ce= [
  6.         1, 0, 0, 0,
  7.         0, 1, 0, 0,
  8.         0, 0, 1, 0,
  9.         0, 0, 0, 1
  10.     ];
  11.  
  12.     var a11 = ae[ 0 ], a12 = ae[ 4 ], a13 = ae[ 8 ], a14 = ae[ 12 ];
  13.     var a21 = ae[ 1 ], a22 = ae[ 5 ], a23 = ae[ 9 ], a24 = ae[ 13 ];
  14.     var a31 = ae[ 2 ], a32 = ae[ 6 ], a33 = ae[ 10 ], a34 = ae[ 14 ];
  15.     var a41 = ae[ 3 ], a42 = ae[ 7 ], a43 = ae[ 11 ], a44 = ae[ 15 ];
  16.  
  17.     var b11 = be[ 0 ], b12 = be[ 4 ], b13 = be[ 8 ], b14 = be[ 12 ];
  18.     var b21 = be[ 1 ], b22 = be[ 5 ], b23 = be[ 9 ], b24 = be[ 13 ];
  19.     var b31 = be[ 2 ], b32 = be[ 6 ], b33 = be[ 10 ], b34 = be[ 14 ];
  20.     var b41 = be[ 3 ], b42 = be[ 7 ], b43 = be[ 11 ], b44 = be[ 15 ];
  21.  
  22.     ce[ 0 ] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
  23.     ce[ 4 ] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
  24.     ce[ 8 ] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
  25.     ce[ 12 ] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;
  26.  
  27.     ce[ 1 ] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
  28.     ce[ 5 ] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
  29.     ce[ 9 ] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
  30.     ce[ 13 ] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;
  31.  
  32.     ce[ 2 ] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
  33.     ce[ 6 ] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
  34.     ce[ 10 ] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
  35.     ce[ 14 ] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;
  36.  
  37.     ce[ 3 ] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
  38.     ce[ 7 ] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
  39.     ce[ 11 ] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
  40.     ce[ 15 ] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;
  41.  
  42.     return ce;
  43. }
  44. var PM = [
  45.     2, 0, 0.5, 0,
  46.     0, 2, 0.5, 0,
  47.     0, 0, -5, -12,
  48.     0, 0, -1, 0
  49. ];
  50. var VM = [
  51.     1, 0, 0, 0,
  52.     0, 1, 0, 0,
  53.     0, 0, 1, 2.5,
  54.     0, 0, 0, 1
  55. ];
  56.  
  57. var PVM=multiplyMatrix(PM,VM);
  58.  
  59. function mulMV(m, v){
  60.     var k = [
  61.         m[0]*v[0]+m[1]*v[1]+m[2]*v[2]+m[3]*v[3],
  62.         m[4]*v[0]+m[5]*v[1]+m[6]*v[2]+m[7]*v[3],
  63.         m[8]*v[0]+m[9]*v[1]+m[10]*v[2]+m[11]*v[3],
  64.         m[12]*v[0]+m[13]*v[1]+m[14]*v[2]+m[15]*v[3]
  65.     ];
  66.     return k;
  67. }
  68.  
  69. var ver = [
  70.    [-1.0, -1.0, 0.0, 1],
  71.    [1.0, -1.0, 0.0, 1],
  72.    [0.0, 1.0, 0.0, 1]
  73. ];
  74. document.getElementById('mul').onclick=function(){
  75.     var ce = document.getElementById("c");
  76.     var c = c.getContext("2d");
  77.     c.strokeStyle = "#000000";
  78.     c.stroke();
  79.     c.fillRect(0, 0, 100, 100);
  80.     c.strokeStyle = "#ff0000";
  81.     c.stroke();
  82.     var v0=mulMV(PVM,ver[0]);
  83.     c.moveTo(v0[0]*10,v0[1]*10);
  84.     var v1=mulMV(PVM,ver[1]);
  85.     c.lineTo(v1[0]*10,v1[1]*10)
  86.     var v2=mulMV(PVM,ver[2]);
  87.     c.lineTo(v2[0]*10,v2[1]*10)
  88.     c.lineTo(v0[0]*10,v0[1]*10);
  89. }
  90. </script>

Наверх  Всего сообщений: 691
Фильтровать сообщения
Поиск по теме
Файлы топика (19)
Поиск по форуму