심화 개념 1 — 바람 추가: 여러 힘의 누적

1교시에서는 중력 하나만 적용했습니다. 이제 바람(wind)을 추가합니다. 핵심 질문은 이것입니다. applyForce()를 두 번 호출하면 어떻게 될까요?

이번에도 단계적으로 진행합니다. 1교시 코드에서 출발해 한 줄, 다시 한 줄을 추가하는 방식입니다.

Step 1. 출발점 — 1교시 마지막 코드 (중력만)

1교시 끝에서 만든 코드 그대로입니다.

function draw() {
  background(220);

  let gravity = createVector(0, 0.2);
  mover.applyForce(gravity);

  mover.update();
  mover.edges();
  mover.display();
}

공이 아래로 떨어지며 바닥에서 튕깁니다. 여기에 바람을 추가해 봅시다.

Step 2. 바람 벡터 만들기

중력과 마찬가지로 바람도 단순한 벡터입니다. 차이는 미는 방향뿐입니다.

let wind = createVector(0.1, 0);

x = 0.1(오른쪽으로 약간), y = 0(위아래로는 작용하지 않음). 이는 ’오른쪽으로 부는 약한 바람’을 뜻합니다.

수치는 자유롭게 정할 수 있습니다. 0.5는 강한 바람, -0.1은 왼쪽 바람을 의미합니다. 9주차의 createVector를 그대로 사용합니다.

Step 3. 바람 적용 — applyForce() 한 줄 추가

function draw() {
  background(220);

  let gravity = createVector(0, 0.2);
  let wind = createVector(0.1, 0);       // ← 새 줄

  mover.applyForce(gravity);
  mover.applyForce(wind);                // ← 새 줄

  mover.update();
  mover.edges();
  mover.display();
}

applyForce()를 두 번 호출했습니다. 중력과 바람이 동시에 작용하는 구조입니다.

내부에서 어떤 일이 일어나는지 한 줄씩 따라가 봅시다. 1교시 applyForce 메서드의 핵심은 this.acc.add(f)였습니다.

1. applyForce(gravity) 호출 → acc에 (0, 0.2) 누적. 현재 acc = (0, 0.2)
2. applyForce(wind) 호출 → acc에 (0.1, 0)이 추가로 누적. 현재 acc = (0.1, 0.2)
3. update() → 합쳐진 가속도 (0.1, 0.2)로 속도가 변경됨

최종 가속도는 (0.1, 0.2)이며 오른쪽 아래 대각선 방향입니다. 중력(아래) + 바람(오른쪽)이 합쳐져 오른쪽 아래로 기울어진 포물선 운동이 됩니다. 공을 옆으로 던졌을 때의 궤적과 유사합니다.

물리학에서는 이를 합력(net force)이라 부릅니다. 여러 힘을 벡터로 더한 결과이며, applyForce()를 호출할 때마다 자동으로 계산됩니다.

마우스 클릭으로 바람 방향 전환

간단한 인터랙션을 추가해 봅시다. 마우스를 클릭할 때마다 바람 방향이 반대로 전환됩니다.

let windDirection = 1;  // 1 = 오른쪽, -1 = 왼쪽

function draw() {
  background(220);

  let gravity = createVector(0, 0.2);
  let wind = createVector(0.1 * windDirection, 0);

  mover.applyForce(gravity);
  mover.applyForce(wind);

  mover.update();
  mover.edges();
  mover.display();
}

function mousePressed() {
  windDirection *= -1;  // 클릭할 때마다 방향 반전
}

클릭할 때마다 windDirection이 1과 -1을 오가며 바람 방향이 전환됩니다. 4주차에서 배운 mousePressed()를 활용한 형태입니다.

힘을 3개, 4개 추가해도 동일한 방식입니다. applyForce()를 추가로 호출하기만 하면 됩니다.

심화 개념 2 — 질량(mass)에 따른 차이

1교시에서는 mass를 1로 고정했습니다. a = F / 1 = F이므로 사실상 F = a인 단순한 상태였습니다. 이제 mass를 다양하게 부여해 본격적인 차이를 만들어 봅시다.

볼링공과 탁구공을 같은 세기로 밀면 탁구공이 훨씬 많이 움직입니다. 같은 힘이라도 질량이 다르므로 가속도가 달라지기 때문입니다. 1교시에서 표로 살펴본 그 차이를 이제 코드로 구현해 봅시다.

