├── .babelrc
├── LICENSE
├── README.md
├── build
    ├── config.js
    ├── dev-client.js
    ├── dev-server.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── demo.gif
├── demo_1.gif
├── demo_2.gif
├── demo_3.gif
├── demo_4.gif
├── dist
    ├── pixelSwiper.js
    ├── pixelSwiper.js.map
    ├── pixelSwiper.worker.js
    └── pixelSwiper.worker.js.map
├── package-lock.json
├── package.json
└── src
    ├── calc.js
    ├── calc.worker.js
    ├── index.js
    └── particle.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "es2015",
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": [
 7 |     "transform-runtime"
 8 |   ],
 9 |   "comments": false
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 axi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # pixel-swiper
 2 | > pixel picture or text effect by canvas
 3 | 
 4 | [DEMO 1](https://jsbin.com/giwusop/edit?html,output)
 5 | 
 6 | ![gif preview](demo_1.gif)
 7 | 
 8 | [DEMO 2](https://jsbin.com/kunumik/edit?html,output)
 9 | 
10 | ![gif preview](demo_2.gif)
11 | 
12 | [DEMO 3](http://jsbin.com/fifasax/edit?html,output)
13 | 
14 | ![gif preview](demo_3.gif)
15 | 
16 | [DEMO 4](http://jsbin.com/dehavaw/edit?html,output)
17 | 
18 | ![gif preview](demo_4.gif)
19 | 
20 | 
21 | # Browser
22 |  ```html
23 |  <script src="yourStaticPath/pixelSwiper.js"></script>
24 | ```
25 | 
26 | # Default import
27 | ```
28 | npm install pixel-swiper
29 | ```
30 | 
31 | ```js
32 | import pixelSwiper from 'pixel-swiper';
33 | ```
34 | 
35 | # Usage
36 | ```js
37 | const swiper   = new pixelSwiper('#c', {
38 |       width: 250,
39 |       height: 100,
40 |       particleSize: 4,
41 |       animation: true,
42 |       randomPosition: true,
43 |       velocity: 5,
44 |       shape: 'square',
45 |       swipeList: [
46 |         {
47 |           paddingTop: 10,
48 |           url: 'data:image/jpeg;base64,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',
49 |           duration: 3000,
50 |         },
51 |         {
52 |           text: 'pixel',
53 |           paddingLeft: 5,
54 |           fontSize: 80,
55 |           color: '#F56C6C',
56 |           duration: 3000,
57 |         },
58 |         {
59 |           text: 'swiper',
60 |           fontSize: 80,
61 |           randomParticleColor: true,
62 |           duration: 3000,
63 |         },
64 |       ]
65 | });
66 | ```
67 | # API
68 | ## Constructor
69 | new pixelSwiper(htmlSelector, options);
70 | 
71 | | Names | Required | Type | Description
72 | | --- | --- | --- | ---
73 | | htmlSelector | `true` | `String` |  canvas selector
74 | | options | `true` | `Object` | initial options
75 | 
76 | ## Options
77 | | Names | Defaults | Description
78 | | --- | --- | ---
79 | | width | `0` | canvas width
80 | | height | `0` | canvas height
81 | | particleSize | `20` | particle size
82 | | animation | `true` | `true` - use animation
83 | | randomPosition | `false` | `true` - use random position
84 | | velocity | `1` | particle animate velocity
85 | | shape | `square` | particle shape, `square` or `round`
86 | | swipeList | `[]` | swipe config 
87 | 
88 | 
89 | ## swipeList Options
90 | | Names | Defaults | Description
91 | | --- | --- | ---
92 | | paddingLeft | `0` | canvas paddingLeft
93 | | paddingTop | `0` | canvas paddingTop
94 | | text | `''` | render text
95 | | fontSize | `12` | text font size
96 | | color | `''` | text color
97 | | duration | `0`  | swipe duration, millisecond
98 | | randomParticleColor | `false` | `true` - use random color
99 | | url | `''` | image url


--------------------------------------------------------------------------------
/build/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ================================
 3 |  *             dev config
 4 |  * ================================
 5 |  */
 6 | module.exports = {
 7 |   /**
 8 |    * dev config
 9 |    */
10 |   dev: {
11 |     hostname: 'localhost',
12 |     port: 8080,
13 |     autoOpenBrowser: true,
14 |     proxyTable: {},
15 |   },
16 | };


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
1 | require('eventsource-polyfill');
2 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true');
3 | 
4 | hotClient.subscribe(function (event) {
5 |   if (event.action === 'reload') {
6 |     window.location.reload();
7 |   }
8 | });
9 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | const opn             = require('opn');
 2 | const path            = require('path');
 3 | const express         = require('express');
 4 | const webpack         = require('webpack');
 5 | const proxyMiddleware = require('http-proxy-middleware');
 6 | const chalk           = require('chalk');
 7 | const webpackConfig   = require('./webpack.dev.conf');
 8 | const devConf         = require('./config').dev;
 9 | 
10 | const app      = express();
11 | const compiler = webpack(webpackConfig);
12 | 
13 | const port       = devConf.port;
14 | const proxyTable = devConf.proxyTable; // https://github.com/chimurai/http-proxy-middleware
15 | 
16 | const devMiddleware = require('webpack-dev-middleware')(compiler, {
17 |   index: "index.html",
18 |   publicPath: '/',
19 |   noInfo: false,
20 |   quiet: true
21 | });
22 | 
23 | const hotMiddleware = require('webpack-hot-middleware')(compiler, {
24 |   log: function () {
25 |     const args = [].slice.call(arguments);
26 |     console.log.apply(null, args.map(d => chalk.white(d)));
27 |   },
28 |   heartbeat: 2000
29 | });
30 | 
31 | // force page reload when html-webpack-plugin template changes
32 | compiler.plugin('compilation', compilation => {
33 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
34 |     hotMiddleware.publish({action: 'reload'});
35 |     cb();
36 |   })
37 | });
38 | 
39 | // proxy api requests
40 | Object.keys(proxyTable).forEach(context => {
41 |   let options = proxyTable[context];
42 |   if (typeof options === 'string') {
43 |     options = {target: options}
44 |   }
45 |   app.use(proxyMiddleware(options.filter || context, options));
46 | });
47 | app.get('/', (req, res) => res.redirect('/index.html'));
48 | app.use(require('connect-history-api-fallback')());
49 | app.use(devMiddleware);
50 | app.use(hotMiddleware);
51 | app.use(express.static(path.join(__dirname, '../static')));
52 | 
53 | const uri = `http://${devConf.hostname}:${port}`;
54 | 
55 | let _resolve;
56 | const readyPromise = new Promise(resolve => _resolve = resolve);
57 | 
58 | console.log(chalk.bgBlue.bold('> Starting dev server...\n'));
59 | devMiddleware.waitUntilValid(() => {
60 |   console.log(chalk.bgGreen.bold('> Listening at ' + uri + '\n'));
61 |   if (devConf.autoOpenBrowser) {
62 |     opn(uri);
63 |   }
64 |   _resolve();
65 | });
66 | 
67 | const server = app.listen(port);
68 | 
69 | module.exports = {
70 |   ready: readyPromise,
71 |   close: () => {
72 |     server.close();
73 |   }
74 | };
75 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | 
 3 | module.exports = {
 4 |   resolve: {
 5 |     extensions: ['.js'],
 6 |   },
 7 | 
 8 |   module: {
 9 |     loaders: [
10 |       {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
11 |     ],
12 |   },
13 | 
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | const path              = require('path');
 2 | const webpack           = require('webpack');
 3 | const Merge             = require('webpack-merge');
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | const BaseConfig        = require('./webpack.base.conf.js');
 6 | const entry             = {index: './demo/index.js'};
 7 | 
 8 | // add hot-reload related code to entry chunks
 9 | Object.keys(entry)
10 |   .forEach(name => entry[name] = ['./build/dev-client'].concat(entry[name]));
11 | 
12 | module.exports = Merge(BaseConfig, {
13 |   entry: entry,
14 | 
15 |   output: {
16 |     path: path.resolve(__dirname, '../'),
17 |     filename: '[name].js?[hash:8]',
18 |   },
19 | 
20 |   module: {
21 |     loaders: [
22 |       {test: /\.css$/, loader: 'style-loader!css-loader'},
23 |     ]
24 |   },
25 | 
26 |   devtool: '#cheap-module-eval-source-map',
27 | 
28 |   plugins: [
29 |     new webpack.HotModuleReplacementPlugin(),
30 |     new HtmlWebpackPlugin({
31 |       cache: true,
32 |       hash: false,
33 |       inject: true,
34 |       chunksSortMode: 'dependency',
35 |       filename: 'index.html',
36 |       template: './demo/index.html',
37 |       chunks: ['index']
38 |     })
39 |   ]
40 | 
41 | });


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
 1 | const path               = require('path');
 2 | const webpack            = require('webpack');
 3 | const Merge              = require('webpack-merge');
 4 | const BaseConfig         = require('./webpack.base.conf.js');
 5 | const CssAssetsPlugin    = require('optimize-css-assets-webpack-plugin');
 6 | const ExtractTextPlugin  = require('extract-text-webpack-plugin');
 7 | const CleanWebpackPlugin = require('clean-webpack-plugin');
 8 | 
 9 | module.exports = Merge(BaseConfig, {
10 |   entry: {
11 |     'pixelSwiper': './src/index.js',
12 |     'pixelSwiper.worker': './src/calc.worker.js'
13 |   },
14 | 
15 |   output: {
16 |     path: path.resolve(__dirname, '../dist'),
17 |     filename: '[name].js',
18 |     libraryTarget: 'umd',
19 |     library: 'pixelSwiper'
20 |   },
21 | 
22 |   module: {
23 |     loaders: [
24 |       {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
25 |     ]
26 |   },
27 | 
28 |   devtool: '#source-map',
29 | 
30 |   plugins: [
31 |     new CleanWebpackPlugin([path.join(__dirname, '../dist')],
32 |       {root: path.join(__dirname, '../'), verbose: true, dry: false}),
33 |     new ExtractTextPlugin('[name].css'),
34 |     new webpack.LoaderOptionsPlugin({minimize: true, debug: false}),
35 |     new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),
36 |     new CssAssetsPlugin({
37 |       cssProcessorOptions: {autoprefixer: false, discardComments: {removeAll: true}, safe: true},
38 |     }),
39 |     new webpack.optimize.UglifyJsPlugin({
40 |       compress: {warnings: false},
41 |       sourceMap: true,
42 |       mangle: false
43 |     }),
44 |   ]
45 | 
46 | });


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilohaty/pixel-swiper/5a406441f9ce3902dd1427712b59461b54b57659/demo.gif


--------------------------------------------------------------------------------
/demo_1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilohaty/pixel-swiper/5a406441f9ce3902dd1427712b59461b54b57659/demo_1.gif


--------------------------------------------------------------------------------
/demo_2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilohaty/pixel-swiper/5a406441f9ce3902dd1427712b59461b54b57659/demo_2.gif


--------------------------------------------------------------------------------
/demo_3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilohaty/pixel-swiper/5a406441f9ce3902dd1427712b59461b54b57659/demo_3.gif


--------------------------------------------------------------------------------
/demo_4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilohaty/pixel-swiper/5a406441f9ce3902dd1427712b59461b54b57659/demo_4.gif


--------------------------------------------------------------------------------
/dist/pixelSwiper.js:
--------------------------------------------------------------------------------
1 | !function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory():"function"==typeof define&&define.amd?define([],factory):"object"==typeof exports?exports.pixelSwiper=factory():root.pixelSwiper=factory()}("undefined"!=typeof self?self:this,function(){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=41)}([function(module,exports){var global=module.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=global)},function(module,exports,__webpack_require__){var store=__webpack_require__(29)("wks"),uid=__webpack_require__(30),Symbol=__webpack_require__(0).Symbol,USE_SYMBOL="function"==typeof Symbol;(module.exports=function(name){return store[name]||(store[name]=USE_SYMBOL&&Symbol[name]||(USE_SYMBOL?Symbol:uid)("Symbol."+name))}).store=store},function(module,exports){var core=module.exports={version:"2.5.3"};"number"==typeof __e&&(__e=core)},function(module,exports,__webpack_require__){var isObject=__webpack_require__(8);module.exports=function(it){if(!isObject(it))throw TypeError(it+" is not an object!");return it}},function(module,exports,__webpack_require__){var global=__webpack_require__(0),core=__webpack_require__(2),ctx=__webpack_require__(10),hide=__webpack_require__(5),$export=function(type,name,source){var key,own,out,IS_FORCED=type&$export.F,IS_GLOBAL=type&$export.G,IS_STATIC=type&$export.S,IS_PROTO=type&$export.P,IS_BIND=type&$export.B,IS_WRAP=type&$export.W,exports=IS_GLOBAL?core:core[name]||(core[name]={}),expProto=exports.prototype,target=IS_GLOBAL?global:IS_STATIC?global[name]:(global[name]||{}).prototype;IS_GLOBAL&&(source=name);for(key in source)(own=!IS_FORCED&&target&&void 0!==target[key])&&key in exports||(out=own?target[key]:source[key],exports[key]=IS_GLOBAL&&"function"!=typeof target[key]?source[key]:IS_BIND&&own?ctx(out,global):IS_WRAP&&target[key]==out?function(C){var F=function(a,b,c){if(this instanceof C){switch(arguments.length){case 0:return new C;case 1:return new C(a);case 2:return new C(a,b)}return new C(a,b,c)}return C.apply(this,arguments)};return F.prototype=C.prototype,F}(out):IS_PROTO&&"function"==typeof out?ctx(Function.call,out):out,IS_PROTO&&((exports.virtual||(exports.virtual={}))[key]=out,type&$export.R&&expProto&&!expProto[key]&&hide(expProto,key,out)))};$export.F=1,$export.G=2,$export.S=4,$export.P=8,$export.B=16,$export.W=32,$export.U=64,$export.R=128,module.exports=$export},function(module,exports,__webpack_require__){var dP=__webpack_require__(7),createDesc=__webpack_require__(25);module.exports=__webpack_require__(6)?function(object,key,value){return dP.f(object,key,createDesc(1,value))}:function(object,key,value){return object[key]=value,object}},function(module,exports,__webpack_require__){module.exports=!__webpack_require__(16)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(module,exports,__webpack_require__){var anObject=__webpack_require__(3),IE8_DOM_DEFINE=__webpack_require__(52),toPrimitive=__webpack_require__(53),dP=Object.defineProperty;exports.f=__webpack_require__(6)?Object.defineProperty:function(O,P,Attributes){if(anObject(O),P=toPrimitive(P,!0),anObject(Attributes),IE8_DOM_DEFINE)try{return dP(O,P,Attributes)}catch(e){}if("get"in Attributes||"set"in Attributes)throw TypeError("Accessors not supported!");return"value"in Attributes&&(O[P]=Attributes.value),O}},function(module,exports){module.exports=function(it){return"object"==typeof it?null!==it:"function"==typeof it}},function(module,exports){module.exports={}},function(module,exports,__webpack_require__){var aFunction=__webpack_require__(11);module.exports=function(fn,that,length){if(aFunction(fn),void 0===that)return fn;switch(length){case 1:return function(a){return fn.call(that,a)};case 2:return function(a,b){return fn.call(that,a,b)};case 3:return function(a,b,c){return fn.call(that,a,b,c)}}return function(){return fn.apply(that,arguments)}}},function(module,exports){module.exports=function(it){if("function"!=typeof it)throw TypeError(it+" is not a function!");return it}},function(module,exports){var hasOwnProperty={}.hasOwnProperty;module.exports=function(it,key){return hasOwnProperty.call(it,key)}},function(module,exports){var toString={}.toString;module.exports=function(it){return toString.call(it).slice(8,-1)}},function(module,exports){var ceil=Math.ceil,floor=Math.floor;module.exports=function(it){return isNaN(it=+it)?0:(it>0?floor:ceil)(it)}},function(module,exports){module.exports=function(it){if(void 0==it)throw TypeError("Can't call method on  "+it);return it}},function(module,exports){module.exports=function(exec){try{return!!exec()}catch(e){return!0}}},function(module,exports,__webpack_require__){var isObject=__webpack_require__(8),document=__webpack_require__(0).document,is=isObject(document)&&isObject(document.createElement);module.exports=function(it){return is?document.createElement(it):{}}},function(module,exports,__webpack_require__){var IObject=__webpack_require__(27),defined=__webpack_require__(15);module.exports=function(it){return IObject(defined(it))}},function(module,exports,__webpack_require__){var shared=__webpack_require__(29)("keys"),uid=__webpack_require__(30);module.exports=function(key){return shared[key]||(shared[key]=uid(key))}},function(module,exports,__webpack_require__){var def=__webpack_require__(7).f,has=__webpack_require__(12),TAG=__webpack_require__(1)("toStringTag");module.exports=function(it,tag,stat){it&&!has(it=stat?it:it.prototype,TAG)&&def(it,TAG,{configurable:!0,value:tag})}},function(module,exports,__webpack_require__){"use strict";function PromiseCapability(C){var resolve,reject;this.promise=new C(function($$resolve,$$reject){if(void 0!==resolve||void 0!==reject)throw TypeError("Bad Promise constructor");resolve=$$resolve,reject=$$reject}),this.resolve=aFunction(resolve),this.reject=aFunction(reject)}var aFunction=__webpack_require__(11);module.exports.f=function(C){return new PromiseCapability(C)}},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(48),__esModule:!0}},function(module,exports,__webpack_require__){"use strict";var LIBRARY=__webpack_require__(24),$export=__webpack_require__(4),redefine=__webpack_require__(54),hide=__webpack_require__(5),has=__webpack_require__(12),Iterators=__webpack_require__(9),$iterCreate=__webpack_require__(55),setToStringTag=__webpack_require__(20),getPrototypeOf=__webpack_require__(61),ITERATOR=__webpack_require__(1)("iterator"),BUGGY=!([].keys&&"next"in[].keys()),returnThis=function(){return this};module.exports=function(Base,NAME,Constructor,next,DEFAULT,IS_SET,FORCED){$iterCreate(Constructor,NAME,next);var methods,key,IteratorPrototype,getMethod=function(kind){if(!BUGGY&&kind in proto)return proto[kind];switch(kind){case"keys":case"values":return function(){return new Constructor(this,kind)}}return function(){return new Constructor(this,kind)}},TAG=NAME+" Iterator",DEF_VALUES="values"==DEFAULT,VALUES_BUG=!1,proto=Base.prototype,$native=proto[ITERATOR]||proto["@@iterator"]||DEFAULT&&proto[DEFAULT],$default=!BUGGY&&$native||getMethod(DEFAULT),$entries=DEFAULT?DEF_VALUES?getMethod("entries"):$default:void 0,$anyNative="Array"==NAME?proto.entries||$native:$native;if($anyNative&&(IteratorPrototype=getPrototypeOf($anyNative.call(new Base)))!==Object.prototype&&IteratorPrototype.next&&(setToStringTag(IteratorPrototype,TAG,!0),LIBRARY||has(IteratorPrototype,ITERATOR)||hide(IteratorPrototype,ITERATOR,returnThis)),DEF_VALUES&&$native&&"values"!==$native.name&&(VALUES_BUG=!0,$default=function(){return $native.call(this)}),LIBRARY&&!FORCED||!BUGGY&&!VALUES_BUG&&proto[ITERATOR]||hide(proto,ITERATOR,$default),Iterators[NAME]=$default,Iterators[TAG]=returnThis,DEFAULT)if(methods={values:DEF_VALUES?$default:getMethod("values"),keys:IS_SET?$default:getMethod("keys"),entries:$entries},FORCED)for(key in methods)key in proto||redefine(proto,key,methods[key]);else $export($export.P+$export.F*(BUGGY||VALUES_BUG),NAME,methods);return methods}},function(module,exports){module.exports=!0},function(module,exports){module.exports=function(bitmap,value){return{enumerable:!(1&bitmap),configurable:!(2&bitmap),writable:!(4&bitmap),value:value}}},function(module,exports,__webpack_require__){var $keys=__webpack_require__(58),enumBugKeys=__webpack_require__(31);module.exports=Object.keys||function(O){return $keys(O,enumBugKeys)}},function(module,exports,__webpack_require__){var cof=__webpack_require__(13);module.exports=Object("z").propertyIsEnumerable(0)?Object:function(it){return"String"==cof(it)?it.split(""):Object(it)}},function(module,exports,__webpack_require__){var toInteger=__webpack_require__(14),min=Math.min;module.exports=function(it){return it>0?min(toInteger(it),9007199254740991):0}},function(module,exports,__webpack_require__){var global=__webpack_require__(0),store=global["__core-js_shared__"]||(global["__core-js_shared__"]={});module.exports=function(key){return store[key]||(store[key]={})}},function(module,exports){var id=0,px=Math.random();module.exports=function(key){return"Symbol(".concat(void 0===key?"":key,")_",(++id+px).toString(36))}},function(module,exports){module.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(module,exports,__webpack_require__){var document=__webpack_require__(0).document;module.exports=document&&document.documentElement},function(module,exports,__webpack_require__){var defined=__webpack_require__(15);module.exports=function(it){return Object(defined(it))}},function(module,exports,__webpack_require__){var cof=__webpack_require__(13),TAG=__webpack_require__(1)("toStringTag"),ARG="Arguments"==cof(function(){return arguments}()),tryGet=function(it,key){try{return it[key]}catch(e){}};module.exports=function(it){var O,T,B;return void 0===it?"Undefined":null===it?"Null":"string"==typeof(T=tryGet(O=Object(it),TAG))?T:ARG?cof(O):"Object"==(B=cof(O))&&"function"==typeof O.callee?"Arguments":B}},function(module,exports,__webpack_require__){var anObject=__webpack_require__(3),aFunction=__webpack_require__(11),SPECIES=__webpack_require__(1)("species");module.exports=function(O,D){var S,C=anObject(O).constructor;return void 0===C||void 0==(S=anObject(C)[SPECIES])?D:aFunction(S)}},function(module,exports,__webpack_require__){var defer,channel,port,ctx=__webpack_require__(10),invoke=__webpack_require__(72),html=__webpack_require__(32),cel=__webpack_require__(17),global=__webpack_require__(0),process=global.process,setTask=global.setImmediate,clearTask=global.clearImmediate,MessageChannel=global.MessageChannel,Dispatch=global.Dispatch,counter=0,queue={},run=function(){var id=+this;if(queue.hasOwnProperty(id)){var fn=queue[id];delete queue[id],fn()}},listener=function(event){run.call(event.data)};setTask&&clearTask||(setTask=function(fn){for(var args=[],i=1;arguments.length>i;)args.push(arguments[i++]);return queue[++counter]=function(){invoke("function"==typeof fn?fn:Function(fn),args)},defer(counter),counter},clearTask=function(id){delete queue[id]},"process"==__webpack_require__(13)(process)?defer=function(id){process.nextTick(ctx(run,id,1))}:Dispatch&&Dispatch.now?defer=function(id){Dispatch.now(ctx(run,id,1))}:MessageChannel?(channel=new MessageChannel,port=channel.port2,channel.port1.onmessage=listener,defer=ctx(port.postMessage,port,1)):global.addEventListener&&"function"==typeof postMessage&&!global.importScripts?(defer=function(id){global.postMessage(id+"","*")},global.addEventListener("message",listener,!1)):defer="onreadystatechange"in cel("script")?function(id){html.appendChild(cel("script")).onreadystatechange=function(){html.removeChild(this),run.call(id)}}:function(id){setTimeout(ctx(run,id,1),0)}),module.exports={set:setTask,clear:clearTask}},function(module,exports){module.exports=function(exec){try{return{e:!1,v:exec()}}catch(e){return{e:!0,v:e}}}},function(module,exports,__webpack_require__){var anObject=__webpack_require__(3),isObject=__webpack_require__(8),newPromiseCapability=__webpack_require__(21);module.exports=function(C,x){if(anObject(C),isObject(x)&&x.constructor===C)return x;var promiseCapability=newPromiseCapability.f(C);return(0,promiseCapability.resolve)(x),promiseCapability.promise}},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(79),__esModule:!0}},function(module,exports,__webpack_require__){"use strict";exports.__esModule=!0,exports.default=function(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function loadImage(src){return new _promise2.default(function(resolve,reject){var image=new Image;image.crossOrigin="",image.onload=resolve.bind(null,image),image.onerror=reject,image.src=src})}function randomInt(min,max){return~~(Math.random()*(max-min)+min)}function getRandomColor(){return"#"+Array.apply(null,new Array(3)).map(function(){return randomInt(0,255).toString(16).replace(/^(\w{1})$/,"0$1")}).join("")}var _stringify=__webpack_require__(42),_stringify2=_interopRequireDefault(_stringify),_regenerator=__webpack_require__(44),_regenerator2=_interopRequireDefault(_regenerator),_asyncToGenerator2=__webpack_require__(47),_asyncToGenerator3=_interopRequireDefault(_asyncToGenerator2),_assign=__webpack_require__(39),_assign2=_interopRequireDefault(_assign),_classCallCheck2=__webpack_require__(40),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_promise=__webpack_require__(22),_promise2=_interopRequireDefault(_promise),_particle=__webpack_require__(84),_particle2=_interopRequireDefault(_particle),_calc=__webpack_require__(89),_calc2=_interopRequireDefault(_calc);window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var PixelSwiper=function PixelSwiper(selector,options){(0,_classCallCheck3.default)(this,PixelSwiper),this.set(options),this.initialize(selector)};(0,_assign2.default)(PixelSwiper.prototype,{paused:!1,loop:!0,swipeCount:0,loopCount:0,width:0,height:0,paddingLeft:0,paddingTop:0,rowNum:0,colNum:0,swipeList:[],collections:[],lastIndex:-1,index:0,animation:!0,randomPosition:!1,shape:"square",velocity:1,particleSize:20,onIndexChange:null,workerPath:"",useWebWorker:!1,set:function(options){for(var key in options)options.hasOwnProperty(key)&&(this[key]=options[key])},initialize:function(selector){var canvas=document.querySelector(selector),cacheCanvas=document.createElement("canvas");this.canvas=canvas,this.cacheCanvas=cacheCanvas,this.ctx=canvas.getContext("2d"),this.cacheCtx=cacheCanvas.getContext("2d"),this.canvas.width=this.width,this.canvas.height=this.height,this.cacheCanvas.width=this.width,this.cacheCanvas.height=this.height,this.rowNum=Math.ceil(this.height/this.particleSize),this.colNum=Math.ceil(this.width/this.particleSize),this.run()},renderTextToCacheCanvas:function(_ref){var text=_ref.text,color=_ref.color,fontSize=_ref.fontSize,randomColor=_ref.randomColor,_ref$paddingTop=_ref.paddingTop,paddingTop=void 0===_ref$paddingTop?0:_ref$paddingTop,_ref$paddingLeft=_ref.paddingLeft,paddingLeft=void 0===_ref$paddingLeft?0:_ref$paddingLeft,ctx=this.cacheCtx;ctx.clearRect(0,0,this.width,this.height),ctx.save(),ctx.textBaseline="top",ctx.font=(fontSize||12)+"px 'microsoft yahei light'",ctx.fillStyle=randomColor?getRandomColor():color||"#000000",ctx.fillText(text,paddingLeft,paddingTop),ctx.restore()},renderImageToCacheCanvas:function(_ref2){var _this=this,url=_ref2.url,_ref2$paddingTop=_ref2.paddingTop,paddingTop=void 0===_ref2$paddingTop?0:_ref2$paddingTop,_ref2$paddingLeft=_ref2.paddingLeft,paddingLeft=void 0===_ref2$paddingLeft?0:_ref2$paddingLeft;return new _promise2.default(function(){var _ref3=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(resolve,reject){var image,w,h,scale,imgW,imgH,left,top,dstX,dstY,ctx;return _regenerator2.default.wrap(function(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.prev=0,_context.next=3,loadImage(url);case 3:image=_context.sent,w=_this.width-(paddingLeft<<1),h=_this.height-(paddingTop<<1),scale=1,(image.width>w||image.height>h)&&(scale=image.width/image.height>w/h?w/image.width:h/image.height),image.width<w&&image.height<h&&(scale=image.width/image.height>w/h?w/image.width:h/image.height),imgW=image.width*scale,imgH=image.height*scale,left=_this.width-imgW>>1,top=_this.height-imgH>>1,dstX=left>paddingLeft?left/scale:paddingLeft/scale,dstY=top>paddingTop?top/scale:paddingTop/scale,ctx=_this.cacheCtx,ctx.clearRect(0,0,_this.width,_this.height),ctx.save(),ctx.scale(scale,scale),ctx.drawImage(image,dstX,dstY),ctx.restore(),resolve(),_context.next=28;break;case 24:_context.prev=24,_context.t0=_context.catch(0),console.error(_context.t0),reject(_context.t0);case 28:case"end":return _context.stop()}},_callee,_this,[[0,24]])}));return function(_x,_x2){return _ref3.apply(this,arguments)}}())},getPixelData:function(){var _this2=this,options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new _promise2.default(function(){var _ref4=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2(resolve,reject){var imgData,postData,worker;return _regenerator2.default.wrap(function(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:if(_context2.prev=0,!options.text){_context2.next=5;break}_this2.renderTextToCacheCanvas(options),_context2.next=7;break;case 5:return _context2.next=7,_this2.renderImageToCacheCanvas(options);case 7:imgData=_this2.cacheCtx.getImageData(0,0,_this2.width,_this2.height).data,postData={imageData:imgData,width:_this2.width,height:_this2.height,size:_this2.particleSize},_this2.useWebWorker?(worker=new Worker(_this2.workerPath),worker.onmessage=function(e){return resolve(e.data)},worker.postMessage(postData)):resolve((0,_calc2.default)(postData)),_context2.next=16;break;case 12:_context2.prev=12,_context2.t0=_context2.catch(0),console.error(_context2.t0),reject(_context2.t0);case 16:case"end":return _context2.stop()}},_callee2,_this2,[[0,12]])}));return function(_x4,_x5){return _ref4.apply(this,arguments)}}())},getCollectionData:function(){var _this3=this;return new _promise2.default(function(){var _ref5=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function _callee3(resolve,reject){var size,i,swipe,pixelData,res,m,n,data;return _regenerator2.default.wrap(function(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:_context3.prev=0,size=_this3.particleSize,i=0;case 3:if(!(i<_this3.swipeList.length)){_context3.next=14;break}return swipe=_this3.swipeList[i],_context3.next=7,_this3.getPixelData(swipe);case 7:for(pixelData=_context3.sent,res=[],m=0;m<_this3.rowNum;m++)for(n=0;n<_this3.colNum;n++)data=pixelData[m]&&pixelData[m][n],swipe.randomParticleColor&&data.a&&(data={r:randomInt(0,255),g:randomInt(0,255),b:randomInt(0,255),a:255}),data&&res.push({ox:size*n+(size>>1),oy:size*m+(size>>1),size:size,bg:{r:data.r,g:data.g,b:data.b,a:data.a},row:m,col:n});_this3.swipeList[i].pixelData=res;case 11:i++,_context3.next=3;break;case 14:resolve(),_context3.next=21;break;case 17:_context3.prev=17,_context3.t0=_context3.catch(0),console.error(_context3.t0),reject(_context3.t0);case 21:case"end":return _context3.stop()}},_callee3,_this3,[[0,17]])}));return function(_x6,_x7){return _ref5.apply(this,arguments)}}())},nextIndex:function(){if(this.lastIndex=this.index,++this.index>=this.swipeList.length){if(!this.loop)return void(this.paused=!0);this.index=0,this.loopCount++}this.swipeCount++,this.onIndexChange&&this.onIndexChange({index:this.index})},next:function(){this.paused||(this.nextIndex(),this.updateCollections())},loopSwiper:function(){var _this4=this;if(!this.paused){var duration=this.swipeList[this.index].duration;duration&&setTimeout(function(){_this4.next(),_this4.loopSwiper()},duration)}},getSwipeConfig:function(){var animation=this.animation,randomPosition=this.randomPosition,subConfig=this.swipeList[this.index];return 0===this.swipeCount&&("boolean"==typeof subConfig.initialAnimation&&(animation=subConfig.initialAnimation),"boolean"==typeof subConfig.initialRandomPosition&&(randomPosition=subConfig.initialRandomPosition)),(0,_assign2.default)({},{width:this.width,height:this.height,particleSize:this.particleSize,velocity:this.velocity,shape:this.shape,animation:animation,randomPosition:randomPosition},subConfig)},updateCollections:function(){var _this5=this;if(!this.paused){var pixelData=this.swipeList[this.index].pixelData;if(this.getSwipeConfig().randomPosition){var getDataByPos=function(row,col){for(var res=null,i=0;i<data.length;i++){var d=data[i];if(d.row===row&&d.col===col){res={cell:d,index:i};break}}return res},data=JSON.parse((0,_stringify2.default)(pixelData)),ignoreIndex=[];this.collections.forEach(function(p,i){var cellData=getDataByPos(p.row,p.col);cellData&&cellData.cell&&0===cellData.cell.bg.a&&0===p.tBg.a&&(data.splice(cellData.index,1),ignoreIndex.push(i))}),this.collections.forEach(function(p,i){if(-1===ignoreIndex.indexOf(i)){var randomIndex=randomInt(0,data.length),d=data[randomIndex],bg=d.bg;p.set({row:d.row,col:d.col,tx:d.ox,ty:d.oy,ox:d.ox,oy:d.oy,oBg:{r:bg.r,g:bg.g,b:bg.b,a:bg.a},tBg:{r:bg.r,g:bg.g,b:bg.b,a:bg.a}}),p.reCalc(),data.splice(randomIndex,1)}})}else this.collections.forEach(function(p){var d=pixelData[p.row*_this5.colNum+p.col],bg=d.bg;p.set({oBg:{r:bg.r,g:bg.g,b:bg.b,a:bg.a},tBg:{r:bg.r,g:bg.g,b:bg.b,a:bg.a}}),p.reCalc()})}},run:function(){var _this6=this;return(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function _callee4(){var size,i,j;return _regenerator2.default.wrap(function(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:return _context4.prev=0,_context4.next=3,_this6.getCollectionData();case 3:for(size=_this6.particleSize,i=0;i<_this6.rowNum;i++)for(j=0;j<_this6.colNum;j++)_this6.collections.push(new _particle2.default({ox:size*j+(size>>1),oy:size*i+(size>>1),size:size,shape:_this6.shape,bg:{r:0,g:0,b:0,a:0},row:i,col:j,velocity:_this6.velocity}));_this6.updateCollections(),_this6.render(),_this6.loopSwiper(),_this6.loopAnim(),_context4.next=14;break;case 11:_context4.prev=11,_context4.t0=_context4.catch(0),console.error(_context4.t0);case 14:case"end":return _context4.stop()}},_callee4,_this6,[[0,11]])}))()},needUpdate:function(){return this.collections.some(function(p){return p.shouldUpdate()})},loopAnim:function(){if(!this.needUpdate())return void requestAnimationFrame(this.loopAnim.bind(this));this.render(),requestAnimationFrame(this.loopAnim.bind(this))},render:function(){var _this7=this,config=this.getSwipeConfig();this.cacheCtx.clearRect(0,0,this.width,this.height),this.collections.forEach(function(p){config.animation||p.set({bg:{r:p.tBg.r,g:p.tBg.g,b:p.tBg.b,a:p.tBg.a}}),_this7.cacheCtx.save(),p.update(),p.render({ctx:_this7.cacheCtx}),_this7.cacheCtx.restore()}),this.ctx.clearRect(0,0,this.width,this.height),this.ctx.drawImage(this.cacheCanvas,0,0)}}),module.exports=PixelSwiper},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(43),__esModule:!0}},function(module,exports,__webpack_require__){var core=__webpack_require__(2),$JSON=core.JSON||(core.JSON={stringify:JSON.stringify});module.exports=function(it){return $JSON.stringify.apply($JSON,arguments)}},function(module,exports,__webpack_require__){module.exports=__webpack_require__(45)},function(module,exports,__webpack_require__){var g=function(){return this}()||Function("return this")(),hadRuntime=g.regeneratorRuntime&&Object.getOwnPropertyNames(g).indexOf("regeneratorRuntime")>=0,oldRuntime=hadRuntime&&g.regeneratorRuntime;if(g.regeneratorRuntime=void 0,module.exports=__webpack_require__(46),hadRuntime)g.regeneratorRuntime=oldRuntime;else try{delete g.regeneratorRuntime}catch(e){g.regeneratorRuntime=void 0}},function(module,exports){!function(global){"use strict";function wrap(innerFn,outerFn,self,tryLocsList){var protoGenerator=outerFn&&outerFn.prototype instanceof Generator?outerFn:Generator,generator=Object.create(protoGenerator.prototype),context=new Context(tryLocsList||[]);return generator._invoke=makeInvokeMethod(innerFn,self,context),generator}function tryCatch(fn,obj,arg){try{return{type:"normal",arg:fn.call(obj,arg)}}catch(err){return{type:"throw",arg:err}}}function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}function defineIteratorMethods(prototype){["next","throw","return"].forEach(function(method){prototype[method]=function(arg){return this._invoke(method,arg)}})}function AsyncIterator(generator){function invoke(method,arg,resolve,reject){var record=tryCatch(generator[method],generator,arg);if("throw"!==record.type){var result=record.arg,value=result.value;return value&&"object"==typeof value&&hasOwn.call(value,"__await")?Promise.resolve(value.__await).then(function(value){invoke("next",value,resolve,reject)},function(err){invoke("throw",err,resolve,reject)}):Promise.resolve(value).then(function(unwrapped){result.value=unwrapped,resolve(result)},reject)}reject(record.arg)}function enqueue(method,arg){function callInvokeWithMethodAndArg(){return new Promise(function(resolve,reject){invoke(method,arg,resolve,reject)})}return previousPromise=previousPromise?previousPromise.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg()}var previousPromise;this._invoke=enqueue}function makeInvokeMethod(innerFn,self,context){var state=GenStateSuspendedStart;return function(method,arg){if(state===GenStateExecuting)throw new Error("Generator is already running");if(state===GenStateCompleted){if("throw"===method)throw arg;return doneResult()}for(context.method=method,context.arg=arg;;){var delegate=context.delegate;if(delegate){var delegateResult=maybeInvokeDelegate(delegate,context);if(delegateResult){if(delegateResult===ContinueSentinel)continue;return delegateResult}}if("next"===context.method)context.sent=context._sent=context.arg;else if("throw"===context.method){if(state===GenStateSuspendedStart)throw state=GenStateCompleted,context.arg;context.dispatchException(context.arg)}else"return"===context.method&&context.abrupt("return",context.arg);state=GenStateExecuting;var record=tryCatch(innerFn,self,context);if("normal"===record.type){if(state=context.done?GenStateCompleted:GenStateSuspendedYield,record.arg===ContinueSentinel)continue;return{value:record.arg,done:context.done}}"throw"===record.type&&(state=GenStateCompleted,context.method="throw",context.arg=record.arg)}}}function maybeInvokeDelegate(delegate,context){var method=delegate.iterator[context.method];if(method===undefined){if(context.delegate=null,"throw"===context.method){if(delegate.iterator.return&&(context.method="return",context.arg=undefined,maybeInvokeDelegate(delegate,context),"throw"===context.method))return ContinueSentinel;context.method="throw",context.arg=new TypeError("The iterator does not provide a 'throw' method")}return ContinueSentinel}var record=tryCatch(method,delegate.iterator,context.arg);if("throw"===record.type)return context.method="throw",context.arg=record.arg,context.delegate=null,ContinueSentinel;var info=record.arg;return info?info.done?(context[delegate.resultName]=info.value,context.next=delegate.nextLoc,"return"!==context.method&&(context.method="next",context.arg=undefined),context.delegate=null,ContinueSentinel):info:(context.method="throw",context.arg=new TypeError("iterator result is not an object"),context.delegate=null,ContinueSentinel)}function pushTryEntry(locs){var entry={tryLoc:locs[0]};1 in locs&&(entry.catchLoc=locs[1]),2 in locs&&(entry.finallyLoc=locs[2],entry.afterLoc=locs[3]),this.tryEntries.push(entry)}function resetTryEntry(entry){var record=entry.completion||{};record.type="normal",delete record.arg,entry.completion=record}function Context(tryLocsList){this.tryEntries=[{tryLoc:"root"}],tryLocsList.forEach(pushTryEntry,this),this.reset(!0)}function values(iterable){if(iterable){var iteratorMethod=iterable[iteratorSymbol];if(iteratorMethod)return iteratorMethod.call(iterable);if("function"==typeof iterable.next)return iterable;if(!isNaN(iterable.length)){var i=-1,next=function next(){for(;++i<iterable.length;)if(hasOwn.call(iterable,i))return next.value=iterable[i],next.done=!1,next;return next.value=undefined,next.done=!0,next};return next.next=next}}return{next:doneResult}}function doneResult(){return{value:undefined,done:!0}}var undefined,Op=Object.prototype,hasOwn=Op.hasOwnProperty,$Symbol="function"==typeof Symbol?Symbol:{},iteratorSymbol=$Symbol.iterator||"@@iterator",asyncIteratorSymbol=$Symbol.asyncIterator||"@@asyncIterator",toStringTagSymbol=$Symbol.toStringTag||"@@toStringTag",inModule="object"==typeof module,runtime=global.regeneratorRuntime;if(runtime)return void(inModule&&(module.exports=runtime));runtime=global.regeneratorRuntime=inModule?module.exports:{},runtime.wrap=wrap;var GenStateSuspendedStart="suspendedStart",GenStateSuspendedYield="suspendedYield",GenStateExecuting="executing",GenStateCompleted="completed",ContinueSentinel={},IteratorPrototype={};IteratorPrototype[iteratorSymbol]=function(){return this};var getProto=Object.getPrototypeOf,NativeIteratorPrototype=getProto&&getProto(getProto(values([])));NativeIteratorPrototype&&NativeIteratorPrototype!==Op&&hasOwn.call(NativeIteratorPrototype,iteratorSymbol)&&(IteratorPrototype=NativeIteratorPrototype);var Gp=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(IteratorPrototype);GeneratorFunction.prototype=Gp.constructor=GeneratorFunctionPrototype,GeneratorFunctionPrototype.constructor=GeneratorFunction,GeneratorFunctionPrototype[toStringTagSymbol]=GeneratorFunction.displayName="GeneratorFunction",runtime.isGeneratorFunction=function(genFun){var ctor="function"==typeof genFun&&genFun.constructor;return!!ctor&&(ctor===GeneratorFunction||"GeneratorFunction"===(ctor.displayName||ctor.name))},runtime.mark=function(genFun){return Object.setPrototypeOf?Object.setPrototypeOf(genFun,GeneratorFunctionPrototype):(genFun.__proto__=GeneratorFunctionPrototype,toStringTagSymbol in genFun||(genFun[toStringTagSymbol]="GeneratorFunction")),genFun.prototype=Object.create(Gp),genFun},runtime.awrap=function(arg){return{__await:arg}},defineIteratorMethods(AsyncIterator.prototype),AsyncIterator.prototype[asyncIteratorSymbol]=function(){return this},runtime.AsyncIterator=AsyncIterator,runtime.async=function(innerFn,outerFn,self,tryLocsList){var iter=new AsyncIterator(wrap(innerFn,outerFn,self,tryLocsList));return runtime.isGeneratorFunction(outerFn)?iter:iter.next().then(function(result){return result.done?result.value:iter.next()})},defineIteratorMethods(Gp),Gp[toStringTagSymbol]="Generator",Gp[iteratorSymbol]=function(){return this},Gp.toString=function(){return"[object Generator]"},runtime.keys=function(object){var keys=[];for(var key in object)keys.push(key);return keys.reverse(),function next(){for(;keys.length;){var key=keys.pop();if(key in object)return next.value=key,next.done=!1,next}return next.done=!0,next}},runtime.values=values,Context.prototype={constructor:Context,reset:function(skipTempReset){if(this.prev=0,this.next=0,this.sent=this._sent=undefined,this.done=!1,this.delegate=null,this.method="next",this.arg=undefined,this.tryEntries.forEach(resetTryEntry),!skipTempReset)for(var name in this)"t"===name.charAt(0)&&hasOwn.call(this,name)&&!isNaN(+name.slice(1))&&(this[name]=undefined)},stop:function(){this.done=!0;var rootEntry=this.tryEntries[0],rootRecord=rootEntry.completion;if("throw"===rootRecord.type)throw rootRecord.arg;return this.rval},dispatchException:function(exception){function handle(loc,caught){return record.type="throw",record.arg=exception,context.next=loc,caught&&(context.method="next",context.arg=undefined),!!caught}if(this.done)throw exception;for(var context=this,i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev<entry.catchLoc)return handle(entry.catchLoc,!0);if(this.prev<entry.finallyLoc)return handle(entry.finallyLoc)}else if(hasCatch){if(this.prev<entry.catchLoc)return handle(entry.catchLoc,!0)}else{if(!hasFinally)throw new Error("try statement without catch or finally");if(this.prev<entry.finallyLoc)return handle(entry.finallyLoc)}}}},abrupt:function(type,arg){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev<entry.finallyLoc){var finallyEntry=entry;break}}finallyEntry&&("break"===type||"continue"===type)&&finallyEntry.tryLoc<=arg&&arg<=finallyEntry.finallyLoc&&(finallyEntry=null);var record=finallyEntry?finallyEntry.completion:{};return record.type=type,record.arg=arg,finallyEntry?(this.method="next",this.next=finallyEntry.finallyLoc,ContinueSentinel):this.complete(record)},complete:function(record,afterLoc){if("throw"===record.type)throw record.arg;return"break"===record.type||"continue"===record.type?this.next=record.arg:"return"===record.type?(this.rval=this.arg=record.arg,this.method="return",this.next="end"):"normal"===record.type&&afterLoc&&(this.next=afterLoc),ContinueSentinel},finish:function(finallyLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=undefined),ContinueSentinel}}}(function(){return this}()||Function("return this")())},function(module,exports,__webpack_require__){"use strict";exports.__esModule=!0;var _promise=__webpack_require__(22),_promise2=function(obj){return obj&&obj.__esModule?obj:{default:obj}}(_promise);exports.default=function(fn){return function(){var gen=fn.apply(this,arguments);return new _promise2.default(function(resolve,reject){function step(key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}if(!info.done)return _promise2.default.resolve(value).then(function(value){step("next",value)},function(err){step("throw",err)});resolve(value)}return step("next")})}}},function(module,exports,__webpack_require__){__webpack_require__(49),__webpack_require__(50),__webpack_require__(62),__webpack_require__(66),__webpack_require__(77),__webpack_require__(78),module.exports=__webpack_require__(2).Promise},function(module,exports){},function(module,exports,__webpack_require__){"use strict";var $at=__webpack_require__(51)(!0);__webpack_require__(23)(String,"String",function(iterated){this._t=String(iterated),this._i=0},function(){var point,O=this._t,index=this._i;return index>=O.length?{value:void 0,done:!0}:(point=$at(O,index),this._i+=point.length,{value:point,done:!1})})},function(module,exports,__webpack_require__){var toInteger=__webpack_require__(14),defined=__webpack_require__(15);module.exports=function(TO_STRING){return function(that,pos){var a,b,s=String(defined(that)),i=toInteger(pos),l=s.length;return i<0||i>=l?TO_STRING?"":void 0:(a=s.charCodeAt(i),a<55296||a>56319||i+1===l||(b=s.charCodeAt(i+1))<56320||b>57343?TO_STRING?s.charAt(i):a:TO_STRING?s.slice(i,i+2):b-56320+(a-55296<<10)+65536)}}},function(module,exports,__webpack_require__){module.exports=!__webpack_require__(6)&&!__webpack_require__(16)(function(){return 7!=Object.defineProperty(__webpack_require__(17)("div"),"a",{get:function(){return 7}}).a})},function(module,exports,__webpack_require__){var isObject=__webpack_require__(8);module.exports=function(it,S){if(!isObject(it))return it;var fn,val;if(S&&"function"==typeof(fn=it.toString)&&!isObject(val=fn.call(it)))return val;if("function"==typeof(fn=it.valueOf)&&!isObject(val=fn.call(it)))return val;if(!S&&"function"==typeof(fn=it.toString)&&!isObject(val=fn.call(it)))return val;throw TypeError("Can't convert object to primitive value")}},function(module,exports,__webpack_require__){module.exports=__webpack_require__(5)},function(module,exports,__webpack_require__){"use strict";var create=__webpack_require__(56),descriptor=__webpack_require__(25),setToStringTag=__webpack_require__(20),IteratorPrototype={};__webpack_require__(5)(IteratorPrototype,__webpack_require__(1)("iterator"),function(){return this}),module.exports=function(Constructor,NAME,next){Constructor.prototype=create(IteratorPrototype,{next:descriptor(1,next)}),setToStringTag(Constructor,NAME+" Iterator")}},function(module,exports,__webpack_require__){var anObject=__webpack_require__(3),dPs=__webpack_require__(57),enumBugKeys=__webpack_require__(31),IE_PROTO=__webpack_require__(19)("IE_PROTO"),Empty=function(){},createDict=function(){var iframeDocument,iframe=__webpack_require__(17)("iframe"),i=enumBugKeys.length;for(iframe.style.display="none",__webpack_require__(32).appendChild(iframe),iframe.src="javascript:",iframeDocument=iframe.contentWindow.document,iframeDocument.open(),iframeDocument.write("<script>document.F=Object<\/script>"),iframeDocument.close(),createDict=iframeDocument.F;i--;)delete createDict.prototype[enumBugKeys[i]];return createDict()};module.exports=Object.create||function(O,Properties){var result;return null!==O?(Empty.prototype=anObject(O),result=new Empty,Empty.prototype=null,result[IE_PROTO]=O):result=createDict(),void 0===Properties?result:dPs(result,Properties)}},function(module,exports,__webpack_require__){var dP=__webpack_require__(7),anObject=__webpack_require__(3),getKeys=__webpack_require__(26);module.exports=__webpack_require__(6)?Object.defineProperties:function(O,Properties){anObject(O);for(var P,keys=getKeys(Properties),length=keys.length,i=0;length>i;)dP.f(O,P=keys[i++],Properties[P]);return O}},function(module,exports,__webpack_require__){var has=__webpack_require__(12),toIObject=__webpack_require__(18),arrayIndexOf=__webpack_require__(59)(!1),IE_PROTO=__webpack_require__(19)("IE_PROTO");module.exports=function(object,names){var key,O=toIObject(object),i=0,result=[];for(key in O)key!=IE_PROTO&&has(O,key)&&result.push(key);for(;names.length>i;)has(O,key=names[i++])&&(~arrayIndexOf(result,key)||result.push(key));return result}},function(module,exports,__webpack_require__){var toIObject=__webpack_require__(18),toLength=__webpack_require__(28),toAbsoluteIndex=__webpack_require__(60);module.exports=function(IS_INCLUDES){return function($this,el,fromIndex){var value,O=toIObject($this),length=toLength(O.length),index=toAbsoluteIndex(fromIndex,length);if(IS_INCLUDES&&el!=el){for(;length>index;)if((value=O[index++])!=value)return!0}else for(;length>index;index++)if((IS_INCLUDES||index in O)&&O[index]===el)return IS_INCLUDES||index||0;return!IS_INCLUDES&&-1}}},function(module,exports,__webpack_require__){var toInteger=__webpack_require__(14),max=Math.max,min=Math.min;module.exports=function(index,length){return index=toInteger(index),index<0?max(index+length,0):min(index,length)}},function(module,exports,__webpack_require__){var has=__webpack_require__(12),toObject=__webpack_require__(33),IE_PROTO=__webpack_require__(19)("IE_PROTO"),ObjectProto=Object.prototype;module.exports=Object.getPrototypeOf||function(O){return O=toObject(O),has(O,IE_PROTO)?O[IE_PROTO]:"function"==typeof O.constructor&&O instanceof O.constructor?O.constructor.prototype:O instanceof Object?ObjectProto:null}},function(module,exports,__webpack_require__){__webpack_require__(63);for(var global=__webpack_require__(0),hide=__webpack_require__(5),Iterators=__webpack_require__(9),TO_STRING_TAG=__webpack_require__(1)("toStringTag"),DOMIterables="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),i=0;i<DOMIterables.length;i++){var NAME=DOMIterables[i],Collection=global[NAME],proto=Collection&&Collection.prototype;proto&&!proto[TO_STRING_TAG]&&hide(proto,TO_STRING_TAG,NAME),Iterators[NAME]=Iterators.Array}},function(module,exports,__webpack_require__){"use strict";var addToUnscopables=__webpack_require__(64),step=__webpack_require__(65),Iterators=__webpack_require__(9),toIObject=__webpack_require__(18);module.exports=__webpack_require__(23)(Array,"Array",function(iterated,kind){this._t=toIObject(iterated),this._i=0,this._k=kind},function(){var O=this._t,kind=this._k,index=this._i++;return!O||index>=O.length?(this._t=void 0,step(1)):"keys"==kind?step(0,index):"values"==kind?step(0,O[index]):step(0,[index,O[index]])},"values"),Iterators.Arguments=Iterators.Array,addToUnscopables("keys"),addToUnscopables("values"),addToUnscopables("entries")},function(module,exports){module.exports=function(){}},function(module,exports){module.exports=function(done,value){return{value:value,done:!!done}}},function(module,exports,__webpack_require__){"use strict";var Internal,newGenericPromiseCapability,OwnPromiseCapability,Wrapper,LIBRARY=__webpack_require__(24),global=__webpack_require__(0),ctx=__webpack_require__(10),classof=__webpack_require__(34),$export=__webpack_require__(4),isObject=__webpack_require__(8),aFunction=__webpack_require__(11),anInstance=__webpack_require__(67),forOf=__webpack_require__(68),speciesConstructor=__webpack_require__(35),task=__webpack_require__(36).set,microtask=__webpack_require__(73)(),newPromiseCapabilityModule=__webpack_require__(21),perform=__webpack_require__(37),promiseResolve=__webpack_require__(38),TypeError=global.TypeError,process=global.process,$Promise=global.Promise,isNode="process"==classof(process),empty=function(){},newPromiseCapability=newGenericPromiseCapability=newPromiseCapabilityModule.f,USE_NATIVE=!!function(){try{var promise=$Promise.resolve(1),FakePromise=(promise.constructor={})[__webpack_require__(1)("species")]=function(exec){exec(empty,empty)};return(isNode||"function"==typeof PromiseRejectionEvent)&&promise.then(empty)instanceof FakePromise}catch(e){}}(),isThenable=function(it){var then;return!(!isObject(it)||"function"!=typeof(then=it.then))&&then},notify=function(promise,isReject){if(!promise._n){promise._n=!0;var chain=promise._c;microtask(function(){for(var value=promise._v,ok=1==promise._s,i=0;chain.length>i;)!function(reaction){var result,then,handler=ok?reaction.ok:reaction.fail,resolve=reaction.resolve,reject=reaction.reject,domain=reaction.domain;try{handler?(ok||(2==promise._h&&onHandleUnhandled(promise),promise._h=1),!0===handler?result=value:(domain&&domain.enter(),result=handler(value),domain&&domain.exit()),result===reaction.promise?reject(TypeError("Promise-chain cycle")):(then=isThenable(result))?then.call(result,resolve,reject):resolve(result)):reject(value)}catch(e){reject(e)}}(chain[i++]);promise._c=[],promise._n=!1,isReject&&!promise._h&&onUnhandled(promise)})}},onUnhandled=function(promise){task.call(global,function(){var result,handler,console,value=promise._v,unhandled=isUnhandled(promise);if(unhandled&&(result=perform(function(){isNode?process.emit("unhandledRejection",value,promise):(handler=global.onunhandledrejection)?handler({promise:promise,reason:value}):(console=global.console)&&console.error&&console.error("Unhandled promise rejection",value)}),promise._h=isNode||isUnhandled(promise)?2:1),promise._a=void 0,unhandled&&result.e)throw result.v})},isUnhandled=function(promise){return 1!==promise._h&&0===(promise._a||promise._c).length},onHandleUnhandled=function(promise){task.call(global,function(){var handler;isNode?process.emit("rejectionHandled",promise):(handler=global.onrejectionhandled)&&handler({promise:promise,reason:promise._v})})},$reject=function(value){var promise=this;promise._d||(promise._d=!0,promise=promise._w||promise,promise._v=value,promise._s=2,promise._a||(promise._a=promise._c.slice()),notify(promise,!0))},$resolve=function(value){var then,promise=this;if(!promise._d){promise._d=!0,promise=promise._w||promise;try{if(promise===value)throw TypeError("Promise can't be resolved itself");(then=isThenable(value))?microtask(function(){var wrapper={_w:promise,_d:!1};try{then.call(value,ctx($resolve,wrapper,1),ctx($reject,wrapper,1))}catch(e){$reject.call(wrapper,e)}}):(promise._v=value,promise._s=1,notify(promise,!1))}catch(e){$reject.call({_w:promise,_d:!1},e)}}};USE_NATIVE||($Promise=function(executor){anInstance(this,$Promise,"Promise","_h"),aFunction(executor),Internal.call(this);try{executor(ctx($resolve,this,1),ctx($reject,this,1))}catch(err){$reject.call(this,err)}},Internal=function(executor){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1},Internal.prototype=__webpack_require__(74)($Promise.prototype,{then:function(onFulfilled,onRejected){var reaction=newPromiseCapability(speciesConstructor(this,$Promise));return reaction.ok="function"!=typeof onFulfilled||onFulfilled,reaction.fail="function"==typeof onRejected&&onRejected,reaction.domain=isNode?process.domain:void 0,this._c.push(reaction),this._a&&this._a.push(reaction),this._s&&notify(this,!1),reaction.promise},catch:function(onRejected){return this.then(void 0,onRejected)}}),OwnPromiseCapability=function(){var promise=new Internal;this.promise=promise,this.resolve=ctx($resolve,promise,1),this.reject=ctx($reject,promise,1)},newPromiseCapabilityModule.f=newPromiseCapability=function(C){return C===$Promise||C===Wrapper?new OwnPromiseCapability(C):newGenericPromiseCapability(C)}),$export($export.G+$export.W+$export.F*!USE_NATIVE,{Promise:$Promise}),__webpack_require__(20)($Promise,"Promise"),__webpack_require__(75)("Promise"),Wrapper=__webpack_require__(2).Promise,$export($export.S+$export.F*!USE_NATIVE,"Promise",{reject:function(r){var capability=newPromiseCapability(this);return(0,capability.reject)(r),capability.promise}}),$export($export.S+$export.F*(LIBRARY||!USE_NATIVE),"Promise",{resolve:function(x){return promiseResolve(LIBRARY&&this===Wrapper?$Promise:this,x)}}),$export($export.S+$export.F*!(USE_NATIVE&&__webpack_require__(76)(function(iter){$Promise.all(iter).catch(empty)})),"Promise",{all:function(iterable){var C=this,capability=newPromiseCapability(C),resolve=capability.resolve,reject=capability.reject,result=perform(function(){var values=[],index=0,remaining=1;forOf(iterable,!1,function(promise){var $index=index++,alreadyCalled=!1;values.push(void 0),remaining++,C.resolve(promise).then(function(value){alreadyCalled||(alreadyCalled=!0,values[$index]=value,--remaining||resolve(values))},reject)}),--remaining||resolve(values)});return result.e&&reject(result.v),capability.promise},race:function(iterable){var C=this,capability=newPromiseCapability(C),reject=capability.reject,result=perform(function(){forOf(iterable,!1,function(promise){C.resolve(promise).then(capability.resolve,reject)})});return result.e&&reject(result.v),capability.promise}})},function(module,exports){module.exports=function(it,Constructor,name,forbiddenField){if(!(it instanceof Constructor)||void 0!==forbiddenField&&forbiddenField in it)throw TypeError(name+": incorrect invocation!");return it}},function(module,exports,__webpack_require__){var ctx=__webpack_require__(10),call=__webpack_require__(69),isArrayIter=__webpack_require__(70),anObject=__webpack_require__(3),toLength=__webpack_require__(28),getIterFn=__webpack_require__(71),BREAK={},RETURN={},exports=module.exports=function(iterable,entries,fn,that,ITERATOR){var length,step,iterator,result,iterFn=ITERATOR?function(){return iterable}:getIterFn(iterable),f=ctx(fn,that,entries?2:1),index=0;if("function"!=typeof iterFn)throw TypeError(iterable+" is not iterable!");if(isArrayIter(iterFn)){for(length=toLength(iterable.length);length>index;index++)if((result=entries?f(anObject(step=iterable[index])[0],step[1]):f(iterable[index]))===BREAK||result===RETURN)return result}else for(iterator=iterFn.call(iterable);!(step=iterator.next()).done;)if((result=call(iterator,f,step.value,entries))===BREAK||result===RETURN)return result};exports.BREAK=BREAK,exports.RETURN=RETURN},function(module,exports,__webpack_require__){var anObject=__webpack_require__(3);module.exports=function(iterator,fn,value,entries){try{return entries?fn(anObject(value)[0],value[1]):fn(value)}catch(e){var ret=iterator.return;throw void 0!==ret&&anObject(ret.call(iterator)),e}}},function(module,exports,__webpack_require__){var Iterators=__webpack_require__(9),ITERATOR=__webpack_require__(1)("iterator"),ArrayProto=Array.prototype;module.exports=function(it){return void 0!==it&&(Iterators.Array===it||ArrayProto[ITERATOR]===it)}},function(module,exports,__webpack_require__){var classof=__webpack_require__(34),ITERATOR=__webpack_require__(1)("iterator"),Iterators=__webpack_require__(9);module.exports=__webpack_require__(2).getIteratorMethod=function(it){if(void 0!=it)return it[ITERATOR]||it["@@iterator"]||Iterators[classof(it)]}},function(module,exports){module.exports=function(fn,args,that){var un=void 0===that;switch(args.length){case 0:return un?fn():fn.call(that);case 1:return un?fn(args[0]):fn.call(that,args[0]);case 2:return un?fn(args[0],args[1]):fn.call(that,args[0],args[1]);case 3:return un?fn(args[0],args[1],args[2]):fn.call(that,args[0],args[1],args[2]);case 4:return un?fn(args[0],args[1],args[2],args[3]):fn.call(that,args[0],args[1],args[2],args[3])}return fn.apply(that,args)}},function(module,exports,__webpack_require__){var global=__webpack_require__(0),macrotask=__webpack_require__(36).set,Observer=global.MutationObserver||global.WebKitMutationObserver,process=global.process,Promise=global.Promise,isNode="process"==__webpack_require__(13)(process);module.exports=function(){var head,last,notify,flush=function(){var parent,fn;for(isNode&&(parent=process.domain)&&parent.exit();head;){fn=head.fn,head=head.next;try{fn()}catch(e){throw head?notify():last=void 0,e}}last=void 0,parent&&parent.enter()};if(isNode)notify=function(){process.nextTick(flush)};else if(!Observer||global.navigator&&global.navigator.standalone)if(Promise&&Promise.resolve){var promise=Promise.resolve();notify=function(){promise.then(flush)}}else notify=function(){macrotask.call(global,flush)};else{var toggle=!0,node=document.createTextNode("");new Observer(flush).observe(node,{characterData:!0}),notify=function(){node.data=toggle=!toggle}}return function(fn){var task={fn:fn,next:void 0};last&&(last.next=task),head||(head=task,notify()),last=task}}},function(module,exports,__webpack_require__){var hide=__webpack_require__(5);module.exports=function(target,src,safe){for(var key in src)safe&&target[key]?target[key]=src[key]:hide(target,key,src[key]);return target}},function(module,exports,__webpack_require__){"use strict";var global=__webpack_require__(0),core=__webpack_require__(2),dP=__webpack_require__(7),DESCRIPTORS=__webpack_require__(6),SPECIES=__webpack_require__(1)("species");module.exports=function(KEY){var C="function"==typeof core[KEY]?core[KEY]:global[KEY];DESCRIPTORS&&C&&!C[SPECIES]&&dP.f(C,SPECIES,{configurable:!0,get:function(){return this}})}},function(module,exports,__webpack_require__){var ITERATOR=__webpack_require__(1)("iterator"),SAFE_CLOSING=!1;try{var riter=[7][ITERATOR]();riter.return=function(){SAFE_CLOSING=!0},Array.from(riter,function(){throw 2})}catch(e){}module.exports=function(exec,skipClosing){if(!skipClosing&&!SAFE_CLOSING)return!1;var safe=!1;try{var arr=[7],iter=arr[ITERATOR]();iter.next=function(){return{done:safe=!0}},arr[ITERATOR]=function(){return iter},exec(arr)}catch(e){}return safe}},function(module,exports,__webpack_require__){"use strict";var $export=__webpack_require__(4),core=__webpack_require__(2),global=__webpack_require__(0),speciesConstructor=__webpack_require__(35),promiseResolve=__webpack_require__(38);$export($export.P+$export.R,"Promise",{finally:function(onFinally){var C=speciesConstructor(this,core.Promise||global.Promise),isFunction="function"==typeof onFinally;return this.then(isFunction?function(x){return promiseResolve(C,onFinally()).then(function(){return x})}:onFinally,isFunction?function(e){return promiseResolve(C,onFinally()).then(function(){throw e})}:onFinally)}})},function(module,exports,__webpack_require__){"use strict";var $export=__webpack_require__(4),newPromiseCapability=__webpack_require__(21),perform=__webpack_require__(37);$export($export.S,"Promise",{try:function(callbackfn){var promiseCapability=newPromiseCapability.f(this),result=perform(callbackfn);return(result.e?promiseCapability.reject:promiseCapability.resolve)(result.v),promiseCapability.promise}})},function(module,exports,__webpack_require__){__webpack_require__(80),module.exports=__webpack_require__(2).Object.assign},function(module,exports,__webpack_require__){var $export=__webpack_require__(4);$export($export.S+$export.F,"Object",{assign:__webpack_require__(81)})},function(module,exports,__webpack_require__){"use strict";var getKeys=__webpack_require__(26),gOPS=__webpack_require__(82),pIE=__webpack_require__(83),toObject=__webpack_require__(33),IObject=__webpack_require__(27),$assign=Object.assign;module.exports=!$assign||__webpack_require__(16)(function(){var A={},B={},S=Symbol(),K="abcdefghijklmnopqrst";return A[S]=7,K.split("").forEach(function(k){B[k]=k}),7!=$assign({},A)[S]||Object.keys($assign({},B)).join("")!=K})?function(target,source){for(var T=toObject(target),aLen=arguments.length,index=1,getSymbols=gOPS.f,isEnum=pIE.f;aLen>index;)for(var key,S=IObject(arguments[index++]),keys=getSymbols?getKeys(S).concat(getSymbols(S)):getKeys(S),length=keys.length,j=0;length>j;)isEnum.call(S,key=keys[j++])&&(T[key]=S[key]);return T}:$assign},function(module,exports){exports.f=Object.getOwnPropertySymbols},function(module,exports){exports.f={}.propertyIsEnumerable},function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _assign=__webpack_require__(39),_assign2=_interopRequireDefault(_assign),_classCallCheck2=__webpack_require__(40),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_createClass2=__webpack_require__(85),_createClass3=_interopRequireDefault(_createClass2),ceil=Math.ceil,abs=Math.abs,sqrt=Math.sqrt,pow=Math.pow,Particle=function(){function Particle(options){(0,_classCallCheck3.default)(this,Particle),this.set(options),this.x=this.ox,this.y=this.oy,this.tx=this.ox,this.ty=this.oy}return(0,_createClass3.default)(Particle,[{key:"set",value:function(options){for(var key in options)options.hasOwnProperty(key)&&(this[key]=options[key])}}]),Particle}();exports.default=Particle,(0,_assign2.default)(Particle.prototype,{ox:0,oy:0,x:0,y:0,tx:0,ty:0,row:0,col:0,frameX:0,frameY:0,frameR:0,frameG:0,frameB:0,frameA:0,frameNum:1,shape:"square",oBg:{r:0,g:0,b:0,a:0},bg:{r:0,g:0,b:0,a:0},tBg:{r:0,g:0,b:0,a:0},size:1,layer:0,velocity:1,reCalc:function(){var framePosition=ceil(sqrt(pow(this.tx-this.x,2)+pow(this.ty-this.y,2))/this.velocity)||1,frameBgR=ceil((this.tBg.r-this.bg.r)/this.velocity)||1,frameBgG=ceil((this.tBg.g-this.bg.g)/this.velocity)||1,frameBgB=ceil((this.tBg.b-this.bg.b)/this.velocity)||1,frameBgA=ceil((this.tBg.a-this.bg.a)/this.velocity)||1;this.frameNum=Math.max(60,framePosition,frameBgR,frameBgG,frameBgB,frameBgA),this.frameX=(this.tx-this.x)/this.frameNum||0,this.frameY=(this.ty-this.y)/this.frameNum||0,this.frameR=(this.tBg.r-this.bg.r)/this.frameNum||0,this.frameG=(this.tBg.g-this.bg.g)/this.frameNum||0,this.frameB=(this.tBg.b-this.bg.b)/this.frameNum||0,this.frameA=(this.tBg.a-this.bg.a)/this.frameNum||0},shouldUpdate:function(){return this.bg.a&&(this.x!==this.tx||this.y!==this.ty||this.bg.r!==this.tBg.r||this.bg.g!==this.tBg.g||this.bg.b!==this.tBg.b||this.bg.a!==this.tBg.a)},update:function(){var xUpdate=this.x!==this.tx,yUpdate=this.y!==this.ty,rUpdate=this.bg.r!==this.tBg.r,gUpdate=this.bg.g!==this.tBg.g,bUpdate=this.bg.b!==this.tBg.b,aUpdate=this.bg.a!==this.tBg.a;if(xUpdate){if(abs(this.tx-this.x)<abs(this.frameX))return void(this.x=this.tx);this.x+=this.frameX}if(yUpdate){if(abs(this.ty-this.y)<abs(this.frameY))return void(this.y=this.ty);this.y+=this.frameY}if(rUpdate){if(abs(this.tBg.r-this.bg.r)<abs(this.frameR))return void(this.bg.r=this.tBg.r);this.bg.r+=this.frameR}if(gUpdate){if(abs(this.tBg.g-this.bg.g)<abs(this.frameG))return void(this.bg.g=this.tBg.g);this.bg.g+=this.frameG}if(bUpdate){if(abs(this.tBg.b-this.bg.b)<abs(this.frameB))return void(this.bg.b=this.tBg.b);this.bg.b+=this.frameB}if(aUpdate){if(abs(this.tBg.a-this.bg.a)<abs(this.frameA))return void(this.bg.a=this.tBg.a);this.bg.a+=this.frameA}},render:function(_ref){var ctx=_ref.ctx;ctx instanceof CanvasRenderingContext2D&&this.bg.a&&(this.bg.a&&(ctx.globalAlpha=this.bg.a/255),ctx.fillStyle="rgb("+~~this.bg.r+","+~~this.bg.g+","+~~this.bg.b+")",this.renderShape(ctx))},renderShape:function(ctx){"square"===this.shape?ctx.fillRect(~~(this.x-this.size/2),~~(this.y-this.size/2),this.size,this.size):"round"===this.shape&&(ctx.beginPath(),ctx.arc(~~this.x,~~this.y,this.size>>1||1,0,2*Math.PI,!0),ctx.closePath(),ctx.fill())}})},function(module,exports,__webpack_require__){"use strict";exports.__esModule=!0;var _defineProperty=__webpack_require__(86),_defineProperty2=function(obj){return obj&&obj.__esModule?obj:{default:obj}}(_defineProperty);exports.default=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),(0,_defineProperty2.default)(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}()},function(module,exports,__webpack_require__){module.exports={default:__webpack_require__(87),__esModule:!0}},function(module,exports,__webpack_require__){__webpack_require__(88);var $Object=__webpack_require__(2).Object;module.exports=function(it,key,desc){return $Object.defineProperty(it,key,desc)}},function(module,exports,__webpack_require__){var $export=__webpack_require__(4);$export($export.S+$export.F*!__webpack_require__(6),"Object",{defineProperty:__webpack_require__(7).f})},function(module,exports,__webpack_require__){"use strict";function avg(arr){return arr&&arr.length?arr.reduce(function(a,b){return a+b})/arr.length:0}function calcRgbaData(){for(var data=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},imageData=data.imageData,width=data.width,res=[],i=0;i<imageData.length;i+=4)i/4%width==0&&res.push([]),res[res.length-1].push([imageData[i],imageData[i+1],imageData[i+2],imageData[i+3]]);return res}function calcPixelData(data,rgbaData){for(var res=[],size=data.size,colNum=Math.ceil(data.width/size),rowNum=Math.ceil(data.height/size),i=0;i<rowNum;i++){res.push([]);for(var j=0;j<colNum;j++){for(var startCol=size*i,startRow=size*j,squareData=[],m=startCol;m<startCol+size;m++)for(var n=startRow;n<startRow+size;n++)rgbaData[m]&&rgbaData[m][n]?squareData.push(rgbaData[m][n]):squareData.push([0,0,0,0]);squareData=squareData.filter(function(d){return d[3]});var avgR=avg(squareData.map(function(d){return d[0]})),avgG=avg(squareData.map(function(d){return d[1]})),avgB=avg(squareData.map(function(d){return d[2]})),avgA=avg(squareData.map(function(d){return d[3]}));res[i].push({r:Math.round(avgR),g:Math.round(avgG),b:Math.round(avgB),a:Math.round(avgA)})}}return res}module.exports=function(data){return calcPixelData(data,calcRgbaData(data))}}])});
2 | //# sourceMappingURL=pixelSwiper.js.map


--------------------------------------------------------------------------------
/dist/pixelSwiper.worker.js:
--------------------------------------------------------------------------------
1 | !function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory():"function"==typeof define&&define.amd?define([],factory):"object"==typeof exports?exports.pixelSwiper=factory():root.pixelSwiper=factory()}("undefined"!=typeof self?self:this,function(){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=90)}({90:function(module,exports,__webpack_require__){"use strict";function avg(arr){return arr&&arr.length?arr.reduce(function(a,b){return a+b})/arr.length:0}function calcRgbaData(){for(var data=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},imageData=data.imageData,width=data.width,res=[],i=0;i<imageData.length;i+=4)i/4%width==0&&res.push([]),res[res.length-1].push([imageData[i],imageData[i+1],imageData[i+2],imageData[i+3]]);return res}function calcPixelData(data,rgbaData){for(var res=[],size=data.size,colNum=Math.ceil(data.width/size),rowNum=Math.ceil(data.height/size),i=0;i<rowNum;i++){res.push([]);for(var j=0;j<colNum;j++){for(var startCol=size*i,startRow=size*j,squareData=[],m=startCol;m<startCol+size;m++)for(var n=startRow;n<startRow+size;n++)rgbaData[m]&&rgbaData[m][n]?squareData.push(rgbaData[m][n]):squareData.push([0,0,0,0]);squareData=squareData.filter(function(d){return d[3]});var avgR=avg(squareData.map(function(d){return d[0]})),avgG=avg(squareData.map(function(d){return d[1]})),avgB=avg(squareData.map(function(d){return d[2]})),avgA=avg(squareData.map(function(d){return d[3]}));res[i].push({r:Math.round(avgR),g:Math.round(avgG),b:Math.round(avgB),a:Math.round(avgA)})}}return res}onmessage=function(e){var rgbaData=calcRgbaData(e.data),pixelData=calcPixelData(e.data,rgbaData);postMessage(pixelData)}}})});
2 | //# sourceMappingURL=pixelSwiper.worker.js.map


