Introduction

If you are building a wheel-of-fortune style spinner, the question "what value did the wheel land on?" is really a geometry problem. Given the wheel's final rotation, the pointer position, and a list of sectors, you need to map an angle to the correct wedge without off-by-one errors at the boundaries.

Model The Wheel As A List Of Sectors

A spinner is just a circle split into sectors. Each sector has:

• a label or value, such as 500 or BANKRUPT
• a width, either explicit or implied by equal spacing
• a position relative to angle zero

If the wheel has equal wedges, the simplest representation is an array of values. With 24 wedges, each wedge spans:

360 / 24 = 15 degrees

Once you know the final angle, you can convert that angle into an index.

Normalize The Final Angle First

Animation code often accumulates several complete rotations, so the first step is to reduce the angle to the 0 through 359.999... range.

1function normalizeAngle(angle) {
2  return ((angle % 360) + 360) % 360;
3}
4
5console.log(normalizeAngle(765)); // 45
6console.log(normalizeAngle(-30)); // 330

The double modulo handles negative rotations correctly, which matters if the wheel can spin in either direction or if your easing function overshoots and settles back.

Equal-Width Wedge Lookup

For equal-width wedges, divide the normalized angle by the wedge width and take the floor:

1const wedges = [
2  500, 600, 700, "BANKRUPT", 800, 900,
3  500, "LOSE A TURN", 650, 700, 800, 500,
4  900, 600, "FREE PLAY", 700, 800, 500,
5  650, 900, "BANKRUPT", 700, 600, 500
6];
7
8function wheelValue(finalAngle) {
9  const angle = normalizeAngle(finalAngle);
10  const wedgeSize = 360 / wedges.length;
11  const index = Math.floor(angle / wedgeSize);
12  return wedges[index];
13}
14
15console.log(wheelValue(44));
16console.log(wheelValue(200));

This assumes that angle 0 is exactly aligned with the start of the first wedge. If that matches your drawing and animation system, the formula is enough.

Account For Pointer Offset And Rotation Direction

Most real implementations need an offset. The pointer is usually fixed at the top, while canvas or SVG rotation often measures 0 degrees from the right edge. You may also discover that the wheel spins clockwise while your math assumes counterclockwise.

1function wheelValueWithOffset(finalAngle, offset = 90, clockwise = true) {
2  const signedAngle = clockwise ? -finalAngle : finalAngle;
3  const angle = normalizeAngle(signedAngle + offset);
4  const wedgeSize = 360 / wedges.length;
5  const index = Math.floor(angle / wedgeSize);
6  return wedges[index];
7}

This is where most incorrect lookups come from. The sector math is fine, but the reference frame is shifted or the sign is flipped.

Unequal Wedges Need Explicit Ranges

If wedges have different widths, there is no single division formula. Store the angle ranges explicitly:

1const sectors = [
2  { start: 0, end: 20, value: 500 },
3  { start: 20, end: 55, value: 750 },
4  { start: 55, end: 120, value: "BANKRUPT" },
5  { start: 120, end: 180, value: 1000 },
6  { start: 180, end: 360, value: 250 }
7];
8
9function valueFromRanges(finalAngle) {
10  const angle = normalizeAngle(finalAngle);
11  return sectors.find(sector => angle >= sector.start && angle < sector.end)?.value;
12}

This works well for promotional spinners, custom prize wheels, or game UIs where certain slices are intentionally larger than others.

Boundary Angles Matter

You must decide what happens when the pointer lands exactly on a sector boundary. The usual convention is:

• include the sector start angle
• exclude the sector end angle

That gives a clean rule like start <= angle < end, which avoids overlaps. It is also worth testing a few known positions manually:

console.log(wheelValueWithOffset(0, 90));
console.log(wheelValueWithOffset(15, 90));
console.log(wheelValueWithOffset(359.9, 90));

If those values do not match the visual wheel, your offset or direction is wrong.

Connecting The Lookup To Animation

In a real app, the lookup is usually run after the spin animation completes:

1function spinResult(startAngle, spinDelta) {
2  const finalAngle = startAngle + spinDelta;
3  const prize = wheelValueWithOffset(finalAngle, 90, true);
4  return { finalAngle: normalizeAngle(finalAngle), prize };
5}
6
7console.log(spinResult(0, 1080 + 47));

This pattern keeps the animation logic separate from the prize lookup. That separation makes the code easier to test and avoids burying business logic inside UI transitions.

Common Pitfalls

• Forgetting to normalize the angle before calculating the sector index.
• Assuming the drawing coordinate system matches the visual pointer without an offset.
• Using the equal-width formula for a wheel that actually has custom slice sizes.
• Leaving boundary behavior undefined and getting inconsistent results on sector edges.
• Mixing clockwise and counterclockwise conventions between animation code and lookup code.

Summary

• A wheel lookup is an angle-to-sector mapping problem.
• Normalize the final angle before any indexing.
• Equal-width wheels can use Math.floor(angle / wedgeSize).
• Pointer offset and rotation direction are the most common sources of bugs.
• Unequal wheels should be modeled with explicit start and end angle ranges.