사용자 배치 로직 구현하기

</aside>

💡 목표: 참여자 프로필을 타원 위 한점의 좌표로 계산하기

<aside> ✅

수학적 계산을 통해 타원형 배치를 동적으로 구현하며, 사용자 수에 따라 배치와 반지름을 조정한다.
화면 크기와 사용자의 수에 상관없이 원활한 배치를 제공한다. </aside>

1. 타원형 배치 구현

타원형 배치를 구현하기 위해, 좌표 시스템을 사용하여 각 사용자의 위치를 계산합니다.

→ 각 사용자는 타원의 장축과 단축을 기준으로 위치가 결정되며, 이 때 수학적 공식인 타원 방정식을 사용합니다.

1.1. 수학적 개념

타원의 방정식에서, 각 사용자의 위치는 극좌표계를 사용해 계산됩니다.
사용자의 수에 따라 각도를 나누고, 그 각도에 맞춰 타원의 둘레를 따라 사용자들을 배치합니다.
각도는 2 * Math.PI / count로 나누어지며, 이를 통해 사용자의 위치를 계산합니다.
각 위치는 타원의 장축과 단축을 반영하여, (x, y) 좌표를 계산합니다. 이를 통해 사용자의 좌표가 타원 모양을 따르게 됩니다.

// 참여자 수에 따른 위치를 계산하는 함수
export const calculatePosition = (count: number, shortRadius: number, longRadius: number): [number, number][] => {
  const positions: [number, number][] = [];
  const centerX = 0;
  const centerY = 0;
  const angleDiff = (2 * Math.PI) / count;

  for (let i = 0; i < count; i++) {
    const angle = angleDiff * i;
    const x = centerX + longRadius * Math.sin(angle);
    const y = centerY + shortRadius * Math.cos(angle);
    positions.push([x, y]);
  }

  return positions;
};

사용자 수에 따라 사용자간 배치 각도 계산 → 각도에따라 좌표값 계산

1.2. 위치 계산 로직

count: 현재 방에 있는 사용자 수
shortRadius: 타원의 단축 (y축 반지름)
longRadius: 타원의 장축 (x축 반지름)

사용자가 추가되거나 삭제될 때마다, calculatePosition 함수가 호출되어 사용자의 위치가 재계산됩니다.

성능 최적화