p5.js로 헤엄치는 고래 만들기(1)

프로젝트 소개

👉🏻 소스 코드

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

목표 구현 화면

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

이미지출처: 핀터레스트

구현과정

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. 고래의 움직임

👉🏻 다음 글 에서 자세히 고래의 움직임에 대해 다루겠다.

참고자료

• Nature of code
• Koi flock: p5.js
• 고래상어 이미지 출처
• 배경화면 이미지 출처