swirl: add _calcSwirlXY method

mojs · Apr 3, 2016 · a3d42c7 · a3d42c7
1 parent 4d4588e
commit a3d42c7
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 27 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.213.0",
+  "version": "0.213.1",
   "license": "MIT",
   "homepage": "https://github.com/legomushroom/mojs",
   "authors": [

diff --git a/build/mo.js b/build/mo.js
@@ -2477,6 +2477,8 @@
 	      this._defaults.degreeShift = 0;
 	      /* ∆ :: [number] :: Radius of the shape. */
 	      this._defaults.radius = { 5: 0 };
+	      /* [number: -1, 1] :: Directon of Swirl. */
+	      this._defaults.direction = 1;
 	      /* [boolean] :: If should have child shape. */
 	      this._defaults.isWithShape = true;
 	    }
@@ -2496,8 +2498,6 @@
 	    value: function _extendDefaults() {
 	      (0, _get3.default)((0, _getPrototypeOf2.default)(Swirl.prototype), '_extendDefaults', this).call(this);
 	      this._calcPosData();
-
-	      this._props.signRand = Math.round(_h2.default.rand(0, 1)) ? -1 : 1;
 	    }
 	    /*
 	      Method to tune new oprions to _o and _props object.
@@ -2530,6 +2530,8 @@
 	        angle: x.delta < 0 ? angle + 180 : angle,
 	        x: x, y: y
 	      };
+	      // set the last position to _props
+	      // this._calcSwirlXY( 1 );
 	    }
 	    /*
 	      Gets `x` or `y` position value.
@@ -2568,7 +2570,21 @@
 	    value: function _setProgress(proc) {
 	      this._progress = proc;
 	      this._calcCurrentProps(proc);
+	      this._calcSwirlXY(proc);
 
+	      this._calcOrigin();
+	      this._draw(proc);
+	    }
+	    /*
+	      Method to calculate x/y for Swirl's progress
+	      @private
+	      @mutates _props
+	      @param {Number} Current progress in [0...1]
+	    */
+
+	  }, {
+	    key: '_calcSwirlXY',
+	    value: function _calcSwirlXY(proc) {
 	      var p = this._props,
 	          angle = this._posData.angle + p.degreeShift,
 	          point = _h2.default.getRadialPoint({
@@ -2585,9 +2601,6 @@
 	          y = point.y;
 	      p.x = this._o.ctx ? x : x + this._posData.x.units;
 	      p.y = this._o.ctx ? y : y + this._posData.y.units;
-
-	      this._calcOrigin();
-	      this._draw(proc);
 	    }
 	    /*
 	      Method to get progress of the swirl.
@@ -2600,7 +2613,7 @@
 	    key: '_getSwirl',
 	    value: function _getSwirl(proc) {
 	      var p = this._props;
-	      return p.signRand * p.swirlSize * Math.sin(p.swirlFrequency * proc);
+	      return p.direction * p.swirlSize * Math.sin(p.swirlFrequency * proc);
 	    }
 	    /*
 	      Method to draw shape.
@@ -8087,7 +8100,7 @@
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	window.mojs = {
-	  revision: '0.213.0', isDebug: true, helpers: _h2.default,
+	  revision: '0.213.1', isDebug: true, helpers: _h2.default,
 	  Transit: _transit2.default, Swirl: _swirl2.default, Burst: _burst2.default, stagger: _stagger2.default, Spriter: _spriter2.default, MotionPath: _motionPath2.default,
 	  Tween: _tween2.default, Timeline: _timeline2.default, Tweenable: _tweenable2.default, Thenable: _thenable2.default, Tunable: _tunable2.default, Module: _module2.default,
 	  tweener: _tweener2.default, easing: _easing2.default, shapesMap: _shapesMap2.default
@@ -8096,7 +8109,7 @@
 	// TODO:
 	/*
 	  swirls in then chains for x/y
-	  add swirl direction
+
 	  burst fix the tune for `then` chains
 	  cover in thenable
 	  cover in tunable

diff --git a/build/mo.min.js b/build/mo.min.js
diff --git a/js/mojs.babel.js b/js/mojs.babel.js
@@ -17,7 +17,7 @@ import tweener    from './tween/tweener';
 import easing     from './easing/easing';
 
 window.mojs = {
-  revision:   '0.213.0', isDebug: true, helpers: h,
+  revision:   '0.213.1', isDebug: true, helpers: h,
   Transit, Swirl, Burst, stagger, Spriter, MotionPath,
   Tween, Timeline, Tweenable, Thenable, Tunable, Module,
   tweener, easing, shapesMap
@@ -26,7 +26,7 @@ window.mojs = {
 // TODO:
 /*
   swirls in then chains for x/y
-  add swirl direction
+
   burst fix the tune for `then` chains
   cover in thenable
   cover in tunable
@@ -37,8 +37,6 @@ window.mojs = {
   percentage for radius
 */
 
-
-
 mojs.h     = mojs.helpers;
 mojs.delta = mojs.h.delta;
 

diff --git a/js/swirl.babel.js b/js/swirl.babel.js
@@ -31,6 +31,8 @@ class Swirl extends Transit {
     this._defaults.degreeShift    = 0;
     /* ∆ :: [number] :: Radius of the shape. */
     this._defaults.radius         = { 5 : 0};
+    /* [number: -1, 1] :: Directon of Swirl. */
+    this._defaults.direction      = 1;
     /* [boolean] :: If should have child shape. */
     this._defaults.isWithShape    = true;
   }
@@ -47,8 +49,6 @@ class Swirl extends Transit {
   _extendDefaults () {
     super._extendDefaults();
     this._calcPosData();
-
-    this._props.signRand = Math.round(h.rand(0, 1)) ? -1 : 1;
   }
   /*
     Method to tune new oprions to _o and _props object.
@@ -75,6 +75,8 @@ class Swirl extends Transit {
       angle: (x.delta < 0) ? angle + 180 : angle,
       x, y
     }
+    // set the last position to _props
+    // this._calcSwirlXY( 1 );
   }
   /*
     Gets `x` or `y` position value.
@@ -107,7 +109,18 @@ class Swirl extends Transit {
   _setProgress ( proc ) {
     this._progress = proc;
     this._calcCurrentProps(proc);
+    this._calcSwirlXY( proc );
 
+    this._calcOrigin();
+    this._draw(proc);
+  }
+  /*
+    Method to calculate x/y for Swirl's progress
+    @private
+    @mutates _props
+    @param {Number} Current progress in [0...1]
+  */
+  _calcSwirlXY (proc) {
     var p     = this._props,
         angle = this._posData.angle + p.degreeShift,
         point = h.getRadialPoint({
@@ -123,9 +136,6 @@ class Swirl extends Transit {
     var x = point.x, y = point.y;
     p.x = ( this._o.ctx ) ? x : x+this._posData.x.units;
     p.y = ( this._o.ctx ) ? y : y+this._posData.y.units;
-
-    this._calcOrigin();
-    this._draw(proc);
   }
   /*
     Method to get progress of the swirl.
@@ -135,7 +145,7 @@ class Swirl extends Transit {
   */
   _getSwirl (proc) {
     var p = this._props;
-    return p.signRand * p.swirlSize * Math.sin(p.swirlFrequency*proc);
+    return p.direction * p.swirlSize * Math.sin(p.swirlFrequency*proc);
   }
   /*
     Method to draw shape.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mo-js",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.213.0",
+  "version": "0.213.1",
   "license": "MIT",
   "private": false,
   "scripts": {

diff --git a/spec/swirl.coffee b/spec/swirl.coffee
@@ -42,6 +42,11 @@ describe 'Swirl ->', ->
       swirl = new Swirl x: {0:10}, y: 0
       expect(swirl._props.x).toBe '0px'
       expect(swirl._props.y).toBe '0px'
+    # it 'should call _calcSwirlXY method with 1', ->
+    #   swirl = new Swirl x: {0:10}, y: 0
+    #   spyOn swirl, '_calcSwirlXY'
+    #   swirl._calcPosData()
+    #   expect(swirl._calcSwirlXY).toHaveBeenCalledWith 1
 
   describe '_extendDefaults method ->', ->
     it 'should call super _extendDefaults method', ->
@@ -93,6 +98,9 @@ describe 'Swirl ->', ->
     it 'should modify radius default', ->
       swirl = new Swirl fill: 'cyan'
       expect(swirl._defaults.radius[5]).toBe 0
+    it 'should add direction default', ->
+      swirl = new Swirl radius: [{ 20: 50 }, 20]
+      expect(swirl._defaults.direction).toBe 1
     it 'should have isWithShape', ->
       swirl = new Swirl fill: 'cyan'
       expect(swirl._defaults.isWithShape).toBe true
@@ -181,7 +189,7 @@ describe 'Swirl ->', ->
       swirl = new Swirl
       swirl1 = swirl._getSwirl(.5)
       freq = Math.sin(swirl._props.swirlFrequency*.5)
-      sign = swirl._props.signRand
+      sign = swirl._props.direction
       expect(swirl1).toBe sign*swirl._props.swirlSize*freq
 
   describe '_draw method ->', ->

diff --git a/spec/swirl.js b/spec/swirl.js
@@ -249,6 +249,17 @@
         });
         return expect(swirl._defaults.radius[5]).toBe(0);
       });
+      it('should add direction default', function() {
+        var swirl;
+        swirl = new Swirl({
+          radius: [
+            {
+              20: 50
+            }, 20
+          ]
+        });
+        return expect(swirl._defaults.direction).toBe(1);
+      });
       return it('should have isWithShape', function() {
         var swirl;
         swirl = new Swirl({
@@ -460,7 +471,7 @@
         swirl = new Swirl;
         swirl1 = swirl._getSwirl(.5);
         freq = Math.sin(swirl._props.swirlFrequency * .5);
-        sign = swirl._props.signRand;
+        sign = swirl._props.direction;
         return expect(swirl1).toBe(sign * swirl._props.swirlSize * freq);
       });
     });