Add compass support to Processing Mobile for iOS5 devices with a compass

examples/processing-mobile/index.html

@@ -18,6 +18,8 @@ <h2>Device Motion Events in Processing.js for X and Y</h2>
     // DeviceMotion events, 0 is used for all three.
 
     int x, y;
+    float lastTheta = 0;
+    float easing = 0.1;
 
     void setup() {
       size(500, 500);
@@ -36,6 +38,23 @@ <h2>Device Motion Events in Processing.js for X and Y</h2>
 
       ellipse(x, y, 10, 10);
 
+      // Only show the compass if the device supports one
+      if (orientation.compassHeading >= 0 && orientation.compassAccuracy >= 0) {
+        // Ease the previous heading to the current heading
+        float theta = orientation.compassHeading;
+        float dtheta = theta - lastTheta;
+        if (abs(dtheta) < 180) {
+          lastTheta += dtheta * easing;
+        } else {
+          lastTheta = theta;
+        }
+
+        // Convert degree heading to an x/y co-ordinate;
+        int compassX = 100 * sin(radians(lastTheta));
+        int compassY = 100 * cos(radians(lastTheta));
+        ellipse(width/2 - compassX, height/2 - compassY, 20, 20);
+      }
+
 //      println(motionX + ', ' + motionY + ', ' + motionZ);
     }
   </script>

processing-mobile.js

@@ -65,7 +65,9 @@
     orientation: {
       alpha: 0,
       beta: 0,
-      gamma: 0
+      gamma: 0,
+      compassAccuracy: -1,
+      compassHeading: -1,
     }
   };
 
@@ -142,6 +144,8 @@
     mOrientation.alpha = evt.alpha;
     mOrientation.beta = evt.beta;
     mOrientation.gamma = evt.gamma;
+    mOrientation.compassAccuracy = evt.webkitCompassAccuracy ? evt.webkitCompassAccuracy : -1;
+    mOrientation.compassHeading = evt.webkitCompassHeading ? evt.webkitCompassHeading + window.orientation : -1;
   }
 
   window.addEventListener('deviceorientation',  orientationhandler, false);