--------------------------------------------------------------------------------
/dist/pixelSwiper.worker.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///pixelSwiper.worker.js","webpack:///webpack/bootstrap 79e8c058a9c95b05ea2b","webpack:///./src/calc.worker.js"],"names":["root","factory","exports","module","define","amd","self","this","modules","__webpack_require__","moduleId","installedModules","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","90","avg","arr","length","reduce","a","b","calcRgbaData","data","arguments","undefined","imageData","width","res","push","calcPixelData","rgbaData","size","colNum","Math","ceil","rowNum","height","j","startCol","startRow","squareData","filter","avgR","map","avgG","avgB","avgA","r","round","g","onmessage","e","pixelData","postMessage"],"mappings":"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","file":"pixelSwiper.worker.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"pixelSwiper\"] = factory();\n\telse\n\t\troot[\"pixelSwiper\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"pixelSwiper\"] = factory();\n\telse\n\t\troot[\"pixelSwiper\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 90);\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ 90:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nonmessage = function onmessage(e) {\n  var rgbaData = calcRgbaData(e.data);\n  var pixelData = calcPixelData(e.data, rgbaData);\n  postMessage(pixelData);\n};\n\nfunction avg(arr) {\n  if (!arr || !arr.length) return 0;\n  return arr.reduce(function (a, b) {\n    return a + b;\n  }) / arr.length;\n}\n\nfunction calcRgbaData() {\n  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n  var imageData = data.imageData;\n  var width = data.width;\n  var res = [];\n  for (var i = 0; i < imageData.length; i += 4) {\n    if (i / 4 % width === 0) {\n      res.push([]);\n    }\n    res[res.length - 1].push([imageData[i], imageData[i + 1], imageData[i + 2], imageData[i + 3]]);\n  }\n  return res;\n}\n\nfunction calcPixelData(data, rgbaData) {\n  var res = [];\n  var size = data.size;\n  var colNum = Math.ceil(data.width / size);\n  var rowNum = Math.ceil(data.height / size);\n\n  for (var i = 0; i < rowNum; i++) {\n    res.push([]);\n    for (var j = 0; j < colNum; j++) {\n      var startCol = size * i;\n      var startRow = size * j;\n      var squareData = [];\n      for (var m = startCol; m < startCol + size; m++) {\n        for (var n = startRow; n < startRow + size; n++) {\n          if (rgbaData[m] && rgbaData[m][n]) {\n            squareData.push(rgbaData[m][n]);\n          } else {\n            squareData.push([0, 0, 0, 0]);\n          }\n        }\n      }\n\n      squareData = squareData.filter(function (d) {\n        return d[3];\n      });\n      var avgR = avg(squareData.map(function (d) {\n        return d[0];\n      }));\n      var avgG = avg(squareData.map(function (d) {\n        return d[1];\n      }));\n      var avgB = avg(squareData.map(function (d) {\n        return d[2];\n      }));\n      var avgA = avg(squareData.map(function (d) {\n        return d[3];\n      }));\n      res[i].push({\n        r: Math.round(avgR),\n        g: Math.round(avgG),\n        b: Math.round(avgB),\n        a: Math.round(avgA)\n      });\n    }\n  }\n  return res;\n}\n\n/***/ })\n\n/******/ });\n});\n\n\n// WEBPACK FOOTER //\n// pixelSwiper.worker.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 90);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 79e8c058a9c95b05ea2b","onmessage = function (e) {\r\n  const rgbaData  = calcRgbaData(e.data);\r\n  const pixelData = calcPixelData(e.data, rgbaData);\r\n  postMessage(pixelData);\r\n};\r\n\r\nfunction avg(arr) {\r\n  if (!arr || !arr.length) return 0;\r\n  return arr.reduce((a, b) => a + b) / arr.length;\r\n}\r\n\r\nfunction calcRgbaData(data = {}) {\r\n  const imageData = data.imageData;\r\n  const width     = data.width;\r\n  const res       = [];\r\n  for (let i = 0; i < imageData.length; i += 4) {\r\n    if (i / 4 % width === 0) {\r\n      res.push([]);\r\n    }\r\n    res[res.length - 1].push([imageData[i], imageData[i + 1], imageData[i + 2], imageData[i + 3]]);\r\n  }\r\n  return res;\r\n}\r\n\r\nfunction calcPixelData(data, rgbaData) {\r\n  const res    = [];\r\n  const size   = data.size;\r\n  const colNum = Math.ceil(data.width / size);\r\n  const rowNum = Math.ceil(data.height / size);\r\n\r\n  for (let i = 0; i < rowNum; i++) {\r\n    res.push([]);\r\n    for (let j = 0; j < colNum; j++) {\r\n      const startCol = size * i;\r\n      const startRow = size * j;\r\n      let squareData = [];\r\n      for (let m = startCol; m < startCol + size; m++) {\r\n        for (let n = startRow; n < startRow + size; n++) {\r\n          if (rgbaData[m] && rgbaData[m][n]) {\r\n            squareData.push(rgbaData[m][n]);\r\n          } else {\r\n            squareData.push([0, 0, 0, 0]);\r\n          }\r\n        }\r\n      }\r\n\r\n      squareData = squareData.filter(d => d[3]);\r\n      const avgR = avg(squareData.map(d => d[0]));\r\n      const avgG = avg(squareData.map(d => d[1]));\r\n      const avgB = avg(squareData.map(d => d[2]));\r\n      const avgA = avg(squareData.map(d => d[3]));\r\n      res[i].push({\r\n        r: Math.round(avgR),\r\n        g: Math.round(avgG),\r\n        b: Math.round(avgB),\r\n        a: Math.round(avgA),\r\n      });\r\n    }\r\n  }\r\n  return res;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/calc.worker.js"],"sourceRoot":""}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pixel-swiper",
 3 |   "version": "0.1.9",
 4 |   "main": "dist/pixelSwiper.js",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/kilohaty/pixel-swiper.git"
 8 |   },
 9 |   "author": "axi <axi@kilohaty.com>",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "babel-core": "^6.26.0",
