[next] Use degree units for rotation/skew in v5, opt-in for radians

packages/display/package.json

@@ -26,11 +26,12 @@
   ],
   "dependencies": {
     "@pixi/math": "^5.0.0-alpha",
+    "@pixi/settings": "^5.0.0-alpha",
     "@pixi/utils": "^5.0.0-alpha",
     "eventemitter3": "^2.0.0",
     "remove-array-items": "^1.0.0"
   },
   "devDependencies": {
     "floss": "^2.1.3"
   }
-}
+}

packages/display/src/Bounds.js

@@ -153,7 +153,7 @@ export default class Bounds
     /**
      * Adds sprite frame, transformed.
      *
-     * @param {PIXI.TransformBase} transform - TODO
+     * @param {PIXI.Transform} transform - TODO
      * @param {number} x0 - TODO
      * @param {number} y0 - TODO
      * @param {number} x1 - TODO
@@ -212,7 +212,7 @@ export default class Bounds
     /**
      * Add an array of vertices
      *
-     * @param {PIXI.TransformBase} transform - TODO
+     * @param {PIXI.Transform} transform - TODO
      * @param {Float32Array} vertices - TODO
      * @param {number} beginOffset - TODO
      * @param {number} endOffset - TODO

packages/display/src/DisplayObject.js

@@ -1,6 +1,7 @@
 import EventEmitter from 'eventemitter3';
 import { Rectangle, Transform } from '@pixi/math';
 import Bounds from './Bounds';
+import { settings } from '@pixi/settings';
 // _tempDisplayObjectParent = new DisplayObject();
 
 /**
@@ -27,10 +28,12 @@ export default class DisplayObject extends EventEmitter
          * World transform and local transform of this object.
          * This will become read-only later, please do not assign anything there unless you know what are you doing
          *
-         * @member {PIXI.TransformBase}
+         * @member {PIXI.Transform}
          */
         this.transform = new Transform();
 
+        this.transform.useDegrees = settings.USE_DEGREES;
+
         /**
          * The opacity of the object.
          *
@@ -523,7 +526,7 @@ export default class DisplayObject extends EventEmitter
     }
 
     /**
-     * The skew factor for the object in radians.
+     * The skew factor for the object in radians {@link PIXI.settings.USE_DEGREES or degrees}.
      * Assignment by value since pixi-v4.
      *
      * @member {PIXI.ObservablePoint}
@@ -539,7 +542,7 @@ export default class DisplayObject extends EventEmitter
     }
 
     /**
-     * The rotation of the object in radians.
+     * The rotation of the object in radians {@link PIXI.settings.USE_DEGREES or degrees}.
      *
      * @member {number}
      */

packages/graphics/src/Graphics.js

@@ -459,9 +459,9 @@ export default class Graphics extends Container
      * @param {number} cx - The x-coordinate of the center of the circle
      * @param {number} cy - The y-coordinate of the center of the circle
      * @param {number} radius - The radius of the circle
-     * @param {number} startAngle - The starting angle, in radians (0 is at the 3 o'clock position
-     *  of the arc's circle)
-     * @param {number} endAngle - The ending angle, in radians
+     * @param {number} startAngle - The starting angle, in radians {@link PIXI.settings.USE_DEGREES or degrees}
+     * (0 is at the 3 o'clock position of the arc's circle)
+     * @param {number} endAngle - The ending angle, in radians {@link PIXI.settings.USE_DEGREES or degrees}
      * @param {boolean} [anticlockwise=false] - Specifies whether the drawing should be
      *  counter-clockwise or clockwise. False is default, and indicates clockwise, while true
      *  indicates counter-clockwise.
@@ -474,6 +474,9 @@ export default class Graphics extends Container
             return this;
         }
 
+        startAngle *= this.transform.deg2rad;
+        endAngle *= this.transform.deg2rad;
+
         if (!anticlockwise && endAngle <= startAngle)
         {
             endAngle += PI_2;

packages/math/src/Matrix.js

@@ -350,6 +350,7 @@ export default class Matrix
         const skewX = -Math.atan2(-c, d);
         const skewY = Math.atan2(b, a);
 
+        const rad2deg = transform.rad2deg;
         const delta = Math.abs(skewX + skewY);
 
         if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001)
@@ -361,15 +362,16 @@ export default class Matrix
                 transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI;
             }
 
+            transform.rotation *= rad2deg;
+
             transform.skew.x = transform.skew.y = 0;
         }
         else
         {
             transform.rotation = 0;
-            transform.skew.x = skewX;
-            transform.skew.y = skewY;
+            transform.skew.x = skewX * rad2deg;
+            transform.skew.y = skewY * rad2deg;
         }
-
         // next set scale
         transform.scale.x = Math.sqrt((a * a) + (b * b));
         transform.scale.y = Math.sqrt((c * c) + (d * d));

packages/math/src/Transform.js

@@ -1,5 +1,6 @@
 import ObservablePoint from './ObservablePoint';
 import Matrix from './Matrix';
