Picker Wheel, Spin the Wheel

How to Use the Picker Wheel

1. Add Options: Enter text into the input fields on the right. Click + Add Option to insert new items.
2. Customize List: Remove unwanted options by clicking the red × button next to each entry.
3. Auto-Remove Winner: Enable Remove winning option automatically if you want the picked result removed after spinning.
4. Spin: Click the glowing Spin the Wheel button to initiate the random rotation.
5. View Winner: See the outcome highlighted in the results box accompanied by celebratory confetti and sound effects.

The Logic Used

The application renders segments dynamically on an HTML5 Canvas based on your input list. Key components include:

• Randomized Rotation: Utilizes Math.random() to generate random initial speeds and total spin durations.
• Physics & Animation: Employs a cubic easeOut easing function to simulate friction, delivering realistic slowing motion.
• Angle Math & Precision: Calculates exact segment boundaries to align the top indicator with the corresponding item index.
• Audio Engine: Generates real-time audio ticks using Web Audio API synthesis along with celebratory sounds upon completion.

Frequently Asked Questions (FAQ)