13 |     "babel-loader": "^7.1.2",
14 |     "babel-plugin-component": "^0.10.0",
15 |     "babel-plugin-transform-runtime": "^6.23.0",
16 |     "babel-preset-es2015": "^6.24.1",
17 |     "babel-preset-stage-2": "^6.24.1",
18 |     "babel-root-import": "^4.1.8",
19 |     "babel-runtime": "^6.26.0",
20 |     "chalk": "^2.1.0",
21 |     "clean-webpack-plugin": "^0.1.16",
22 |     "connect-history-api-fallback": "^1.3.0",
23 |     "cross-env": "^5.0.5",
24 |     "css-loader": "^0.28.7",
25 |     "eventsource-polyfill": "^0.9.6",
26 |     "express": "^4.15.4",
27 |     "extract-text-webpack-plugin": "^3.0.0",
28 |     "html-webpack-plugin": "^2.30.1",
29 |     "http-proxy-middleware": "^0.17.4",
30 |     "opn": "^5.1.0",
31 |     "optimize-css-assets-webpack-plugin": "^3.1.1",
32 |     "style-loader": "^0.18.2",
33 |     "webpack": "^3.5.6",
34 |     "webpack-dev-middleware": "^1.12.0",
35 |     "webpack-hot-middleware": "^2.19.1",
36 |     "webpack-merge": "^4.1.0"
37 |   },
38 |   "dependencies": {},
39 |   "description": "canvas",
40 |   "bugs": {
41 |     "url": "https://github.com/kilohaty/pixel-swiper/issues"
42 |   },
43 |   "homepage": "https://github.com/kilohaty/pixel-swiper#readme",
44 |   "scripts": {
45 |     "dev": "node build/dev-server.js",
46 |     "build": "webpack --config build/webpack.prod.conf.js --hide-modules",
47 |     "test": "echo \"Error: no test specified\" && exit 1"
48 |   },
49 |   "keywords": [
50 |     "canvas",
51 |     "pixel",
52 |     "pixel-swiper"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/calc.js:
--------------------------------------------------------------------------------
 1 | function avg(arr) {
 2 |   if (!arr || !arr.length) return 0;
 3 |   return arr.reduce((a, b) => a + b) / arr.length;
 4 | }
 5 | 
 6 | function calcRgbaData(data = {}) {
 7 |   const imageData = data.imageData;
 8 |   const width     = data.width;
 9 |   const res       = [];
10 |   for (let i = 0; i < imageData.length; i += 4) {
11 |     if (i / 4 % width === 0) {
12 |       res.push([]);
13 |     }
14 |     res[res.length - 1].push([imageData[i], imageData[i + 1], imageData[i + 2], imageData[i + 3]]);
15 |   }
16 |   return res;
17 | }
18 | 
19 | function calcPixelData(data, rgbaData) {
20 |   const res    = [];
21 |   const size   = data.size;
22 |   const colNum = Math.ceil(data.width / size);
23 |   const rowNum = Math.ceil(data.height / size);
24 | 
25 |   for (let i = 0; i < rowNum; i++) {
26 |     res.push([]);
27 |     for (let j = 0; j < colNum; j++) {
28 |       const startCol = size * i;
29 |       const startRow = size * j;
30 |       let squareData = [];
31 |       for (let m = startCol; m < startCol + size; m++) {
32 |         for (let n = startRow; n < startRow + size; n++) {
33 |           if (rgbaData[m] && rgbaData[m][n]) {
34 |             squareData.push(rgbaData[m][n]);
35 |           } else {
36 |             squareData.push([0, 0, 0, 0]);
37 |           }
38 |         }
39 |       }
40 | 
41 |       squareData = squareData.filter(d => d[3]);
42 |       const avgR = avg(squareData.map(d => d[0]));
43 |       const avgG = avg(squareData.map(d => d[1]));
44 |       const avgB = avg(squareData.map(d => d[2]));
45 |       const avgA = avg(squareData.map(d => d[3]));
46 |       res[i].push({
47 |         r: Math.round(avgR),
48 |         g: Math.round(avgG),
49 |         b: Math.round(avgB),
50 |         a: Math.round(avgA),
51 |       });
52 |     }
53 |   }
54 |   return res;
55 | }
56 | 
57 | module.exports = function (data) {
58 |   const rgbaData = calcRgbaData(data);
59 |   return calcPixelData(data, rgbaData);
60 | };


--------------------------------------------------------------------------------
/src/calc.worker.js:
--------------------------------------------------------------------------------
 1 | onmessage = function (e) {
 2 |   const rgbaData  = calcRgbaData(e.data);
 3 |   const pixelData = calcPixelData(e.data, rgbaData);
 4 |   postMessage(pixelData);
 5 | };
 6 | 
 7 | function avg(arr) {
 8 |   if (!arr || !arr.length) return 0;
 9 |   return arr.reduce((a, b) => a + b) / arr.length;
10 | }
11 | 
12 | function calcRgbaData(data = {}) {
13 |   const imageData = data.imageData;
14 |   const width     = data.width;
15 |   const res       = [];
16 |   for (let i = 0; i < imageData.length; i += 4) {
17 |     if (i / 4 % width === 0) {
18 |       res.push([]);
19 |     }
20 |     res[res.length - 1].push([imageData[i], imageData[i + 1], imageData[i + 2], imageData[i + 3]]);
21 |   }
22 |   return res;
23 | }
24 | 
25 | function calcPixelData(data, rgbaData) {
26 |   const res    = [];
27 |   const size   = data.size;
28 |   const colNum = Math.ceil(data.width / size);
29 |   const rowNum = Math.ceil(data.height / size);
30 | 
31 |   for (let i = 0; i < rowNum; i++) {
32 |     res.push([]);
33 |     for (let j = 0; j < colNum; j++) {
34 |       const startCol = size * i;
35 |       const startRow = size * j;
36 |       let squareData = [];
37 |       for (let m = startCol; m < startCol + size; m++) {
38 |         for (let n = startRow; n < startRow + size; n++) {
39 |           if (rgbaData[m] && rgbaData[m][n]) {
40 |             squareData.push(rgbaData[m][n]);
41 |           } else {
42 |             squareData.push([0, 0, 0, 0]);
43 |           }
44 |         }
45 |       }
46 | 
47 |       squareData = squareData.filter(d => d[3]);
48 |       const avgR = avg(squareData.map(d => d[0]));
49 |       const avgG = avg(squareData.map(d => d[1]));
50 |       const avgB = avg(squareData.map(d => d[2]));
51 |       const avgA = avg(squareData.map(d => d[3]));
52 |       res[i].push({
53 |         r: Math.round(avgR),
54 |         g: Math.round(avgG),
55 |         b: Math.round(avgB),
56 |         a: Math.round(avgA),
57 |       });
58 |     }
59 |   }
60 |   return res;
61 | }
62 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import Particle from './particle';
  2 | import calc from './calc';
  3 | 
  4 | window.requestAnimationFrame = window.requestAnimationFrame
  5 |   || window.mozRequestAnimationFrame
  6 |   || window.webkitRequestAnimationFrame
  7 |   || window.msRequestAnimationFrame;
  8 | 
  9 | function loadImage(src) {
 10 |   return new Promise((resolve, reject) => {
 11 |     const image   = new Image();
 12 |     image.crossOrigin = '';
 13 |     image.onload  = resolve.bind(null, image);
 14 |     image.onerror = reject;
 15 |     image.src     = src;
 16 |   });
 17 | }
 18 | 
 19 | function randomInt(min, max) {
 20 |   return ~~(Math.random() * (max - min) + min);
 21 | }
 22 | 
 23 | function getRandomColor() {
 24 |   return '#' + Array.apply(null, new Array(3)).map(() => {
 25 |     return randomInt(0, 255).toString(16).replace(/^(\w{1})$/, '0$1');
 26 |   }).join('');
 27 | }
 28 | 
 29 | class PixelSwiper {
 30 |   constructor(selector, options) {
 31 |     this.set(options);
 32 |     this.initialize(selector);
 33 |   }
 34 | }
 35 | 
 36 | Object.assign(PixelSwiper.prototype, {
 37 | 
 38 |   paused: false,
 39 | 
 40 |   loop: true,
 41 | 
 42 |   swipeCount: 0,
 43 | 
 44 |   loopCount: 0,
 45 | 
 46 |   width: 0,
 47 | 
 48 |   height: 0,
 49 | 
 50 |   paddingLeft: 0,
 51 | 
 52 |   paddingTop: 0,
 53 | 
 54 |   rowNum: 0,
 55 | 
 56 |   colNum: 0,
 57 | 
 58 |   swipeList: [],
 59 | 
 60 |   collections: [],
 61 | 
 62 |   lastIndex: -1,
 63 | 
 64 |   index: 0,
 65 | 
 66 |   animation: true,
 67 | 
 68 |   randomPosition: false,
 69 | 
 70 |   shape: 'square',
 71 | 
 72 |   velocity: 1,
 73 | 
 74 |   particleSize: 20,
 75 | 
 76 |   onIndexChange: null,
 77 | 
 78 |   workerPath: '',
 79 | 
 80 |   useWebWorker: false,
 81 | 
 82 |   set(options) {
 83 |     for (let key in options) {
 84 |       if (options.hasOwnProperty(key)) {
 85 |         this[key] = options[key];
 86 |       }
 87 |     }
 88 |   },
 89 | 
 90 |   initialize(selector) {
 91 |     const canvas      = document.querySelector(selector);
 92 |     const cacheCanvas = document.createElement('canvas');
 93 | 
 94 |     this.canvas             = canvas;
 95 |     this.cacheCanvas        = cacheCanvas;
 96 |     this.ctx                = canvas.getContext('2d');
 97 |     this.cacheCtx           = cacheCanvas.getContext('2d');
 98 |     this.canvas.width       = this.width;
 99 |     this.canvas.height      = this.height;
100 |     this.cacheCanvas.width  = this.width;
101 |     this.cacheCanvas.height = this.height;
102 |     this.rowNum             = Math.ceil(this.height / this.particleSize);
103 |     this.colNum             = Math.ceil(this.width / this.particleSize);
104 |     this.run();
105 |   },
106 | 
107 |   renderTextToCacheCanvas({text, color, fontSize, randomColor, paddingTop = 0, paddingLeft = 0}) {
108 |     const ctx = this.cacheCtx;
109 |     ctx.clearRect(0, 0, this.width, this.height);
110 |     ctx.save();
111 |     ctx.textBaseline = 'top';
112 |     ctx.font         = `${fontSize || 12}px 'microsoft yahei light'`;
113 |     ctx.fillStyle    = randomColor ? getRandomColor() : color || '#000000';
114 |     ctx.fillText(text, paddingLeft, paddingTop);
115 |     ctx.restore();
116 |   },
117 | 
118 |   renderImageToCacheCanvas({url, paddingTop = 0, paddingLeft = 0}) {
119 |     return new Promise(async (resolve, reject) => {
120 |       try {
121 |         const image = await loadImage(url);
122 |         const w     = this.width - (paddingLeft << 1);
123 |         const h     = this.height - (paddingTop << 1);
124 |         let scale   = 1;
125 |         if (image.width > w || image.height > h) {
126 |           scale = image.width / image.height > w / h ? w / image.width : h / image.height;
127 |         }
128 | 
129 |         if (image.width < w && image.height < h) {
130 |           scale = image.width / image.height > w / h ? w / image.width : h / image.height;
131 |         }
132 | 
133 |         const imgW = image.width * scale;
134 |         const imgH = image.height * scale;
135 |         const left = (this.width - imgW) >> 1;
136 |         const top  = (this.height - imgH) >> 1;
137 |         const dstX = left > paddingLeft ? left / scale : paddingLeft / scale;
138 |         const dstY = top > paddingTop ? top / scale : paddingTop / scale;
139 |         const ctx  = this.cacheCtx;
140 |         ctx.clearRect(0, 0, this.width, this.height);
141 |         ctx.save();
142 |         ctx.scale(scale, scale);
143 |         ctx.drawImage(image, dstX, dstY);
144 |         ctx.restore();
145 |         resolve();
146 |       } catch (err) {
147 |         console.error(err);
148 |         reject(err);
149 |       }
150 |     });
151 |   },
152 | 
153 |   getPixelData(options = {}) {
154 |     return new Promise(async (resolve, reject) => {
155 |       try {
156 |         if (options.text) {
157 |           this.renderTextToCacheCanvas(options);
158 |         } else {
159 |           await this.renderImageToCacheCanvas(options);
160 |         }
161 | 
162 |         const imgData  = this.cacheCtx.getImageData(0, 0, this.width, this.height).data;
163 |         const postData = {
164 |           imageData: imgData,
165 |           width: this.width,
166 |           height: this.height,
167 |           size: this.particleSize,
168 |         };
169 |         if (this.useWebWorker) {
170 |           const worker     = new Worker(this.workerPath);
171 |           worker.onmessage = e => resolve(e.data);
172 |           worker.postMessage(postData);
173 |         } else {
174 |           resolve(calc(postData));
175 |         }
176 |       } catch (err) {
177 |         console.error(err);
178 |         reject(err);
179 |       }
180 |     });
181 |   },
182 | 
183 |   getCollectionData() {
184 |     return new Promise(async (resolve, reject) => {
185 |       try {
186 |         const size = this.particleSize;
187 |         for (let i = 0; i < this.swipeList.length; i++) {
188 |           const swipe   = this.swipeList[i];
189 |           let pixelData = await this.getPixelData(swipe);
190 |           const res     = [];
191 |           for (let m = 0; m < this.rowNum; m++) {
192 |             for (let n = 0; n < this.colNum; n++) {
193 |               let data = pixelData[m] && pixelData[m][n];
194 |               if (swipe.randomParticleColor && data.a) {
195 |                 data = {r: randomInt(0, 255), g: randomInt(0, 255), b: randomInt(0, 255), a: 255};
196 |               }
197 |               data && res.push({
198 |                 ox: size * n + (size >> 1),
199 |                 oy: size * m + (size >> 1),
200 |                 size: size,
201 |                 bg: {r: data.r, g: data.g, b: data.b, a: data.a},
202 |                 row: m,
203 |                 col: n
204 |               });
205 |             }
206 |           }
207 |           this.swipeList[i].pixelData = res;
208 |         }
209 |         resolve();
210 |       } catch (err) {
211 |         console.error(err);
212 |         reject(err);
213 |       }
214 |     });
215 |   },
216 | 
217 |   nextIndex() {
218 |     this.lastIndex = this.index;
219 |     this.index++;
220 |     if (this.index >= this.swipeList.length) {
221 |       if (!this.loop) {
222 |         this.paused = true;
223 |         return;
224 |       }
225 |       this.index = 0;
226 |       this.loopCount++;
227 |     }
228 | 
229 |     this.swipeCount++;
230 |     this.onIndexChange && this.onIndexChange({index: this.index});
231 |   },
232 | 
233 |   next() {
234 |     if (this.paused) return;
235 |     this.nextIndex();
236 |     this.updateCollections();
237 |   },
238 | 
239 |   loopSwiper() {
240 |     if (this.paused) return;
241 |     const duration = this.swipeList[this.index].duration;
242 |     if (!duration) return;
243 |     setTimeout(() => {
244 |       this.next();
245 |       this.loopSwiper();
246 |     }, duration);
247 |   },
248 | 
249 |   getSwipeConfig() {
250 |     let animation      = this.animation;
251 |     let randomPosition = this.randomPosition;
252 |     const subConfig    = this.swipeList[this.index];
253 | 
254 |     // initial config
255 |     if (this.swipeCount === 0) {
256 |       if (typeof subConfig.initialAnimation === 'boolean') {
257 |         animation = subConfig.initialAnimation;
258 |       }
259 |       if (typeof subConfig.initialRandomPosition === 'boolean') {
260 |         randomPosition = subConfig.initialRandomPosition;
261 |       }
262 |     }
263 | 
264 |     return Object.assign({}, {
265 |       width: this.width,
266 |       height: this.height,
267 |       particleSize: this.particleSize,
268 |       velocity: this.velocity,
269 |       shape: this.shape,
270 |       animation: animation,
271 |       randomPosition: randomPosition,
272 |     }, subConfig);
273 |   },
274 | 
275 |   updateCollections() {
276 |     if (this.paused) return;
277 | 
278 |     const pixelData = this.swipeList[this.index].pixelData;
279 |     const config    = this.getSwipeConfig();
280 | 
281 |     if (config.randomPosition) {
282 |       const data = JSON.parse(JSON.stringify(pixelData));
283 | 
284 |       function getDataByPos(row, col) {
285 |         let res = null;
286 |         for (let i = 0; i < data.length; i++) {
287 |           const d = data[i];
288 |           if (d.row === row && d.col === col) {
289 |             res = {cell: d, index: i};
290 |             break;
291 |           }
292 |         }
293 |         return res;
294 |       }
295 | 
296 |       // ignore same pixel
297 |       const ignoreIndex = [];
298 |       this.collections.forEach((p, i) => {
299 |         const cellData = getDataByPos(p.row, p.col);
300 |         if (cellData && cellData.cell && (cellData.cell.bg.a === 0 && p.tBg.a === 0)) {
301 |           data.splice(cellData.index, 1);
302 |           ignoreIndex.push(i);
303 |         }
304 |       });
305 | 
306 |       this.collections.forEach((p, i) => {
307 |         if (ignoreIndex.indexOf(i) !== -1) return;
308 |         const randomIndex = randomInt(0, data.length);
309 |         const d           = data[randomIndex];
310 |         const bg          = d.bg;
311 |         p.set({
312 |           row: d.row,
313 |           col: d.col,
314 |           tx: d.ox,
315 |           ty: d.oy,
316 |           ox: d.ox,
317 |           oy: d.oy,
318 |           oBg: {r: bg.r, g: bg.g, b: bg.b, a: bg.a},
319 |           tBg: {r: bg.r, g: bg.g, b: bg.b, a: bg.a},
320 |         });
321 |         p.reCalc();
322 |         data.splice(randomIndex, 1);
323 |       });
324 |     } else {
325 |       this.collections.forEach(p => {
326 |         const d  = pixelData[p.row * this.colNum + p.col];
327 |         const bg = d.bg;
328 |         p.set({
329 |           oBg: {r: bg.r, g: bg.g, b: bg.b, a: bg.a},
330 |           tBg: {r: bg.r, g: bg.g, b: bg.b, a: bg.a}
331 |         });
332 |         p.reCalc();
333 |       });
334 |     }
335 |   },
336 | 
337 |   async run() {
338 |     try {
339 |       await this.getCollectionData();
340 |       const size = this.particleSize;
341 |       for (let i = 0; i < this.rowNum; i++) {
342 |         for (let j = 0; j < this.colNum; j++) {
343 |           this.collections.push(new Particle({
344 |             ox: size * j + (size >> 1),
345 |             oy: size * i + (size >> 1),
346 |             size: size,
347 |             shape: this.shape,
348 |             bg: {r: 0, g: 0, b: 0, a: 0},
349 |             row: i,
350 |             col: j,
351 |             velocity: this.velocity,
352 |           }));
353 |         }
354 |       }
355 | 
356 |       this.updateCollections();
357 |       this.render();
358 |       this.loopSwiper();
359 |       this.loopAnim();
360 |     } catch (err) {
361 |       console.error(err);
362 |     }
363 |   },
364 | 
365 |   needUpdate() {
366 |     return this.collections.some(p => p.shouldUpdate());
367 |   },
368 | 
369 |   loopAnim() {
370 |     if (!this.needUpdate()) {
371 |       requestAnimationFrame(this.loopAnim.bind(this));
372 |       return;
373 |     }
374 |     this.render();
375 |     requestAnimationFrame(this.loopAnim.bind(this));
376 |   },
377 | 
378 |   render() {
379 |     const config = this.getSwipeConfig();
380 |     this.cacheCtx.clearRect(0, 0, this.width, this.height);
381 |     this.collections.forEach(p => {
382 |       if (!config.animation) {
383 |         p.set({bg: {r: p.tBg.r, g: p.tBg.g, b: p.tBg.b, a: p.tBg.a}});
384 |       }
385 |       this.cacheCtx.save();
386 |       p.update();
387 |       p.render({ctx: this.cacheCtx});
388 |       this.cacheCtx.restore();
389 |     });
390 |     this.ctx.clearRect(0, 0, this.width, this.height);
391 |     this.ctx.drawImage(this.cacheCanvas, 0, 0);
392 |   },
393 | });
394 | 
395 | module.exports = PixelSwiper;


--------------------------------------------------------------------------------
/src/particle.js:
--------------------------------------------------------------------------------
  1 | const ceil = Math.ceil;
  2 | const abs  = Math.abs;
  3 | const sqrt = Math.sqrt;
  4 | const pow  = Math.pow;
  5 | 
  6 | export default class Particle {
  7 |   constructor(options) {
  8 |     this.set(options);
  9 |     this.x  = this.ox;
 10 |     this.y  = this.oy;
 11 |     this.tx = this.ox;
 12 |     this.ty = this.oy;
 13 |   }
 14 | 
 15 |   set(options) {
 16 |     for (let key in options) {
 17 |       if (options.hasOwnProperty(key)) {
 18 |         this[key] = options[key];
 19 |       }
 20 |     }
 21 |   }
 22 | }
 23 | 
 24 | Object.assign(Particle.prototype, {
 25 |   ox: 0,
 26 |   oy: 0,
 27 |   x: 0,
 28 |   y: 0,
 29 |   tx: 0,
 30 |   ty: 0,
 31 |   row: 0,
 32 |   col: 0,
 33 |   frameX: 0,
 34 |   frameY: 0,
 35 |   frameR: 0,
 36 |   frameG: 0,
 37 |   frameB: 0,
 38 |   frameA: 0,
 39 |   frameNum: 1,
 40 |   shape: 'square',
 41 |   oBg: {r: 0, g: 0, b: 0, a: 0},
 42 |   bg: {r: 0, g: 0, b: 0, a: 0},
 43 |   tBg: {r: 0, g: 0, b: 0, a: 0},
 44 |   size: 1,
 45 |   layer: 0,
 46 |   velocity: 1,
 47 | 
 48 |   reCalc() {
 49 |     const framePosition = ceil(sqrt(pow(this.tx - this.x, 2) + pow(this.ty - this.y, 2)) / this.velocity) || 1;
 50 |     const frameBgR      = ceil((this.tBg.r - this.bg.r) / this.velocity) || 1;
 51 |     const frameBgG      = ceil((this.tBg.g - this.bg.g) / this.velocity) || 1;
 52 |     const frameBgB      = ceil((this.tBg.b - this.bg.b) / this.velocity) || 1;
 53 |     const frameBgA      = ceil((this.tBg.a - this.bg.a) / this.velocity) || 1;
 54 |     this.frameNum       = Math.max(60, framePosition, frameBgR, frameBgG, frameBgB, frameBgA);
 55 |     this.frameX         = (this.tx - this.x) / this.frameNum || 0;
 56 |     this.frameY         = (this.ty - this.y) / this.frameNum || 0;
 57 |     this.frameR         = (this.tBg.r - this.bg.r) / this.frameNum || 0;
 58 |     this.frameG         = (this.tBg.g - this.bg.g) / this.frameNum || 0;
 59 |     this.frameB         = (this.tBg.b - this.bg.b) / this.frameNum || 0;
 60 |     this.frameA         = (this.tBg.a - this.bg.a) / this.frameNum || 0;
 61 |   },
 62 | 
 63 |   shouldUpdate() {
 64 |     return this.bg.a &&
 65 |       (this.x !== this.tx
 66 |         || this.y !== this.ty
 67 |         || this.bg.r !== this.tBg.r
 68 |         || this.bg.g !== this.tBg.g
 69 |         || this.bg.b !== this.tBg.b
 70 |         || this.bg.a !== this.tBg.a
 71 |       );
 72 |   },
 73 | 
 74 |   update() {
 75 |     const xUpdate = this.x !== this.tx;
 76 |     const yUpdate = this.y !== this.ty;
 77 |     const rUpdate = this.bg.r !== this.tBg.r;
 78 |     const gUpdate = this.bg.g !== this.tBg.g;
 79 |     const bUpdate = this.bg.b !== this.tBg.b;
 80 |     const aUpdate = this.bg.a !== this.tBg.a;
 81 |     if (xUpdate) {
 82 |       if (abs(this.tx - this.x) < abs(this.frameX)) {
 83 |         this.x = this.tx;
 84 |         return;
 85 |       }
 86 |       this.x += this.frameX;
 87 |     }
 88 |     if (yUpdate) {
 89 |       if (abs(this.ty - this.y) < abs(this.frameY)) {
 90 |         this.y = this.ty;
 91 |         return;
 92 |       }
 93 |       this.y += this.frameY;
 94 |     }
 95 |     if (rUpdate) {
 96 |       if (abs(this.tBg.r - this.bg.r) < abs(this.frameR)) {
 97 |         this.bg.r = this.tBg.r;
 98 |         return;
 99 |       }
100 |       this.bg.r += this.frameR;
101 |     }
102 |     if (gUpdate) {
103 |       if (abs(this.tBg.g - this.bg.g) < abs(this.frameG)) {
104 |         this.bg.g = this.tBg.g;
105 |         return;
106 |       }
107 |       this.bg.g += this.frameG;
108 |     }
109 |     if (bUpdate) {
110 |       if (abs(this.tBg.b - this.bg.b) < abs(this.frameB)) {
111 |         this.bg.b = this.tBg.b;
112 |         return;
113 |       }
114 |       this.bg.b += this.frameB;
115 |     }
116 |     if (aUpdate) {
117 |       if (abs(this.tBg.a - this.bg.a) < abs(this.frameA)) {
118 |         this.bg.a = this.tBg.a;
119 |         return;
120 |       }
121 |       this.bg.a += this.frameA;
122 |     }
123 |   },
124 | 
125 |   render({ctx}) {
126 |     if (ctx instanceof CanvasRenderingContext2D && this.bg.a) {
127 |       if (this.bg.a) ctx.globalAlpha = this.bg.a / 255;
128 |       ctx.fillStyle = `rgb(${~~this.bg.r},${~~this.bg.g},${~~this.bg.b})`;
129 |       this.renderShape(ctx);
130 |     }
131 |   },
132 | 
133 |   renderShape(ctx) {
134 |     if (this.shape === 'square') {
135 |       ctx.fillRect(~~(this.x - this.size / 2), ~~(this.y - this.size / 2), this.size, this.size);
136 |     } else if (this.shape === 'round') {
137 |       ctx.beginPath();
138 |       ctx.arc(~~this.x, ~~this.y, this.size >> 1 || 1, 0, Math.PI * 2, true);
139 |       ctx.closePath();
140 |       ctx.fill();
141 |     }
142 |   },
143 | 
144 | });


--------------------------------------------------------------------------------