swirl: add isSwirl option

css/main.css

@@ -1220,10 +1220,6 @@ a,
   fill: #717171;
   cursor: pointer;
 }
-svg {
-  outline: 1px solid #ff69b4;
-  display: block !important;
-}
 body {
   height: 600px;
 }

css/main.styl

@@ -24,9 +24,8 @@ use('assets/nesting-tree-traversal.js')
 //   rect 140px
 // .div
 //   position absolute
-svg
-  hl hotpink
-  display block !important
+// svg
+//   hl hotpink
 
 body
   height 600px

dist/burst.js

@@ -74,24 +74,23 @@ Burst = (function(_super) {
   Burst.prototype.run = function(o) {
     var i, option, tr, _results;
     Burst.__super__.run.apply(this, arguments);
-    if (this.props.randomAngle || this.props.randomRadius || this.props.isSwirl) {
-      i = this.transits.length;
-      _results = [];
-      while (i--) {
-        tr = this.transits[i];
+    i = this.transits.length;
+    _results = [];
+    while (i--) {
+      tr = this.transits[i];
+      if (this.props.randomAngle || this.props.randomRadius) {
         this.props.randomAngle && tr.setProp({
           angleShift: this.generateRandomAngle()
         });
         this.props.randomRadius && tr.setProp({
           radiusScale: this.generateRandomRadius()
         });
-        this.props.isSwirl && tr.generateSwirl();
-        option = this.getOption(i);
-        option.ctx = this.ctx;
-        _results.push(option.isDrawLess = option.isRunLess = option.isTweenLess = true);
       }
-      return _results;
+      option = this.getOption(i);
+      option.ctx = this.ctx;
+      _results.push(option.isDrawLess = option.isRunLess = option.isTweenLess = true);
     }
+    return _results;
   };
 
   Burst.prototype.createBit = function() {

dist/mojs.js

@@ -74,7 +74,7 @@ Swirl = (function(_super) {
   Swirl.prototype.setProgress = function(progress) {
     var angle, point, x, y;
     angle = this.positionDelta.angle + this.props.angleShift;
-    if (!this.o.isSwirlLess) {
+    if (this.o.isSwirl) {
       angle += this.getSwirl(progress);
     }
     point = this.h.getRadialPoint({
@@ -450,24 +450,23 @@ Burst = (function(_super) {
   Burst.prototype.run = function(o) {
     var i, option, tr, _results;
     Burst.__super__.run.apply(this, arguments);
-    if (this.props.randomAngle || this.props.randomRadius || this.props.isSwirl) {
-      i = this.transits.length;
-      _results = [];
-      while (i--) {
-        tr = this.transits[i];
+    i = this.transits.length;
+    _results = [];
+    while (i--) {
+      tr = this.transits[i];
+      if (this.props.randomAngle || this.props.randomRadius) {
         this.props.randomAngle && tr.setProp({
           angleShift: this.generateRandomAngle()
         });
         this.props.randomRadius && tr.setProp({
           radiusScale: this.generateRandomRadius()
         });
-        this.props.isSwirl && tr.generateSwirl();
-        option = this.getOption(i);
-        option.ctx = this.ctx;
-        _results.push(option.isDrawLess = option.isRunLess = option.isTweenLess = true);
       }
-      return _results;
+      option = this.getOption(i);
+      option.ctx = this.ctx;
+      _results.push(option.isDrawLess = option.isRunLess = option.isTweenLess = true);
     }
+    return _results;
   };
 
   Burst.prototype.createBit = function() {
@@ -1548,43 +1547,22 @@ Tween = require('./tween');
 Transit = require('./transit');
 
 burst = new Burst({
-  x: 300,
-  y: 150,
-  duration: 1000,
-  radius: {
-    0: 100
-  },
-  isSwirl: true,
-  angle: 'rand(0,360)',
-  isShowEnd: true,
-  count: 5,
-  stroke: {
-    'deeppink': 'orange'
-  },
-  fill: 'green',
-  type: 'rect',
-  childOptions: {
-    isSwirl: false,
-    fill: ['deeppink', null, 'cyan', 'lime', 'hotpink'],
-    points: 3,
-    strokeWidth: 0,
-    radius: 6
-  }
+  isRunLess: true,
+  isSwirl: false,
+  duration: 400
 });
 
 document.body.addEventListener('click', function(e) {
   return burst.run({
     x: e.x,
-    y: e.y,
-    radius: {
-      'rand(10,400)': 0
-    },
-    angle: {
-      360: 0
-    },
-    childOptions: {
-      fill: 'green'
-    }
+    y: e.y
+  });
+});
+
+document.body.addEventListener('touchstart', function(e) {
+  return burst.run({
+    x: e.touches[0].pageX,
+    y: e.touches[0].pageY
   });
 });
 

dist/swirl.js

@@ -73,7 +73,7 @@ Swirl = (function(_super) {
   Swirl.prototype.setProgress = function(progress) {
     var angle, point, x, y;
     angle = this.positionDelta.angle + this.props.angleShift;
-    if (!this.o.isSwirlLess) {
+    if (this.o.isSwirl) {
       angle += this.getSwirl(progress);
     }
     point = this.h.getRadialPoint({

js/burst.coffee

@@ -77,15 +77,15 @@ class Burst extends Transit
 
   run:(o)->
     super
-    if @props.randomAngle or @props.randomRadius or @props.isSwirl
-      i = @transits.length
-      while(i--)
-        tr = @transits[i]
+    i = @transits.length
+    while(i--)
+      tr = @transits[i]
+      if @props.randomAngle or @props.randomRadius
         @props.randomAngle  and tr.setProp angleShift: @generateRandomAngle()
         @props.randomRadius and tr.setProp radiusScale: @generateRandomRadius()
-        @props.isSwirl      and tr.generateSwirl()
-        option = @getOption(i); option.ctx = @ctx
-        option.isDrawLess = option.isRunLess = option.isTweenLess = true
+      option = @getOption(i); option.ctx = @ctx
+      option.isDrawLess = option.isRunLess = option.isTweenLess = true
+      # tr.o = option
 
   createBit:->
     @transits = []

js/mojs.coffee

@@ -25,39 +25,47 @@ Transit   = require './transit'
 # t.start()
 
 burst = new Burst(
-  x:            300
-  y:            150
-  duration:     1000
-  radius:        { 0: 100 }
-  isSwirl:       true
-  angle: 'rand(0,360)'
-  isShowEnd: true
-  count: 5
-  stroke: {'deeppink': 'orange'}
-  fill: 'green'
-  # swirlFrequency: 50
-  # strokeWidth: 2
-  type: 'rect'
-  # onUpdate:(p)-> console.log p
-  childOptions:
-    isSwirl:      false
-    fill:         ['deeppink', null, 'cyan', 'lime', 'hotpink']
-    points:       3
-    strokeWidth:  0
-    radius:       6
+  # x:            300
+  # y:            150
+  isRunLess: true
+  isSwirl: false
+  duration: 400
+  # duration:     1000
+  # radius:        { 0: 100 }
+  # isSwirl:       true
+  # angle: 'rand(0,360)'
+  # isShowEnd: true
+  # count: 5
+  # stroke: {'deeppink': 'orange'}
+  # fill: 'green'
+  # # swirlFrequency: 50
+  # # strokeWidth: 2
+  # type: 'rect'
+  # isIt: true
+  # # onUpdate:(p)-> console.log p
+  # childOptions:
+  #   isSwirl:      false
+  #   fill:         ['deeppink', null, 'cyan', 'lime', 'hotpink']
+  #   points:       3
+  #   strokeWidth:  0
+    # radius:       6
 )
 
 document.body.addEventListener 'click', (e)->
   burst.run
     x: e.x
     y: e.y
-    radius: { 'rand(10,400)': 0}
-    # swirlFrequency: 50
-    angle: {360: 0}
-    childOptions:
-      fill: 'green'
+    # radius: { 'rand(10,20)': 0}
+    # # swirlFrequency: 50
+    # angle: {360: 0}
+    # isIt: true
+    # childOptions:
+    #   fill: 'green'
 
+document.body.addEventListener 'touchstart', (e)->
+  burst.run
+    x: e.touches[0].pageX
+    y: e.touches[0].pageY
 
 
 
-

js/swirl.coffee

@@ -1,8 +1,6 @@
 # ignore coffescript sudo code
 ### istanbul ignore next ###
 
-# TODO
-#   - add shift swirl
 Transit   = require './transit'
 class Swirl extends Transit
   skipPropsDelta: x: 1, y: 1
@@ -33,7 +31,7 @@ class Swirl extends Transit
       { start: val, end: val, delta: 0, units: 'px' }
   setProgress:(progress)->
     angle = @positionDelta.angle + @props.angleShift
-    if !@o.isSwirlLess then angle += @getSwirl(progress)
+    if @o.isSwirl then angle += @getSwirl(progress)
     point = @h.getRadialPoint
       angle:  angle
       radius: @positionDelta.radius*progress*@props.radiusScale

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.61.6",
+  "version": "0.61.7",
   "license": "MIT",
   "private": false,
   "scripts": {

readme.md

@@ -7,11 +7,10 @@
 
 #### todo
 - burst
-  - fix run params
+  - implement run method
   - fix tween isComplete onUpdate
-  - add chains and thens
   - add stagger values
-  - set initial progress for the childrens
+  - set initial progress for the childrens or hide them
   - add radiusX radiusY options
 
 - cover raf polyfill

spec/swirl.coffee

@@ -85,9 +85,14 @@ describe 'Swirl ->', ->
       swirl.setProgress 1
       expect(swirl.props.x).toBe '5.0000px'
       expect(swirl.props.y).toBe '5.0000px'
-    it 'should add swirl', ->
+    it 'should not add swirl', ->
       swirl = new Swirl x: {0:10}, y: {0:10}, isRunLess: true
       swirl.setProgress .5
+      expect(swirl.props.x).toBe '5.0000px'
+      expect(swirl.props.y).toBe '5.0000px'
+    it 'should add swirl if isSwirl', ->
+      swirl = new Swirl x: {0:10}, y: {0:10}, isRunLess: true, isSwirl: true
+      swirl.setProgress .5
       expect(swirl.props.x).not.toBe '5.0000px'
       expect(swirl.props.y).not.toBe '5.0000px'
   describe 'generateSwirl method ->', ->

spec/swirl.js

@@ -234,7 +234,7 @@
         expect(swirl.props.x).toBe('5.0000px');
         return expect(swirl.props.y).toBe('5.0000px');
       });
-      return it('should add swirl', function() {
+      it('should not add swirl', function() {
         var swirl;
         swirl = new Swirl({
           x: {
@@ -246,6 +246,22 @@
           isRunLess: true
         });
         swirl.setProgress(.5);
+        expect(swirl.props.x).toBe('5.0000px');
+        return expect(swirl.props.y).toBe('5.0000px');
+      });
+      return it('should add swirl if isSwirl', function() {
+        var swirl;
+        swirl = new Swirl({
+          x: {
+            0: 10
+          },
+          y: {
+            0: 10
+          },
+          isRunLess: true,
+          isSwirl: true
+        });
+        swirl.setProgress(.5);
         expect(swirl.props.x).not.toBe('5.0000px');
         return expect(swirl.props.y).not.toBe('5.0000px');
       });