Random Name Picker (Wheel)

Name Picker Wheel

Enter Names (One per line): Alice Bob Charlie Diana Ethan Fiona

 

Technical Concepts

1. Arc Calculations: The wheel is divided into segments using the formula:

   $$\text{Arc Size} = \frac{2\pi}{\text{Number of Names}}$$

   Each segment is then filled with a unique color based on the HSL color space to ensure variety regardless of how many names are added.

2. The Physics of Spinning: We don't just stop the wheel abruptly. The easeOut function simulates friction. It starts fast and slows down progressively, making the outcome feel suspenseful and fair.

3. Determining the Winner: Since the pointer is at the top ($-90^\circ$ or $270^\circ$ in canvas space), the code calculates the final startAngle, normalizes it to $360^\circ$, and maps that back to the array index of names.

4. Responsiveness: The UI uses a flexible flex-direction that shifts from a side-by-side view (Desktop) to a stacked view (Mobile). The Canvas is set to max-width: 100% to ensure it doesn't overflow smaller screens.