P5.js 로 움직이는 고래 만들기

서동이·2024년 8월 9일

👉🏻 소스 코드

Nature of code 4장까지 스터디를 진행하면서 주로 물속에서 물체의 움직임과 관련하여 발표를 주로하였다. 4장까지의 내용을 복습할겸 해당 프로젝트를 진행하게 되었다.

목표 구현 화면

고래상어
- 화면의 끝에 닿을 경우 움직임의 방향을 바꾼다.
- 머리를 기준으로 몸통과 꼬리가 따라 움직인다.
배경화면
- 별들의 크기는 랜덤으로 지정된다.
- 별이 고래상어와 닿았을 경우 밀리는 효과를 준다. 단, 고래상어가 지나갔을 경우 원래의 위치로 돌아온다.

whale_shark 이미지출처: 핀터레스트

stars_bg

구현과정

1. 고래의 구성

초기에는 머리-가슴-배-꼬리 4등분을 하였다. 하지만 움직임에 있어서 어색함이 있다는 피드백을 받고 더 작게 몸의 구성을 나누었다. (이렇게 고래는 8등분이 되었다)

2. 별의 움직임

이 코드는 별이 고래 머리의 범위 내에 있을 때 별의 위치를 조정하여 충돌을 피하고, 그렇지 않을 경우 원래 위치로 돌아가도록 하는 기능을 구현하였다.

updatePosition 함수는 고래가 움직일때마다 별의 위치를 업데이트해주는 함수이다.


let shieldR = 90;

 updatePosition(x: number, y: number) {
    // 고래와 별 사이의 거리 계산
    let dx = x - this.pos.x;
    let dy = y - this.pos.y;

    // 유클리드
    // 두 점 사이의 x 좌표와 y 좌표의 차이를 제곱하여 더한 후, 그 결과에 제곱근
    let distance = this.p5.sqrt(dx * dx + dy * dy);

    // 반경 50px 내에 별을 그리지 않는다
    if (distance < shieldR) {
      // 공에서 별로 향하는 벡터의 단위벡터
      let unitX = dx / distance;
      let unitY = dy / distance;
      // 별의 위치를 공과 반대 방향으로 조정
      this.pos.sub(unitX * 2, unitY * 2);
    } else {
      // 원상복구
      this.pos.add(
        (this.originPos.x - this.pos.x) * 0.05,
        (this.originPos.y - this.pos.y) * 0.05
      );
    }
  }

원 모형으로 으로 설명하면 더 이해가 쉽다.
여기서 x, y는 원의 중심점을 의미한다. 이 중심점과 별의 위치 사이의 거리를 계산한다.

계산한 두 점이 shieldR 범위 내에 있을 때, 공과 반대 방향으로 조정합니다. 두 벡터의 방향을 2배로 증가시켜 현재 위치를 별의 방향과 반대로 이동시킨다.
별이 범위 밖에 있을 때,객체의 현재 위치를 원래의 위치로 천천히 되돌리기 위해 this.originPos와의 차이를 0.05배만큼 더한다. (원래 위치로 점진적으로 돌아가게 됩니다.)

3. 고래의 움직임

(1) whale.ts

1. 고래위치

  this.wPos.add(this.speedX, this.speedY);

위치 = 위치 + 속도

wPos는 고래의 현재 위치를 나타내며, speedX와 speedY는 고래의 속도를 나타낸다.
add 메서드는 고래의 현재 위치에 속도를 더하여 새로운 위치를 계산.

2. 벽과의 충돌

고래가 화면의 경계(boundary)를 넘어가면 speedX || speedY 의 부호를 바꿔서 방향을 반전한다.

// 벽과의 충돌 체크
    if (
      this.wPos.x < this.boundary ||
      this.wPos.x > window.innerWidth - this.boundary
    ) {
      this.speedX *= -1; // x축 방향 반전
    }

    if (
      this.wPos.y < this.boundary ||
      this.wPos.y > window.innerHeight - this.boundary
    ) {
      this.speedY *= -1; // y축 방향 반전
    }

3. 몸통

  this.fins.forEach((f, i) => {
      if (i > 0) {
        const prevFin = this.fins[i - 1];
        f.update(prevFin.pos.x, prevFin.pos.y, i === this.numFin - 1, i);
      } else {
        this.fins[0].update(this.wPos.x, this.wPos.y);
      }
    });

fins 배열을 순회하여 각 지느러미를 업데이트한다.
머리(첫번째 몸통)는 고래의 현재 위치에 따라 업데이트하고, 나머지 몸통은 이전 몸통의 위치를 참조하여 업데이트한다.
꼬리(마지막 몸통)는 사다리꼴이 아닌 삼각형으로 나타내야 하므로 따로 조건을 주었다.
(i === this.numFin - 1).

(2) fin.ts

작명이 잘못된건 인정.. 지느러미라고 쓰고 몸통이라고 읽겠다.

고래의 형태를 그리고, 이를 움직이는 물체의 위치와 방향에 맞게 조정하는 과정을 설명하고자한다. 이를 통해 각 몸통 부분을 화면에 그리면서 실제로 움직이는 물체의 위치와 방향에 적절하게 반영하였다. 코드를 이해하기 위해 각 단계별로 작성한 이유와 고민했던 부분을 자세히 살펴보겠다.
👉🏻 Koi flock: p5.js 이 코드를 많이 참고 하였다.

고민:

몸통의 길이와 방향을 계산하여, 움직이는 위치와 방향으로 그려질 수 있도록 해야했다. 몸통이 향해야 할 목표 위치(target)와 현재 위치(this.pos) 간의 벡터를 계산하여 사다리꼴의 모양과 방향을 계산하는것이 어려웠다.

