핵심 개념 1 — 벡터란? 화살표로 시작하자

Step 1. 벡터 = 방향과 길이를 가진 화살표

벡터는 방향과 길이를 가진 값입니다. 처음에는 화살표로 이해하면 가장 직관적입니다.

화살표 하나에는 두 가지 정보가 들어있습니다.

짧은 화살표, 긴 화살표, 오른쪽으로 뻗은 화살표, 왼쪽 대각선으로 뻗은 화살표는 모두 서로 다른 벡터입니다. 방향이나 길이가 다르면 다른 벡터로 봅니다.

Step 2. 스칼라 vs 벡터 — 일상 예시로 구분

• 스칼라: 숫자 하나로 충분한 값
• 벡터: 방향과 길이가 함께 필요한 값
• p5.js 움직임에서 위치, 속도, 가속도는 모두 벡터로 다룰 수 있습니다.

Step 3. 좌표평면 위의 벡터 — 두 개의 숫자가 화살표를 만든다

위치 (200, 150)은 캔버스의 한 지점이면서, 원점 (0, 0)에서 그 지점까지 가는 화살표로도 볼 수 있습니다.

두 개의 숫자 (x, y) = 화살표 하나 = 벡터 하나.

Step 4. 프로그래밍에서의 벡터

프로그래밍에서 벡터는 (x, y) 두 값을 한 묶음으로 다루는 것입니다.

위치 벡터는 ’어디에 있는가’를 원점으로부터의 화살표로 표현하고, 속도 벡터는 ’매 프레임 어느 방향으로 얼마나 이동하는가’를 나타내는 화살표입니다.

7주차 클래스 안에서 x, y, speedX, speedY 대신 pos, vel 같은 벡터를 사용할 수 있습니다.

핵심 개념 2 — createVector()와 p5.Vector

p5.Vector — p5.js가 미리 만들어준 클래스

p5.js에는 벡터를 위한 p5.Vector 클래스가 이미 준비되어 있습니다.

createVector(x, y) — 벡터 생성

let pos = createVector(200, 150);
console.log(pos.x);  // 200
console.log(pos.y);  // 150

createVector(200, 150)은 x가 200, y가 150인 벡터를 만듭니다. 값은 pos.x, pos.y로 접근합니다.

5주차 코드를 벡터로 변환

// 5주차 방식 (변수 4개)
let x = 200, y = 200;
let speedX = 3, speedY = 2;

// 9주차 방식 (벡터 2개)
let pos = createVector(200, 200);
let vel = createVector(3, 2);

변수 4개가 벡터 2개로 줄었습니다. pos는 위치(position), vel은 속도(velocity)라서 이름만 봐도 역할을 바로 알 수 있습니다.

관례적인 이름

pos는 위치, vel은 속도, acc는 가속도를 뜻합니다.

핵심 개념 3 — 벡터 연산: add(), sub(), dist()

5주차 방식 vs 벡터 방식

// 5주차: 줄이 2개 필요
x += speedX;
y += speedY;

// 9주차: 한 줄로 표현
pos.add(vel);

pos.add(vel)은 위치에 속도를 더한다는 뜻입니다. 내부적으로는 pos.x += vel.x; pos.y += vel.y;를 수행합니다.

전체 코드로 확인

let pos, vel;

function setup() {
  createCanvas(400, 400);
  pos = createVector(200, 200);
  vel = createVector(3, 2);
}

function draw() {
  background(220);
  pos.add(vel);  // x += speedX; y += speedY;를 한 줄로!
  ellipse(pos.x, pos.y, 30);
}

실행 결과: - 원이 오른쪽 아래 방향으로 이동 (화면 밖으로 나감 — 바운싱은 아직 없음)

벡터 덧셈의 시각적 이해

위치 화살표의 끝에 속도 화살표를 붙이면 그 끝점이 새로운 위치가 됩니다.

숫자로 확인: 위치 (200, 200) + 속도 (3, 2) = (203, 202).

sub() — 벡터 뺄셈으로 방향 구하기

뺄셈은 두 점 사이의 방향을 구하는 연산입니다.

왜 ’뺄셈 = 방향’인가? — 놀이터 비유