이번 변경은 네 곳입니다. 한 곳씩 짚어 가며 진행합니다.

Step 1. constructor에 mass 매개변수 추가

class Mover {
  constructor(x, y, mass) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.mass = mass;  // 질량을 매개변수로 받음
  }

  applyForce(force) {
    let f = p5.Vector.div(force, this.mass);  // a = F / m (그대로)
    this.acc.add(f);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
  }

  edges() {
    let r = this.mass * 8;        // display()의 지름(this.mass * 16)에 맞춘 반지름

    if (this.pos.x > width - r) { this.pos.x = width - r; this.vel.x *= -1; }
    if (this.pos.x < r)         { this.pos.x = r;         this.vel.x *= -1; }

    let floor = height - r;
    if (this.pos.y > floor) {
      this.pos.y = floor;

      if (abs(this.vel.y) > 1) {
        this.vel.y *= -0.9;
      } else {
        this.vel.y = 0;
      }
    }
  }

  display() {
    stroke(0);
    fill(175, 200);
    ellipse(this.pos.x, this.pos.y, this.mass * 16);  // 질량에 비례하는 크기
  }
}

달라진 부분을 한 군데씩 살펴봅시다.

변경 1 — constructor 시그니처: constructor(x, y) → constructor(x, y, mass). 새 객체를 만들 때 질량을 매개변수로 받기 위함입니다. 7주차 클래스에서 배운 매개변수 추가 패턴입니다.

변경 2 — 질량 저장: this.mass = mass. 받은 mass 값을 객체의 속성으로 저장합니다. 각 객체가 자신의 질량을 기억하게 됩니다.

변경 3 — 시각화에 질량 반영: display()에서 ellipse(this.pos.x, this.pos.y, this.mass * 16). 질량 1인 공은 지름 16px, 질량 5인 공은 80px이 됩니다. 무거운 객체는 큰 원, 가벼운 객체는 작은 원으로 보여 주어 질량 차이가 시각적으로 드러나게 합니다.

변경 4 — edges 좌우 추가: 1교시에서는 바닥(y)만 체크했지만, 바람이 좌우로 밀면 화면 좌우로도 벗어날 수 있습니다. 따라서 좌우 벽 처리 두 줄을 추가합니다. 또한 원의 중심이 아닌 원의 가장자리가 벽과 바닥에 닿도록 r = this.mass * 8로 보정합니다.

Step 2. 질량이 다른 객체 여러 개 만들기

let movers = [];

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 5; i++) {
    movers.push(new Mover(random(width), 50, random(1, 5)));
  }
}

function draw() {
  background(220);

  let gravity = createVector(0, 0.2);
  let wind = createVector(0.05, 0);

  for (let mover of movers) {
    mover.applyForce(gravity);
    mover.applyForce(wind);
    mover.update();
    mover.edges();
    mover.display();
  }
}

7주차에서 배운 객체 배열이 여기서 다시 등장합니다. movers = []에 Mover 객체 5개를 담고, for...of로 모두 업데이트합니다.

핵심은 같은 gravity, 같은 wind를 모든 객체에 적용하지만 질량이 다르므로 각각 다르게 반응한다는 점입니다.

실행 결과: - 작은 원(가벼운 객체): 바람에 많이 밀리고 빠르게 떨어짐 → 가속도가 큼 - 큰 원(무거운 객체): 바람에 조금만 밀리고 느리게 떨어짐 → 가속도가 작음 - 각 원이 서로 다른 궤적으로 움직임

같은 힘인데 다르게 움직이는 모습을 관찰할 수 있습니다. 이것이 바로 a = F / m의 의미입니다. m이 크면 a가 작아지므로 반응이 둔해집니다. 1교시에서 표로 살펴본 볼링공/탁구공의 차이가 코드로 구현된 형태입니다.

한 줄 메모 — 현실 중력은 다르다

이미지로 비교 — mass=1 vs mass=5

둘 다 출발점은 (200, 50), 초기 속도는 (0, 0)입니다. gravity = (0, 0.2), wind = (0.1, 0)이고, 마찰력은 아직 없는 상태에서 두 궤적을 비교합니다.

