Graphical Roulette With Obniz

Introduction: Graphical Roulette With Obniz

About: DIY electronics, javascript, IoT, obniz, programming, raspberrypi, arduino

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!

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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

Game Life Contest

Participated in the
Game Life Contest

Be the First to Share

    Recommendations

    • Trash to Treasure Contest

      Trash to Treasure Contest
    • Raspberry Pi Contest 2020

      Raspberry Pi Contest 2020
    • Wearables Contest

      Wearables Contest

    Discussions