구현

1. 각도 계산 및 위치 업데이트

angle은 몸통의 끝부분이 현재 위치에서 얼마나 떨어져 있는지를 결정하는 데 필요하다. 지느러미의 높이와 방향에 따라 끝부분의 위치를 정확하게 계산하려면 이 각도가 필요하다.

     // 현재 움직이는 위치와 fin위치간 거리의 차이를 구한다.
    const target = this.p5.createVector(x, y);
    const dir = p5.Vector.sub(target, this.pos);
    dir.setMag(isTail ? this.w - 30 : this.w);
    dir.mult(-1);

    // 현재 움직이는 위치가 어디로 향하는지, 각도를 구한다.
    this.angle = dir.heading();
    this.pos = p5.Vector.add(target, dir);

2. 몸통 그리기

(1) 삼각함수를 사용한 위치 계산

지느러미의 높이(h)를 설정하고, 각도에 따른 이동 벡터를 계산하여 arg2에 위치를 설정
- h: 지느러미의 높이, 즉 지느러미가 실제로 차지하는 공간의 크기
- arg2: 현재 위치(this.pos)와 지느러미의 방향(angle) 및 길이(h)를 기반으로 지느러미의 끝부분 위치 설정


 // 사다리꼴의 기본 형태 정의
    let orig = this.p5.createVector(0, 0);
    let other = this.p5.createVector(
      0,
      -this.p5.dist(this.pos.x, this.pos.y, arg2.x, arg2.y) // 아래 방향 기준 사다리꼴의 길이
    );

    const h = isTail ? 20 : 50;
    const arg2 = this.p5.createVector(0, 0);
    const dx = h * this.p5.cos(this.angle);
    const dy = h * this.p5.sin(this.angle);

    arg2.set(this.pos.x + dx, this.pos.y + dy);

cos와 sin 함수를 사용하여 각도(this.angle)에 따른 이동 벡터를 계산한다. 각도에 따라 이동 벡터를 조정하면 지느러미가 실제로 회전하고 움직이는 방향에 맞게 위치를 조정할 수 있다.

whale_shark 이미지출처: nature of code

👉🏻 참고

벡터를 x축과 y축 방향으로 분해할 때, 삼각함수는 다음과 같은 역할을 한다:

코사인 함수 (cos): 주어진 각도에서 x축 방향으로의 거리를 계산

 const dx = h * this.p5.cos(this.angle);

// 현재 위치에서 몸통의 끝부분이 x축 방향으로 이동해야 하는 거리 
// : 각도에 따라 코사인 값은 x축 방향으로의 이동량을 제공

사인 함수 (sin): 주어진 각도에서 y축 방향으로의 거리를 계산

 const dy = h * this.p5.sin(this.angle);
// 현재 위치에서 지느러미의 끝부분이 y축 방향으로 이동해야 하는 거리
// 각도에 따라 사인 값은 y축 방향으로의 이동량을 제공

arg2.set에서 현재 위치(this.pos)와 지느러미의 방향(angle) 및 길이(h)를 기반으로 지느러미의 끝부분 위치 설정한다.

(2) 사다리꼴의 네점 계산

    let p1, p2, p3, p4;
    p1 = orig.copy(); // 왼쪽 위
    p2 = orig.copy(); // 오른쪽 위
    p3 = other.copy(); // 오른쪽 아래
    p4 = other.copy(); // 왼쪽 아래

    p1.add(-widthFront / 2, margin);
    p2.add(widthFront / 2, margin);
    p3.add(widthBack / 2, -margin);
    p4.add(-widthBack / 2, -margin);

    //  사다리꼴의 네 점을 배열로 저장
    const trapPoints = [p1, p2, p3, p4];

(3) 회전 및 위치 조정

사다리꼴의 각 점을 회전시켜 올바른 방향으로 조정. 이후 위치를 this.pos로 이동시킨다.
=> (0,0) 임의 값을 기준으로 점이 계산되었으므로 실제 위치값을 넣어준다.

  for (let i = 0; i < trapPoints.length; i++) {
      let h = this.pos.copy();
      // h 벡터는 현재 위치 this.pos와 이동된 위치 arg2 사이의 벡터.두 위치 간의 방향.
      h.sub(arg2);
      //  사다리꼴의 각 점을 h 벡터의 방향으로 회전
      trapPoints[i].rotate(h.heading());
      // 사다리꼴을 90도 회전. 사다리꼴이 h 벡터와 수직으로 배치되도록 하기 위함
      trapPoints[i].rotate(this.p5.radians(90));

      // 회전된 사다리꼴의 각 점을 원래 위치 this.pos로 이동
      trapPoints[i].add(this.pos);
    }
    this.p5.fill(255, 200);
    this.p5.noStroke();

(4) 사다리꼴 그리기

fill, noStroke, curveTightness 등을 설정한 후, 사다리꼴의 형태를 그렸다. curveVertex를 사용하여 곡선 형태로 사다리꼴을 그릴 수 있다. 꼬리의 경우 trapPoints를 3개만 주면된다.

 	this.p5.fill(255, 200);
    this.p5.noStroke();

    // curveTightness 설정
    this.p5.curveTightness(0.5);

    // 둥근 사다리꼴 그리기
    this.p5.beginShape();

    for (let i = 0; i < trapPoints.length; i++) {
      this.p5.curveVertex(trapPoints[i].x, trapPoints[i].y);
    }

    // 마지막 점은 시작점을 위해 반복
    this.p5.curveVertex(trapPoints[0].x, trapPoints[0].y);
    this.p5.curveVertex(trapPoints[1].x, trapPoints[1].y);

    this.p5.endShape(this.p5.CLOSE);