이미지에서 보이는 핵심은 두 공이 같은 힘을 받지만 서로 다른 궤적을 만든다는 점입니다. 가벼운 공은 합산 가속도 (0.1, 0.2), 무거운 공은 (0.02, 0.04)가 되어 5배 차이가 납니다. 이 차이가 매 프레임 누적되면서 60프레임 뒤 위치 차이로 크게 드러납니다.

가장 중요한 점은 applyForce() 메서드가 한 줄도 변경되지 않았다는 것입니다. mass 데이터 하나만 달라진 결과입니다.

심화 개념 3 — 마찰력: ‘브레이크’ 비유로 풀이

지금까지 중력과 바람을 살펴봤습니다. 둘 다 한 방향으로 미는 힘입니다. 마찰력은 성격이 조금 다릅니다. 비유 → 코드 → 실험, 세 단계로 풀어 봅니다. 9주차에서 sub()를 설명할 때 사용한 방식과 동일합니다.

Step 3-1. 비유로 시작 — 마찰력은 ‘브레이크’

마찰력은 브레이크에 비유할 수 있습니다. 차가 어느 방향으로 달리든 브레이크는 그 반대 방향으로 작용합니다.

오른쪽으로 가던 공을 멈추려면 왼쪽으로 잡아당겨야 합니다. 위로 던진 공은 단순히 아래로 잡아당기는 것이 아니라, 공이 가는 방향의 반대로 잡아당기는 것이 마찰입니다.

마찰력의 두 가지 핵심 특성은 다음과 같습니다.

1. 방향: 항상 vel(속도)의 반대 방향. 어디로 향하든 그 반대로 작용합니다.
2. 크기: 마찰계수 c로 결정됩니다. 얼음 위에서는 작고, 모래 위에서는 큽니다.

Step 3-2. 코드로 옮기기 — 한 줄씩 빌드업

비유를 코드로 옮기면 4줄입니다. 9주차에서 통일한 정적 메서드 패턴(p5.Vector.~)을 사용하며, 이번에도 한 줄씩 추가하면서 각 줄이 왜 필요한지 함께 살펴봅니다.

v1. vel을 그대로 사용하기 (문제 확인용)

단순하게 시작합니다. 마찰력이 vel과 관련 있으니 vel을 그대로 사용하면 어떻게 될까요?

let friction = mover.vel;
mover.applyForce(friction);

여기에는 두 가지 문제가 있습니다. 첫째, 방향이 같습니다 — 진행 방향과 같은 방향으로 미는 것은 가속이지 마찰이 아닙니다. 둘째, mover.vel을 직접 참조하면 이후 코드에서 수정될 위험이 있습니다.

문제를 하나씩 해결해 봅시다.

v2. 반대 방향으로 — -1 곱하기

마찰의 핵심은 vel의 반대 방향이므로 -1을 곱해야 합니다. 다만 vel.mult(-1)로 처리하면 vel 원본이 반대로 뒤집히는 문제가 있습니다. 9주차에서 배운 정적 메서드로 안전하게 새 벡터를 만듭니다.

let friction = p5.Vector.mult(mover.vel, -1);
mover.applyForce(friction);

p5.Vector.mult(mover.vel, -1)는 vel에 -1을 곱한 새 벡터를 만들어 friction에 담습니다. mover.vel은 변경되지 않습니다. 1교시의 p5.Vector.div, 9주차의 p5.Vector.sub와 동일한 안전 패턴입니다.

이제 방향은 정확히 vel의 반대입니다. 다만 크기가 너무 큽니다 — 빠르게 움직이는 공일수록 마찰력도 비례해 커지므로 거의 즉시 정지해 버립니다. 자연스러운 마찰은 일정한 크기를 유지해야 합니다.

v3. 방향만 남기기 — normalize()

9주차에서 배운 normalize()를 사용합니다. 벡터의 크기를 1로 만들어 방향만 남깁니다.

let friction = p5.Vector.mult(mover.vel, -1);
friction.normalize();
mover.applyForce(friction);

이제 friction은 방향만 있고 크기는 1인 단위벡터입니다. 어떤 속도이든 일정한 크기 1짜리 마찰이 작용합니다.

다만 크기 1은 너무 강합니다. 한 프레임에 1만큼 줄어들면 속도가 급격히 꺾여 부자연스러울 수 있습니다. 마찰계수로 적절히 축소해야 합니다.

