결정 룰렛

룰렛은 결정적 랜덤 선택과 결합된 Canvas 2D 드로잉입니다. 각 조각은 ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, r, startAngle, endAngle); ctx.fill()로 렌더링됩니다. N개의 동일한 옵션은 각각 2π/N 라디안의 호를 차지합니다. 15개 조각은 각각 24도 호이며, 이것이 입력이 15개로 제한되는 이유이기도 합니다(레이블의 가독성을 유지하기 위해). 당첨 조각은 애니메이션 전에 결정됩니다. crypto.getRandomValues(new Uint32Array(1))[0]으로 32비트 부호 없는 정수를 생성하고 N으로 나눈 나머지가 답입니다. 그런 다음 애니메이션은 목표 회전값 fullSpins × 2π + (2π − winnerIndex × sliceAngle − sliceAngle/2)를 계산하여 캔버스 상단의 포인터가 선택된 조각의 중앙을 가리키게 하고, easeOutCubic f(t) = 1 − (1−t)^3 또는 물리적 룰렛이 느려지는 것을 모방하는 미세한 오버슈트를 위한 easeOutBack 같은 이징 커브를 사용하여 requestAnimationFrame 내에서 트위닝합니다. crypto.getRandomValues는 Web Crypto API에 명시된 Web Crypto CSPRNG로, OS 엔트로피 풀에서 시드되므로 Math.random과 달리 페이지 상태를 읽어 예측할 수 없습니다. 가중치 변형은 길이 N의 누적 확률 배열을 만들고 O(log N)로 이진 탐색합니다. 출력은 전적으로 시각적이고 일시적입니다. 아무것도 기록되지 않으므로 감사 추적(타임스탬프, 옵션 목록, 스크린샷)은 페이지를 새로고침하기 전에 외부에서 캡처해야 합니다.

• Canvas 렌더링: 각 조각은 sliceAngle = 2π / N인 ctx.arc(cx, cy, r, startAngle, endAngle). 15개 옵션은 조각당 24도 호이며, 이것이 실용적인 가독성 상한선입니다.
• 당첨 선택은 crypto.getRandomValues(new Uint32Array(1))[0] % N을 사용. Web Crypto CSPRNG, OS 엔트로피에서 시드. 공정한 일회성 추첨에는 적합하지만 재현 가능한 추첨에는 부적합(감사 추적 없음).
• 애니메이션은 디스플레이 주사율(보통 60Hz)에서 requestAnimationFrame으로 실행. easeOutCubic f(t) = 1 − (1−t)^3 또는 미세한 오버슈트를 위한 easeOutBack 사용. 커브는 장식적이며 당첨자는 이미 결정되어 있습니다.
• 최종 회전값은 targetRotation = fullSpins × 2π + (2π − winnerIndex × sliceAngle − sliceAngle/2)로, 상단 포인터가 조각 가장자리가 아닌 중앙에 위치합니다.
• 가중치 옵션 모드는 가중치의 접두 합 배열을 만들고 이진 탐색으로 균일 난수를 조각에 매핑합니다(O(log N)). 역 CDF 샘플링과 동등합니다.
• N ≤ 15이고 추첨 범위가 2^32 값일 때 모듈로 바이어스는 무시할 수 있습니다(바이어스 ≈ N / (2 × 2^32) ≈ 1.7×10^-9). 따라서 기각 샘플링 루프가 필요하지 않습니다.
• 각 회전은 독립 동일 분포(i.i.d.)입니다. 연속 회전이 같은 옵션을 반복할 수 있으며 이는 올바른 균등 동작이지 버그가 아닙니다. 회전 간 중복 제거에는 외부 기록이 필요합니다.