내 위치가 (100, 100)이고, 목표 위치가 (300, 200)이라고 가정합니다.

목표 x - 현재 x = 300 - 100 = 200
목표 y - 현재 y = 200 - 100 = 100
→ (200, 100) : 현재에서 목표로 가는 이동 벡터

코드로 확인

let me = createVector(100, 100);
let friend = createVector(300, 200);

let toFriend = p5.Vector.sub(friend, me);
console.log(toFriend.x, toFriend.y);  // 200, 100

p5.Vector.sub(friend, me) = 친구 위치 - 내 위치 = 나에서 친구로 가는 화살표.

순서가 반대면? — 가장 흔한 실수

let wrong = p5.Vector.sub(me, friend);
console.log(wrong.x, wrong.y);  // -200, -100

결과가 (-200, -100)으로 부호가 다 뒤집혔습니다. 이건 친구에서 나로 오는 화살표라서 내가 원하던 것과 반대 방향입니다.

실전: 마우스 추적 미니 예제

let pos;

function setup() {
  createCanvas(400, 400);
  pos = createVector(200, 200);
}

function draw() {
  background(220);

  let mousePos = createVector(mouseX, mouseY);
  let dir = p5.Vector.sub(mousePos, pos);  // ① 공 → 마우스 방향 (뺄셈)
  dir.mult(0.05);                          // ② 이동량이 너무 크지 않도록 5%만 사용
  pos.add(dir);                            // ③ 그만큼 이동 (덧셈)

  ellipse(pos.x, pos.y, 30);
}

연산 3개가 연결됩니다: 뺄셈(방향 구하기) → 곱셈(속도 조절) → 덧셈(이동).

방향 벡터의 길이 = 거리

let toFriend = p5.Vector.sub(friend, me);  // (200, 100)
console.log(toFriend.mag());  // √(200² + 100²) ≈ 223.6

방향 벡터의 길이(mag())는 두 점 사이의 직선 거리입니다.

sub() 한 줄 요약

dist() — 두 벡터 사이의 거리

let a = createVector(100, 100);
let b = createVector(400, 500);

console.log(p5.Vector.dist(a, b));  // 500
console.log(a.dist(b));             // 500 (같은 결과)

dist()는 두 벡터 사이의 거리만 필요할 때 사용합니다. 충돌 감지나 중력 계산에서 자주 쓰입니다.

핵심 개념 4 — mult()와 normalize()

mult(n) — 벡터에 숫자를 곱하기

벡터에 숫자를 곱하면 크기가 바뀌고 방향은 유지됩니다.

let v = createVector(3, 4);
v.mult(2);   // (6, 8) — 크기가 두 배가 됨

let v = createVector(3, 4);
v.mult(0.5); // (1.5, 2) — 크기가 절반이 됨

let v = createVector(3, 4);
v.mult(-1);  // (-3, -4) — 방향 반전

vel.mult(-1)은 x, y 방향을 모두 반대로 뒤집습니다.

5주차 바운싱 코드 vs 벡터 바운싱 코드

mag() — 벡터의 길이(빠르기) 구하기

화살표의 길이를 알고 싶을 때 mag()를 씁니다.

let v = createVector(3, 4);
console.log(v.mag());  // 5

오른쪽 3칸, 아래 4칸이면 직각삼각형이고, 빗변이 화살표의 길이입니다. 실제 계산은 v.mag()가 처리합니다.

normalize() — 크기를 1로 만들기 (“방향만 남기기”)

normalize()는 방향은 그대로 두고 길이만 1로 줄이는 것입니다.

let v = createVector(3, 4);   // 길이 5짜리 화살표
v.normalize();                // 같은 방향, 길이만 1
console.log(v.mag());         // 1

직관적 계산: (3, 4)는 길이가 5이므로 각 숫자를 5로 나누면 (0.6, 0.8)이 됩니다.

길이가 1인 벡터를 단위 벡터(unit vector)라고 합니다.

let v = createVector(3, 4);
v.normalize();   // 방향만 남기기 (길이 = 1)
v.mult(5);       // 원하는 속도로 설정 (길이 = 5)