From e8f9867775613aefa6f45512212c3c36bf93e2e0 Mon Sep 17 00:00:00 2001 From: SlightlyEpic <42976178+SlightlyEpic@users.noreply.github.com> Date: Sat, 25 Nov 2023 10:50:06 +0530 Subject: [PATCH 1/6] Fix casing of constants.radians --- src/events/acceleration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/events/acceleration.js b/src/events/acceleration.js index 01c3d294f8..3fea84e354 100644 --- a/src/events/acceleration.js +++ b/src/events/acceleration.js @@ -619,7 +619,7 @@ p5.prototype.setShakeThreshold = function(val) { p5.prototype._ondeviceorientation = function(e) { this._updatePRotations(); - if (this._angleMode === constants.radians) { + if (this._angleMode === constants.RADIANS) { e.beta = e.beta * (_PI / 180.0); e.gamma = e.gamma * (_PI / 180.0); e.alpha = e.alpha * (_PI / 180.0); From b001a9d892fb70e841f648ca9b6cc66849f3575a Mon Sep 17 00:00:00 2001 From: SlightlyEpic <42976178+SlightlyEpic@users.noreply.github.com> Date: Sat, 25 Nov 2023 11:23:25 +0530 Subject: [PATCH 2/6] Fix rotation properties being set to incorrect values --- src/events/acceleration.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/events/acceleration.js b/src/events/acceleration.js index 3fea84e354..76ccd90ef8 100644 --- a/src/events/acceleration.js +++ b/src/events/acceleration.js @@ -619,14 +619,14 @@ p5.prototype.setShakeThreshold = function(val) { p5.prototype._ondeviceorientation = function(e) { this._updatePRotations(); + + let multiplier = 1; if (this._angleMode === constants.RADIANS) { - e.beta = e.beta * (_PI / 180.0); - e.gamma = e.gamma * (_PI / 180.0); - e.alpha = e.alpha * (_PI / 180.0); + multiplier = constants.PI / 180.0; } - this._setProperty('rotationX', e.beta); - this._setProperty('rotationY', e.gamma); - this._setProperty('rotationZ', e.alpha); + this._setProperty('rotationX', e.beta * multiplier); + this._setProperty('rotationY', e.gamma * multiplier); + this._setProperty('rotationZ', e.alpha * multiplier); this._handleMotion(); }; p5.prototype._ondevicemotion = function(e) { From 4d7017c6917a175f99932a091fb6095810fc1c5b Mon Sep 17 00:00:00 2001 From: SlightlyEpic <42976178+SlightlyEpic@users.noreply.github.com> Date: Sat, 25 Nov 2023 12:16:26 +0530 Subject: [PATCH 3/6] Change tests to expect radian values for rotation --- test/unit/events/acceleration.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/unit/events/acceleration.js b/test/unit/events/acceleration.js index fa94679e67..770f509b4e 100644 --- a/test/unit/events/acceleration.js +++ b/test/unit/events/acceleration.js @@ -75,15 +75,15 @@ suite('Acceleration Events', function() { suite('rotation', function() { test('rotationX should be 45', function() { window.dispatchEvent(deviceOrientationEvent1); - assert.strictEqual(myp5.rotationX, 45); + assert.strictEqual(myp5.rotationX, 45 * (Math.PI / 180.0)); }); test('rotationY should be 90', function() { window.dispatchEvent(deviceOrientationEvent1); - assert.strictEqual(myp5.rotationY, 90); + assert.strictEqual(myp5.rotationY, 90 * (Math.PI / 180.0)); }); test('rotationZ should be 10', function() { window.dispatchEvent(deviceOrientationEvent1); - assert.strictEqual(myp5.rotationZ, 10); + assert.strictEqual(myp5.rotationZ, 10 * (Math.PI / 180.0)); }); }); @@ -91,17 +91,17 @@ suite('Acceleration Events', function() { test('pRotationX should be 45', function() { window.dispatchEvent(deviceOrientationEvent1); window.dispatchEvent(deviceOrientationEvent2); - assert.strictEqual(myp5.pRotationX, 45); + assert.strictEqual(myp5.pRotationX, 45 * (Math.PI / 180.0)); }); test('pRotationY should be 90', function() { window.dispatchEvent(deviceOrientationEvent1); window.dispatchEvent(deviceOrientationEvent2); - assert.strictEqual(myp5.pRotationY, 90); + assert.strictEqual(myp5.pRotationY, 90 * (Math.PI / 180.0)); }); test('pRotationZ should be 10', function() { window.dispatchEvent(deviceOrientationEvent1); window.dispatchEvent(deviceOrientationEvent2); - assert.strictEqual(myp5.pRotationZ, 10); + assert.strictEqual(myp5.pRotationZ, 10 * (Math.PI / 180.0)); }); }); From 9d2bc289c15f19be7fefa9d0fe92face0a8b1c12 Mon Sep 17 00:00:00 2001 From: SlightlyEpic <42976178+SlightlyEpic@users.noreply.github.com> Date: Sat, 25 Nov 2023 14:06:02 +0530 Subject: [PATCH 4/6] Change _handleMotion logic to respect angleMode --- src/events/acceleration.js | 65 ++++++++++++++++++++++++++------------ src/math/trigonometry.js | 19 +++++++++++ 2 files changed, 63 insertions(+), 21 deletions(-) diff --git a/src/events/acceleration.js b/src/events/acceleration.js index 76ccd90ef8..5369964272 100644 --- a/src/events/acceleration.js +++ b/src/events/acceleration.js @@ -656,60 +656,83 @@ p5.prototype._handleMotion = function() { } if (typeof context.deviceTurned === 'function') { - // The angles given by rotationX etc is from range -180 to 180. - // The following will convert them to 0 to 360 for ease of calculation + // The angles given by rotationX etc is from range [-180 to 180] or [-PI to PI]. + // The following will convert them to [0 to 360] or [0 to 2*PI] for ease of calculation // of cases when the angles wrapped around. // _startAngleX will be converted back at the end and updated. - const wRX = this.rotationX + 180; - const wPRX = this.pRotationX + 180; - let wSAX = startAngleX + 180; - if ((wRX - wPRX > 0 && wRX - wPRX < 270) || wRX - wPRX < -270) { + + // This is multiplied to all constant rotation values used in calculations + // to make the equations agnostic to the angleMode + let rotationMultipler = 1; + if(this._angleMode === constants.RADIANS) { + rotationMultipler = constants.DEG_TO_RAD; + } + + const wRX = this.rotationX + (180 * rotationMultipler); + const wPRX = this.pRotationX + (180 * rotationMultipler); + let wSAX = startAngleX + (180 * rotationMultipler); + if ( + (wRX - wPRX > 0 && wRX - wPRX < (270 * rotationMultipler)) || + wRX - wPRX < (-270 * rotationMultipler) + ) { rotateDirectionX = 'clockwise'; - } else if (wRX - wPRX < 0 || wRX - wPRX > 270) { + } else if (wRX - wPRX < 0 || wRX - wPRX > (270 * rotationMultipler)) { rotateDirectionX = 'counter-clockwise'; } if (rotateDirectionX !== this.pRotateDirectionX) { wSAX = wRX; } - if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270) { + if ( + Math.abs(wRX - wSAX) > (90 * rotationMultipler) && + Math.abs(wRX - wSAX) < (270 * rotationMultipler) + ) { wSAX = wRX; this._setProperty('turnAxis', 'X'); context.deviceTurned(); } this.pRotateDirectionX = rotateDirectionX; - startAngleX = wSAX - 180; + startAngleX = wSAX - (180 * rotationMultipler); // Y-axis is identical to X-axis except for changing some names. - const wRY = this.rotationY + 180; - const wPRY = this.pRotationY + 180; - let wSAY = startAngleY + 180; - if ((wRY - wPRY > 0 && wRY - wPRY < 270) || wRY - wPRY < -270) { + const wRY = this.rotationY + (180 * rotationMultipler); + const wPRY = this.pRotationY + (180 * rotationMultipler); + let wSAY = startAngleY + (180 * rotationMultipler); + if ( + (wRY - wPRY > 0 && wRY - wPRY < (270 * rotationMultipler)) || + wRY - wPRY < (-270 * rotationMultipler) + ) { rotateDirectionY = 'clockwise'; - } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270) { + } else if ( + wRY - wPRY < 0 || + wRY - this.pRotationY > (270 * rotationMultipler) + ) { rotateDirectionY = 'counter-clockwise'; } if (rotateDirectionY !== this.pRotateDirectionY) { wSAY = wRY; } - if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270) { + if ( + Math.abs(wRY - wSAY) > (90 * rotationMultipler) && + Math.abs(wRY - wSAY) < (270 * rotationMultipler) + ) { wSAY = wRY; this._setProperty('turnAxis', 'Y'); context.deviceTurned(); } this.pRotateDirectionY = rotateDirectionY; - startAngleY = wSAY - 180; + startAngleY = wSAY - (180 * rotationMultipler); // Z-axis is already in the range 0 to 360 // so no conversion is needed. if ( (this.rotationZ - this.pRotationZ > 0 && - this.rotationZ - this.pRotationZ < 270) || - this.rotationZ - this.pRotationZ < -270 + this.rotationZ - this.pRotationZ < (270 * rotationMultipler)) || + this.rotationZ - this.pRotationZ < (-270 * rotationMultipler) ) { rotateDirectionZ = 'clockwise'; } else if ( this.rotationZ - this.pRotationZ < 0 || - this.rotationZ - this.pRotationZ > 270 + this.rotationZ - this.pRotationZ > (270 * rotationMultipler) ) { rotateDirectionZ = 'counter-clockwise'; } @@ -717,8 +740,8 @@ p5.prototype._handleMotion = function() { startAngleZ = this.rotationZ; } if ( - Math.abs(this.rotationZ - startAngleZ) > 90 && - Math.abs(this.rotationZ - startAngleZ) < 270 + Math.abs(this.rotationZ - startAngleZ) > (90 * rotationMultipler) && + Math.abs(this.rotationZ - startAngleZ) < (270 * rotationMultipler) ) { startAngleZ = this.rotationZ; this._setProperty('turnAxis', 'Z'); diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js index c22f0e4d80..963a77baaf 100644 --- a/src/math/trigonometry.js +++ b/src/math/trigonometry.js @@ -407,6 +407,25 @@ p5.prototype.angleMode = function(mode) { if (typeof mode === 'undefined') { return this._angleMode; } else if (mode === constants.DEGREES || mode === constants.RADIANS) { + const prevMode = this._angleMode; + + // No change + if(mode === prevMode) return; + + // Otherwise adjust pRotation according to new mode + // This is necessary for acceleration events to work properly + if(mode === constants.RADIANS) { + // Change pRotation to radians + this._setProperty('pRotationX', this.pRotationX * constants.DEG_TO_RAD); + this._setProperty('pRotationY', this.pRotationY * constants.DEG_TO_RAD); + this._setProperty('pRotationZ', this.pRotationZ * constants.DEG_TO_RAD); + } else { + // Change pRotation to degrees + this._setProperty('pRotationX', this.pRotationX * constants.RAD_TO_DEG); + this._setProperty('pRotationY', this.pRotationY * constants.RAD_TO_DEG); + this._setProperty('pRotationZ', this.pRotationZ * constants.RAD_TO_DEG); + } + this._angleMode = mode; } }; From ed00da68b53c109781408c0a29325ca3684bbcdd Mon Sep 17 00:00:00 2001 From: SlightlyEpic <42976178+SlightlyEpic@users.noreply.github.com> Date: Sun, 26 Nov 2023 22:20:19 +0530 Subject: [PATCH 5/6] Added _fromDegrees internal method --- src/math/trigonometry.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js index 963a77baaf..6454be9d29 100644 --- a/src/math/trigonometry.js +++ b/src/math/trigonometry.js @@ -475,4 +475,19 @@ p5.prototype._fromRadians = function(angle) { return angle; }; +/** + * converts angles from DEGREES into the current angleMode + * + * @method _fromDegrees + * @private + * @param {Number} angle + * @returns {Number} + */ +p5.prototype._fromDegrees = function(angle) { + if (this._angleMode === constants.RADIANS) { + return angle * constants.DEG_TO_RAD; + } + return angle; +}; + export default p5; From dc2f6b27cbf6c8d86122dfd45c54cdb3a98a2616 Mon Sep 17 00:00:00 2001 From: SlightlyEpic <42976178+SlightlyEpic@users.noreply.github.com> Date: Sun, 26 Nov 2023 22:21:35 +0530 Subject: [PATCH 6/6] Simplified implementation using internal methods --- src/events/acceleration.js | 86 ++++++++++++++------------------------ 1 file changed, 31 insertions(+), 55 deletions(-) diff --git a/src/events/acceleration.js b/src/events/acceleration.js index 5369964272..1ec500be21 100644 --- a/src/events/acceleration.js +++ b/src/events/acceleration.js @@ -7,7 +7,6 @@ */ import p5 from '../core/main'; -import * as constants from '../core/constants'; /** * The system variable deviceOrientation always contains the orientation of @@ -620,13 +619,10 @@ p5.prototype.setShakeThreshold = function(val) { p5.prototype._ondeviceorientation = function(e) { this._updatePRotations(); - let multiplier = 1; - if (this._angleMode === constants.RADIANS) { - multiplier = constants.PI / 180.0; - } - this._setProperty('rotationX', e.beta * multiplier); - this._setProperty('rotationY', e.gamma * multiplier); - this._setProperty('rotationZ', e.alpha * multiplier); + // Convert from degrees into current angle mode + this._setProperty('rotationX', this._fromDegrees(e.beta)); + this._setProperty('rotationY', this._fromDegrees(e.gamma)); + this._setProperty('rotationZ', this._fromDegrees(e.alpha)); this._handleMotion(); }; p5.prototype._ondevicemotion = function(e) { @@ -656,94 +652,74 @@ p5.prototype._handleMotion = function() { } if (typeof context.deviceTurned === 'function') { - // The angles given by rotationX etc is from range [-180 to 180] or [-PI to PI]. - // The following will convert them to [0 to 360] or [0 to 2*PI] for ease of calculation + // The angles given by rotationX etc is from range [-180 to 180]. + // The following will convert them to [0 to 360] for ease of calculation // of cases when the angles wrapped around. // _startAngleX will be converted back at the end and updated. - // This is multiplied to all constant rotation values used in calculations - // to make the equations agnostic to the angleMode - let rotationMultipler = 1; - if(this._angleMode === constants.RADIANS) { - rotationMultipler = constants.DEG_TO_RAD; - } - - const wRX = this.rotationX + (180 * rotationMultipler); - const wPRX = this.pRotationX + (180 * rotationMultipler); - let wSAX = startAngleX + (180 * rotationMultipler); - if ( - (wRX - wPRX > 0 && wRX - wPRX < (270 * rotationMultipler)) || - wRX - wPRX < (-270 * rotationMultipler) - ) { + // Rotations are converted to degrees and all calculations are done in degrees + const wRX = this._toDegrees(this.rotationX) + 180; + const wPRX = this._toDegrees(this.pRotationX) + 180; + let wSAX = startAngleX + 180; + if ((wRX - wPRX > 0 && wRX - wPRX < 270) || wRX - wPRX < -270) { rotateDirectionX = 'clockwise'; - } else if (wRX - wPRX < 0 || wRX - wPRX > (270 * rotationMultipler)) { + } else if (wRX - wPRX < 0 || wRX - wPRX > 270) { rotateDirectionX = 'counter-clockwise'; } if (rotateDirectionX !== this.pRotateDirectionX) { wSAX = wRX; } - if ( - Math.abs(wRX - wSAX) > (90 * rotationMultipler) && - Math.abs(wRX - wSAX) < (270 * rotationMultipler) - ) { + if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270) { wSAX = wRX; this._setProperty('turnAxis', 'X'); context.deviceTurned(); } this.pRotateDirectionX = rotateDirectionX; - startAngleX = wSAX - (180 * rotationMultipler); + startAngleX = wSAX - 180; // Y-axis is identical to X-axis except for changing some names. - const wRY = this.rotationY + (180 * rotationMultipler); - const wPRY = this.pRotationY + (180 * rotationMultipler); - let wSAY = startAngleY + (180 * rotationMultipler); - if ( - (wRY - wPRY > 0 && wRY - wPRY < (270 * rotationMultipler)) || - wRY - wPRY < (-270 * rotationMultipler) - ) { + const wRY = this._toDegrees(this.rotationY) + 180; + const wPRY = this._toDegrees(this.pRotationY) + 180; + let wSAY = startAngleY + 180; + if ((wRY - wPRY > 0 && wRY - wPRY < 270) || wRY - wPRY < -270) { rotateDirectionY = 'clockwise'; - } else if ( - wRY - wPRY < 0 || - wRY - this.pRotationY > (270 * rotationMultipler) - ) { + } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270) { rotateDirectionY = 'counter-clockwise'; } if (rotateDirectionY !== this.pRotateDirectionY) { wSAY = wRY; } - if ( - Math.abs(wRY - wSAY) > (90 * rotationMultipler) && - Math.abs(wRY - wSAY) < (270 * rotationMultipler) - ) { + if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270) { wSAY = wRY; this._setProperty('turnAxis', 'Y'); context.deviceTurned(); } this.pRotateDirectionY = rotateDirectionY; - startAngleY = wSAY - (180 * rotationMultipler); + startAngleY = wSAY - 180; // Z-axis is already in the range 0 to 360 // so no conversion is needed. + const rotZ = this._toDegrees(this.rotationZ); + const pRotZ = this._toDegrees(this.pRotationZ); if ( - (this.rotationZ - this.pRotationZ > 0 && - this.rotationZ - this.pRotationZ < (270 * rotationMultipler)) || - this.rotationZ - this.pRotationZ < (-270 * rotationMultipler) + (rotZ - pRotZ > 0 && rotZ - pRotZ < 270) || + rotZ - pRotZ < -270 ) { rotateDirectionZ = 'clockwise'; } else if ( - this.rotationZ - this.pRotationZ < 0 || - this.rotationZ - this.pRotationZ > (270 * rotationMultipler) + rotZ - pRotZ < 0 || + rotZ - pRotZ > 270 ) { rotateDirectionZ = 'counter-clockwise'; } if (rotateDirectionZ !== this.pRotateDirectionZ) { - startAngleZ = this.rotationZ; + startAngleZ = rotZ; } if ( - Math.abs(this.rotationZ - startAngleZ) > (90 * rotationMultipler) && - Math.abs(this.rotationZ - startAngleZ) < (270 * rotationMultipler) + Math.abs(rotZ - startAngleZ) > 90 && + Math.abs(rotZ - startAngleZ) < 270 ) { - startAngleZ = this.rotationZ; + startAngleZ = rotZ; this._setProperty('turnAxis', 'Z'); context.deviceTurned(); }