Ruleta de Decisiones

La ruleta es un dibujo Canvas 2D combinado con una selección aleatoria determinista. Cada segmento se renderiza con ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, r, startAngle, endAngle); ctx.fill(), donde N opciones iguales toman un arco de 2π/N radianes cada una; quince segmentos equivalen a 24° de arco cada uno, lo cual también explica por qué la entrada está limitada a 15 para mantener las etiquetas legibles. El segmento ganador se determina ANTES de la animación: se extrae un entero sin signo de 32 bits con crypto.getRandomValues(new Uint32Array(1))[0], se reduce módulo N, y ese entero es la respuesta. La animación calcula entonces una rotación objetivo de fullSpins × 2π + (2π − winnerIndex × sliceAngle − sliceAngle/2) de modo que el puntero en la parte superior del canvas termina apuntando al centro del segmento elegido, y se interpola hacia él dentro de requestAnimationFrame usando una curva de suavizado como easeOutCubic, f(t) = 1 − (1−t)³, o easeOutBack para el ligero exceso que simula una ruleta física desacelerándose. crypto.getRandomValues es el CSPRNG de Web Crypto (especificado en la Web Crypto API), sembrado desde el pool de entropía del SO, por lo que, a diferencia de Math.random, la selección no puede predecirse leyendo el estado de la página. Las variantes con pesos construyen un array de probabilidad acumulada de longitud N y buscan binariamente la extracción aleatoria en O(log N). Las salidas son enteramente visuales y efímeras; no se registra nada, por lo que cualquier rastro de auditoría (marca de tiempo, lista de opciones, captura de pantalla) debe capturarse externamente antes de actualizar la página.

• Renderizado Canvas: cada segmento es ctx.arc(cx, cy, r, startAngle, endAngle) con sliceAngle = 2π / N; 15 opciones dan 24° por segmento, que es el límite práctico de legibilidad.
• La selección del ganador usa crypto.getRandomValues(new Uint32Array(1))[0] % N, el CSPRNG de Web Crypto sembrado desde la entropía del SO, adecuado para sorteos justos de un solo uso pero NO para loterías reproducibles (no hay rastro de auditoría).
• La animación se ejecuta en requestAnimationFrame a la frecuencia de refresco de la pantalla (típicamente 60 Hz) con easeOutCubic f(t) = 1 − (1−t)³ o easeOutBack para un ligero exceso; la curva es cosmética, el ganador ya está elegido.
• La rotación final es targetRotation = fullSpins × 2π + (2π − winnerIndex × sliceAngle − sliceAngle/2) para que el puntero superior caiga en el centro del segmento, no en su borde.
• El modo de opciones ponderadas construye un array de suma de prefijos de pesos y usa búsqueda binaria para mapear un número aleatorio uniforme a un segmento en O(log N), equivalente a muestreo por inversa de la CDF.
• El sesgo del módulo es despreciable cuando N ≤ 15 y la extracción tiene un rango de 2³² valores (sesgo ≈ N / (2 × 2³²) ≈ 1,7×10⁻⁹), por lo que no se necesita un bucle de muestreo por rechazo.
• Cada giro es i.i.d.; los giros consecutivos pueden repetir la misma opción y eso es un comportamiento uniforme correcto, no un error; la deduplicación entre giros requiere un registro externo.