{"action":"created","issue":{"url":"https://api.github.com/repos/processing/p5.js/issues/984","labels_url":"https://api.github.com/repos/processing/p5.js/issues/984/labels{/name}","comments_url":"https://api.github.com/repos/processing/p5.js/issues/984/comments","events_url":"https://api.github.com/repos/processing/p5.js/issues/984/events","html_url":"https://github.com/processing/p5.js/issues/984","id":109959079,"number":984,"title":"deviceMoved in 0.4.14 might be against the reference or the reference should be changed.","user":{"login":"KouichiMatsuda","id":14014568,"avatar_url":"https://avatars.githubusercontent.com/u/14014568?v=3","gravatar_id":"","url":"https://api.github.com/users/KouichiMatsuda","html_url":"https://github.com/KouichiMatsuda","followers_url":"https://api.github.com/users/KouichiMatsuda/followers","following_url":"https://api.github.com/users/KouichiMatsuda/following{/other_user}","gists_url":"https://api.github.com/users/KouichiMatsuda/gists{/gist_id}","starred_url":"https://api.github.com/users/KouichiMatsuda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/KouichiMatsuda/subscriptions","organizations_url":"https://api.github.com/users/KouichiMatsuda/orgs","repos_url":"https://api.github.com/users/KouichiMatsuda/repos","events_url":"https://api.github.com/users/KouichiMatsuda/events{/privacy}","received_events_url":"https://api.github.com/users/KouichiMatsuda/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-10-06T08:28:40Z","updated_at":"2015-10-08T07:55:42Z","closed_at":null,"body":"Thanks to the latest implementation, rotationXYZ works well. \r\nHowever, the implementation of deviceMoved() might be against the reference or are you going to change the reference?\r\n\r\nThe comments in the code and the reference says as follows:\r\n```javascript\r\n/**\r\n * The deviceMoved() function is called when the devices orientation changes\r\n * by more than the threshold value.\r\n```\r\nHowever, the implementation of deviceMoved() is called when the device orientation changes but it's **also called** when the device orientation **doesn't change** AND the device **moves along** with x, y, or z axis. \r\n\r\nI think one solution is to rewrite the reference as follows:\r\n\"The deviceMoved() function is called when the devices **move** by more than the threshold value.\"\r\n\r\nI think this might be a good idea but in this case one bad news is that deviceShaken() might provide almost same behavior as that of deviceMoved (I'll describe this later).\r\n\r\nYou can use the following code to check \"deviceMoved() is called when the orientation **doesn't** change\". After loading it, when you move the device along with x, y, or z axis, the ball moves. For instance, you put your phone on a desk and hit its top side by a finger. The ball moves even if the phone **orientation** doesn't change.\r\n\r\n```javascript\r\n// DeviceMoved\r\nvar x, y;\r\n\r\nfunction setup() {\r\n  devicePixelScaling(false);\r\n  createCanvas(windowWidth, windowHeight);\r\n  x = width / 2; y = height / 2; // center position\r\n  fill(\"red\");\r\n}\r\n\r\nfunction draw() {\r\n\r\n}\r\n\r\nfunction deviceMoved(){\r\n  x += rotationY; // Moves to X\r\n  y += rotationX; // Moved to Y\r\n  ellipse(x, y, 80, 80); // Draw a ball\r\n}\r\n```\r\n\r\nThis is because the code for deviceMoved() in p5.js might do that:\r\n\r\n```javascript\r\np5.prototype._ondeviceorientation = function (e) {\r\n  this._setProperty('rotationX', e.beta);\r\n  this._setProperty('rotationY', e.gamma);\r\n  this._setProperty('rotationZ', e.alpha);\r\n  this._handleMotion();\r\n};\r\np5.prototype._ondevicemotion = function (e) {\r\n  this._setProperty('accelerationX', e.acceleration.x * 2);\r\n  this._setProperty('accelerationY', e.acceleration.y * 2);\r\n  this._setProperty('accelerationZ', e.acceleration.z * 2);\r\n  this._handleMotion();\r\n};\r\np5.prototype._handleMotion = function() {\r\n             ... snip\r\n  var deviceMoved = this.deviceMoved || window.deviceMoved;\r\n  if (typeof deviceMoved === 'function') {\r\n    if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold ||\r\n      Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold ||\r\n      Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold) {\r\n      deviceMoved();\r\n    }\r\n  }\r\n  var deviceTurned = this.deviceTurned || window.deviceTurned;\r\n          ... snip\r\n```\r\nThe code in _handleMotion (deviceMoved part) still checks accelerationXYZ **not** rotationXYZ. This might cause the  \"deviceMoved() is called when the orientation **doesn't** change.\" \r\n\r\nI think rewriting the reference as I did might be a good idea but, in this case, deviceShaken() provides almost same behavior. You can use deviceShaken() as \"deviceMoved\" by just adding  \"setShakeThreshold(0.5);\" in setup(). The 0.5 is the  default threshold value for deviveMoved(). The following is the sample code. This program can roll a boll by rotating your phone even if you don't \"shake\" it. This behavior might be almost same as deviceMoved(). \r\n\r\n```javascript\r\n// DeviceShaken\r\nvar x, y;\r\n\r\nfunction setup() {\r\n  devicePixelScaling(false);\r\n  createCanvas(windowWidth, windowHeight);\r\n  x = width / 2; y = height / 2; // center position\r\n  fill(\"red\");\r\n  setShakeThreshold(0.5);  // *** Please note that this line is added \r\n}\r\n\r\nfunction draw() {\r\n\r\n}\r\n\r\nfunction deviceShaken(){ // *** Please note that the function name is changed ***\r\n  x += rotationY; // Moves to X\r\n  y += rotationX; // Moved to Y\r\n  ellipse(x, y, 80, 80); // Draw a ball\r\n}\r\n```\r\nThis is because the code of deviceMoved() and deviceShake() is almost same.\r\n```javascript\r\np5.prototype._handleMotion = function() {\r\n             ... snip\r\n  var deviceMoved = this.deviceMoved || window.deviceMoved;\r\n  if (typeof deviceMoved === 'function') {\r\n    if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold ||\r\n      Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold ||\r\n      Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold) {\r\n      deviceMoved();\r\n    }\r\n  }\r\n             ... snip\r\n  var deviceShaken = this.deviceShaken || window.deviceShaken;\r\n  if (typeof deviceShaken === 'function') {\r\n    var accelerationChangeX;\r\n    var accelerationChangeY;\r\n    // Add accelerationChangeZ if acceleration change on Z is needed\r\n    if (this.pAccelerationX !== null) {\r\n      accelerationChangeX = Math.abs(this.accelerationX - this.pAccelerationX);\r\n      accelerationChangeY = Math.abs(this.accelerationY - this.pAccelerationY);\r\n    }\r\n    if (accelerationChangeX + accelerationChangeY > shake_threshold) {\r\n      deviceShaken();\r\n    }\r\n```\r\nIn this code, if \"move_thresthold\" and \"shake_threshold\" hold the same value, such as 0.5, both the condition statements return **true** in most cases.\r\n```javascript\r\nIn deviceMoved,\r\n     if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold\r\nIn deviceShaken,\r\n     if (accelerationChangeX + accelerationChangeY > shake_threshold\r\n```\r\n\r\nI think that this type of \"rotation\" behavior could be a kind of \"shaken\" behavior (unfortunately I'm not a native speaker. I might be incorrect). So I think there might be two solutions:\r\n\r\n1. Rewriting the reference to change \"devices orientation changes\" to \"devices move\"\r\n2. Rewriting the code for deiviceMoved() by using rotationXYZ.\r\n\r\nI think Solution 1 might not be so bad idea if you can ignore that deviceMoved() and deviceShaken() have a similar meaning. Also, it might be difficult to distill only \"shaken behaviors\" from those of users by phone.\r\n\r\nThank you for your reading my long report.\r\n \r\nRegards,"},"comment":{"url":"https://api.github.com/repos/processing/p5.js/issues/comments/146448784","html_url":"https://github.com/processing/p5.js/issues/984#issuecomment-146448784","issue_url":"https://api.github.com/repos/processing/p5.js/issues/984","id":146448784,"user":{"login":"KouichiMatsuda","id":14014568,"avatar_url":"https://avatars.githubusercontent.com/u/14014568?v=3","gravatar_id":"","url":"https://api.github.com/users/KouichiMatsuda","html_url":"https://github.com/KouichiMatsuda","followers_url":"https://api.github.com/users/KouichiMatsuda/followers","following_url":"https://api.github.com/users/KouichiMatsuda/following{/other_user}","gists_url":"https://api.github.com/users/KouichiMatsuda/gists{/gist_id}","starred_url":"https://api.github.com/users/KouichiMatsuda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/KouichiMatsuda/subscriptions","organizations_url":"https://api.github.com/users/KouichiMatsuda/orgs","repos_url":"https://api.github.com/users/KouichiMatsuda/repos","events_url":"https://api.github.com/users/KouichiMatsuda/events{/privacy}","received_events_url":"https://api.github.com/users/KouichiMatsuda/received_events","type":"User","site_admin":false},"created_at":"2015-10-08T07:55:42Z","updated_at":"2015-10-08T07:55:42Z","body":"Sorry, my post was a little bit confusing.\r\n \r\nThe current implementation deviceMoved() is called by two type of phone's movement.\r\n(1) translation along with x, y, or z axis\r\n(2) rotation around x, y, z axis.\r\n \r\nMy point is how move_threshold behaves among multiple devices. The move_threshold equally works in (1) among multiple devices. However it might not equally work in (2) among them.\r\n \r\nThis is because a rotational acceleration (not \"angular\" acceleration) changes depending on its radius of rotation. For instance, if you rotates a device by 60 degrees, the acceleration generated by a tablet whose width is 18cm (radius is 9cm?) might be larger than of phone whose width is 6 cm(radisu is 3cm?). \r\n\r\nIn addition, the location of accelerometer on a device might be varied among devices. For instance, iPad mounts the sensor on its right-side, not in its center. Its location would also  affect the acceleration. The case where it is mounted on the center of a device causes different results than the case mounted on the right-side of a device in rotating a device in a same degree . \r\n \r\nThis means that if you specify a value in move_threshold, when deviceMoved() is called might be varied from device to device in rotating them.  In a single device, move_threshold would work well as a programmer expects but the same move_threshold value might works differently in multiple devices (lower value works well but higher value might case this issue).\r\n \r\nThe current implementation might cause a single application behaves differently in multiple devices.\r\n \r\nSo I think it might be OK to ignore issue on (2), i.e. a meaning of move_threshold is device-size-dependent, because it's often cases that a programmer wants to know when a device is moved.\r\n \r\nIn such a sense, the following my solution 1.2 was incorrect. The first condition statement could easily override the second one. So the second condition does not make sense in case of using it with accelerationXYZ.\r\n \r\n````JavaScript\r\n  var deviceMoved = this.deviceMoved || window.deviceMoved;\r\n  if (typeof deviceMoved === 'function') {\r\n    if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold || // *** 1st condition\r\n      Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold ||\r\n      Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold) {\r\n      deviceMoved();\r\n    }\r\n    if (Math.abs(this.rotationX - this.pRotationX) > rotate_threshold || // ** 2nd condition\r\n      Math.abs(this.rotationY - this.pRotationY) > rotate_threshold ||\r\n      Math.abs(this.rotationZ - this.pRotationZ) > rotate_threshold) {\r\n      deviceMoved();\r\n  }\r\n````\r\n \r\nIf you are interested in a system function which can provide a fine control on a device's rotation movement. You can provide devideRotated() or deviceTiled() and a system variable rotate_threshold or tilt_threshold. As you can imagine, the code is something like the following.\r\n \r\n````JavaScript\r\n  var deviceRotated = this.deviceRotated || window.deviceRotated;\r\n  if (typeof deviceRotated === 'function') {\r\n    if (Math.abs(this.rotationX - this.pRotationX) > rotate_threshold ||\r\n      Math.abs(this.rotationY - this.pRotationY) > rotate_threshold ||\r\n      Math.abs(this.rotationZ - this.pRotationZ) > rotate_threshold) {\r\n      deviceRotated();\r\n  }\r\n````\r\n \r\nIn this case, rotate_threshold equally works among multiple devices, even if the size of a device is different.\r\n\r\nRegards,\r\n"}}