v4. 마찰계수로 크기 조절 — mult(c)

let c = 0.05;                                  // 마찰계수
let friction = p5.Vector.mult(mover.vel, -1);  // 반대 방향
friction.normalize();                          // 크기 1
friction.mult(c);                              // 크기 c로 축소
mover.applyForce(friction);                    // 힘으로 적용

c = 0.05이면 friction의 크기는 0.05입니다. 한 프레임에 미세하게만 작용하므로 자연스럽게 감속되는 움직임이 만들어집니다.

마지막 줄은 mover.applyForce(friction)입니다. 마찰력도 결국 하나의 힘일 뿐입니다. 1교시의 applyForce 메서드가 그대로 동작합니다. 내부에서 this.acc.add(f)로 누적되어 중력·바람과 함께 합력을 이룹니다.

숫자로 보는 마찰 — vel=(3, 4), c=0.05일 때

좀 더 구체적으로 살펴봅시다. 어떤 객체의 속도가 (3, 4)이고 마찰계수 c=0.05라면 마찰력 벡터는 어떻게 계산될까요?

관찰:

1. 방향: friction = (-0.03, -0.04). vel (3, 4)와 정확히 반대 방향이며, 비율도 동일합니다 (-3:-4 = 3:4).
2. 크기: vel의 길이가 5였지만 friction의 길이는 0.05 — c와 정확히 일치합니다. 어떤 vel이 입력되어도 normalize 처리 덕분에 friction의 크기는 항상 c가 됩니다.
3. 감속 효과: 매 프레임 acc에 (-0.03, -0.04)가 누적되므로 vel이 (3, 4)에서 (2.97, 3.96), (2.94, 3.92)로 천천히 줄어듭니다. 방향은 거의 유지되지만 크기가 점차 작아지는 형태입니다.
4. 정지 시점: vel 크기가 c와 비슷해지면 한 프레임 만에 vel 부호가 반전될 수 있으며, 작은 떨림이 발생합니다. 따라서 실제 코드에서는 vel 크기가 너무 작을 때 별도 처리(if (vel.mag() < c) vel.set(0, 0))를 추가해 정지 상태를 만듭니다.

draw()에 마찰력 적용 — 합쳐 보기

function draw() {
  background(220);

  let gravity = createVector(0, 0.2);
  let wind = createVector(0.05, 0);

  for (let mover of movers) {
    // 마찰력 계산 (객체마다 속도가 다르니까 각자 따로 계산)
    let c = 0.05;
    if (mover.vel.mag() < c) {
      mover.vel.set(0, 0);
    } else {
      let friction = p5.Vector.mult(mover.vel, -1);
      friction.normalize();
      friction.mult(c);
      mover.applyForce(friction);  // 마찰력
    }

    mover.applyForce(gravity);   // 중력
    mover.applyForce(wind);      // 바람

    mover.update();
    mover.edges();
    mover.display();
  }
}

applyForce()를 세 번 호출했습니다. 마찰력 + 중력 + 바람이 동시에 작용하는 구조입니다. 이것이 합력의 실제 모습입니다. 그리고 힘은 매 프레임 새로 적용되고, acc는 acc.set(0, 0)으로 매 프레임 초기화됩니다.

이미지에서 파란 화살표는 속도, 빨간 화살표는 마찰력입니다. 핵심은 friction = -normalize(vel) * c: 속도 방향을 반대로 뒤집고, 크기는 마찰계수 c로 맞춥니다.

실행 결과: - 마찰력이 없을 때: 공이 바닥에서 계속 튕기며 옆으로 밀림 - 마찰력이 있을 때: 공의 속도와 튀는 높이가 서서히 줄어듦 - 속도가 매우 작아지면 임계값 처리로 떨림을 억제 - 다만 중력과 바람이 계속 적용되면 완전 정지가 아니라 다시 힘을 받을 수 있음

마찰력이 없으면 한 번 힘을 받은 물체는 계속 움직이려 합니다(뉴턴 제1법칙). 마찰력이 있어야 자연스럽게 감속합니다. 완전한 정지처럼 보이게 하려면 작은 속도를 0으로 고정하는 임계값 처리가 필요합니다.

Step 3-3. 마찰계수 실험

마찰계수 c를 조절하면 표면 조건이 달라진 것처럼 보입니다. c 값 한 줄만 변경하면 됩니다.

