# Spinning wheel

**URL:** https://forum.kirupa.com/t/spinning-wheel/102047
**Category:** Uncategorized
**Created:** [February 19, 2004, 3:57am UTC](https://forum.kirupa.com/t/spinning-wheel/102047 "2004-02-19T03:57:02Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![prinsesa](https://avatars.discourse-cdn.com/v4/letter/p/b9e5f3/32.png) [@prinsesa](https://forum.kirupa.com/u/prinsesa)
#### Post date: [February 19, 2004, 3:57am UTC](https://forum.kirupa.com/t/spinning-wheel/102047/1 "2004-02-19T03:57:02Z")

</div>

i need help desperately…

i need to create a similar project in school like this  
[http://www.quickcompliance.net/qcsamples/Privacy101Audio/course.html](http://www.quickcompliance.net/qcsamples/Privacy101Audio/course.html)

the spinning wheel is found when you click on item 9

i intend to create a spinning wheel with just 6 slices.

can anyone give me tip on how to make this?

i need to be able to display the value on the right side of the screen.

thanks a million for giving me a hand in this situation

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [February 19, 2004, 4:25am UTC](https://forum.kirupa.com/t/spinning-wheel/102047/2 "2004-02-19T04:25:27Z")

</div>

Here’s a few ideas to get you started.

If you draw the wheel in Flash, and center it around the cross-hairs in the editor, then in actionscript you can rotate it. Let’s say your wheel movie is called wheel\_mc.

```auto

wheel_mc._rotation = wheel_mc._rotation + spinSpeed;

```

This spins the wheel, but what should you set spinSpeed to?  
We’d like to to start fast, then slow down over time.  
One half of a cosine wave might fit the bill for controlling this kind  
of deceleration. Let’s say “spinDuration” is set to the amount of time  
you want the spinning to last (10 seconds or so) and “startOfSpin” is set to  
the value of “getTimer().001” (or the current time in seconds) at the time the  
wheel starts spinning…

```auto

wheel_mc.onEnterFrame = function() 
{
  // get the elapsed time since the start of the spin
  elapsedTime = getTimer()*.001 - startOfSpin;

  // convert it to a number from 0-1
  elapsedTime /= spinDuration;

  if (elapsedTime > 1) {
     // we're done spinning - see below for an example of what to do here...
     spinSpeed = 0;
     this.onEnterFrame = 0;
  }
  else {
      // Math.cos over the range from 0 thru PI will produce a sine-wave
      // curve starting at 1 and going down to -1. This may be a good
      // approximation of the wheel deceleration.
      spinSpeed = 15 + Math.cos(Math.PI * elapsedTime)*15;
  }

   this._rotation = this._rotation + spinSpeed;
}

```

Over the course of “spinDuration” (whatever you set that to), the spinSpeed will slow down from 30 to 0. Note: If you find your wheel is going backwards, invert the cosine wave by using -Math.cos().

When elapsedTime reaches spinDuration, then you can stop spinning the wheel and figure out what number you’re at, by looking at the current value of wheel\_mc.\_rotation.

```auto

curPos = wheel_mc._rotation/360;
curPos -= Math.floor(curPos); // this gets it to 0-1

// let's say all your numbers are stored in an array from 0 - n-1
curChoice = myArray[Math.floor(curPos*n)];

// now you know your current choice... what are you going to do with it?

```

As you can see, converting numbers to a 0-1 range is very useful for converting from one kind of data to another. Numbers in this form are called “normalized”, and they are a very powerful tool for programmers.

In this example, I used normalization to convert from the spin-time to the position on the cos wave that I wanted to exploit, and also to convert from wheel position (0-360) to an array lookup for your wheel wedge scores.

- Jim

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [February 19, 2004, 7:02am UTC](https://forum.kirupa.com/t/spinning-wheel/102047/3 "2004-02-19T07:02:18Z")

</div>

thanks for this code. i’m trying this one  
but…if it won’t be much of a bother…  
can you also send the code on how to display the values in the array?  
i have to admit i really dont know how and wanna learn so much!  
there are 6 slices/values (the values are “\<2”, “2-4”, “4-6”, “6-8”, “8-10”, “\>10”)

also, what script goes to the “click to spin” button so i can initiate spin

THANKS AGAIN for immediate reply

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [February 19, 2004, 3:53pm UTC](https://forum.kirupa.com/t/spinning-wheel/102047/4 "2004-02-19T15:53:30Z")

</div>

You can draw the values directly on the wheel. Let’s say when the wheel is in it’s normal position it has a “10” at the top, and the following numbers going around the wheel (which has 7 wedges).

10,70,40,30,90,50,60

Then you would store those numbers in an array.

myArray = [10,70,40,30,90,50,60];

And use the code I provided above to convert the wheel’s final rotation to a value from that array. Here’s a better version which doesn’t require the variable “n”.

```auto

curPos = wheel_mc._rotation/360;
curPos -= Math.floor(curPos); // this gets it to 0-1
curChoice = myArray[Math.floor(curPos*myArray.length)];

```
