Spinner Wheel

Circular spinner wheels represent a classic mechanical device for selecting random outcomes. Leveraged across television lotteries, board game spinners, and randomized clinical trial groups, these devices rely on the division of a complete 360-degree circular surface into discrete sector areas. When spun with initial momentum, the wheel's deceleration trajectory determines a single winning sector relative to a fixed pointer position.

This **Spinner Wheel** solver implements a high-performance vector rendering of these circular dynamics. By customizing options list, setting relative weights, and calculating arc segments, users can explore how area proportions translate into exact mathematical expectations.

---

🎡 Trigonometric Drawing of Circular Arc Sectors

Drawing circular sectors dynamically inside an SVG canvas requires translating angular coordinates into Cartesian coordinate coordinates $(x,y)$ on the circle boundary. For a sector centered at coordinate $(100,100)$ with radius $R = 90$, the start angle $\theta_1$ and end angle $\theta_2$ (expressed in radians) map to coordinates using the standard parametric equations:

To draw the segment, the SVG path utilizes the **Arc Command** (`A`). This command takes parameters like the radius, rotation, large-arc-flag (which determines if the sector is greater than 180 degrees), and sweep-flag. By compiling individual arc coordinates sequentially, we construct a complete multi-colored vector circle representation. Summing the weights of all options determines the relative angular thickness of each slice:

---

🌀 Physics of Angular Deceleration & Friction

To make the wheel spin feel premium and natural, its rotation is simulated using angular physical equations. Rather than a flat, constant spin, the wheel is given an initial angular velocity ($\omega_0$) on spin click. Over the duration of the spin, a constant **friction coefficient** ($\alpha$) is applied to decelerate the wheel at each animation frame. The instantaneous rotation angle ($\theta_t$) at time $t$ is calculated via:

This physical deceleration curve is executed inside a high-frequency **requestAnimationFrame** loop. The animation runs smoothly at 60 frames per second. Once velocity drops below a threshold, the loop terminates. The accumulated rotation angle is normalized modulo 360, allowing the algorithm to map the settled angle back to the precise sector boundary that aligns under the pointer.

---

📈 Weighted Lotteries & Game Theory

In game theory and economics, weighted spinner wheels model **lottery games** used to analyze consumer preferences and risk aversion. In a standard lottery, outcomes have unequal values and different probabilities. Proportional weighting demonstrates that while an option with a weight of 5 has a much larger area segment (e.g. 50%) than an option with a weight of 1 (e.g. 10%), short-term sequences can produce surprising sequences. Demonstrating these runs helps users visualize probability density functions and separate short-term variance from long-term expectation averages.