Try it out

• http://dougellison.github.io/example
• 

Wait it didn't work for me!!! Or I only have a laptop

• Laptop / Didn't work normally: http://dougellison.github.io/example?laptop=true
• 

JavaScript Eventing

• DeviceMotion
• DeviceOrientation

DeviceMotion

• Acceleration
• AccelerationIncludingGravity
• Measured in meters per second squared (m/s^2)
• The x-axis runs side-to-side
• The y-axis runs front-to-back
• The z-axis comes straight up out of the mobile phone screen

DeviceOrientation

• Measured in degrees 0 - 360
• Lay phone flat with top pointing away from you
• Point top of phone directly north
• The x-axis (alpha) increases as you rotate to the right
• The y-axis (beta) increases as you tilt up towards you
• The z-axis (gamma) increases as you tilt side to side

Why use DeviceMotion

• More generally supported

Why use DeviceOrientation

• Doesn't need calibration
• Data returned is more useful
• Can be used to "understand" how device is being held

Crash Course Mobile Development

• No debug on the phone
• Caching problems (add unique URL)
• Remote-Tilt.com
• chrome --disable-web-security
• GitHub gh-pages

Crash Course Cont...

• Device Support
• Browser Support

Cool Code

                        
if ($scope.startTime.isBefore(moment()) || $scope.xTilt.length > 300) {
    var biggest = {val : 0, tilt : ''};

    var endValues = {x: $scope.xTilt[$scope.xTilt.length -1],
    y: $scope.yTilt[$scope.yTilt.length -1],
    z: $scope.zTilt[$scope.zTilt.length -1]};


    $scope.xTilt = $filter('orderBy')($scope.xTilt, function(num){return num}, true);
    $scope.yTilt = $filter('orderBy')($scope.yTilt, function(num){return num}, true);
    $scope.zTilt = $filter('orderBy')($scope.zTilt, function(num){return num}, true);

    // Arrays are now sorted.  Need to see what has the biggest difference.
    biggest.val = $scope.xTilt[0] - $scope.xTilt[$scope.xTilt.length -1];
    biggest.tilt = 'x';
    biggest.endVal = endValues.x;

    if ($scope.yTilt[0] - $scope.yTilt[$scope.yTilt.length -1] > biggest.val) {
        biggest.tilt = 'y';
        biggest.val = $scope.yTilt[0] - $scope.yTilt[$scope.yTilt.length -1];
        biggest.endVal = endValues.y;
    }

    if ($scope.zTilt[0] - $scope.zTilt[$scope.zTilt.length -1] > biggest.val) {
        biggest.tilt = 'z';
        biggest.val = $scope.zTilt[0] - $scope.zTilt[$scope.zTilt.length -1];
        biggest.endVal = endValues.z;
    }

    $scope.biggestTilt[$scope.gameState] = biggest.tilt;
    // Do Calculations here
    $scope.xTilt.length = 0
    $scope.yTilt.length = 0
    $scope.zTilt.length = 0
}
                        
                    

Cool Code Cont.

                           
    $scope.biggestTilt[$scope.gameState] = biggest;
    delete $scope.startTime;
    if ($scope.gameState == 'tiltDown') {
        $scope.gameState = 'tiltCalibrationCompleted';
        window.removeEventListener('devicemotion', $scope.recordTilt, false);
        console.log($scope.biggestTilt);
    }
    else {
        $scope.gameState = $scope.tiltOrder[$scope.tiltCount + 1];
        $scope.tiltCount++;
    }


                        

Cool Code Cont.

                            
var raycaster =
        new THREE.Raycaster( $scope.playerSphere.position, new THREE.Vector3(0,0,-1));
var intersects = raycaster.intersectObjects(planes, false);
if (intersects.length > 0) {
    for (var i = 0; i < intersects.length; i++) {
        if (currentPlaneName != intersects[i].object.name) {
            if (intersects[i].object.isActive) {
                $scope.resetPlane(intersects[i].object);
            }
            else {
                intersects[i].object.isActive = true;
                intersects[i].object.material =
                        new THREE.MeshPhongMaterial( { map: tileTextureActivated } )
                $scope.checkForWin();
            }
            currentPlaneName = intersects[i].object.name;
        }
    }
}
else {
    if (frameCount > 2 && frameCount != NaN) {
        $scope.$apply(function() {
            $scope.gameSettings.gameStatus = "lost";
        })
    }
}
$scope.renderer.render( $scope.scene, $scope.camera );