+import { DEG_TO_RAD, RAD_TO_DEG } from './const';
 
 /**
  * Transform that takes care about its versions
@@ -60,14 +61,57 @@ export default class Transform
 
         this._cx = 1; // cos rotation + skewY;
         this._sx = 0; // sin rotation + skewY;
-        this._cy = 0; // cos rotation + Math.PI/2 - skewX;
-        this._sy = 1; // sin rotation + Math.PI/2 - skewX;
+        this._cy = 0; // cos rotation + 180 - skewX;
+        this._sy = 1; // sin rotation + 180 - skewX;
 
         this._localID = 0;
         this._currentLocalID = 0;
 
         this._worldID = 0;
         this._parentID = 0;
+
+        this._useDegrees = true;
+
+        /**
+         * Radians to current units multiplicator, depends on useDegrees
+         * @member {number}
+         * @readonly
+         */
+        this.rad2deg = 1;
+
+        /**
+         * Current units to radians multiplicator, depends on useDegrees
+         * @member {number}
+         * @readonly
+         */
+        this.deg2rad = 1;
+    }
+
+    /**
+     * Store degrees in rotation
+     *
+     * @member {boolean}
+     * @default false
+     */
+    get useDegrees()
+    {
+        return this._useDegrees;
+    }
+
+    set useDegrees(value) // eslint-disable-line require-jsdoc
+    {
+        this._useDegrees = value;
+
+        if (value)
+        {
+            this.rad2deg = RAD_TO_DEG;
+            this.deg2rad = DEG_TO_RAD;
+        }
+        else
+        {
+            this.rad2deg = 1;
+            this.deg2rad = 1;
+        }
     }
 
     /**
@@ -87,10 +131,12 @@ export default class Transform
      */
     updateSkew()
     {
-        this._cx = Math.cos(this._rotation + this.skew._y);
-        this._sx = Math.sin(this._rotation + this.skew._y);
-        this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2
-        this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2
+        const deg2rad = this.deg2rad;
+
+        this._cx = Math.cos((this._rotation + this.skew._y) * deg2rad);
+        this._sx = Math.sin((this._rotation + this.skew._y) * deg2rad);
+        this._cy = -Math.sin((this._rotation - this.skew._x) * deg2rad); // cos, added PI/2
+        this._sy = Math.cos((this._rotation - this.skew._x) * deg2rad); // sin, added PI/2
 
         this._localID++;
     }

packages/math/test/Transform.js

@@ -12,11 +12,13 @@ describe('PIXI.Transform', function ()
             const parent = new Transform();
             const otherTransform = new Transform();
 
+            transform.useDegrees = true;
             transform.position.set(20, 10);
             transform.scale.set(-2, -3);
-            transform.rotation = Math.PI / 6;
+            transform.rotation = 30;
             transform.updateTransform(parent);
 
+            otherTransform.useDegrees = true;
             otherTransform.setFromMatrix(transform.worldTransform);
 
             const position = otherTransform.position;
@@ -29,7 +31,7 @@ describe('PIXI.Transform', function ()
             expect(scale.y).to.be.closeTo(3, eps);
             expect(skew.x).to.equal(0);
             expect(skew.y).to.equal(0);
-            expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps);
+            expect(otherTransform.rotation).to.be.closeTo(-150, eps);
         });
 
         it('should decompose mirror into skew', function ()
@@ -40,11 +42,13 @@ describe('PIXI.Transform', function ()
             const parent = new Transform();
             const otherTransform = new Transform();
 
+            transform.useDegrees = true;
             transform.position.set(20, 10);
             transform.scale.set(2, -3);
-            transform.rotation = Math.PI / 6;
+            transform.rotation = 30;
             transform.updateTransform(parent);
 
+            otherTransform.useDegrees = true;
             otherTransform.setFromMatrix(transform.worldTransform);
 
             const position = otherTransform.position;
@@ -55,8 +59,8 @@ describe('PIXI.Transform', function ()
             expect(position.y).to.be.closeTo(10, eps);
             expect(scale.x).to.be.closeTo(2, eps);
             expect(scale.y).to.be.closeTo(3, eps);
-            expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps);
-            expect(skew.y).to.be.closeTo(Math.PI / 6, eps);
+            expect(skew.x).to.be.closeTo(150, eps);
+            expect(skew.y).to.be.closeTo(30, eps);
             expect(otherTransform.rotation).to.equal(0);
         });
 
@@ -70,6 +74,9 @@ describe('PIXI.Transform', function ()
             const parent = new Transform();
             const otherTransform = new Transform();
 
+            transform.useDegrees = false;
+            otherTransform.useDegrees = false;
+
             transform.position.set(387.8, 313.95);
             transform.scale.set(0.572, 4.101);
             transform.skew.set(-0.873, 0.175);

packages/settings/src/settings.js

@@ -198,4 +198,17 @@ export default {
      * @default true
      */
     CREATE_IMAGE_BITMAP: true,
+
+    /**
+     * Allows to use degrees to store rotation in Transform.
+     * Also affects TilingSprite and Graphics.
+     * Please set it before creation of instances of those classes.
+     *
+     * @static
+     * @constant
+     * @memberof PIXI.settings
+     * @type {boolean}
+     * @default false
+     */
+    USE_DEGREES: false,
 };

packages/sprite-tiling/package.json

@@ -30,9 +30,10 @@
     "@pixi/utils": "^5.0.0-alpha",
     "@pixi/sprite": "^5.0.0-alpha",
     "@pixi/display": "^5.0.0-alpha",
-    "@pixi/constants": "^5.0.0-alpha"
+    "@pixi/constants": "^5.0.0-alpha",
+    "@pixi/settings": "^5.0.0-alpha"
   },
   "devDependencies": {
     "floss": "^2.1.3"
   }
-}
+}

packages/sprite-tiling/src/TilingSprite.js

@@ -2,6 +2,7 @@ import { TextureMatrix, Texture } from '@pixi/core';
 import { Point, Rectangle, Transform } from '@pixi/math';
 import { TextureCache } from '@pixi/utils';
 import { Sprite } from '@pixi/sprite';
+import { settings } from '@pixi/settings';
 
 const tempPoint = new Point();
 
@@ -30,6 +31,8 @@ export default class TilingSprite extends Sprite
          */
         this.tileTransform = new Transform();
 
+        this.tileTransform.useDegrees = settings.USE_DEGREES;
+
         // /// private
 
         /**