diff --git a/examples/processing-mobile/index.html b/examples/processing-mobile/index.html
index 3fe8386..51be25c 100644
--- a/examples/processing-mobile/index.html
+++ b/examples/processing-mobile/index.html
@@ -18,6 +18,8 @@
Device Motion Events in Processing.js for X and Y
// 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 @@ Device Motion Events in Processing.js for X and Y
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);
}
diff --git a/processing-mobile.js b/processing-mobile.js
index 3d1bbe5..a5716ca 100644
--- a/processing-mobile.js
+++ b/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);