Browse files

Merge pull request #3 from humphd/master

Updates to processing-mobile.js
  • Loading branch information...
2 parents 7959b35 + 6b87013 commit 479579dc847ca3a89bfe92a549a87816720890fe @jbuck jbuck committed Oct 25, 2011
Showing with 150 additions and 21 deletions.
  1. +6 −2 examples/processing-mobile/index.html
  2. +144 −19 processing-mobile.js
View
8 examples/processing-mobile/index.html
@@ -23,12 +23,16 @@
size(500, 500);
}
+ void locationChanged() {
+ println(coords.latitude);
+ }
+
void draw() {
background(51);
// Remap axis value to something within the sketch bounds
- x = map(motionX, -1.0, 1.0, 0, width);
- y = map(motionY, -1.0, 1.0, 0, height);
+ x = map(acceleration.x, -1.0, 1.0, 0, width);
+ y = map(acceleration.y, -1.0, 1.0, 0, height);
ellipse(x, y, 10, 10);
View
163 processing-mobile.js
@@ -1,31 +1,156 @@
-(function(Processing, window) {
+/**
+ * Processing.Mobile Library for Processing.js
+ *
+ * This library adds a number of mobile device related APIs to Processing.
+ * These are non-standard, and are done in this library only for demonstration
+ * purposes.
+ *
+ * Additional Processing APIs:
+ *
+ * orientation: (object) device tilt information in degrees along x, y, z
+ * alpha: the direction the device is facing according to the compass
+ * beta: the angle in degrees the device is tilted front-to-back
+ * gamma the angle in degrees the device is tilted left-to-right.
+ *
+ * acceleration: (object) acceleration data for device along x, y, and z axes:
+ * x: (float) device acceleration in m/s^2 along the X axis (-1.0 to 1.0)
+ * y: (float) device acceleration in m/s^2 along the Y axis (-1.0 to 1.0)
+ * z: (float) device acceleration in m/s^2 along the Z axis (-1.0 to 1.0)
+ *
+ * coords: (object) geolocation data for the device, obtained at the start of the
+ * program (i.e., not updated during the lifetime of the program). The
+ * properties of coords incude:
+ *
+ * latitude: (float) current latitude in decimal degrees (or 0 if unknown)
+ * longitude: (float) current longitude in decimal degrees (or 0 if unknown)
+ * altitude: (float) current height in meters above the ellipsoid (or 0 if unknown)
+ * accuracy: (float) accuracy in meters of longitude and latitude
+ * altitudeAccuracy: (float) accurace of the altitude value in meters (or 0 if unknown)
+ * heading: (float) direction of travel, specified in degrees 0-360 (or -1 if unknown)
+ * speed: (float) speed in meters per second (or -1 if unknown)
+ *
+ * Updates for coords are available when the locationChanged() callback is fired.
+ *
+ * Additional Reading:
+ * http://www.html5rocks.com/en/tutorials/device/orientation/
+ * dev.w3.org/geo/api/spec-source.html
+ **/
- // If we don't have support for devicemotion events, use 0 for these.
- var motionX = 0,
- motionY = 0,
- motionZ = 0;
+(function(Processing, window, navigator) {
+
+ // Cache Processing ctor
+ var P5 = Processing,
+ Pp = Processing.prototype;
+
+ var mobile = {
+ // If we don't have support for devicemotion events, use 0 for these.
+ acceleration: {
+ x: 0,
+ y: 0,
+ z: 0
+ },
+
+ // Defaults for geolocation data
+ coords: {
+ latitude: 0,
+ longitude: 0,
+ accuracy: 0,
+ altitude: 0,
+ altitudeAccuracy: 0,
+ heading: -1,
+ speed: -1
+ },
+
+ // Defaults for orientation data
+ orientation: {
+ alpha: 0,
+ beta: 0,
+ gamma: 0
+ }
+ };
+
+ function attachLocationCallback(p) {
+ // Start a geolocation watch timeout if a locationChanged callback is provided.
+ if (p.locationChanged &&
+ typeof p.locationChanged === "function" &&
+ navigator.geolocation) {
+
+ navigator.geolocation.watchPosition(
+ function success(position) {
+ var posCoords = position.coords,
+ mCoords = mobile.coords;
+
+ mCoords.latitude = posCoords.latitude;
+ mCoords.longitude = posCoords.longitude;
+ mCoords.altitude = posCoords.altitude || 0; // can be null,
+ mCoords.accuracy = posCoords.accuracy;
+ mCoords.altitudeAccuracy = posCoords.altitudeAccuracy || 0; // can be null
+ mCoords.heading = posCoords.heading || -1; // can be null
+ mCoords.speed = posCoords.speed || -1; // can be null
+
+ p.locationChanged();
+ },
+ function error(e) {
+ // Ignore and use defaults already set for coords
+ console.log('Unable to get geolocation position data: ' + e);
+ }
+ );
+ }
+ }
+
+ // Extend Processing with locationChanged() callback logic.
+ window.Processing = function() {
+ var p5 = P5.apply(this, arguments);
+ attachLocationCallback(p5);
+ return p5;
+ };
+ window.Processing.prototype = Pp;
+
+ // Copy static properties onto new Processing
+ for (var prop in P5) {
+ if (!P5.hasOwnProperty(prop)) {
+ continue;
+ }
+ window.Processing[prop] = P5[prop];
+ }
+
+ // Extend any existing Processing instances with location callback, too.
+ document.addEventListener('DOMContentLoaded', function() {
+ Processing.instances.forEach(function(instance) {
+ attachLocationCallback(instance);
+ });
+ }, false);
window.addEventListener('devicemotion', function(event) {
- var acceleration = event.acceleration || event.accelerationIncludingGravity;
+ var acceleration = event.acceleration || event.accelerationIncludingGravity,
+ mAcceleration = mobile.acceleration;
// Values are in m/s^2
- motionX = acceleration.x;
- motionY = acceleration.y;
- motionZ = acceleration.z;
+ mAcceleration.x = acceleration.x;
+ mAcceleration.y = acceleration.y;
+ mAcceleration.z = acceleration.z;
}, false);
- var Pp = Processing.prototype;
+ function orientationhandler(evt) {
+ // For FF3.6+
+ if (!evt.gamma && !evt.beta) {
+ evt.gamma = -(evt.x * (180 / Math.PI));
+ evt.beta = -(evt.y * (180 / Math.PI));
+ }
- Pp.__defineGetter__('motionX', function() {
- return motionX;
- });
+ var mOrientation = mobile.orientation;
+ mOrientation.alpha = evt.alpha;
+ mOrientation.beta = evt.beta;
+ mOrientation.gamma = evt.gamma;
+ }
- Pp.__defineGetter__('motionY', function() {
- return motionY;
- });
+ window.addEventListener('deviceorientation', orientationhandler, false);
+ window.addEventListener('MozOrientation', orientationhandler, false);
- Pp.__defineGetter__('motionZ', function() {
- return motionZ;
+ ['orientation', 'acceleration', 'coords'].forEach(function(objName) {
+ Pp.__defineGetter__(objName, function() {
+ return mobile[objName];
+ });
});
-}(Processing, window));
+}(Processing, window, window.navigator));

0 comments on commit 479579d

Please sign in to comment.