拡大縮小とせん断

概要

拡大縮小（スケーリング）とせん断（シアー）の行列変換を使って、オブジェクトのサイズや形を変える方法を学びます。

スケーリング（拡大縮小）

スケーリングは、オブジェクトのサイズを変える変換です。キャラクターを大きくしたり、ズーム効果を作ったりできます。

実用例

• キャラクターの大きさ変更: プレイヤーのサイズを変える
• ズーム効果: カメラのズームイン・ズームアウト
• パワーアップ演出: アイテム取得時に一瞬大きくする

スケーリング行列

等方性スケーリング（縦横同じ倍率）

縦横を同じ倍率 $s$ で拡大縮小する場合:

例えば、2倍に拡大する行列は:

非等方性スケーリング（縦横別々の倍率）

x方向を $s_x$、y方向を $s_y$ で拡大縮小する場合:

例えば、横に2倍、縦に0.5倍（半分）にする行列は:

JavaScriptでの実装

スケーリング行列の生成

function createScaleMatrix(scaleX, scaleY) {
  return {
    a: scaleX,
    b: 0,
    c: 0,
    d: scaleY
  };
}

点をスケーリング

function scalePoint(x, y, scaleX, scaleY) {
  const matrix = createScaleMatrix(scaleX, scaleY);
  return {
    x: matrix.a * x + matrix.b * y,
    y: matrix.c * x + matrix.d * y
  };
}

// 使用例
const scaled = scalePoint(1, 1, 2, 0.5);
console.log(scaled); // { x: 2, y: 0.5 }

インタラクティブデモ

x方向とy方向の倍率を個別に変更して、スケーリングの効果を確認しましょう。