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);