# Graphical Roulette With Obniz

207

1

I have made a graphical roulette. If you press the button, the roulette starts rotating. If you press again, the roulette stops rotating and beeps!

## Step 1: Circuit

We use only a wired speaker and a button.

The pin numbers of wired are written on the program.

`<p>button = obniz.wired("Button", {signal:6 , gnd:7 });<br>speaker = obniz.wired("Speaker", {signal:0 , gnd: 1});</p>`

## Step 2: Rotate Rulette Image

In HTML, you can use "CSS transform". For example, this is the code of rotate image 90 degree.

`document.getElementById("roulette").style = "transform:rotate(90deg);";`

To start and stop rotate slowly, add a var speed for rotate degree per frame.

```let speed = 0;  let deg = 0;
function rotate(){
deg += speed;
document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";  }
setInterval(rotate,10);```

## Step 3: Beep

Do you want to beep on the roulette no change? With this, you can beep on 440Hz 10ms.

```<p>speaker.play(440);<br>      await obniz.wait(10);
speaker.stop();</p>```

This is how to know on change of roulette no.

```<p>if( Math.floor((deg + speed) / (360/7.0)) -  Math.floor(deg / (360/7.0)) >= 1){<br>      onRouletteChange();
}</p>```

So, this is the code of rotate and beep.

```<p>let speed = 0;<br>  let deg = 0;
function rotate(){
//on change value
if( Math.floor((deg + speed) / (360/7.0)) -  Math.floor(deg / (360/7.0)) >= 1){
onRouletteChange();
}
deg += speed;
document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";</p><p>  }
setInterval(rotate,10);</p><p>  async function onRouletteChange(){
if(!speaker){return;}
speaker.play(440);
await obniz.wait(10);
speaker.stop();
}</p>```

## Step 4: Start on Button Pushed.

To know button state, add var buttonStateand set value of current button state.

```<p>button.onchange = function(pressed){<br>    buttonState = pressed;
};</p>```

And also add var phase for current state of roulette.
phase is setted one of this.

```<p>const PHASE_WAIT_FOR_START = 0; <br>const PHASE_ROTATE = 1;
const PHASE_STOPPING = 2;
const PHASE_STOPPED = 3;</p>```

For example, when phase is PHASE_WAIT_FOR_START and you want to next phase.

```<p>if(phase == PHASE_WAIT_FOR_START){<br>    speed = 0;
if(buttonState){
phase = PHASE_ROTATE;
}
}</p>```

To speed up rulette, change var speed .

```<p>if(phase == PHASE_ROTATE){<br>    speed = speed+0.5;
}</p>```

To speed down rulette, change var speed .

:

```<p>if(phase == PHASE_STOPPING){    <br>    speed = speed-0.2;
}</p>```

Those are component of roulette. Let's make it!

## Step 5: Program

Please refer here for the program