ベクトルの加算

記号の意味

: ベクトル- 矢印付きの文字
: 長さ- ベクトルの大きさ
: 単位ベクトル- 長さ1のベクトル
: 内積- 2つのベクトルから数値を計算
: シータ- 角度を表すギリシャ文字
: 余弦- 角度から比率を求める関数

概要

複数のベクトルを足し合わせることで、重力・風・プレイヤー入力など複数の力を組み合わせた移動を計算する方法を学びます。

ベクトル加算の基本

複数の力を受けた時、どこに動くか？

ゲームでキャラクターを動かす時、こんな状況があります:

「右に走りながら、風が左に吹く」
「プレイヤーの入力 + 重力 + 風」

これらの「複数の動きを組み合わせる」操作が「ベクトルの加算」です！

身近な例で考えてみよう

道案内: 「この道を100m進んで、次の角を右に50m」
ボートの移動: 「自分は北に進むけど、川の流れが東に流される」

実際の移動は2つの力を足したものになります。

計算方法: 成分ごとに足すだけ

ベクトルの加算は、x成分同士、y成分同士をそれぞれ足すだけです。

$(x_1, y_1) + (x_2, y_2) = (x_1 + x_2, y_1 + y_2)$

具体例:

$(3, 0) + (0, 2) = (3 + 0, 0 + 2) = (3, 2)$

ベクトル1: $(3, 0)$ ← 右に3
ベクトル2: $(0, 2)$ ← 上に2
結果: $(3, 2)$ ← 右に3、上に2の位置

実用例

ゲームでは複数の力が同時に働きます。プレイヤーの入力、重力、風などを合算して最終的な移動を決定します。

右に走りながら風が左に吹く

JavaScript

const playerInput = { x: 5, y: 0 };  // 右に走る
const wind = { x: -2, y: 0 };         // 左向きの風
const result = { x: 5 + (-2), y: 0 + 0 };  // (3, 0)
// → 実際の移動は右に3だけ

プレイヤー入力 + 重力 + 風

JavaScript

const input = { x: 1, y: 2 };     // 右上に移動
const gravity = { x: 0, y: -1 };  // 下向きの重力
const wind = { x: -0.5, y: 0 };   // 左向きの風

// すべて合算
const total = {
  x: 1 + 0 + (-0.5),
  y: 2 + (-1) + 0
};
// → (0.5, 1)

デモ: インタラクティブなベクトル加算

下のデモで、2つのベクトルを操作してみましょう。赤と青のベクトルを動かすと、緑の結果ベクトルがどう変わるか観察してください！

ポイント: 赤のベクトルの終点から青のベクトルが始まり、緑のベクトルが結果を示します。

ベクトル a (赤)

X成分: 3

Y成分: 1

ベクトル b (青)

X成分: 1

Y成分: 2

結果: a + b = (4, 3)

長さ: 5.00

JavaScript実装

力を合成する関数

JavaScript

/**
 * 2つのベクトルを足し算する
 */
function addVectors(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y
  };
}

// 使用例
const velocity = { x: 5, y: -10 };
const gravity = { x: 0, y: 0.5 };
const newVelocity = addVectors(velocity, gravity);
// { x: 5, y: -9.5 }

複数のベクトルを足す

JavaScript

/**
 * 複数のベクトルを一度に足し算する
 */
function addMultipleVectors(vectors) {
  let result = { x: 0, y: 0 };
  
  for (const vector of vectors) {
    result.x += vector.x;
    result.y += vector.y;
  }
  
  return result;
}

// 使用例
const forces = [
  { x: 1, y: 2 },    // プレイヤー入力
  { x: 0, y: -1 },   // 重力
  { x: -0.5, y: 0 }  // 風
];

const totalForce = addMultipleVectors(forces);
// { x: 0.5, y: 1 }

ゲームループでの力の適用

JavaScript

// キャラクターの状態
let position = { x: 0, y: 0 };
let velocity = { x: 0, y: 0 };

// 毎フレーム実行される関数
function update(deltaTime) {
  // 1. 力を集める
  const forces = [];
  
  // プレイヤー入力
  if (keyPressed.right) forces.push({ x: 0.5, y: 0 });
  if (keyPressed.left) forces.push({ x: -0.5, y: 0 });
  
  // 重力
  forces.push({ x: 0, y: -0.98 });
  
  // 風
  forces.push({ x: windStrength, y: 0 });
  
  // 2. すべての力を合成
  const totalForce = addMultipleVectors(forces);
  
  // 3. 速度に力を加える
  velocity = addVectors(velocity, totalForce);
  
  // 4. 位置に速度を加える
  position = addVectors(position, velocity);
}

物理演算の基本パターン

力を集める: プレイヤー入力、重力、風など
力を合成: すべての力をベクトル加算
速度を更新: 力を速度に加える
位置を更新: 速度を位置に加える

このパターンは多くのゲームで使われています。