CSS만으로 게임 난수 생성: Sine 함수를 활용한 Pseudo-Random Number Generator 구현

핵심 기술

CSS만으로 게임에 필요한 난수(Random Number)를 생성하기 위해 sin 함수와 CSS Custom Properties(--seed, --index, --noise)를 활용하는 기법을 소개합니다. 이는 CSS의 내장 함수와 계산 기능을 통해 JavaScript 없이 동적인 효과를 구현하는 방법을 제시합니다.

기술적 세부사항

• 목표: CSS만으로 Pseudo-Random Number Generator (PRNG) 구현
• 핵심 아이디어: sin 또는 cos 함수의 주기적이고 예측 가능한 특성을 이용하여, 입력값(seed, index)에 따라 변화하는 일련의 숫자를 생성하고 이를 난수처럼 활용.
• 입력 값:
  • --seed: 초기값으로 사용되는 큰 정수. 고유한 난수 시퀀스를 생성하는 데 중요.
  • --index: 순차적으로 증가하는 값 (예: nth-child 등을 통해 각 요소에 부여). 선형적인 증가를 비선형적인 결과로 만들기 위해 제곱(index * index)하여 사용.
  • --noise: 예측 불가능성을 더하는 임의의 상수 또는 변수. 생성되는 숫자의 다양성을 높임.
• 계산 방식: --random-number: calc(var(--seed) * var(--index) * var(--index) * noise); 와 같이 calc() 함수를 사용하여 연산 수행.
• 범위 변환: sin 함수의 출력 범위 [-1, 1]을 (1 + sin(...)) / 2 공식을 통해 [0, 1] 범위로 변환. 이후 m + random * (n - m) 공식을 적용하여 원하는 범위로 확장 가능.
• 문제점 및 해결책:
  • 반복성 및 패턴: index * index를 사용하여 선형적인 입력값 증가가 sin 함수에서 비선형적인 결과로 이어지도록 하여 패턴 감소.
  • 범위 포함 문제 [0, 1] vs [0, 1): CSS sin 함수는 결과로 1을 포함할 수 있어 정수 변환 시 의도치 않은 결과가 발생할 수 있음. sign(1 - var(--random-number)) 등을 활용하여 1이 포함될 확률을 줄이는 방안 제시.

개발 임팩트

• CSS만으로 게임 오브젝트의 위치, 크기, 색상 등에 무작위성을 부여하여 다양한 게임 경험 제공.
• 별도의 JavaScript 의존성 없이 순수 CSS만으로 애니메이션 및 게임 로직의 일부 구현 가능.
• CSS의 calc, var 등 최신 기능을 활용하여 웹 표준 기술로 창의적인 솔루션 개발.

커뮤니티 반응

(원문에서 특정 커뮤니티 반응에 대한 언급이 없어 생략합니다.)