// try: 0.01 ice, 0.05 floor, 0.1 sand, 0.3 mud
let c = 0.05;

마찰력 계산 코드는 그대로 두고 c 값만 바꿉니다. c가 커질수록 더 빨리 멈춥니다.

보너스 — 키보드로 표면 전환하기. keyPressed()를 사용하면 1·2·3·4 키로 마찰계수를 바꿀 수 있습니다.

// 보너스: 1·2·3·4 키로 표면 전환
let frictionC = 0.05;  // 전역 변수로 두고 draw()에서 사용

function keyPressed() {
  if (key === '1') frictionC = 0.01;  // 아이스링크
  if (key === '2') frictionC = 0.05;  // 바닥
  if (key === '3') frictionC = 0.1;   // 모래
  if (key === '4') frictionC = 0.3;   // 진흙
}

이 값을 이후에 정의할 mover.applyFriction(frictionC)에 연결하면, 키를 누를 때마다 표면 재질이 전환됩니다.

심화 개념 4 — applyFriction() 메서드화 + 마우스 인터랙션

draw() 안에 마찰력 4줄이 들어 있어 코드가 다소 산만해졌습니다. 7주차에서 배운 것처럼, 복잡한 로직은 메서드 안으로 옮기면 읽기 좋아집니다.

Mover 클래스에 applyFriction() 메서드 추가

applyFriction(c) {
  if (this.vel.mag() < c) {
    this.vel.set(0, 0);
    return;
  }

  let friction = p5.Vector.mult(this.vel, -1);
  friction.normalize();
  friction.mult(c);
  this.applyForce(friction);
}

마찰계수 c를 매개변수로 받아 내부에서 마찰력 벡터를 만들고, this.applyForce(friction)로 자기 자신에게 힘을 적용합니다. 메서드 안에서 다른 메서드를 호출하는 구조이며, 7주차에서 배운 this가 다시 등장합니다.

앞부분의 if (this.vel.mag() < c)는 작은 속도에서 방향이 계속 반전되며 떨리는 현상을 방지하는 정지 처리입니다.

앞서 풀이한 4줄을 메서드 안에 그대로 넣은 형태입니다. 새 로직을 추가한 것이 아니라 메서드로 묶은 것입니다.

draw() 코드가 간결해짐

function draw() {
  background(220);

  let gravity = createVector(0, 0.2);
  let wind = createVector(0.05, 0);

  for (let mover of movers) {
    mover.applyFriction(frictionC); // 마찰력 (위 keyPressed 예제의 전역값)
    mover.applyForce(gravity);      // 중력
    mover.applyForce(wind);         // 바람
    mover.update();
    mover.edges();
    mover.display();
  }
}

마찰력 4줄이 mover.applyFriction(frictionC) 한 줄로 축약되었습니다.

코드를 읽어 보면 ’mover에 마찰력을 적용하고, 중력을 적용하고, 바람을 적용하고, 업데이트하고, 가장자리를 처리하고, 표시한다’와 같이 자연스러운 문장처럼 읽힙니다. 이것이 7주차에서 배운 OOP의 장점입니다.

마우스 인터랙션 — 클릭 시 마우스 방향으로 끌어당기기

9주차 sub()를 복습할 겸, 클릭하면 모든 공이 마우스 위치를 향해 한 번 끌리는 인터랙션을 추가합니다.

function mousePressed() {
  for (let mover of movers) {
    // 9주차 sub: 도착(마우스) - 출발(공)
    let dir = p5.Vector.sub(createVector(mouseX, mouseY), mover.pos);
    dir.normalize();
    dir.mult(2);  // 한 번에 가하는 충격(impulse)의 크기
    mover.applyForce(dir);
  }
}

9주차 벡터 연산이 그대로 사용됩니다. sub()로 방향을 구하고 → normalize()로 방향만 남기고 → mult()로 크기를 설정한 뒤 → applyForce()로 힘을 적용합니다. 9주차에서 배운 sub()의 도착·출발 순서에도 유의합시다 — sub(도착, 출발) 형태입니다.

클릭할 때마다 모든 공이 마우스 쪽으로 한 번씩 밀려 이동합니다. 가벼운 공은 많이, 무거운 공은 적게 밀립니다 — 질량 차이가 이 인터랙션에서도 드러납니다.