ウェブの行列計算

let identityMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];

[1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 0, 0, 0, 1]

[4, 3, 2, 1] // Point at [x, y, z, w]

// 点 • 行列
function multiplyMatrixAndPoint(matrix, point) {
  // 行列の各部分に、列 c、行 r の番号で単純な変数名を付けます
  let c0r0 = matrix[0],
    c1r0 = matrix[1],
    c2r0 = matrix[2],
    c3r0 = matrix[3];
  let c0r1 = matrix[4],
    c1r1 = matrix[5],
    c2r1 = matrix[6],
    c3r1 = matrix[7];
  let c0r2 = matrix[8],
    c1r2 = matrix[9],
    c2r2 = matrix[10],
    c3r2 = matrix[11];
  let c0r3 = matrix[12],
    c1r3 = matrix[13],
    c2r3 = matrix[14],
    c3r3 = matrix[15];

  // 次に、点にある単純な名前を設定します
  let x = point[0];
  let y = point[1];
  let z = point[2];
  let w = point[3];

  // 1番目の列の各部分に対して点を乗算し、次に合計します
  let resultX = x * c0r0 + y * c0r1 + z * c0r2 + w * c0r3;

  // 2番目の列の各部分に対して点を乗算し、次に合計します
  let resultY = x * c1r0 + y * c1r1 + z * c1r2 + w * c1r3;

  // 3番目の列の各部分に対して点を乗算し、次に合計します
  let resultZ = x * c2r0 + y * c2r1 + z * c2r2 + w * c2r3;

  // 4番目の列の各部分に対して点を乗算し、次に合計します
  let resultW = x * c3r0 + y * c3r1 + z * c3r2 + w * c3r3;

  return [resultX, resultY, resultZ, resultW];
}

// identityResult を [4,3,2,1] に設定します
let identityResult = multiplyMatrixAndPoint(identityMatrix, [4, 3, 2, 1]);

// 行列B • 行列A
function multiplyMatrices(matrixA, matrixB) {
  // 2番目の行列を行にスライスします
  let row0 = [matrixB[0], matrixB[1], matrixB[2], matrixB[3]];
  let row1 = [matrixB[4], matrixB[5], matrixB[6], matrixB[7]];
  let row2 = [matrixB[8], matrixB[9], matrixB[10], matrixB[11]];
  let row3 = [matrixB[12], matrixB[13], matrixB[14], matrixB[15]];

  // 各行に行列Aを掛けます
  let result0 = multiplyMatrixAndPoint(matrixA, row0);
  let result1 = multiplyMatrixAndPoint(matrixA, row1);
  let result2 = multiplyMatrixAndPoint(matrixA, row2);
  let result3 = multiplyMatrixAndPoint(matrixA, row3);

  // 結果の行を単一の行列に戻します
  return [
    result0[0],
    result0[1],
    result0[2],
    result0[3],
    result1[0],
    result1[1],
    result1[2],
    result1[3],
    result2[0],
    result2[1],
    result2[2],
    result2[3],
    result3[0],
    result3[1],
    result3[2],
    result3[3],
  ];
}

let someMatrix = [4, 0, 0, 0, 0, 3, 0, 0, 0, 0, 5, 0, 4, 8, 4, 1];

let identityMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];

// someMatrix と同等の新しい配列を返します
let someMatrixResult = multiplyMatrices(identityMatrix, someMatrix);

let x = 50;
let y = 100;
let z = 0;

let translationMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1];

<div id="move-me" class="transformable">
  <h2>Move me with a matrix</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
</div>

// 行列の配列から matrix3d スタイルプロパティを作成します
function matrixArrayToCssMatrix(array) {
  return `matrix3d(${array.join(",")})`;
}

// DOM 要素を取得します
let moveMe = document.getElementById("move-me");

// 次のような結果を返します: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1);"
let matrix3dRule = matrixArrayToCssMatrix(translationMatrix);

// transform を設定します
moveMe.style.transform = matrix3dRule;

let w = 1.5; // width  (x)
let h = 0.7; // height (y)
let d = 1; // depth  (z)

let scaleMatrix = [w, 0, 0, 0, 0, h, 0, 0, 0, 0, d, 0, 0, 0, 0, 1];

// 行列なしで原点を中心に手動で点を回転
let point = [10, 2];

// 原点からの距離を計算します
let distance = Math.sqrt(point[0] * point[0] + point[1] * point[1]);

// ラジアンで 60 度に相当
let rotationInRadians = Math.PI / 3;

let transformedPoint = [
  Math.cos(rotationInRadians) * distance,
  Math.sin(rotationInRadians) * distance,
];

let sin = Math.sin;
let cos = Math.cos;

// 注: これらの変換には視点距離がないため、
//     この時点での回転は div を縮小するためにのみ示されます

let a = Math.PI * 0.3; // ラジアンでの回転量

// Z 軸を中心に回転
let rotateZMatrix = [
  cos(a),
  -sin(a),
  0,
  0,
  sin(a),
  cos(a),
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  0,
  1,
];

function rotateAroundXAxis(a) {
  return [1, 0, 0, 0, 0, cos(a), -sin(a), 0, 0, sin(a), cos(a), 0, 0, 0, 0, 1];
}

function rotateAroundYAxis(a) {
  return [cos(a), 0, sin(a), 0, 0, 1, 0, 0, -sin(a), 0, cos(a), 0, 0, 0, 0, 1];
}

function rotateAroundZAxis(a) {
  return [cos(a), -sin(a), 0, 0, sin(a), cos(a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
}

let transformMatrix = MDN.multiplyArrayOfMatrices([
  rotateAroundZAxis(Math.PI * 0.5), // ステップ 3: 90度回転
  translate(0, 200, 0), // ステップ 2: 100ピクセル下に移動
  scale(0.8, 0.8, 0.8), // ステップ 1: 縮小
]);

let transformMatrix = MDN.multiplyArrayOfMatrices([
  scale(1.25, 1.25, 1.25), // ステップ 6: 縮小を元に戻す
  translate(0, -200, 0), // ステップ 5: 移動を元に戻す
  rotateAroundZAxis(-Math.PI * 0.5), // ステップ 4: 回転を元に戻す
  rotateAroundZAxis(Math.PI * 0.5), // ステップ 3: 90度回転
  translate(0, 200, 0), // ステップ 2: 100ピクセル下に移動
  scale(0.8, 0.8, 0.8), // ステップ 1: 縮小
]);