Use of accelerometer to detect shake, then activate Slot Machine

Question

so i'm trying to implement the use of shake to activate the spinning of the slot machine. And the slot machine stops when the user stops shaking.

I'm currently using this slot machine code:http://odhyan.com/slot/.

I understand that I've got to use an accelerometer, any idea how i should get started. Or where I should implement the code. Any advice given is deeply appreciated.

Thanks:)

So is this for Android? I see the `Java` tag, but you also have `html` there. Is this a mobile based website that uses accelerometer through something like an HTML5 API? — zero298, Apr 10 '14 at 14:29
This slot is made with Javascript, not with Java (thet're two different things). Choose what kind of application you want develop, if it's on android you may check http://www.techrepublic.com/blog/software-engineer/a-quick-tutorial-on-coding-androids-accelerometer/472/ — Max Markson, Apr 10 '14 at 14:29
Consider looking at this question if it is actually for HTML/JS: [Detect Shaking HTML5 Mobile](http://stackoverflow.com/q/12334160/691711) — zero298, Apr 10 '14 at 14:30
I've got it working on a website now. Ideally it will be working on an ipad or iphone when the user visit the website. So what should i look at?? It is not really an app. — user3453264, Apr 10 '14 at 14:41
@zero298 yes it's a mobile based website, so i'll check out that link u gave. thanks — user3453264, Apr 10 '14 at 14:41

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Here is a small sample that I whipped up to show some tilt recognition. It doesn't have a slot machine built into it, but it should be very easy to add. It works in Chrome, and works on Chrome for iOS, not sure about the others.

`jsFiddle`

HTML

The HTML is very simple and only included to give a visual representation of result. It's just a nested set of <div>s. One to help with perspective and another to show that actual orientation.

<!--Perspective div-->
<div id="container">
   <!--Actual oriented div-->
   <div id="orienter">Accelerometer</div>
</div>

CSS

The CSS is also just to help visualize. -webkit-perspective gives us some foreshortening and the other classes are just for show. .tilt is the style for when we are tilted.

/*Perspective helps us see the rotation*/
div#container{
   -webkit-perspective: 500px;
}
div#orienter{
   text-align: center;
   width: 10em;
   background-color: lightcoral;
   font-family: Arial;
   font-size: 2em;
   padding: 2em;
   margin-top: 2em;
   margin-left: auto;
   margin-right: auto;
}
div#orienter.tilt{
   background-color: red;
}

JS

The JS is the actual bread and butter section. The core idea is that we have an interval that checks the current orientation against the previous orientation and if the magnitude of the difference between the two orientations is larger than a threshold that we set, we register that as a tilt and call tiltHanlder()

tiltTime and tiltThreshold are the configurable parameters in that you register a tilt if the change in orientation is more than x rot units per y time units. I don't know if rotational units are standardized between browser implementations so a rotation that is only 1 unit on Chrome might be 100 units in Firefox.

// Check for device orientation support
if (window.DeviceOrientationEvent) {
   var
           // The Orientation when we last checked for tilt
           lastOrientation,
           // The current Orientation
           currentOrientation,
           // How often we check for a tilt
           tiltTime = 100,
           // How much we must rotate to tilt
           tiltThreshold = 100,
           // The div that shows the rotation
           odiv = document.getElementById("orienter"),
           // The interval that updates the tilt
           tiltInterval = setInterval(tiltCheck, tiltTime);

   // Class to hold orientation information
   function Orientation(x, y, z) {
      this.x = x || 0;
      this.y = y || 0;
      this.z = z || 0;
   }
   // Member to get difference between two Orientations
   Orientation.prototype.diff = function(o) {
      return new Orientation(
              this.x - o.x,
              this.y - o.y,
              this.z - o.z);
   };
   // Member to find magnitude of Orientation
   Orientation.prototype.mag = function() {
      return Math.sqrt(
              (this.x * this.x) +
              (this.y * this.y) +
              (this.z * this.z));
   };

   // Function to handle when titled
   function tiltHandler() {
      console.log("tilt");
      // Visualize the tilt
      odiv.className = "tilt";
      // Reset after a time
      setTimeout(function() {
         odiv.className = "";
      }, 2000);
   }

   // The function that checks for tilts
   function tiltCheck() {
      // If we have an orientation to compare to
      if (lastOrientation) {
         // Get how much we rotated
         var mag = currentOrientation.diff(lastOrientation).mag();
         // If it's more than the threshold
         if (mag > tiltThreshold) {
            // We tilted
            tiltHandler();
         }
      }
      // Always update the last orientation
      lastOrientation = currentOrientation;
   }

   // Add an orientation listener
   window.addEventListener("deviceorientation", function(e) {
      // Set the current orientation to the device orientation
      currentOrientation = new Orientation(e.beta, e.gamma, e.alpha);
      // Keep our div parralel to the floor (browser specific)
      odiv.style.webkitTransform =
              "rotateX(" + (currentOrientation.x) + "deg) " +
              "rotateY(" + (-currentOrientation.y) + "deg) " +
              "rotateZ(" + (currentOrientation.z) + "deg)";
   });
}

You can test this stuff in Chrome using the emulation panel in the dev tools:

F12 -> ESC -> Emulation Tab -> Sensors

thank you. i'll take a look at it, and try to combine with the slot machine, if i've got any more qns. i'll ask you. Thanks again:) — user3453264, Apr 10 '14 at 18:54

Use of accelerometer to detect shake, then activate Slot Machine

1 Answers1

jsFiddle

`jsFiddle`