├── .babelrc ├── src ├── index.js ├── pug │ ├── data.json │ └── _meta.pug ├── shaders │ ├── passthru.frag │ ├── base-pass.vert │ ├── render-pass.frag │ ├── displace-pass.vert │ └── displace-pass.frag ├── stylus │ ├── img │ │ ├── ctrl_arrow-down.svg │ │ └── ctrl_reload.svg │ ├── style.styl │ └── ctrl.styl ├── transform-uniforms.js ├── effects │ ├── dir-lum.frag │ ├── color-dir.frag │ ├── hair-whorl.frag │ ├── wind-map.frag │ ├── marble.frag │ ├── polar-perlin.frag │ ├── perlin-grad.frag │ └── index.js ├── ticker.js ├── track-dragging.js ├── index.pug ├── commands.js ├── base-pass.js ├── displace-pass.js ├── app.js ├── easel.js └── ctrl.js ├── public └── assets │ └── default.jpg ├── .gitignore ├── README.md ├── todo.md ├── output-effects.js ├── .eslintrc ├── LICENSE ├── webpack.config.js ├── package.json ├── gulpfile.babel.js └── web_modules └── easeljs.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import App from './app' 2 | 3 | new App() 4 | -------------------------------------------------------------------------------- /public/assets/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baku89/feedback-displacement/HEAD/public/assets/default.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | ftp.config.js 3 | 4 | public/index.html 5 | public/assets/effects.json 6 | public/css 7 | public/js/index.js 8 | 9 | doc 10 | -------------------------------------------------------------------------------- /src/pug/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Feedback Displacement", 3 | "description": "", 4 | "keywords": "webgl, generative art, effect, shader", 5 | "url": "http://fd.baku89.com" 6 | } 7 | -------------------------------------------------------------------------------- /src/shaders/passthru.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | uniform sampler2D texture; 5 | varying vec2 uv; 6 | 7 | void main() { 8 | gl_FragColor = texture2D(texture, uv); 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/shaders/base-pass.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | attribute vec2 vUv; 5 | attribute vec3 position; 6 | 7 | varying vec2 uv; 8 | 9 | void main(void) { 10 | uv = vUv; 11 | gl_Position = vec4(position, 1.0); 12 | } 13 | -------------------------------------------------------------------------------- /src/shaders/render-pass.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | uniform sampler2D tex; 5 | varying vec2 uv; 6 | 7 | void main() { 8 | gl_FragColor = texture2D(tex, uv); 9 | // gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0); 10 | } 11 | -------------------------------------------------------------------------------- /src/stylus/img/ctrl_arrow-down.svg: -------------------------------------------------------------------------------- 1 | ctrl_arrow-down -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Feedback Displacement 2 | 3 | ## Requirements 4 | 5 | - node.js 6 | - npm 7 | - gulp (`npm -g install gulp`) 8 | 9 | ## Setup 10 | 11 | ``` 12 | npm install 13 | gulp 14 | ``` 15 | 16 | ## License 17 | 18 | This repository is published under a MIT License. See the included LICENSE file. 19 | -------------------------------------------------------------------------------- /src/shaders/displace-pass.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | uniform float aspect; 5 | 6 | attribute vec2 vUv; 7 | attribute vec3 position; 8 | 9 | varying vec2 uv; 10 | varying vec2 pos; 11 | 12 | void main(void) { 13 | uv = vUv; 14 | pos = (vUv - vec2(0.5)) * 2.0 * aspect; 15 | gl_Position = vec4(position, 1.0); 16 | } 17 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | # Todo 2 | 3 | # Necessary 4 | 5 | - Enable to edit value of control by keyboard 6 | - Enable to edit Shader in browser 7 | - Enable to share shader (via URL, via JSON) 8 | - Make 'range' control and rename existing one with 'slider' 9 | - Enable to execute displacement by step 10 | - Use WebAPI directly 11 | 12 | ## Low 13 | 14 | - Make icon 15 | - OGP 16 | - Help 17 | - A history feature 18 | - Zoom/Translate canvas 19 | -------------------------------------------------------------------------------- /src/stylus/img/ctrl_reload.svg: -------------------------------------------------------------------------------- 1 | ctrl_reload -------------------------------------------------------------------------------- /src/shaders/displace-pass.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 5 | #pragma glslify: snoise3 = require(glsl-noise/simplex/3d) 6 | #pragma glslify: PI = require(glsl-pi) 7 | 8 | uniform sampler2D prevTexture; 9 | uniform sampler2D originalTexture; 10 | uniform float aspect; 11 | 12 | varying vec2 uv; 13 | 14 | void main() { 15 | gl_FragColor = texture2D(prevTexture, uv); 16 | } 17 | -------------------------------------------------------------------------------- /src/transform-uniforms.js: -------------------------------------------------------------------------------- 1 | export default function(params) { 2 | let uniforms = {} 3 | 4 | for (let key in params) { 5 | let p = params[key] 6 | let type, value 7 | 8 | if (p.type.search(/slider|offset|angle|random/) != -1) { 9 | type = 'f' 10 | value = p.value 11 | } else if (p.type.search(/slider2d|offset2d/) != -1) { 12 | type = 'v2' 13 | value = new THREE.Vector2(p.value.x, p.value.y) 14 | } 15 | 16 | uniforms[key] = {type, value} 17 | } 18 | 19 | return uniforms 20 | } 21 | -------------------------------------------------------------------------------- /output-effects.js: -------------------------------------------------------------------------------- 1 | const exec = require('child_process').exec 2 | const fs = require('fs') 3 | const _ = require('lodash') 4 | 5 | var Effects = require('./src/effects') 6 | 7 | var remaining = Object.keys(Effects).length 8 | 9 | _.forEach(Effects, (effects, name) => { 10 | 11 | exec(`glslify ./src/effects/${name}.frag`, (err, stdout) => { 12 | Effects[name].fragmentShader = stdout 13 | console.log(`Compiled ${name}`) 14 | 15 | if (--remaining == 0) { 16 | saveAndExit() 17 | } 18 | }) 19 | 20 | }) 21 | 22 | function saveAndExit() { 23 | fs.writeFileSync('./public/assets/effects.json', JSON.stringify(Effects)) 24 | } 25 | -------------------------------------------------------------------------------- /src/effects/dir-lum.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: PI = require(glsl-pi) 5 | 6 | uniform sampler2D prevTexture; 7 | uniform sampler2D originalTexture; 8 | 9 | uniform float angle; 10 | uniform float speed; 11 | 12 | uniform float aspect; 13 | 14 | varying vec2 uv; 15 | 16 | float brightness(vec4 color) { 17 | return (color.r + color.g + color.b) / 3.0; 18 | } 19 | 20 | void main() { 21 | 22 | 23 | float bri = brightness(texture2D(prevTexture, uv)); 24 | 25 | vec2 offset = vec2(cos(angle + PI), sin(angle + PI)) * speed * (1.0 - bri); 26 | 27 | 28 | vec4 c = texture2D(prevTexture, uv + offset); 29 | 30 | gl_FragColor = c; 31 | } 32 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "indent": [ 4 | 2, 5 | "tab", 6 | { 7 | "SwitchCase": 1 8 | } 9 | ], 10 | "quotes": [ 11 | 2, 12 | "single" 13 | ], 14 | "linebreak-style": [ 15 | 2, 16 | "unix" 17 | ], 18 | "semi": [ 19 | 2, 20 | "never" 21 | ], 22 | "no-console": 0, 23 | "no-unused-vars": 1, 24 | "strict": 0 25 | }, 26 | "env": { 27 | "es6": true, 28 | "browser": true, 29 | "node": true 30 | }, 31 | "parserOptions": { 32 | "sourceType": "module" 33 | }, 34 | "extends": "eslint:recommended", 35 | "globals": { 36 | "jQuery": true, 37 | "$": true, 38 | "Vue": true, 39 | "THREE": true, 40 | "_": true 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/ticker.js: -------------------------------------------------------------------------------- 1 | import EventEmitter from 'eventemitter3' 2 | 3 | 4 | class Ticker extends EventEmitter { 5 | 6 | constructor() { 7 | super() 8 | 9 | this.update = this.update.bind(this) 10 | this.prev = 0 11 | this.now = 0 12 | this.frame = 0 13 | } 14 | 15 | togglePlay() { 16 | if (this.requestId) { 17 | this.stop() 18 | } else { 19 | this.start() 20 | } 21 | } 22 | 23 | start() { 24 | // console.log('ticker start') 25 | this.update() 26 | } 27 | 28 | stop() { 29 | // console.log('ticker stop') 30 | cancelAnimationFrame(this.requestId) 31 | this.requestId = undefined 32 | } 33 | 34 | reset() { 35 | this.frame = 0 36 | } 37 | 38 | update() { 39 | this.frame++ 40 | this.requestId = requestAnimationFrame(this.update) 41 | this.emit('update') 42 | } 43 | 44 | } 45 | 46 | 47 | export default new Ticker() 48 | -------------------------------------------------------------------------------- /src/track-dragging.js: -------------------------------------------------------------------------------- 1 | let mouseX, mouseY 2 | 3 | export default function startTracking(option, onChange) { 4 | 5 | $(window).on({ 6 | 'mousemove': onMousemove, 7 | 'mouseup': onMouseup 8 | }) 9 | 10 | let originX, originY 11 | 12 | if (option.origin) { 13 | originX = option.origin.x 14 | originY = option.origin.y 15 | } else { 16 | originX = mouseX 17 | originY = mouseY 18 | } 19 | 20 | 21 | 22 | function onMousemove(e) { 23 | onChange(e.pageX - originX, e.pageY - originY) 24 | if (option.reset === true) { 25 | originX = e.pageX 26 | originY = e.pageY 27 | } 28 | } 29 | 30 | function onMouseup() { 31 | $(window).off({ 32 | 'mousemove': onMousemove, 33 | 'mouseup': onMouseup 34 | }) 35 | } 36 | } 37 | 38 | $(window).on('mousemove mousedown', function(e) { 39 | mouseX = e.pageX 40 | mouseY = e.pageY 41 | }) 42 | -------------------------------------------------------------------------------- /src/effects/color-dir.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 5 | #pragma glslify: snoise3 = require(glsl-noise/simplex/3d) 6 | #pragma glslify: PI = require(glsl-pi) 7 | 8 | uniform sampler2D prevTexture; 9 | uniform sampler2D originalTexture; 10 | uniform float aspect; 11 | 12 | uniform float speed; 13 | uniform float angleOffset; 14 | 15 | varying vec2 uv; 16 | varying vec2 pos; 17 | 18 | void main() { 19 | 20 | vec3 pc = texture2D(prevTexture, uv).rgb; 21 | vec3 oc = texture2D(originalTexture, uv).rgb; 22 | 23 | float angle = (oc.r - oc.g + angleOffset) * PI * 4.0; 24 | 25 | float bri = (oc.r + oc.g + oc.b) / 3.0; 26 | float amp = mix(0.1, 1.0, bri) * speed; 27 | 28 | vec2 offset = vec2(cos(angle), sin(angle)) * amp; 29 | 30 | gl_FragColor = texture2D(prevTexture, uv + offset); 31 | } 32 | -------------------------------------------------------------------------------- /src/effects/hair-whorl.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 5 | #pragma glslify: PI = require(glsl-pi) 6 | 7 | uniform sampler2D prevTexture; 8 | uniform sampler2D originalTexture; 9 | uniform float aspect; 10 | varying vec2 uv; 11 | varying vec2 pos; 12 | 13 | uniform float frequency; 14 | uniform float speed; 15 | uniform float seed; 16 | uniform float angle; 17 | 18 | vec2 perlin2(vec2 pos) { 19 | return vec2(snoise2(pos), snoise2(pos + vec2(100.0))); 20 | } 21 | 22 | void main() { 23 | 24 | vec3 color = texture2D(originalTexture, uv).rgb; 25 | 26 | vec2 intensity = perlin2(pos + (seed * 100.0) * frequency); 27 | vec2 intensityOffset = perlin2(pos * frequency + vec2(0.0001)); 28 | 29 | vec2 offset = normalize(intensity - intensityOffset) * speed; 30 | 31 | gl_FragColor = texture2D(prevTexture, uv + offset); 32 | } 33 | -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | include ./pug/_meta.pug 5 | 6 | body(v-cloak) 7 | 8 | input#image-loader(type='file') 9 | 10 | .drag-over(v-bind:class='{show: ui.showDragOver}') 11 | .drag-over__text Drag Images to Load 12 | 13 | .toolbar 14 | h1.toolbar__title 15 | | Feedback 16 | br 17 | | Displacement 18 | 19 | .toolbar__control.ctrl 20 | 21 | .ctrl__component.ctrl__dropdown 22 | label TYPE 23 | select(v-model='currentEffect' v-on:change='changeEffect()') 24 | option(v-for='effect in effects' v-bind:value='effect.value') {{effect.label}} 25 | 26 | hr 27 | 28 | ctrl-group(v-bind:params='params' v-on:change='updateUniforms') 29 | 30 | .toolbar__menu 31 | ul 32 | li: button(v-on:click='onClickLoad') LOAD 33 | li: button(v-on:click='onClickSave') SAVE 34 | li: button(v-on:click='onClickReset') RESET 35 | 36 | 37 | .easel 38 | .brush-cursor 39 | 40 | .canvas-wrapper 41 | canvas#canvas 42 | 43 | script(src='./js/index.js') 44 | -------------------------------------------------------------------------------- /src/effects/wind-map.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 5 | #pragma glslify: PI = require(glsl-pi) 6 | 7 | uniform sampler2D prevTexture; 8 | uniform sampler2D originalTexture; 9 | 10 | uniform float frequency; 11 | uniform float fineness; 12 | uniform float speed; 13 | uniform float angle; 14 | uniform float seed; 15 | 16 | uniform float aspect; 17 | 18 | varying vec2 uv; 19 | varying vec2 pos; 20 | 21 | float brightness(vec3 color) { 22 | return (color.r + color.g + color.b) / 3.0; 23 | } 24 | 25 | vec2 base(float angle) { 26 | return vec2(cos(angle), sin(angle)); 27 | } 28 | 29 | void main() { 30 | 31 | vec3 color = texture2D(originalTexture, uv).rgb; 32 | 33 | float angleWiggle = snoise2( (pos + seed) * frequency ) * PI * 2.0; 34 | 35 | float flowAngle = angle + angleWiggle * fineness; 36 | 37 | float amp = brightness(color) * speed; 38 | 39 | vec2 offset = base(flowAngle) * amp; 40 | 41 | gl_FragColor = texture2D(prevTexture, uv + offset); 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2016 Baku Hashimoto 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /src/effects/marble.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 5 | #pragma glslify: PI = require(glsl-pi) 6 | 7 | uniform sampler2D prevTexture; 8 | uniform sampler2D originalTexture; 9 | 10 | uniform float frequency; 11 | uniform float fineness; 12 | uniform float speed; 13 | uniform float seed; 14 | 15 | uniform float aspect; 16 | 17 | varying vec2 uv; 18 | varying vec2 pos; 19 | 20 | float brightness(vec3 color) { 21 | return (color.r + color.g + color.b) / 3.0; 22 | } 23 | 24 | vec2 base(float angle) { 25 | return vec2(cos(angle), sin(angle)); 26 | } 27 | 28 | void main() { 29 | 30 | vec3 color = texture2D(originalTexture, uv).rgb; 31 | 32 | float angleWiggle = snoise2( (pos + seed) * frequency ) * PI * 2.0; 33 | 34 | float angle = seed * 1421.21; 35 | 36 | float flowAngle = angleWiggle + (cos(angle) * pos.y - sin(angle) * pos.x) * fineness; 37 | 38 | float amp = brightness(color) * speed; 39 | 40 | vec2 offset = base(flowAngle) * amp; 41 | 42 | gl_FragColor = texture2D(prevTexture, uv + offset); 43 | } 44 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | 3 | module.exports = { 4 | entry: { 5 | index: './src/index.js' 6 | }, 7 | output: { 8 | filename: '[name].js', 9 | publicPath: '/js/' 10 | }, 11 | resolve: { 12 | alias: {}, 13 | modulesDirectories: [ 14 | 'node_modules', 15 | 'web_modules' 16 | ] 17 | }, 18 | target: 'web', 19 | module: { 20 | loaders: [ 21 | { 22 | test: /\.js$/, 23 | loader: 'babel!eslint', 24 | exclude: /node_modules|web_modules/ 25 | }, 26 | { 27 | test: /\.jade$/, 28 | loader: 'jade-loader' 29 | }, 30 | { 31 | test: /\.styl$/, 32 | loader: 'style!css!stylus' 33 | }, 34 | { 35 | test: /\.(vert|frag|glsl)$/, 36 | loader: 'raw!glslify' 37 | } 38 | ] 39 | }, 40 | stylus: { 41 | use: [require('nib')()] 42 | }, 43 | eslint: { 44 | configFile: './.eslintrc', 45 | formatter: require('eslint-friendly-formatter'), 46 | failOnError: true 47 | }, 48 | plugins: [ 49 | new webpack.IgnorePlugin(/vertx/), 50 | new webpack.ProvidePlugin({ 51 | Vue: 'vue', 52 | $: 'jquery', 53 | THREE: 'three', 54 | _: 'lodash', 55 | }) 56 | ] 57 | } 58 | -------------------------------------------------------------------------------- /src/effects/polar-perlin.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 5 | #pragma glslify: PI = require(glsl-pi) 6 | #pragma glslify: random = require(glsl-random) 7 | 8 | uniform sampler2D prevTexture; 9 | uniform sampler2D originalTexture; 10 | 11 | uniform float frequency; 12 | uniform float speed; 13 | uniform float seed; 14 | 15 | uniform float aspect; 16 | 17 | varying vec2 uv; 18 | varying vec2 pos; 19 | 20 | vec2 random2(float seed) { 21 | return vec2( 22 | random(vec2(seed, 0.0)), 23 | random(vec2(seed + 123.0, 0.0)) 24 | ); 25 | } 26 | 27 | float random1(float seed) { 28 | return random(vec2(seed * 431.34, 0.0)); 29 | } 30 | 31 | vec2 base(float angle) { 32 | return vec2(cos(angle), sin(angle)); 33 | } 34 | 35 | float brightness(vec4 color) { 36 | return (color.r + color.g + color.b) / 3.0; 37 | } 38 | 39 | void main() { 40 | 41 | vec4 oc = texture2D(originalTexture, uv); 42 | 43 | vec2 perlinSeed = pos * frequency + random2(seed); 44 | float angle = snoise2(perlinSeed) * 2.0 * PI + random1(seed); 45 | 46 | float bri = brightness(oc); 47 | float amp = mix(0.5, 1.9, bri); 48 | 49 | vec2 offset = base(angle) * speed * amp; 50 | 51 | gl_FragColor = texture2D(prevTexture, uv + offset); 52 | } 53 | -------------------------------------------------------------------------------- /src/commands.js: -------------------------------------------------------------------------------- 1 | import EventEmitter from 'eventemitter3' 2 | import Mousetrap from 'mousetrap' 3 | import dragDrop from 'drag-drop' 4 | 5 | class Commands extends EventEmitter { 6 | 7 | constructor() { 8 | super() 9 | 10 | this._initKeybind() 11 | this._initDragDrop() 12 | } 13 | 14 | _initKeybind() { 15 | Mousetrap.bind('esc', () => { 16 | this.emit('reset-canvas') 17 | return false 18 | }) 19 | 20 | Mousetrap.bind('command+s', () => { 21 | this.emit('save-canvas') 22 | return false 23 | }) 24 | 25 | Mousetrap.bind('command+1', () => { 26 | this.emit('reload-effects') 27 | return false 28 | }) 29 | 30 | Mousetrap.bind('f', () => { 31 | this.emit('step-forward') 32 | }) 33 | 34 | 35 | } 36 | 37 | _initDragDrop() { 38 | 39 | dragDrop('body', (files) => this._validateImageAndEmit('load-source', files)) 40 | } 41 | 42 | _validateImageAndEmit(eventName, files) { 43 | if (files.length == 1 && files[0].name.match(/\.(jpg|jpeg|png|gif)$/i)) { 44 | this.emit(eventName, files[0]) 45 | } else { 46 | console.log('failed') 47 | } 48 | } 49 | 50 | // public 51 | loadImage(eventName) { 52 | $('#image-loader') 53 | .on('change', (e) => this._validateImageAndEmit(eventName, e.target.files)) 54 | .trigger('click') 55 | } 56 | 57 | execute() { 58 | this.emit(...arguments) 59 | } 60 | } 61 | 62 | 63 | window.Commands = new Commands() 64 | -------------------------------------------------------------------------------- /src/base-pass.js: -------------------------------------------------------------------------------- 1 | export default class BasePass { 2 | 3 | constructor(option) { 4 | 5 | this._scene = new THREE.Scene() 6 | 7 | // camera 8 | this._camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 1000) 9 | this._camera.position.set(0, 0, 10) 10 | this._scene.add(this._camera) 11 | 12 | this.uniforms = option.uniforms 13 | 14 | this._material = new THREE.RawShaderMaterial({ 15 | uniforms: this.uniforms, 16 | vertexShader: option.vertexShader || require('./shaders/base-pass.vert'), 17 | fragmentShader: option.fragmentShader 18 | }) 19 | 20 | let geometry = new THREE.BufferGeometry() 21 | { 22 | let vertices = new Float32Array([ 23 | -1, +1, 0, 24 | -1, -1, 0, 25 | +1, +1, 0, 26 | 27 | -1, -1, 0, 28 | +1, -1, 0, 29 | +1, +1, 0 30 | ]) 31 | 32 | let uvs = new Float32Array([ 33 | 0, 1, 34 | 0, 0, 35 | 1, 1, 36 | 37 | 0, 0, 38 | 1, 0, 39 | 1, 1 40 | ]) 41 | 42 | geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)) 43 | geometry.addAttribute('vUv', new THREE.BufferAttribute(uvs, 2)) 44 | } 45 | 46 | this._mesh = new THREE.Mesh(geometry, this._material) 47 | 48 | this._scene.add(this._mesh) 49 | } 50 | 51 | render(targetRenderer) { 52 | window.renderer.render(this._scene, this._camera, targetRenderer) 53 | } 54 | 55 | updateMaterial(mat) { 56 | this.uniforms = mat.uniforms 57 | this._mesh.material = mat 58 | mat.needsUpdate = true 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/effects/perlin-grad.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | #pragma glslify: PI = require(glsl-pi) 5 | #pragma glslify: noise = require(glsl-noise/simplex/2d) 6 | #pragma glslify: random = require(glsl-random) 7 | 8 | uniform sampler2D prevTexture; 9 | uniform sampler2D originalTexture; 10 | 11 | uniform float frequency; 12 | uniform float seed; 13 | uniform float speed; 14 | 15 | uniform float aspect; 16 | 17 | varying vec2 pos; 18 | varying vec2 uv; 19 | 20 | float brightness(vec4 color) { 21 | return (color.r + color.g + color.b) / 3.0; 22 | } 23 | 24 | vec2 base(float angle) { 25 | return vec2(cos(angle), sin(angle)); 26 | } 27 | 28 | vec2 random2(float seed) { 29 | return vec2( 30 | random(vec2(seed, 0.0)), 31 | random(vec2(seed + 123.0, 0.0)) 32 | ); 33 | } 34 | 35 | vec3 prev(vec2 offset) { 36 | return texture2D(prevTexture, uv + offset).rgb; 37 | } 38 | 39 | void main() { 40 | 41 | vec2 pt = pos * frequency + random2(seed); 42 | float ptn = noise(pt); 43 | vec2 dir = vec2( 44 | noise(pt + vec2(0.001, 0.0)) - ptn, 45 | noise(pt + vec2(0.0, 0.001)) - ptn 46 | ); 47 | 48 | dir = normalize(dir); 49 | 50 | float bri = brightness(texture2D(prevTexture, uv)); 51 | 52 | vec2 offset = dir * speed * bri; 53 | 54 | vec3 a = prev(offset * 0.333) * vec3(0.1, 0.3, 0.3); 55 | vec3 b = prev(offset * 0.666) * vec3(0.6, 0.2, 0.4); 56 | vec3 c = prev(offset ) * vec3(0.3, 0.5, 0.3); 57 | 58 | gl_FragColor = vec4(a + b + c, 1.0); 59 | } 60 | -------------------------------------------------------------------------------- /src/pug/_meta.pug: -------------------------------------------------------------------------------- 1 | base(href='./') 2 | meta(charset='utf-8') 3 | 4 | //- only for development (no-cache) 5 | meta(http-equiv='Cache-Control' content='no-cache, no-store, must-revalidate') 6 | meta(http-equiv='Pragma' content='no-cache') 7 | meta(http-equiv='Expires' content='0') 8 | 9 | //- viewport 10 | meta(name='viewport' content='width=device-width,initial-scale=1.0') 11 | meta(http-equiv='Content-Style-Type' content='text/css') 12 | meta(http-equiv='Content-Script-Type' content='text/javascript') 13 | 14 | meta(name='keywords' lang='en' xml:lang='en' content=`${keywords}`) 15 | meta(name='description' lang='en' xml:lang='en' content=`${description}`) 16 | 17 | //- Facebook OG 18 | meta(property='og:title' content=`${title}`) 19 | meta(property='og:type' content='website') 20 | meta(property='og:description' content=`${description}`) 21 | meta(property='og:url' content=`${url}`) 22 | meta(property='og:image' content=`${url}/assets/ogp.jpg`) 23 | meta(property='og:image:width' content='1200') 24 | meta(property='og:image:height' content='630') 25 | meta(property='og:site_name' content=`${title}`) 26 | meta(property='og:locale' content='en_US') 27 | 28 | //- Twitter Cards 29 | meta(name='twitter:card' content='summary_large_image') 30 | meta(name='twitter:site' content=`${url}`) 31 | meta(name='twitter:title' content=`${title}`) 32 | meta(name='twitter:description' content=`${description}`) 33 | meta(name='twitter:image:src' content=`${url}/assets/ogp.jpg`) 34 | 35 | title #{title} 36 | 37 | //- Style 38 | link(href="https://fonts.googleapis.com/css?family=Cabin|Droid+Sans+Mono" rel="stylesheet") 39 | link(rel='stylesheet' type='text/css' href='./css/style.css') 40 | -------------------------------------------------------------------------------- /src/effects/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | 'polar-perlin': { 4 | label: 'Polar Perlin', 5 | params: { 6 | frequency: {type: 'slider', label: 'FREQUENCY', value: 1, min: 0, max: 5}, 7 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01}, 8 | seed: {type: 'random', label: 'SEED', value: 0, min: 0, max: 100} 9 | } 10 | }, 11 | 12 | 'wind-map': { 13 | label: 'Wind Map', 14 | params: { 15 | frequency: {type: 'slider', label: 'FREQUENCY', value: 1, min: 0, max: 3}, 16 | fineness: {type: 'slider', label: 'FINENESS', value: 10, min: 0, max: 30}, 17 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01}, 18 | seed: {type: 'random', label: 'SEED', value: 0, min: 0, max: 100} 19 | } 20 | }, 21 | 22 | 'perlin-grad': { 23 | label: 'Perlin Grad', 24 | params: { 25 | frequency: {type: 'slider', label: 'FREQUENCY', value: 1.25, min: 0, max: 5}, 26 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01}, 27 | seed: {type: 'random', label: 'SEED', value: 0, min: 0, max: 100} 28 | } 29 | }, 30 | 31 | 'marble': { 32 | label: 'Marble', 33 | params: { 34 | frequency: {type: 'slider', label: 'RANDOMNESS', value: 0.8, min: 0, max: 2}, 35 | fineness: {type: 'slider', label: 'FINENESS', value: 36, min: 0, max: 100}, 36 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01}, 37 | angle: {type: 'angle', label: 'ANGLE', value: 0.7853981634}, 38 | seed: {type: 'random', label: 'SEED', value: 0} 39 | }, 40 | }, 41 | 42 | 'color-dir': { 43 | label: 'Color Dir', 44 | params: { 45 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01}, 46 | angleOffset: {type: 'angle', label: 'ANGLE OFFSET', value: 0} 47 | } 48 | }, 49 | 50 | 'hair-whorl': { 51 | label: 'Hair Whorl', 52 | params: { 53 | frequency: {type: 'slider', label: 'FREQUENCY', value: 1, min: 0, max: 4}, 54 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01}, 55 | seed: {type: 'random', label: 'SEED', value: 0} 56 | } 57 | }, 58 | 59 | 'dir-lum': { 60 | label: 'Dir Lum', 61 | params: { 62 | angle: {type: 'angle', label: 'ANGLE', value: 0}, 63 | speed: {type: 'slider', label: 'SPEED', value: 0.002, min: 0, max: 0.01} 64 | } 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "feedback-displacement-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Baku Hashimoto ", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babel-core": "^6.6.4", 13 | "babel-loader": "^6.2.4", 14 | "babel-preset-es2015": "^6.6.0", 15 | "browser-sync": "^2.9.6", 16 | "clamp": "^1.0.1", 17 | "css-cross-transform": "^1.2.5", 18 | "degrees-radians": "^1.0.3", 19 | "drag-drop": "^2.11.0", 20 | "eslint-friendly-formatter": "^2.0.5", 21 | "eslint-loader": "^1.3.0", 22 | "eventemitter3": "^1.2.0", 23 | "exdat": "github:anvaka/dat.gui", 24 | "exports-loader": "^0.6.3", 25 | "file-loader": "^0.8.5", 26 | "filesaverjs": "^0.2.2", 27 | "generate-json-webpack-plugin": "^0.2.1", 28 | "glob": "^7.1.1", 29 | "glsl-noise": "0.0.0", 30 | "glsl-pi": "^1.0.0", 31 | "glsl-random": "0.0.5", 32 | "glslify": "^5.1.0", 33 | "glslify-loader": "^1.0.2", 34 | "gulp": "^3.9.1", 35 | "gulp-autoprefixer": "^3.1.0", 36 | "gulp-babel": "^6.1.2", 37 | "gulp-combine-mq": "^0.4.0", 38 | "gulp-data": "^1.2.1", 39 | "gulp-eslint": "^2.0.0", 40 | "gulp-if": "^2.0.0", 41 | "gulp-load-plugins": "^1.2.0", 42 | "gulp-log": "0.0.0", 43 | "gulp-minify-css": "^1.2.4", 44 | "gulp-plumber": "^1.1.0", 45 | "gulp-pug": "^3.1.0", 46 | "gulp-shell": "^0.5.2", 47 | "gulp-sourcemaps": "^1.6.0", 48 | "gulp-stylus": "^2.3.0", 49 | "gulp-util": "^3.0.7", 50 | "imports-loader": "^0.6.5", 51 | "jquery": "^3.0.0", 52 | "jquery-touch-events": "^1.0.3", 53 | "jquery.transit": "^0.9.12", 54 | "json-loader": "^0.5.4", 55 | "jstransformer-markdown-it": "^0.2.3", 56 | "lerp": "^1.0.3", 57 | "lodash": "^4.16.4", 58 | "mobile-detect": "^1.3.2", 59 | "mousetrap": "^1.6.0", 60 | "nib": "^1.1.0", 61 | "query-string": "^4.2.3", 62 | "raw-loader": "^0.5.1", 63 | "run-sequence": "^1.2.1", 64 | "stats.js": "^0.16.0", 65 | "stylus-media-queries": "^1.0.0", 66 | "three": "^0.78.0", 67 | "vinyl-ftp": "^0.4.5", 68 | "vue": "^1.0.28", 69 | "vue-async-data": "^1.0.2", 70 | "vue-localstorage": "^0.1.1", 71 | "webpack": "^1.13.0", 72 | "webpack-stream": "^3.1.0" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/displace-pass.js: -------------------------------------------------------------------------------- 1 | import BasePass from './base-pass.js' 2 | import _ from 'lodash' 3 | 4 | /* 5 | 6 | Contains optical flow texture. 7 | Each pixel represents direction of flow. 8 | 9 | */ 10 | 11 | export default class DisplacePass extends BasePass { 12 | 13 | constructor() { 14 | 15 | let baseUniforms = { 16 | originalTexture: {type: 't', value: null}, 17 | prevTexture: {type: 't', value: null}, 18 | aspect: {type: 'f', value: 1} 19 | } 20 | 21 | super({ 22 | fragmentShader: require('./shaders/displace-pass.frag'), 23 | vertexShader: require('./shaders/displace-pass.vert'), 24 | uniforms: baseUniforms 25 | }) 26 | 27 | this.baseUniforms = baseUniforms 28 | this.aspect = 1 29 | 30 | this.enableDisplace = false 31 | 32 | this.prevRenderTarget = new THREE.WebGLRenderTarget() 33 | this.currentRenderTarget = new THREE.WebGLRenderTarget() 34 | this.texture = this.currentRenderTarget.texture 35 | 36 | this.passthruPass = new BasePass({ 37 | fragmentShader: require('./shaders/passthru.frag'), 38 | uniforms: { 39 | texture: {type: 't', value: null} 40 | } 41 | }) 42 | } 43 | 44 | changeProgram(code, uniforms) { 45 | 46 | this.uniforms = _.merge(this.baseUniforms, uniforms) 47 | this.uniforms.aspect.value = this.aspect 48 | 49 | let mat = new THREE.RawShaderMaterial({ 50 | uniforms: this.uniforms, 51 | vertexShader: this._material.vertexShader, 52 | fragmentShader: code 53 | }) 54 | 55 | this.updateMaterial(mat) 56 | } 57 | 58 | render() { 59 | [this.prevRenderTarget, this.currentRenderTarget] 60 | = [this.currentRenderTarget, this.prevRenderTarget] 61 | 62 | this.uniforms.prevTexture.value = this.prevRenderTarget.texture 63 | super.render(this.currentRenderTarget) 64 | 65 | this.texture = this.currentRenderTarget.texture 66 | // console.log('disp update') 67 | } 68 | 69 | reset(tex) { 70 | 71 | if (tex) { 72 | this.originalTexture = tex 73 | this.uniforms.originalTexture.value =tex 74 | } 75 | this.passthruPass.uniforms.texture.value = this.originalTexture 76 | this.passthruPass.render(this.currentRenderTarget) 77 | this.passthruPass.render(this.prevRenderTarget) 78 | 79 | this.texture = this.currentRenderTarget.texture 80 | // console.log('disp reset') 81 | } 82 | 83 | setSize(w, h) { 84 | this.aspect = h / w 85 | this.prevRenderTarget.setSize(w, h) 86 | this.currentRenderTarget.setSize(w, h) 87 | this.uniforms.aspect.value = this.aspect 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import VueLocalStorage from 'vue-localstorage' 2 | import queryString from 'query-string' 3 | 4 | Vue.use(VueLocalStorage) 5 | 6 | import Easel from './easel' 7 | import TransformUniforms from './transform-uniforms.js' 8 | 9 | import './commands' 10 | import './ctrl' 11 | 12 | export default class App extends Vue { 13 | 14 | constructor() { 15 | super({ 16 | el: 'body', 17 | data: { 18 | effects: [], 19 | currentEffect: '', 20 | params: {}, 21 | ui: { 22 | } 23 | }, 24 | localStorage: { 25 | currentEffect: {type: String, default: 'polar-perlin'}, 26 | currentParams: {type: Object, default: {}} 27 | } 28 | }) 29 | 30 | this.easel = new Easel() 31 | this.changeEffect = this.changeEffect.bind(this) 32 | 33 | this._loadEffects = this._loadEffects.bind(this) 34 | this._loadEffects() 35 | 36 | window.Commands.execute('load-source', './assets/default.jpg') 37 | 38 | window.Commands.on('reload-effects', this._loadEffects) 39 | } 40 | 41 | _loadEffects() { 42 | $.getJSON('./assets/effects.json', (data) => { 43 | this.effectsData = data 44 | 45 | let effectsList = _.map(this.effectsData, (e, key) => { return{label: e.label, value: key}}) 46 | this.$set('effects', effectsList) 47 | 48 | let query = queryString.parse(window.location.search) 49 | console.log(query) 50 | if (query.type && query.type in this.effectsData) { 51 | this.currentEffect = query.type 52 | } else { 53 | this.currentEffect = this.$localStorage.get('currentEffect') 54 | } 55 | 56 | this.changeEffect() 57 | 58 | let defaultParams = this.effectsData[this.currentEffect].params 59 | let savedParams = this.$localStorage.get('currentParams') 60 | 61 | let params = {} 62 | 63 | for (let key in defaultParams) { 64 | params[key] = defaultParams[key] 65 | if (key in savedParams && defaultParams[key].type == savedParams[key].type) { 66 | params[key].value = savedParams[key].value 67 | } 68 | } 69 | 70 | this.$set('params', params) 71 | this.updateUniforms() 72 | }) 73 | } 74 | 75 | updateUniforms() { 76 | for (let key in this.uniforms) { 77 | this.uniforms[key].value = this.params[key].value 78 | } 79 | this.$localStorage.set('currentParams', this.params) 80 | this.easel.updateUniforms(this.uniforms) 81 | } 82 | 83 | changeEffect() { 84 | console.log('change effect:', this.currentEffect) 85 | 86 | let effect = this.effectsData[this.currentEffect] 87 | 88 | this.$set('params', effect.params) 89 | this.$localStorage.set('currentEffect', this.currentEffect) 90 | 91 | this.uniforms = TransformUniforms(this.params) 92 | this.easel.changeEffect(effect.fragmentShader, this.uniforms) 93 | } 94 | 95 | // events 96 | onClickLoad() { 97 | window.Commands.loadImage('load-source') 98 | } 99 | 100 | onClickSave() { 101 | window.Commands.execute('save-canvas') 102 | } 103 | 104 | onClickReset() { 105 | window.Commands.execute('reset-canvas') 106 | } 107 | 108 | } 109 | -------------------------------------------------------------------------------- /src/stylus/style.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | 3 | notext() 4 | white-space nowrap 5 | text-indent -9999px 6 | overflow hidden 7 | 8 | uniform-centerize() 9 | display flex 10 | flex-direction column 11 | justify-content center 12 | 13 | global-reset() 14 | 15 | //-------------------------------------------------- 16 | *, ::after, ::before 17 | box-sizing: border-box 18 | outline none 19 | 20 | ::selection, 21 | ::-moz-selection, 22 | ::-webkit-selection 23 | background white 24 | 25 | [v-cloak] 26 | visibility hidden 27 | 28 | select 29 | font-size 1.2rem 30 | 31 | //-------------------------------------------------- 32 | html, body 33 | width 100% 34 | height 100% 35 | overflow hidden 36 | 37 | html 38 | font-family 'Cabin', sans-serif 39 | font-smoothing antialiased 40 | -moz-osx-font-smoothing: grayscale 41 | font-size 10px 42 | 43 | body 44 | font-size 1.6rem 45 | background: #0a0a0a 46 | line-height 1.2 47 | 48 | //-------------------------------------------------- 49 | // others 50 | 51 | #image-loader 52 | visibility hidden 53 | 54 | //-------------------------------------------------- 55 | // drag-over 56 | 57 | .drag-over 58 | position absolute 59 | display flex 60 | flex-direction column 61 | justify-content center 62 | top 0 63 | left 0 64 | width 100% 65 | height 100% 66 | z-index 100 67 | background-color rgba(16, 16, 16, .6) 68 | transition all .2s ease 69 | opacity 0 70 | pointer-events: none 71 | 72 | body.drag & 73 | opacity 1 74 | 75 | .drag-over__text 76 | color #ddd 77 | text-align center 78 | font-size 1.8rem 79 | 80 | //-------------------------------------------------- 81 | // toolbar 82 | 83 | $toolbar-width = 240px 84 | 85 | .toolbar 86 | position absolute 87 | display flex 88 | flex-direction column 89 | top 0 90 | left 0 91 | width $toolbar-width 92 | height 100% 93 | color #ccc 94 | background #1a1a1a 95 | user-select none 96 | 97 | .toolbar__title 98 | margin 0 1rem 0 99 | padding 1.4rem .4rem 100 | border-bottom 1px solid #333 101 | line-height 1.3 102 | font-size 2rem 103 | margin-bottom 1.5rem 104 | 105 | .toolbar__control 106 | flex-grow 2 107 | 108 | @import './ctrl.styl' 109 | 110 | //-------------------------------------------------- 111 | // easel 112 | .easel 113 | position absolute 114 | top 0 115 | right 0 116 | bottom 0 117 | left $toolbar-width 118 | 119 | $canvas-margin = 15px 120 | 121 | .canvas-wrapper 122 | position absolute 123 | top $canvas-margin 124 | right $canvas-margin 125 | bottom $canvas-margin 126 | left $canvas-margin 127 | cursor none 128 | 129 | 130 | .brush-cursor 131 | position relative 132 | border 1px solid white 133 | width 30px 134 | height 30px 135 | margin -15px 0 0 -15px 136 | border-radius 50% 137 | visibility hidden 138 | z-index 100 139 | mix-blend-mode difference 140 | pointer-events none 141 | 142 | 143 | &.show 144 | visibility visible 145 | 146 | #canvas 147 | position absolute 148 | top 0 149 | left 0 150 | box-sizing content-box 151 | transform-origin top left 152 | -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | /* global process */ 2 | 3 | const gulp = require('gulp') 4 | const $ = require('gulp-load-plugins')() 5 | const webpack = require('webpack') 6 | const WebpackStream = require('webpack-stream') 7 | const BrowserSync = require('browser-sync') 8 | const ftp = require('vinyl-ftp') 9 | const runSequence = require('run-sequence') 10 | const browserSync = BrowserSync.create() 11 | 12 | 13 | let developmentMode = true 14 | 15 | process.env.NODE_ENV = 'dev' 16 | 17 | function requireUncached($module) { 18 | delete require.cache[require.resolve($module)] 19 | return require($module) 20 | } 21 | 22 | //================================================== 23 | gulp.task('webpack', () => { 24 | let config = require('./webpack.config.js') 25 | 26 | // modify conig 27 | if (developmentMode) { 28 | config.devtool = 'inline-source-map' 29 | config.watch = true 30 | } else { 31 | config.plugins.push( 32 | new webpack.optimize.UglifyJsPlugin(), 33 | new webpack.optimize.DedupePlugin() 34 | ) 35 | } 36 | 37 | return gulp.src('') 38 | .pipe($.plumber()) 39 | .pipe(WebpackStream(config)) 40 | .pipe(gulp.dest('public/js')) 41 | .pipe(browserSync.stream()) 42 | }) 43 | 44 | //================================================== 45 | gulp.task('compile-effects', () => { 46 | return gulp.src('') 47 | .pipe($.shell(['node ./output-effects.js'])) 48 | }) 49 | 50 | //================================================== 51 | 52 | gulp.task('pug', () => { 53 | return gulp.src('./src/*.pug') 54 | .pipe($.plumber()) 55 | .pipe($.data(() => { 56 | return requireUncached('./src/pug/data.json') 57 | })) 58 | .pipe($.pug({pretty: developmentMode})) 59 | .pipe(gulp.dest('public')) 60 | .pipe(browserSync.stream()) 61 | }) 62 | 63 | //================================================== 64 | gulp.task('stylus', () => { 65 | return gulp.src('./src/stylus/style.styl') 66 | .pipe($.plumber()) 67 | .pipe($.stylus({use: [require('nib')()]})) 68 | .pipe($.autoprefixer()) 69 | .pipe($.if(!developmentMode, $.combineMq())) 70 | .pipe($.if(!developmentMode, $.minifyCss())) 71 | .pipe(gulp.dest('public/css')) 72 | .pipe(browserSync.stream()) 73 | }) 74 | 75 | //================================================== 76 | gulp.task('browser-sync', () => { 77 | browserSync.init({ 78 | server: { 79 | baseDir: './public' 80 | }, 81 | open: true 82 | }) 83 | }) 84 | 85 | //================================================== 86 | gulp.task('watch', () => { 87 | gulp.watch('./src/**/*.styl', ['stylus']) 88 | gulp.watch(['./src/*.pug', './src/pug/*'], ['pug']) 89 | gulp.watch(['./src/effects/*'], ['compile-effects', browserSync.reload]) 90 | }) 91 | 92 | //================================================== 93 | gulp.task('release', () => { 94 | developmentMode = false 95 | process.env.NODE_ENV = 'production' 96 | }) 97 | 98 | //================================================== 99 | gulp.task('deploy', () => { 100 | 101 | const ftpConfig = require('./ftp.config.js') 102 | 103 | let conn = ftp.create(ftpConfig) 104 | 105 | let globs = ['./public/**'] 106 | 107 | return gulp.src(globs, {base: './public', buffer: false}) 108 | .pipe( conn.newer(ftpConfig.remotePath) ) 109 | .pipe( conn.dest(ftpConfig.remotePath) ) 110 | }) 111 | 112 | //================================================== 113 | 114 | gulp.task('default', ['webpack', 'pug', 'stylus', 'watch', 'compile-effects', 'browser-sync']) 115 | gulp.task('build', () => { 116 | runSequence( 117 | 'release', 118 | ['pug', 'stylus', 'webpack'] 119 | ) 120 | }) 121 | -------------------------------------------------------------------------------- /src/easel.js: -------------------------------------------------------------------------------- 1 | import 'jquery.transit' 2 | import FileSaver from 'filesaverjs' 3 | 4 | import DisplacePass from './displace-pass' 5 | import BasePass from './base-pass' 6 | 7 | import Ticker from './ticker' 8 | 9 | export default class Easel { 10 | 11 | constructor() { 12 | 13 | this.$canvas = $('#canvas') 14 | this.$easel = $('.easel') 15 | this.$wrapper = $('.canvas-wrapper') 16 | 17 | this.$cursor = $('.brush-cursor') 18 | 19 | // create renderer 20 | window.renderer = new THREE.WebGLRenderer({ 21 | canvas: this.$canvas[0], 22 | preserveDrawingBuffer: true 23 | 24 | }) 25 | window.renderer.setClearColor(0x000000) 26 | 27 | // init passes 28 | this.displacePass = new DisplacePass() 29 | 30 | this.renderPass = new BasePass({ 31 | fragmentShader: require('./shaders/render-pass.frag'), 32 | uniforms: { 33 | tex: {type: 't', value: this.displacePass.texture} 34 | } 35 | }) 36 | 37 | this._setResolution(1024, 1024) 38 | 39 | this.textureLoader = new THREE.TextureLoader() 40 | 41 | Ticker.on('update', this._update.bind(this)) 42 | this._update() 43 | 44 | $(window).on('resize', this._updateTransform.bind(this)) 45 | this._updateTransform() 46 | 47 | this.$canvas.on({ 48 | 'mousedown': () => Ticker.start(), 49 | 'mouseup': () => Ticker.stop() 50 | }) 51 | 52 | this.$easel.on({ 53 | 'mouseenter': this._showCursor.bind(this), 54 | 'mouseleave': this._hideCursor.bind(this), 55 | 'mousemove': this._moveCursor.bind(this) 56 | }) 57 | 58 | window.Commands.on('reset-canvas', () => { 59 | Ticker.reset() 60 | Ticker.stop() 61 | this.displacePass.reset() 62 | this.renderPass.render() 63 | }) 64 | 65 | window.Commands.on('save-canvas', () => { 66 | this.saveAsImage() 67 | }) 68 | 69 | window.Commands.on('load-source', this._loadSource.bind(this)) 70 | } 71 | 72 | //---------------------------------------- 73 | // public 74 | 75 | changeEffect(fragmentShader, uniforms) { 76 | this.displacePass.changeProgram(fragmentShader, uniforms) 77 | } 78 | 79 | updateUniforms(_uniforms) { 80 | let uniforms = this.displacePass.uniforms 81 | 82 | for (let key in _uniforms) { 83 | if (uniforms[key].type.search(/f|i/) != -1) { 84 | uniforms[key].value = _uniforms[key].value 85 | } else if (uniforms[key].type.search('v2') != -1) { 86 | uniforms[key].value.x = _uniforms[key].value.x 87 | uniforms[key].value.y = _uniforms[key].value.y 88 | } else if (uniforms[key].type.search('v3') != -1) { 89 | uniforms[key].value.x = _uniforms[key].value.x 90 | uniforms[key].value.y = _uniforms[key].value.y 91 | uniforms[key].value.z = _uniforms[key].value.z 92 | } 93 | } 94 | } 95 | 96 | //---------------------------------------- 97 | // private 98 | 99 | _loadSource(src) { 100 | 101 | if (typeof src == 'string') { 102 | 103 | this._setSourceURL(src) 104 | 105 | } else { 106 | console.log('detected as file') 107 | 108 | let reader = new FileReader() 109 | 110 | reader.addEventListener('load', () => { 111 | console.log('loaded!!!!') 112 | this._setSourceURL(reader.result) 113 | }) 114 | 115 | reader.readAsDataURL(src) 116 | } 117 | } 118 | 119 | _setSourceURL(url) { 120 | let img = new Image() 121 | img.src = url 122 | img.onload = () => { 123 | this.textureLoader.load(url, (tex) => { 124 | Ticker.reset() 125 | this._setResolution(img.width, img.height) 126 | this.displacePass.reset(tex) 127 | this.renderPass.render() 128 | }) 129 | } 130 | 131 | } 132 | 133 | _update() { 134 | this.displacePass.render() 135 | this.renderPass.render() 136 | } 137 | 138 | _updateTransform() { 139 | let sw = this.$wrapper.width() / this.width 140 | let sh = this.$wrapper.height() / this.height 141 | 142 | let scale = Math.min(sw, sh) 143 | let x = (this.$wrapper.width() - this.width * scale) / 2 144 | let y = (this.$wrapper.height() - this.height * scale) / 2 145 | 146 | this.$canvas.css({x, y, scale}) 147 | } 148 | 149 | _setResolution(w, h) { 150 | this.width = w 151 | this.height = h 152 | this.displacePass.setSize(this.width, this.height) 153 | window.renderer.setSize(this.width, this.height) 154 | 155 | this._updateTransform() 156 | } 157 | 158 | //---------------------------------------- 159 | // event 160 | 161 | _showCursor() { 162 | this.$cursor.addClass('show') 163 | } 164 | 165 | _hideCursor() { 166 | this.$cursor.removeClass('show') 167 | } 168 | 169 | _moveCursor(e) { 170 | this.$cursor.css({ 171 | x: e.pageX - this.$easel[0].offsetLeft, 172 | y: e.pageY - this.$easel[0].offsetTop 173 | }) 174 | } 175 | 176 | //---------------------------------------- 177 | // public 178 | 179 | changeProgram(code) { 180 | this.displacePass.changeProgram(code) 181 | } 182 | 183 | saveAsImage() { 184 | this.$canvas[0].toBlob((blob) => { 185 | FileSaver.saveAs(blob, `image${Ticker.frame}.png`) 186 | }) 187 | } 188 | 189 | setOriginalTexture(tex) { 190 | this.originalTexture = tex 191 | this._setResolution(tex.image.width, tex.image.height) 192 | this.displacePass.reset(this.originalTexture) 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /src/stylus/ctrl.styl: -------------------------------------------------------------------------------- 1 | $label-color=#cccccc 2 | $ui-color=#808080 3 | $ui-bg=#242424 4 | $ui-highlight=#999999 5 | $ui-dark = rgba(153, 153, 153, 0.1) 6 | $label-margin=4px 7 | 8 | $slider-height=24px 9 | 10 | value-style() 11 | font-size 12px 12 | color $ui-color 13 | font-family 'Droid Sans Mono', monospace 14 | 15 | ctrl-transition() 16 | transition all .1s ease 17 | 18 | //-------------------------------------------------- 19 | // reset ctrl 20 | 21 | .ctrl 22 | 23 | input, select, button 24 | height 28px 25 | display block 26 | border 0 27 | border-radius 0 28 | background-color $ui-bg 29 | line-height 1 30 | text-align center 31 | outline none !important 32 | -webkit-appearance none 33 | value-style() 34 | 35 | normalize-size() 36 | width 100% 37 | height 100% 38 | margin 0 39 | padding 0 40 | background transparent 41 | color transparent 42 | overflow visible 43 | border 0 44 | 45 | normalize-thumb() 46 | width $sider-size 47 | height $sider-size 48 | border 0 49 | border-radius 0 50 | background transparent 51 | 52 | input[type=range] 53 | normalize-size() 54 | opacity 0 55 | 56 | &::-ms-track 57 | normalize-size() 58 | 59 | &::-moz-range-track 60 | normalize-size() 61 | 62 | &:focus::-webkit-slider-runnable-track 63 | background transparent 64 | border transparent 65 | 66 | /* Make the thumbs the same size as your custom sliderthumb. 67 | they will not be visible but they will be draggable. */ 68 | &::-ms-thumb, 69 | &::-moz-range-thumb 70 | normalize-thumb() 71 | 72 | &::-webkit-slider-thumb 73 | normalize-thumb() 74 | -webkit-appearance none 75 | 76 | /* microsoft IE10+ and Edge - eliminates default fills before and after thumb */ 77 | &::-ms-fill-lower, 78 | &::-ms-fill-upper 79 | background transparent 80 | border 0 none 81 | 82 | &::-ms-tooltip 83 | display none 84 | 85 | //-------------------------------------------------- 86 | // gui 87 | 88 | .ctrl 89 | padding 0 10px 90 | user-select none 91 | cursor default 92 | 93 | .ctrl__component 94 | margin-bottom 24px 95 | 96 | label 97 | display block 98 | color $label-color 99 | font-size 14px 100 | letter-spacing .1em 101 | margin-bottom 8px 102 | 103 | .value 104 | margin-right $label-margin 105 | margin-left $label-margin 106 | value-style() 107 | 108 | //-------------------------------------------------- 109 | // dropdown 110 | 111 | .ctrl__dropdown 112 | 113 | select 114 | width 100% 115 | text-align-last center 116 | 117 | //-------------------------------------------------- 118 | // random 119 | 120 | .ctrl__random 121 | .container 122 | display flex 123 | justify-content space-around 124 | align-items stretch 125 | 126 | input 127 | width 100% 128 | 129 | button 130 | height 28px 131 | overflow hidden 132 | flex 0 0 24px 133 | margin-right 3px 134 | notext() 135 | background-color transparent 136 | background-image embedurl('./img/ctrl_reload.svg') 137 | background-repeat no-repeat 138 | background-size 16px 16px 139 | background-position center right 140 | opacity .6 141 | cursor pointer 142 | ctrl-transition() 143 | 144 | &:hover 145 | opacity 1 146 | 147 | //-------------------------------------------------- 148 | // slider 149 | 150 | .ctrl__slider 151 | .container 152 | position relative 153 | background-color $ui-bg 154 | height $slider-height 155 | overflow hidden 156 | 157 | .fill 158 | position absolute 159 | top 0 160 | left 0 161 | width 100% 162 | height 100% 163 | transform-origin 0 0 164 | background $ui-highlight 165 | pointer-events none 166 | 167 | .value 168 | position absolute 169 | top 0 170 | right 0 171 | line-height $slider-height 172 | 173 | //-------------------------------------------------- 174 | // hanni 175 | 176 | .ctrl__hanni 177 | .container 178 | position relative 179 | background-color $ui-bg 180 | height $slider-height 181 | overflow hidden 182 | 183 | .fill 184 | position absolute 185 | top 0 186 | left 0 187 | width 100% 188 | height 100% 189 | transform-origin 0 0 190 | background $ui-highlight 191 | pointer-events none 192 | 193 | .value 194 | position absolute 195 | top 0 196 | right 0 197 | line-height $slider-height 198 | 199 | .value--a 200 | left 0 201 | 202 | 203 | 204 | 205 | 206 | 207 | //-------------------------------------------------- 208 | // offset 209 | 210 | .ctrl__offset 211 | 212 | .container 213 | position relative 214 | overflow hidden 215 | background-color $ui-bg 216 | height $slider-height 217 | 218 | $gpos = 2.5% 219 | $grid-grad = linear-gradient(90deg, transparent 50%, $ui-dark 50%, $ui-dark 52.5%, transparent 52.5%) 220 | 221 | .grid 222 | position absolute 223 | top 0 224 | left -100% 225 | width 300% 226 | height 100% 227 | background-image $grid-grad 228 | background-size 40px $slider-height 229 | background-repeat repeat-x 230 | background-position center center 231 | 232 | .zero 233 | position absolute 234 | top 0 235 | left 50% 236 | width 1px 237 | height 100% 238 | background-color $ui-highlight 239 | 240 | .value 241 | position absolute 242 | top 0 243 | right 0 244 | line-height $slider-height 245 | 246 | //-------------------------------------------------- 247 | // angle 248 | 249 | .ctrl__angle 250 | 251 | $diameter = 64px 252 | 253 | .container 254 | position relative 255 | 256 | .knob 257 | position relative 258 | background-color $ui-bg 259 | width $diameter 260 | height $diameter 261 | border-radius 50% 262 | margin 0 auto 263 | overflow hidden 264 | 265 | .marker 266 | position absolute 267 | background-color $ui-highlight 268 | width ($diameter / 3) 269 | height 1px 270 | top 50% 271 | right 0 272 | margin-top -1px 273 | 274 | .value 275 | position absolute 276 | top 50% 277 | right 0 278 | margin-top -0.5em 279 | 280 | //-------------------------------------------------- 281 | // slider2d 282 | 283 | .ctrl__slider2d 284 | 285 | label 286 | float left 287 | 288 | .container 289 | clear both 290 | position relative 291 | width 100% 292 | height 0 293 | padding-top 50% 294 | background-color $ui-bg 295 | overflow hidden 296 | 297 | .pad 298 | position absolute 299 | left 0 300 | top 0 301 | width 100% 302 | height 100% 303 | 304 | .value 305 | float right 306 | margin-top 2px 307 | 308 | .dot 309 | position absolute 310 | width 5px 311 | height 5px 312 | margin -2px 0 0 -2px 313 | border-radius 50% 314 | background-color $ui-highlight 315 | pointer-events none 316 | 317 | .axis-x, .axis-y 318 | position absolute 319 | background-color $ui-dark 320 | pointer-events none 321 | 322 | .axis-x 323 | width 100% 324 | height 1px 325 | left 0 326 | 327 | .axis-y 328 | width 1px 329 | height 100% 330 | top 0 331 | 332 | //-------------------------------------------------- 333 | // offset2d 334 | 335 | .ctrl__offset2d 336 | 337 | label 338 | float left 339 | 340 | .container 341 | clear both 342 | position relative 343 | width 100% 344 | height 0 345 | padding-top 50% 346 | background-color $ui-bg 347 | overflow hidden 348 | 349 | $gpos = 2.5% 350 | $grid-v-grad = linear-gradient(90deg, transparent 50%, $ui-dark 50%, $ui-dark 52.5%, transparent 52.5%) 351 | $grid-h-grad = linear-gradient( 0deg, transparent 50%, $ui-dark 50%, $ui-dark 52.5%, transparent 52.5%) 352 | 353 | .pad 354 | position absolute 355 | left -100% 356 | top -100% 357 | width 300% 358 | height 300% 359 | background-image $grid-v-grad, $grid-h-grad 360 | background-size 40px 40px, 40px 40px 361 | background-repeat repeat, repeat 362 | background-position center center 363 | 364 | .axis-x, .axis-y 365 | position absolute 366 | background-color $ui-highlight 367 | pointer-events none 368 | 369 | .axis-x 370 | width 100% 371 | height 1px 372 | left 0 373 | top 50% 374 | 375 | .axis-y 376 | width 1px 377 | height 100% 378 | top 0 379 | left 50% 380 | 381 | .value 382 | float right 383 | margin-top 2px 384 | 385 | //-------------------------------------------------- 386 | // others 387 | 388 | .ctrl 389 | hr 390 | border 0 391 | border-top 1px solid $ui-dark 392 | margin-bottom 24px 393 | 394 | //-------------------------------------------------- 395 | // menu 396 | 397 | .toolbar__menu 398 | margin-bottom 12px 399 | 400 | ul 401 | display flex 402 | justify-content center 403 | 404 | button 405 | -webkit-appearance none 406 | border 1px solid $label-color 407 | background-color transparent 408 | text-align center 409 | color $label-color 410 | font-size 11px 411 | letter-spacing: .1em 412 | width 54px 413 | height 54px 414 | border-radius 50% 415 | margin 0 10px 416 | cursor pointer 417 | transition all .15s ease 418 | 419 | &:hover 420 | background-color $label-color 421 | color $ui-bg 422 | -------------------------------------------------------------------------------- /src/ctrl.js: -------------------------------------------------------------------------------- 1 | import 'jquery.transit' 2 | import lerp from 'lerp' 3 | import clamp from 'clamp' 4 | 5 | import trackDragging from './track-dragging.js' 6 | 7 | function mod(n, m) { 8 | return ((n % m) + m) % m 9 | } 10 | 11 | //------------------------------------------------------------------ 12 | // filters 13 | Vue.filter('precision', function(value) { 14 | return parseFloat(value).toFixed(2) 15 | }) 16 | 17 | Vue.filter('degrees', function(value) { 18 | return `${(value * 180 / Math.PI).toFixed(1)}°` 19 | }) 20 | 21 | //------------------------------------------------------------------ 22 | // group 23 | 24 | Vue.component('ctrl-group', { 25 | template: ` 26 |
27 | 62 |
63 | `, 64 | 65 | props: { 66 | params: { 67 | type: Object, 68 | default: {} 69 | } 70 | }, 71 | methods: { 72 | onChange() { 73 | this.$emit('change') 74 | } 75 | } 76 | }) 77 | //------------------------------------------------------------------ 78 | // components 79 | 80 | //------------------------------------------------------------------ 81 | Vue.component('ctrl-dropdown', { 82 | template: ` 83 |
84 | 85 | 88 |
`, 89 | props: { 90 | label: {type: String, default: 'DROPDOWN'}, 91 | options: {type: Array, default: function() { return [] }} 92 | } 93 | }) 94 | 95 | //------------------------------------------------------------------ 96 | Vue.component('ctrl-slider', { 97 | template: ` 98 |
99 | 100 |
101 |
102 |
{{value | precision}}
103 |
104 |
`, 105 | props: { 106 | label: {type: String, default: 'slider'}, 107 | value: {type: Number, default: 0}, 108 | min: {type: Number, default: 0}, 109 | max: {type: Number, default: 1}, 110 | step: {type: Number, default: 0.0001} 111 | }, 112 | computed: { 113 | fillTransform: function() { 114 | return `scaleX(${this.value / (this.max - this.min)})` 115 | } 116 | }, 117 | methods: { 118 | onMousedown() { 119 | let rect = this.$el.getBoundingClientRect() 120 | let w = rect.width 121 | let origin = { 122 | x: rect.left, 123 | y: rect.top 124 | } 125 | 126 | trackDragging({origin}, (x) => { 127 | this.value = clamp(lerp(this.min, this.max, x / w), this.min, this.max) 128 | this.$emit('change', this.value) 129 | }) 130 | } 131 | } 132 | }) 133 | 134 | //------------------------------------------------------------------ 135 | Vue.component('ctrl-offset', { 136 | template: ` 137 |
138 | 139 |
140 |
141 |
142 |
{{value | precision}}
143 |
144 |
`, 145 | props: { 146 | label: {type: String, default: 'OFFSET'}, 147 | value: {type: Number, default: 0}, 148 | width: {type: Number, default: 2} 149 | }, 150 | computed: { 151 | gridTranslate() { 152 | let w = this.$el.offsetWidth 153 | let x = mod(w * (this.value / this.width), 40) 154 | return `translateX(${x}px)` 155 | }, 156 | zeroTranslate() { 157 | let w = this.$el.offsetWidth 158 | let x = w * (this.value / this.width) 159 | return `translateX(${x}px)` 160 | } 161 | }, 162 | methods: { 163 | onMousedown() { 164 | let step = this.width / this.$el.offsetWidth 165 | trackDragging({reset: true}, (x) => { 166 | this.value += x * step 167 | this.$emit('change') 168 | }) 169 | } 170 | } 171 | }) 172 | 173 | //------------------------------------------------------------------ 174 | Vue.component('ctrl-angle', { 175 | template: ` 176 |
177 | 178 |
179 |
180 |
181 |
182 |
{{value | degrees}}
183 |
184 |
185 | `, 186 | props: { 187 | label: {type: String, default: 'ANGLE'}, 188 | value: {type: Number, default: 0} 189 | }, 190 | computed: { 191 | knobRotate: function() { 192 | return `rotate(${-this.value / Math.PI * 180}deg )` 193 | } 194 | }, 195 | methods: { 196 | onMousedown(e) { 197 | 198 | let rect = this.$el.getBoundingClientRect() 199 | let origin = { 200 | x: (rect.left + rect.right) / 2, 201 | y: (rect.top + rect.bottom) / 2 202 | } 203 | 204 | let initialAngle = -Math.atan2(e.pageY - origin.y, e.pageX - origin.x) 205 | let initialValue = this.value 206 | 207 | trackDragging({origin}, (x, y) => { 208 | let angle = -Math.atan2(y, x) 209 | this.value = (initialValue + (angle - initialAngle) + Math.PI * 2) % (Math.PI * 2) 210 | this.$emit('change') 211 | }) 212 | } 213 | } 214 | }) 215 | 216 | //------------------------------------------------------------------ 217 | Vue.component('ctrl-slider2d', { 218 | template: ` 219 |
220 | 221 |
{{value.x | precision}}, {{value.y | precision}}
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | `, 231 | props: { 232 | label: {type: String, default: 'slider 2D'}, 233 | value: {type: Object, default: function() {return {x: .5, y: .5}}} 234 | }, 235 | computed: { 236 | uiTop: function() { 237 | return `${(1 - this.value.y) * 100}%` 238 | }, 239 | uiLeft: function() { 240 | return `${this.value.x * 100}%` 241 | } 242 | }, 243 | methods: { 244 | onMousedown(e) { 245 | 246 | let rect = e.target.getBoundingClientRect() 247 | let origin = { 248 | x: rect.left, 249 | y: rect.top 250 | } 251 | 252 | trackDragging({origin}, (x, y) => { 253 | this.value.x = clamp(x / rect.width, 0, 1) 254 | this.value.y = 1 - clamp(y / rect.height, 0, 1) 255 | this.$emit('change') 256 | }) 257 | } 258 | } 259 | }) 260 | 261 | //------------------------------------------------------------------ 262 | Vue.component('ctrl-offset2d', { 263 | template: ` 264 |
265 | 266 |
{{value.x | precision}}, {{value.y | precision}}
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 | `, 275 | props: { 276 | label: {type: String, default: 'OFFSET 2D'}, 277 | value: {type: Object, default: function() {return {x: 0, y: 0}}} 278 | }, 279 | computed: { 280 | backgroundPosition() { 281 | return `${this.value.x * 100}% ${this.value.y * 100}%` 282 | }, 283 | gridTranslate() { 284 | let $pad = this.$el.children[2] 285 | let x = mod(this.value.x * $pad.offsetWidth / 2, 40) 286 | let y = mod(-this.value.y * $pad.offsetHeight / 2, 40) 287 | return `translate(${x}px, ${y}px)` 288 | }, 289 | axisXTranslate() { 290 | let $pad = this.$el.children[2] 291 | let y = -this.value.y * $pad.offsetHeight / 2 292 | return `translateY(${y}px)` 293 | }, 294 | axisYTranslate() { 295 | let $pad = this.$el.children[2] 296 | let y = this.value.x * $pad.offsetWidth / 2 297 | return `translateX(${y}px)` 298 | } 299 | }, 300 | methods: { 301 | onMousedown() { 302 | 303 | let stepX = 1 / this.$el.children[2].offsetWidth * 2 304 | let stepY = -1 / this.$el.children[2].offsetHeight * 2 305 | 306 | trackDragging({reset: true}, (x, y) => { 307 | this.value.x += x * stepX 308 | this.value.y += y * stepY 309 | this.$emit('change') 310 | }) 311 | } 312 | } 313 | }) 314 | 315 | //------------------------------------------------------------------ 316 | Vue.component('ctrl-random', { 317 | template: ` 318 |
319 | 320 |
321 | 322 | 323 |
324 |
`, 325 | props: { 326 | label: {type: String, default: 'RANDOM'}, 327 | value: {type: Number, default: 0}, 328 | min: {type: Number, default: 0}, 329 | max: {type: Number, default: 1} 330 | }, 331 | methods: { 332 | generate() { 333 | this.value = lerp(this.min, this.max, Math.random()) 334 | this.$emit('change') 335 | } 336 | } 337 | }) 338 | -------------------------------------------------------------------------------- /web_modules/easeljs.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @license EaselJS 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2011-2015 gskinner.com, inc. 6 | * 7 | * Distributed under the terms of the MIT license. 8 | * http://www.opensource.org/licenses/mit-license.html 9 | * 10 | * This notice shall be included in all copies or substantial portions of the Software. 11 | */ 12 | this.createjs=this.createjs||{},createjs.extend=function(a,b){"use strict";function c(){this.constructor=a}return c.prototype=b.prototype,a.prototype=new c},this.createjs=this.createjs||{},createjs.promote=function(a,b){"use strict";var c=a.prototype,d=Object.getPrototypeOf&&Object.getPrototypeOf(c)||c.__proto__;if(d){c[(b+="_")+"constructor"]=d.constructor;for(var e in d)c.hasOwnProperty(e)&&"function"==typeof d[e]&&(c[b+e]=d[e])}return a},this.createjs=this.createjs||{},createjs.indexOf=function(a,b){"use strict";for(var c=0,d=a.length;d>c;c++)if(b===a[c])return c;return-1},this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c){this.type=a,this.target=null,this.currentTarget=null,this.eventPhase=0,this.bubbles=!!b,this.cancelable=!!c,this.timeStamp=(new Date).getTime(),this.defaultPrevented=!1,this.propagationStopped=!1,this.immediatePropagationStopped=!1,this.removed=!1}var b=a.prototype;b.preventDefault=function(){this.defaultPrevented=this.cancelable&&!0},b.stopPropagation=function(){this.propagationStopped=!0},b.stopImmediatePropagation=function(){this.immediatePropagationStopped=this.propagationStopped=!0},b.remove=function(){this.removed=!0},b.clone=function(){return new a(this.type,this.bubbles,this.cancelable)},b.set=function(a){for(var b in a)this[b]=a[b];return this},b.toString=function(){return"[Event (type="+this.type+")]"},createjs.Event=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(){this._listeners=null,this._captureListeners=null}var b=a.prototype;a.initialize=function(a){a.addEventListener=b.addEventListener,a.on=b.on,a.removeEventListener=a.off=b.removeEventListener,a.removeAllEventListeners=b.removeAllEventListeners,a.hasEventListener=b.hasEventListener,a.dispatchEvent=b.dispatchEvent,a._dispatchEvent=b._dispatchEvent,a.willTrigger=b.willTrigger},b.addEventListener=function(a,b,c){var d;d=c?this._captureListeners=this._captureListeners||{}:this._listeners=this._listeners||{};var e=d[a];return e&&this.removeEventListener(a,b,c),e=d[a],e?e.push(b):d[a]=[b],b},b.on=function(a,b,c,d,e,f){return b.handleEvent&&(c=c||b,b=b.handleEvent),c=c||this,this.addEventListener(a,function(a){b.call(c,a,e),d&&a.remove()},f)},b.removeEventListener=function(a,b,c){var d=c?this._captureListeners:this._listeners;if(d){var e=d[a];if(e)for(var f=0,g=e.length;g>f;f++)if(e[f]==b){1==g?delete d[a]:e.splice(f,1);break}}},b.off=b.removeEventListener,b.removeAllEventListeners=function(a){a?(this._listeners&&delete this._listeners[a],this._captureListeners&&delete this._captureListeners[a]):this._listeners=this._captureListeners=null},b.dispatchEvent=function(a,b,c){if("string"==typeof a){var d=this._listeners;if(!(b||d&&d[a]))return!0;a=new createjs.Event(a,b,c)}else a.target&&a.clone&&(a=a.clone());try{a.target=this}catch(e){}if(a.bubbles&&this.parent){for(var f=this,g=[f];f.parent;)g.push(f=f.parent);var h,i=g.length;for(h=i-1;h>=0&&!a.propagationStopped;h--)g[h]._dispatchEvent(a,1+(0==h));for(h=1;i>h&&!a.propagationStopped;h++)g[h]._dispatchEvent(a,3)}else this._dispatchEvent(a,2);return!a.defaultPrevented},b.hasEventListener=function(a){var b=this._listeners,c=this._captureListeners;return!!(b&&b[a]||c&&c[a])},b.willTrigger=function(a){for(var b=this;b;){if(b.hasEventListener(a))return!0;b=b.parent}return!1},b.toString=function(){return"[EventDispatcher]"},b._dispatchEvent=function(a,b){var c,d=1==b?this._captureListeners:this._listeners;if(a&&d){var e=d[a.type];if(!e||!(c=e.length))return;try{a.currentTarget=this}catch(f){}try{a.eventPhase=b}catch(f){}a.removed=!1,e=e.slice();for(var g=0;c>g&&!a.immediatePropagationStopped;g++){var h=e[g];h.handleEvent?h.handleEvent(a):h(a),a.removed&&(this.off(a.type,h,1==b),a.removed=!1)}}},createjs.EventDispatcher=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(){throw"Ticker cannot be instantiated."}a.RAF_SYNCHED="synched",a.RAF="raf",a.TIMEOUT="timeout",a.useRAF=!1,a.timingMode=null,a.maxDelta=0,a.paused=!1,a.removeEventListener=null,a.removeAllEventListeners=null,a.dispatchEvent=null,a.hasEventListener=null,a._listeners=null,createjs.EventDispatcher.initialize(a),a._addEventListener=a.addEventListener,a.addEventListener=function(){return!a._inited&&a.init(),a._addEventListener.apply(a,arguments)},a._inited=!1,a._startTime=0,a._pausedTime=0,a._ticks=0,a._pausedTicks=0,a._interval=50,a._lastTime=0,a._times=null,a._tickTimes=null,a._timerId=null,a._raf=!0,a.setInterval=function(b){a._interval=b,a._inited&&a._setupTick()},a.getInterval=function(){return a._interval},a.setFPS=function(b){a.setInterval(1e3/b)},a.getFPS=function(){return 1e3/a._interval};try{Object.defineProperties(a,{interval:{get:a.getInterval,set:a.setInterval},framerate:{get:a.getFPS,set:a.setFPS}})}catch(b){console.log(b)}a.init=function(){a._inited||(a._inited=!0,a._times=[],a._tickTimes=[],a._startTime=a._getTime(),a._times.push(a._lastTime=0),a.interval=a._interval)},a.reset=function(){if(a._raf){var b=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame;b&&b(a._timerId)}else clearTimeout(a._timerId);a.removeAllEventListeners("tick"),a._timerId=a._times=a._tickTimes=null,a._startTime=a._lastTime=a._ticks=0,a._inited=!1},a.getMeasuredTickTime=function(b){var c=0,d=a._tickTimes;if(!d||d.length<1)return-1;b=Math.min(d.length,b||0|a.getFPS());for(var e=0;b>e;e++)c+=d[e];return c/b},a.getMeasuredFPS=function(b){var c=a._times;return!c||c.length<2?-1:(b=Math.min(c.length-1,b||0|a.getFPS()),1e3/((c[0]-c[b])/b))},a.setPaused=function(b){a.paused=b},a.getPaused=function(){return a.paused},a.getTime=function(b){return a._startTime?a._getTime()-(b?a._pausedTime:0):-1},a.getEventTime=function(b){return a._startTime?(a._lastTime||a._startTime)-(b?a._pausedTime:0):-1},a.getTicks=function(b){return a._ticks-(b?a._pausedTicks:0)},a._handleSynch=function(){a._timerId=null,a._setupTick(),a._getTime()-a._lastTime>=.97*(a._interval-1)&&a._tick()},a._handleRAF=function(){a._timerId=null,a._setupTick(),a._tick()},a._handleTimeout=function(){a._timerId=null,a._setupTick(),a._tick()},a._setupTick=function(){if(null==a._timerId){var b=a.timingMode||a.useRAF&&a.RAF_SYNCHED;if(b==a.RAF_SYNCHED||b==a.RAF){var c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame;if(c)return a._timerId=c(b==a.RAF?a._handleRAF:a._handleSynch),void(a._raf=!0)}a._raf=!1,a._timerId=setTimeout(a._handleTimeout,a._interval)}},a._tick=function(){var b=a.paused,c=a._getTime(),d=c-a._lastTime;if(a._lastTime=c,a._ticks++,b&&(a._pausedTicks++,a._pausedTime+=d),a.hasEventListener("tick")){var e=new createjs.Event("tick"),f=a.maxDelta;e.delta=f&&d>f?f:d,e.paused=b,e.time=c,e.runTime=c-a._pausedTime,a.dispatchEvent(e)}for(a._tickTimes.unshift(a._getTime()-c);a._tickTimes.length>100;)a._tickTimes.pop();for(a._times.unshift(c);a._times.length>100;)a._times.pop()};var c=window.performance&&(performance.now||performance.mozNow||performance.msNow||performance.oNow||performance.webkitNow);a._getTime=function(){return(c&&c.call(performance)||(new Date).getTime())-a._startTime},createjs.Ticker=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(){throw"UID cannot be instantiated"}a._nextID=0,a.get=function(){return a._nextID++},createjs.UID=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d,e,f,g,h,i,j,k){this.Event_constructor(a,b,c),this.stageX=d,this.stageY=e,this.rawX=null==i?d:i,this.rawY=null==j?e:j,this.nativeEvent=f,this.pointerID=g,this.primary=!!h,this.relatedTarget=k}var b=createjs.extend(a,createjs.Event);b._get_localX=function(){return this.currentTarget.globalToLocal(this.rawX,this.rawY).x},b._get_localY=function(){return this.currentTarget.globalToLocal(this.rawX,this.rawY).y},b._get_isTouch=function(){return-1!==this.pointerID};try{Object.defineProperties(b,{localX:{get:b._get_localX},localY:{get:b._get_localY},isTouch:{get:b._get_isTouch}})}catch(c){}b.clone=function(){return new a(this.type,this.bubbles,this.cancelable,this.stageX,this.stageY,this.nativeEvent,this.pointerID,this.primary,this.rawX,this.rawY)},b.toString=function(){return"[MouseEvent (type="+this.type+" stageX="+this.stageX+" stageY="+this.stageY+")]"},createjs.MouseEvent=createjs.promote(a,"Event")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d,e,f){this.setValues(a,b,c,d,e,f)}var b=a.prototype;a.DEG_TO_RAD=Math.PI/180,a.identity=null,b.setValues=function(a,b,c,d,e,f){return this.a=null==a?1:a,this.b=b||0,this.c=c||0,this.d=null==d?1:d,this.tx=e||0,this.ty=f||0,this},b.append=function(a,b,c,d,e,f){var g=this.a,h=this.b,i=this.c,j=this.d;return(1!=a||0!=b||0!=c||1!=d)&&(this.a=g*a+i*b,this.b=h*a+j*b,this.c=g*c+i*d,this.d=h*c+j*d),this.tx=g*e+i*f+this.tx,this.ty=h*e+j*f+this.ty,this},b.prepend=function(a,b,c,d,e,f){var g=this.a,h=this.c,i=this.tx;return this.a=a*g+c*this.b,this.b=b*g+d*this.b,this.c=a*h+c*this.d,this.d=b*h+d*this.d,this.tx=a*i+c*this.ty+e,this.ty=b*i+d*this.ty+f,this},b.appendMatrix=function(a){return this.append(a.a,a.b,a.c,a.d,a.tx,a.ty)},b.prependMatrix=function(a){return this.prepend(a.a,a.b,a.c,a.d,a.tx,a.ty)},b.appendTransform=function(b,c,d,e,f,g,h,i,j){if(f%360)var k=f*a.DEG_TO_RAD,l=Math.cos(k),m=Math.sin(k);else l=1,m=0;return g||h?(g*=a.DEG_TO_RAD,h*=a.DEG_TO_RAD,this.append(Math.cos(h),Math.sin(h),-Math.sin(g),Math.cos(g),b,c),this.append(l*d,m*d,-m*e,l*e,0,0)):this.append(l*d,m*d,-m*e,l*e,b,c),(i||j)&&(this.tx-=i*this.a+j*this.c,this.ty-=i*this.b+j*this.d),this},b.prependTransform=function(b,c,d,e,f,g,h,i,j){if(f%360)var k=f*a.DEG_TO_RAD,l=Math.cos(k),m=Math.sin(k);else l=1,m=0;return(i||j)&&(this.tx-=i,this.ty-=j),g||h?(g*=a.DEG_TO_RAD,h*=a.DEG_TO_RAD,this.prepend(l*d,m*d,-m*e,l*e,0,0),this.prepend(Math.cos(h),Math.sin(h),-Math.sin(g),Math.cos(g),b,c)):this.prepend(l*d,m*d,-m*e,l*e,b,c),this},b.rotate=function(b){b*=a.DEG_TO_RAD;var c=Math.cos(b),d=Math.sin(b),e=this.a,f=this.b;return this.a=e*c+this.c*d,this.b=f*c+this.d*d,this.c=-e*d+this.c*c,this.d=-f*d+this.d*c,this},b.skew=function(b,c){return b*=a.DEG_TO_RAD,c*=a.DEG_TO_RAD,this.append(Math.cos(c),Math.sin(c),-Math.sin(b),Math.cos(b),0,0),this},b.scale=function(a,b){return this.a*=a,this.b*=a,this.c*=b,this.d*=b,this},b.translate=function(a,b){return this.tx+=this.a*a+this.c*b,this.ty+=this.b*a+this.d*b,this},b.identity=function(){return this.a=this.d=1,this.b=this.c=this.tx=this.ty=0,this},b.invert=function(){var a=this.a,b=this.b,c=this.c,d=this.d,e=this.tx,f=a*d-b*c;return this.a=d/f,this.b=-b/f,this.c=-c/f,this.d=a/f,this.tx=(c*this.ty-d*e)/f,this.ty=-(a*this.ty-b*e)/f,this},b.isIdentity=function(){return 0===this.tx&&0===this.ty&&1===this.a&&0===this.b&&0===this.c&&1===this.d},b.equals=function(a){return this.tx===a.tx&&this.ty===a.ty&&this.a===a.a&&this.b===a.b&&this.c===a.c&&this.d===a.d},b.transformPoint=function(a,b,c){return c=c||{},c.x=a*this.a+b*this.c+this.tx,c.y=a*this.b+b*this.d+this.ty,c},b.decompose=function(b){null==b&&(b={}),b.x=this.tx,b.y=this.ty,b.scaleX=Math.sqrt(this.a*this.a+this.b*this.b),b.scaleY=Math.sqrt(this.c*this.c+this.d*this.d);var c=Math.atan2(-this.c,this.d),d=Math.atan2(this.b,this.a),e=Math.abs(1-c/d);return 1e-5>e?(b.rotation=d/a.DEG_TO_RAD,this.a<0&&this.d>=0&&(b.rotation+=b.rotation<=0?180:-180),b.skewX=b.skewY=0):(b.skewX=c/a.DEG_TO_RAD,b.skewY=d/a.DEG_TO_RAD),b},b.copy=function(a){return this.setValues(a.a,a.b,a.c,a.d,a.tx,a.ty)},b.clone=function(){return new a(this.a,this.b,this.c,this.d,this.tx,this.ty)},b.toString=function(){return"[Matrix2D (a="+this.a+" b="+this.b+" c="+this.c+" d="+this.d+" tx="+this.tx+" ty="+this.ty+")]"},a.identity=new a,createjs.Matrix2D=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d,e){this.setValues(a,b,c,d,e)}var b=a.prototype;b.setValues=function(a,b,c,d,e){return this.visible=null==a?!0:!!a,this.alpha=null==b?1:b,this.shadow=c,this.compositeOperation=d,this.matrix=e||this.matrix&&this.matrix.identity()||new createjs.Matrix2D,this},b.append=function(a,b,c,d,e){return this.alpha*=b,this.shadow=c||this.shadow,this.compositeOperation=d||this.compositeOperation,this.visible=this.visible&&a,e&&this.matrix.appendMatrix(e),this},b.prepend=function(a,b,c,d,e){return this.alpha*=b,this.shadow=this.shadow||c,this.compositeOperation=this.compositeOperation||d,this.visible=this.visible&&a,e&&this.matrix.prependMatrix(e),this},b.identity=function(){return this.visible=!0,this.alpha=1,this.shadow=this.compositeOperation=null,this.matrix.identity(),this},b.clone=function(){return new a(this.alpha,this.shadow,this.compositeOperation,this.visible,this.matrix.clone())},createjs.DisplayProps=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b){this.setValues(a,b)}var b=a.prototype;b.setValues=function(a,b){return this.x=a||0,this.y=b||0,this},b.copy=function(a){return this.x=a.x,this.y=a.y,this},b.clone=function(){return new a(this.x,this.y)},b.toString=function(){return"[Point (x="+this.x+" y="+this.y+")]"},createjs.Point=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d){this.setValues(a,b,c,d)}var b=a.prototype;b.setValues=function(a,b,c,d){return this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0,this},b.extend=function(a,b,c,d){return c=c||0,d=d||0,a+c>this.x+this.width&&(this.width=a+c-this.x),b+d>this.y+this.height&&(this.height=b+d-this.y),a=this.x&&a+c<=this.x+this.width&&b>=this.y&&b+d<=this.y+this.height},b.union=function(a){return this.clone().extend(a.x,a.y,a.width,a.height)},b.intersection=function(b){var c=b.x,d=b.y,e=c+b.width,f=d+b.height;return this.x>c&&(c=this.x),this.y>d&&(d=this.y),this.x+this.width=e||d>=f?null:new a(c,d,e-c,f-d)},b.intersects=function(a){return a.x<=this.x+this.width&&this.x<=a.x+a.width&&a.y<=this.y+this.height&&this.y<=a.y+a.height},b.isEmpty=function(){return this.width<=0||this.height<=0},b.clone=function(){return new a(this.x,this.y,this.width,this.height)},b.toString=function(){return"[Rectangle (x="+this.x+" y="+this.y+" width="+this.width+" height="+this.height+")]"},createjs.Rectangle=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d,e,f,g){a.addEventListener&&(this.target=a,this.overLabel=null==c?"over":c,this.outLabel=null==b?"out":b,this.downLabel=null==d?"down":d,this.play=e,this._isPressed=!1,this._isOver=!1,this._enabled=!1,a.mouseChildren=!1,this.enabled=!0,this.handleEvent({}),f&&(g&&(f.actionsEnabled=!1,f.gotoAndStop&&f.gotoAndStop(g)),a.hitArea=f))}var b=a.prototype;b.setEnabled=function(a){if(a!=this._enabled){var b=this.target;this._enabled=a,a?(b.cursor="pointer",b.addEventListener("rollover",this),b.addEventListener("rollout",this),b.addEventListener("mousedown",this),b.addEventListener("pressup",this),b._reset&&(b.__reset=b._reset,b._reset=this._reset)):(b.cursor=null,b.removeEventListener("rollover",this),b.removeEventListener("rollout",this),b.removeEventListener("mousedown",this),b.removeEventListener("pressup",this),b.__reset&&(b._reset=b.__reset,delete b.__reset))}},b.getEnabled=function(){return this._enabled};try{Object.defineProperties(b,{enabled:{get:b.getEnabled,set:b.setEnabled}})}catch(c){}b.toString=function(){return"[ButtonHelper]"},b.handleEvent=function(a){var b,c=this.target,d=a.type;"mousedown"==d?(this._isPressed=!0,b=this.downLabel):"pressup"==d?(this._isPressed=!1,b=this._isOver?this.overLabel:this.outLabel):"rollover"==d?(this._isOver=!0,b=this._isPressed?this.downLabel:this.overLabel):(this._isOver=!1,b=this._isPressed?this.overLabel:this.outLabel),this.play?c.gotoAndPlay&&c.gotoAndPlay(b):c.gotoAndStop&&c.gotoAndStop(b)},b._reset=function(){var a=this.paused;this.__reset(),this.paused=a},createjs.ButtonHelper=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d){this.color=a||"black",this.offsetX=b||0,this.offsetY=c||0,this.blur=d||0}var b=a.prototype;a.identity=new a("transparent",0,0,0),b.toString=function(){return"[Shadow]"},b.clone=function(){return new a(this.color,this.offsetX,this.offsetY,this.blur)},createjs.Shadow=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a){this.EventDispatcher_constructor(),this.complete=!0,this.framerate=0,this._animations=null,this._frames=null,this._images=null,this._data=null,this._loadCount=0,this._frameHeight=0,this._frameWidth=0,this._numFrames=0,this._regX=0,this._regY=0,this._spacing=0,this._margin=0,this._parseData(a)}var b=createjs.extend(a,createjs.EventDispatcher);b.getAnimations=function(){return this._animations.slice()};try{Object.defineProperties(b,{animations:{get:b.getAnimations}})}catch(c){}b.getNumFrames=function(a){if(null==a)return this._frames?this._frames.length:this._numFrames||0;var b=this._data[a];return null==b?0:b.frames.length},b.getAnimation=function(a){return this._data[a]},b.getFrame=function(a){var b;return this._frames&&(b=this._frames[a])?b:null},b.getFrameBounds=function(a,b){var c=this.getFrame(a);return c?(b||new createjs.Rectangle).setValues(-c.regX,-c.regY,c.rect.width,c.rect.height):null},b.toString=function(){return"[SpriteSheet]"},b.clone=function(){throw"SpriteSheet cannot be cloned."},b._parseData=function(a){var b,c,d,e;if(null!=a){if(this.framerate=a.framerate||0,a.images&&(c=a.images.length)>0)for(e=this._images=[],b=0;c>b;b++){var f=a.images[b];if("string"==typeof f){var g=f;f=document.createElement("img"),f.src=g}e.push(f),f.getContext||f.naturalWidth||(this._loadCount++,this.complete=!1,function(a,b){f.onload=function(){a._handleImageLoad(b)}}(this,g),function(a,b){f.onerror=function(){a._handleImageError(b)}}(this,g))}if(null==a.frames);else if(Array.isArray(a.frames))for(this._frames=[],e=a.frames,b=0,c=e.length;c>b;b++){var h=e[b];this._frames.push({image:this._images[h[4]?h[4]:0],rect:new createjs.Rectangle(h[0],h[1],h[2],h[3]),regX:h[5]||0,regY:h[6]||0})}else d=a.frames,this._frameWidth=d.width,this._frameHeight=d.height,this._regX=d.regX||0,this._regY=d.regY||0,this._spacing=d.spacing||0,this._margin=d.margin||0,this._numFrames=d.count,0==this._loadCount&&this._calculateFrames();if(this._animations=[],null!=(d=a.animations)){this._data={};var i;for(i in d){var j={name:i},k=d[i];if("number"==typeof k)e=j.frames=[k];else if(Array.isArray(k))if(1==k.length)j.frames=[k[0]];else for(j.speed=k[3],j.next=k[2],e=j.frames=[],b=k[0];b<=k[1];b++)e.push(b);else{j.speed=k.speed,j.next=k.next;var l=k.frames;e=j.frames="number"==typeof l?[l]:l.slice(0)}(j.next===!0||void 0===j.next)&&(j.next=i),(j.next===!1||e.length<2&&j.next==i)&&(j.next=null),j.speed||(j.speed=1),this._animations.push(i),this._data[i]=j}}}},b._handleImageLoad=function(){0==--this._loadCount&&(this._calculateFrames(),this.complete=!0,this.dispatchEvent("complete"))},b._handleImageError=function(a){var b=new createjs.Event("error");b.src=a,this.dispatchEvent(b),0==--this._loadCount&&this.dispatchEvent("complete")},b._calculateFrames=function(){if(!this._frames&&0!=this._frameWidth){this._frames=[];var a=this._numFrames||1e5,b=0,c=this._frameWidth,d=this._frameHeight,e=this._spacing,f=this._margin;a:for(var g=0,h=this._images;g=l;){for(var m=f;j-f-c>=m;){if(b>=a)break a;b++,this._frames.push({image:i,rect:new createjs.Rectangle(m,l,c,d),regX:this._regX,regY:this._regY}),m+=c+e}l+=d+e}this._numFrames=b}},createjs.SpriteSheet=createjs.promote(a,"EventDispatcher")}(),this.createjs=this.createjs||{},function(){"use strict";function a(){this.command=null,this._stroke=null,this._strokeStyle=null,this._oldStrokeStyle=null,this._strokeDash=null,this._oldStrokeDash=null,this._strokeIgnoreScale=!1,this._fill=null,this._instructions=[],this._commitIndex=0,this._activeInstructions=[],this._dirty=!1,this._storeIndex=0,this.clear()}var b=a.prototype,c=a;a.getRGB=function(a,b,c,d){return null!=a&&null==c&&(d=b,c=255&a,b=a>>8&255,a=a>>16&255),null==d?"rgb("+a+","+b+","+c+")":"rgba("+a+","+b+","+c+","+d+")"},a.getHSL=function(a,b,c,d){return null==d?"hsl("+a%360+","+b+"%,"+c+"%)":"hsla("+a%360+","+b+"%,"+c+"%,"+d+")"},a.BASE_64={A:0,B:1,C:2,D:3,E:4,F:5,G:6,H:7,I:8,J:9,K:10,L:11,M:12,N:13,O:14,P:15,Q:16,R:17,S:18,T:19,U:20,V:21,W:22,X:23,Y:24,Z:25,a:26,b:27,c:28,d:29,e:30,f:31,g:32,h:33,i:34,j:35,k:36,l:37,m:38,n:39,o:40,p:41,q:42,r:43,s:44,t:45,u:46,v:47,w:48,x:49,y:50,z:51,0:52,1:53,2:54,3:55,4:56,5:57,6:58,7:59,8:60,9:61,"+":62,"/":63},a.STROKE_CAPS_MAP=["butt","round","square"],a.STROKE_JOINTS_MAP=["miter","round","bevel"];var d=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");d.getContext&&(a._ctx=d.getContext("2d"),d.width=d.height=1),b.getInstructions=function(){return this._updateInstructions(),this._instructions};try{Object.defineProperties(b,{instructions:{get:b.getInstructions}})}catch(e){}b.isEmpty=function(){return!(this._instructions.length||this._activeInstructions.length)},b.draw=function(a,b){this._updateInstructions();for(var c=this._instructions,d=this._storeIndex,e=c.length;e>d;d++)c[d].exec(a,b)},b.drawAsPath=function(a){this._updateInstructions();for(var b,c=this._instructions,d=this._storeIndex,e=c.length;e>d;d++)(b=c[d]).path!==!1&&b.exec(a)},b.moveTo=function(a,b){return this.append(new c.MoveTo(a,b),!0)},b.lineTo=function(a,b){return this.append(new c.LineTo(a,b))},b.arcTo=function(a,b,d,e,f){return this.append(new c.ArcTo(a,b,d,e,f))},b.arc=function(a,b,d,e,f,g){return this.append(new c.Arc(a,b,d,e,f,g))},b.quadraticCurveTo=function(a,b,d,e){return this.append(new c.QuadraticCurveTo(a,b,d,e))},b.bezierCurveTo=function(a,b,d,e,f,g){return this.append(new c.BezierCurveTo(a,b,d,e,f,g))},b.rect=function(a,b,d,e){return this.append(new c.Rect(a,b,d,e))},b.closePath=function(){return this._activeInstructions.length?this.append(new c.ClosePath):this},b.clear=function(){return this._instructions.length=this._activeInstructions.length=this._commitIndex=0,this._strokeStyle=this._oldStrokeStyle=this._stroke=this._fill=this._strokeDash=this._oldStrokeDash=null,this._dirty=this._strokeIgnoreScale=!1,this},b.beginFill=function(a){return this._setFill(a?new c.Fill(a):null)},b.beginLinearGradientFill=function(a,b,d,e,f,g){return this._setFill((new c.Fill).linearGradient(a,b,d,e,f,g))},b.beginRadialGradientFill=function(a,b,d,e,f,g,h,i){return this._setFill((new c.Fill).radialGradient(a,b,d,e,f,g,h,i))},b.beginBitmapFill=function(a,b,d){return this._setFill(new c.Fill(null,d).bitmap(a,b))},b.endFill=function(){return this.beginFill()},b.setStrokeStyle=function(a,b,d,e,f){return this._updateInstructions(!0),this._strokeStyle=this.command=new c.StrokeStyle(a,b,d,e,f),this._stroke&&(this._stroke.ignoreScale=f),this._strokeIgnoreScale=f,this},b.setStrokeDash=function(a,b){return this._updateInstructions(!0),this._strokeDash=this.command=new c.StrokeDash(a,b),this},b.beginStroke=function(a){return this._setStroke(a?new c.Stroke(a):null)},b.beginLinearGradientStroke=function(a,b,d,e,f,g){return this._setStroke((new c.Stroke).linearGradient(a,b,d,e,f,g))},b.beginRadialGradientStroke=function(a,b,d,e,f,g,h,i){return this._setStroke((new c.Stroke).radialGradient(a,b,d,e,f,g,h,i))},b.beginBitmapStroke=function(a,b){return this._setStroke((new c.Stroke).bitmap(a,b))},b.endStroke=function(){return this.beginStroke()},b.curveTo=b.quadraticCurveTo,b.drawRect=b.rect,b.drawRoundRect=function(a,b,c,d,e){return this.drawRoundRectComplex(a,b,c,d,e,e,e,e)},b.drawRoundRectComplex=function(a,b,d,e,f,g,h,i){return this.append(new c.RoundRect(a,b,d,e,f,g,h,i))},b.drawCircle=function(a,b,d){return this.append(new c.Circle(a,b,d))},b.drawEllipse=function(a,b,d,e){return this.append(new c.Ellipse(a,b,d,e))},b.drawPolyStar=function(a,b,d,e,f,g){return this.append(new c.PolyStar(a,b,d,e,f,g))},b.append=function(a,b){return this._activeInstructions.push(a),this.command=a,b||(this._dirty=!0),this},b.decodePath=function(b){for(var c=[this.moveTo,this.lineTo,this.quadraticCurveTo,this.bezierCurveTo,this.closePath],d=[2,2,4,6,0],e=0,f=b.length,g=[],h=0,i=0,j=a.BASE_64;f>e;){var k=b.charAt(e),l=j[k],m=l>>3,n=c[m];if(!n||3&l)throw"bad path data (@"+e+"): "+k;var o=d[m];m||(h=i=0),g.length=0,e++;for(var p=(l>>2&1)+2,q=0;o>q;q++){var r=j[b.charAt(e)],s=r>>5?-1:1;r=(31&r)<<6|j[b.charAt(e+1)],3==p&&(r=r<<6|j[b.charAt(e+2)]),r=s*r/10,q%2?h=r+=h:i=r+=i,g[q]=r,e+=p}n.apply(this,g)}return this},b.store=function(){return this._updateInstructions(!0),this._storeIndex=this._instructions.length,this},b.unstore=function(){return this._storeIndex=0,this},b.clone=function(){var b=new a;return b.command=this.command,b._stroke=this._stroke,b._strokeStyle=this._strokeStyle,b._strokeDash=this._strokeDash,b._strokeIgnoreScale=this._strokeIgnoreScale,b._fill=this._fill,b._instructions=this._instructions.slice(),b._commitIndex=this._commitIndex,b._activeInstructions=this._activeInstructions.slice(),b._dirty=this._dirty,b._storeIndex=this._storeIndex,b},b.toString=function(){return"[Graphics]"},b.mt=b.moveTo,b.lt=b.lineTo,b.at=b.arcTo,b.bt=b.bezierCurveTo,b.qt=b.quadraticCurveTo,b.a=b.arc,b.r=b.rect,b.cp=b.closePath,b.c=b.clear,b.f=b.beginFill,b.lf=b.beginLinearGradientFill,b.rf=b.beginRadialGradientFill,b.bf=b.beginBitmapFill,b.ef=b.endFill,b.ss=b.setStrokeStyle,b.sd=b.setStrokeDash,b.s=b.beginStroke,b.ls=b.beginLinearGradientStroke,b.rs=b.beginRadialGradientStroke,b.bs=b.beginBitmapStroke,b.es=b.endStroke,b.dr=b.drawRect,b.rr=b.drawRoundRect,b.rc=b.drawRoundRectComplex,b.dc=b.drawCircle,b.de=b.drawEllipse,b.dp=b.drawPolyStar,b.p=b.decodePath,b._updateInstructions=function(b){var c=this._instructions,d=this._activeInstructions,e=this._commitIndex;if(this._dirty&&d.length){c.length=e,c.push(a.beginCmd);var f=d.length,g=c.length;c.length=g+f;for(var h=0;f>h;h++)c[h+g]=d[h];this._fill&&c.push(this._fill),this._stroke&&(this._strokeDash!==this._oldStrokeDash&&(this._oldStrokeDash=this._strokeDash,c.push(this._strokeDash)),this._strokeStyle!==this._oldStrokeStyle&&(this._oldStrokeStyle=this._strokeStyle,c.push(this._strokeStyle)),c.push(this._stroke)),this._dirty=!1}b&&(d.length=0,this._commitIndex=c.length)},b._setFill=function(a){return this._updateInstructions(!0),this.command=this._fill=a,this},b._setStroke=function(a){return this._updateInstructions(!0),(this.command=this._stroke=a)&&(a.ignoreScale=this._strokeIgnoreScale),this},(c.LineTo=function(a,b){this.x=a,this.y=b}).prototype.exec=function(a){a.lineTo(this.x,this.y)},(c.MoveTo=function(a,b){this.x=a,this.y=b}).prototype.exec=function(a){a.moveTo(this.x,this.y)},(c.ArcTo=function(a,b,c,d,e){this.x1=a,this.y1=b,this.x2=c,this.y2=d,this.radius=e}).prototype.exec=function(a){a.arcTo(this.x1,this.y1,this.x2,this.y2,this.radius)},(c.Arc=function(a,b,c,d,e,f){this.x=a,this.y=b,this.radius=c,this.startAngle=d,this.endAngle=e,this.anticlockwise=!!f}).prototype.exec=function(a){a.arc(this.x,this.y,this.radius,this.startAngle,this.endAngle,this.anticlockwise)},(c.QuadraticCurveTo=function(a,b,c,d){this.cpx=a,this.cpy=b,this.x=c,this.y=d}).prototype.exec=function(a){a.quadraticCurveTo(this.cpx,this.cpy,this.x,this.y)},(c.BezierCurveTo=function(a,b,c,d,e,f){this.cp1x=a,this.cp1y=b,this.cp2x=c,this.cp2y=d,this.x=e,this.y=f}).prototype.exec=function(a){a.bezierCurveTo(this.cp1x,this.cp1y,this.cp2x,this.cp2y,this.x,this.y)},(c.Rect=function(a,b,c,d){this.x=a,this.y=b,this.w=c,this.h=d}).prototype.exec=function(a){a.rect(this.x,this.y,this.w,this.h)},(c.ClosePath=function(){}).prototype.exec=function(a){a.closePath()},(c.BeginPath=function(){}).prototype.exec=function(a){a.beginPath()},b=(c.Fill=function(a,b){this.style=a,this.matrix=b}).prototype,b.exec=function(a){if(this.style){a.fillStyle=this.style;var b=this.matrix;b&&(a.save(),a.transform(b.a,b.b,b.c,b.d,b.tx,b.ty)),a.fill(),b&&a.restore()}},b.linearGradient=function(b,c,d,e,f,g){for(var h=this.style=a._ctx.createLinearGradient(d,e,f,g),i=0,j=b.length;j>i;i++)h.addColorStop(c[i],b[i]);return h.props={colors:b,ratios:c,x0:d,y0:e,x1:f,y1:g,type:"linear"},this},b.radialGradient=function(b,c,d,e,f,g,h,i){for(var j=this.style=a._ctx.createRadialGradient(d,e,f,g,h,i),k=0,l=b.length;l>k;k++)j.addColorStop(c[k],b[k]);return j.props={colors:b,ratios:c,x0:d,y0:e,r0:f,x1:g,y1:h,r1:i,type:"radial"},this},b.bitmap=function(b,c){if(b.naturalWidth||b.getContext||b.readyState>=2){var d=this.style=a._ctx.createPattern(b,c||"");d.props={image:b,repetition:c,type:"bitmap"}}return this},b.path=!1,b=(c.Stroke=function(a,b){this.style=a,this.ignoreScale=b}).prototype,b.exec=function(a){this.style&&(a.strokeStyle=this.style,this.ignoreScale&&(a.save(),a.setTransform(1,0,0,1,0,0)),a.stroke(),this.ignoreScale&&a.restore())},b.linearGradient=c.Fill.prototype.linearGradient,b.radialGradient=c.Fill.prototype.radialGradient,b.bitmap=c.Fill.prototype.bitmap,b.path=!1,b=(c.StrokeStyle=function(a,b,c,d,e){this.width=a,this.caps=b,this.joints=c,this.miterLimit=d,this.ignoreScale=e}).prototype,b.exec=function(b){b.lineWidth=null==this.width?"1":this.width,b.lineCap=null==this.caps?"butt":isNaN(this.caps)?this.caps:a.STROKE_CAPS_MAP[this.caps],b.lineJoin=null==this.joints?"miter":isNaN(this.joints)?this.joints:a.STROKE_JOINTS_MAP[this.joints],b.miterLimit=null==this.miterLimit?"10":this.miterLimit,b.ignoreScale=null==this.ignoreScale?!1:this.ignoreScale},b.path=!1,(c.StrokeDash=function(a,b){this.segments=a,this.offset=b||0}).prototype.exec=function(a){a.setLineDash&&(a.setLineDash(this.segments||c.StrokeDash.EMPTY_SEGMENTS),a.lineDashOffset=this.offset||0)},c.StrokeDash.EMPTY_SEGMENTS=[],(c.RoundRect=function(a,b,c,d,e,f,g,h){this.x=a,this.y=b,this.w=c,this.h=d,this.radiusTL=e,this.radiusTR=f,this.radiusBR=g,this.radiusBL=h}).prototype.exec=function(a){var b=(j>i?i:j)/2,c=0,d=0,e=0,f=0,g=this.x,h=this.y,i=this.w,j=this.h,k=this.radiusTL,l=this.radiusTR,m=this.radiusBR,n=this.radiusBL;0>k&&(k*=c=-1),k>b&&(k=b),0>l&&(l*=d=-1),l>b&&(l=b),0>m&&(m*=e=-1),m>b&&(m=b),0>n&&(n*=f=-1),n>b&&(n=b),a.moveTo(g+i-l,h),a.arcTo(g+i+l*d,h-l*d,g+i,h+l,l),a.lineTo(g+i,h+j-m),a.arcTo(g+i+m*e,h+j+m*e,g+i-m,h+j,m),a.lineTo(g+n,h+j),a.arcTo(g-n*f,h+j+n*f,g,h+j-n,n),a.lineTo(g,h+k),a.arcTo(g-k*c,h-k*c,g+k,h,k),a.closePath()},(c.Circle=function(a,b,c){this.x=a,this.y=b,this.radius=c}).prototype.exec=function(a){a.arc(this.x,this.y,this.radius,0,2*Math.PI)},(c.Ellipse=function(a,b,c,d){this.x=a,this.y=b,this.w=c,this.h=d}).prototype.exec=function(a){var b=this.x,c=this.y,d=this.w,e=this.h,f=.5522848,g=d/2*f,h=e/2*f,i=b+d,j=c+e,k=b+d/2,l=c+e/2;a.moveTo(b,l),a.bezierCurveTo(b,l-h,k-g,c,k,c),a.bezierCurveTo(k+g,c,i,l-h,i,l),a.bezierCurveTo(i,l+h,k+g,j,k,j),a.bezierCurveTo(k-g,j,b,l+h,b,l)},(c.PolyStar=function(a,b,c,d,e,f){this.x=a,this.y=b,this.radius=c,this.sides=d,this.pointSize=e,this.angle=f}).prototype.exec=function(a){var b=this.x,c=this.y,d=this.radius,e=(this.angle||0)/180*Math.PI,f=this.sides,g=1-(this.pointSize||0),h=Math.PI/f;a.moveTo(b+Math.cos(e)*d,c+Math.sin(e)*d);for(var i=0;f>i;i++)e+=h,1!=g&&a.lineTo(b+Math.cos(e)*d*g,c+Math.sin(e)*d*g),e+=h,a.lineTo(b+Math.cos(e)*d,c+Math.sin(e)*d);a.closePath()},a.beginCmd=new c.BeginPath,createjs.Graphics=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(){this.EventDispatcher_constructor(),this.alpha=1,this.cacheCanvas=null,this.cacheID=0,this.id=createjs.UID.get(),this.mouseEnabled=!0,this.tickEnabled=!0,this.name=null,this.parent=null,this.regX=0,this.regY=0,this.rotation=0,this.scaleX=1,this.scaleY=1,this.skewX=0,this.skewY=0,this.shadow=null,this.visible=!0,this.x=0,this.y=0,this.transformMatrix=null,this.compositeOperation=null,this.snapToPixel=!0,this.filters=null,this.mask=null,this.hitArea=null,this.cursor=null,this._cacheOffsetX=0,this._cacheOffsetY=0,this._filterOffsetX=0,this._filterOffsetY=0,this._cacheScale=1,this._cacheDataURLID=0,this._cacheDataURL=null,this._props=new createjs.DisplayProps,this._rectangle=new createjs.Rectangle,this._bounds=null 13 | }var b=createjs.extend(a,createjs.EventDispatcher);a._MOUSE_EVENTS=["click","dblclick","mousedown","mouseout","mouseover","pressmove","pressup","rollout","rollover"],a.suppressCrossDomainErrors=!1,a._snapToPixelEnabled=!1;var c=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");c.getContext&&(a._hitTestCanvas=c,a._hitTestContext=c.getContext("2d"),c.width=c.height=1),a._nextCacheID=1,b.getStage=function(){for(var a=this,b=createjs.Stage;a.parent;)a=a.parent;return a instanceof b?a:null};try{Object.defineProperties(b,{stage:{get:b.getStage}})}catch(d){}b.isVisible=function(){return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY)},b.draw=function(a,b){var c=this.cacheCanvas;if(b||!c)return!1;var d=this._cacheScale;return a.drawImage(c,this._cacheOffsetX+this._filterOffsetX,this._cacheOffsetY+this._filterOffsetY,c.width/d,c.height/d),!0},b.updateContext=function(b){var c=this,d=c.mask,e=c._props.matrix;d&&d.graphics&&!d.graphics.isEmpty()&&(d.getMatrix(e),b.transform(e.a,e.b,e.c,e.d,e.tx,e.ty),d.graphics.drawAsPath(b),b.clip(),e.invert(),b.transform(e.a,e.b,e.c,e.d,e.tx,e.ty)),this.getMatrix(e);var f=e.tx,g=e.ty;a._snapToPixelEnabled&&c.snapToPixel&&(f=f+(0>f?-.5:.5)|0,g=g+(0>g?-.5:.5)|0),b.transform(e.a,e.b,e.c,e.d,f,g),b.globalAlpha*=c.alpha,c.compositeOperation&&(b.globalCompositeOperation=c.compositeOperation),c.shadow&&this._applyShadow(b,c.shadow)},b.cache=function(a,b,c,d,e){e=e||1,this.cacheCanvas||(this.cacheCanvas=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas")),this._cacheWidth=c,this._cacheHeight=d,this._cacheOffsetX=a,this._cacheOffsetY=b,this._cacheScale=e,this.updateCache()},b.updateCache=function(b){var c=this.cacheCanvas;if(!c)throw"cache() must be called before updateCache()";var d=this._cacheScale,e=this._cacheOffsetX*d,f=this._cacheOffsetY*d,g=this._cacheWidth,h=this._cacheHeight,i=c.getContext("2d"),j=this._getFilterBounds();e+=this._filterOffsetX=j.x,f+=this._filterOffsetY=j.y,g=Math.ceil(g*d)+j.width,h=Math.ceil(h*d)+j.height,g!=c.width||h!=c.height?(c.width=g,c.height=h):b||i.clearRect(0,0,g+1,h+1),i.save(),i.globalCompositeOperation=b,i.setTransform(d,0,0,d,-e,-f),this.draw(i,!0),this._applyFilters(),i.restore(),this.cacheID=a._nextCacheID++},b.uncache=function(){this._cacheDataURL=this.cacheCanvas=null,this.cacheID=this._cacheOffsetX=this._cacheOffsetY=this._filterOffsetX=this._filterOffsetY=0,this._cacheScale=1},b.getCacheDataURL=function(){return this.cacheCanvas?(this.cacheID!=this._cacheDataURLID&&(this._cacheDataURL=this.cacheCanvas.toDataURL()),this._cacheDataURL):null},b.localToGlobal=function(a,b,c){return this.getConcatenatedMatrix(this._props.matrix).transformPoint(a,b,c||new createjs.Point)},b.globalToLocal=function(a,b,c){return this.getConcatenatedMatrix(this._props.matrix).invert().transformPoint(a,b,c||new createjs.Point)},b.localToLocal=function(a,b,c,d){return d=this.localToGlobal(a,b,d),c.globalToLocal(d.x,d.y,d)},b.setTransform=function(a,b,c,d,e,f,g,h,i){return this.x=a||0,this.y=b||0,this.scaleX=null==c?1:c,this.scaleY=null==d?1:d,this.rotation=e||0,this.skewX=f||0,this.skewY=g||0,this.regX=h||0,this.regY=i||0,this},b.getMatrix=function(a){var b=this,c=a&&a.identity()||new createjs.Matrix2D;return b.transformMatrix?c.copy(b.transformMatrix):c.appendTransform(b.x,b.y,b.scaleX,b.scaleY,b.rotation,b.skewX,b.skewY,b.regX,b.regY)},b.getConcatenatedMatrix=function(a){for(var b=this,c=this.getMatrix(a);b=b.parent;)c.prependMatrix(b.getMatrix(b._props.matrix));return c},b.getConcatenatedDisplayProps=function(a){a=a?a.identity():new createjs.DisplayProps;var b=this,c=b.getMatrix(a.matrix);do a.prepend(b.visible,b.alpha,b.shadow,b.compositeOperation),b!=this&&c.prependMatrix(b.getMatrix(b._props.matrix));while(b=b.parent);return a},b.hitTest=function(b,c){var d=a._hitTestContext;d.setTransform(1,0,0,1,-b,-c),this.draw(d);var e=this._testHit(d);return d.setTransform(1,0,0,1,0,0),d.clearRect(0,0,2,2),e},b.set=function(a){for(var b in a)this[b]=a[b];return this},b.getBounds=function(){if(this._bounds)return this._rectangle.copy(this._bounds);var a=this.cacheCanvas;if(a){var b=this._cacheScale;return this._rectangle.setValues(this._cacheOffsetX,this._cacheOffsetY,a.width/b,a.height/b)}return null},b.getTransformedBounds=function(){return this._getBounds()},b.setBounds=function(a,b,c,d){null==a&&(this._bounds=a),this._bounds=(this._bounds||new createjs.Rectangle).setValues(a,b,c,d)},b.clone=function(){return this._cloneProps(new a)},b.toString=function(){return"[DisplayObject (name="+this.name+")]"},b._cloneProps=function(a){return a.alpha=this.alpha,a.mouseEnabled=this.mouseEnabled,a.tickEnabled=this.tickEnabled,a.name=this.name,a.regX=this.regX,a.regY=this.regY,a.rotation=this.rotation,a.scaleX=this.scaleX,a.scaleY=this.scaleY,a.shadow=this.shadow,a.skewX=this.skewX,a.skewY=this.skewY,a.visible=this.visible,a.x=this.x,a.y=this.y,a.compositeOperation=this.compositeOperation,a.snapToPixel=this.snapToPixel,a.filters=null==this.filters?null:this.filters.slice(0),a.mask=this.mask,a.hitArea=this.hitArea,a.cursor=this.cursor,a._bounds=this._bounds,a},b._applyShadow=function(a,b){b=b||Shadow.identity,a.shadowColor=b.color,a.shadowOffsetX=b.offsetX,a.shadowOffsetY=b.offsetY,a.shadowBlur=b.blur},b._tick=function(a){var b=this._listeners;b&&b.tick&&(a.target=null,a.propagationStopped=a.immediatePropagationStopped=!1,this.dispatchEvent(a))},b._testHit=function(b){try{var c=b.getImageData(0,0,1,1).data[3]>1}catch(d){if(!a.suppressCrossDomainErrors)throw"An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images."}return c},b._applyFilters=function(){if(this.filters&&0!=this.filters.length&&this.cacheCanvas)for(var a=this.filters.length,b=this.cacheCanvas.getContext("2d"),c=this.cacheCanvas.width,d=this.cacheCanvas.height,e=0;a>e;e++)this.filters[e].applyFilter(b,0,0,c,d)},b._getFilterBounds=function(){var a,b=this.filters,c=this._rectangle.setValues(0,0,0,0);if(!b||!(a=b.length))return c;for(var d=0;a>d;d++){var e=this.filters[d];e.getBounds&&e.getBounds(c)}return c},b._getBounds=function(a,b){return this._transformBounds(this.getBounds(),a,b)},b._transformBounds=function(a,b,c){if(!a)return a;var d=a.x,e=a.y,f=a.width,g=a.height,h=this._props.matrix;h=c?h.identity():this.getMatrix(h),(d||e)&&h.appendTransform(0,0,1,1,0,0,0,-d,-e),b&&h.prependMatrix(b);var i=f*h.a,j=f*h.b,k=g*h.c,l=g*h.d,m=h.tx,n=h.ty,o=m,p=m,q=n,r=n;return(d=i+m)p&&(p=d),(d=i+k+m)p&&(p=d),(d=k+m)p&&(p=d),(e=j+n)r&&(r=e),(e=j+l+n)r&&(r=e),(e=l+n)r&&(r=e),a.setValues(o,q,p-o,r-q)},b._hasMouseEventListener=function(){for(var b=a._MOUSE_EVENTS,c=0,d=b.length;d>c;c++)if(this.hasEventListener(b[c]))return!0;return!!this.cursor},createjs.DisplayObject=createjs.promote(a,"EventDispatcher")}(),this.createjs=this.createjs||{},function(){"use strict";function a(){this.DisplayObject_constructor(),this.children=[],this.mouseChildren=!0,this.tickChildren=!0}var b=createjs.extend(a,createjs.DisplayObject);b.getNumChildren=function(){return this.children.length};try{Object.defineProperties(b,{numChildren:{get:b.getNumChildren}})}catch(c){}b.initialize=a,b.isVisible=function(){var a=this.cacheCanvas||this.children.length;return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY&&a)},b.draw=function(a,b){if(this.DisplayObject_draw(a,b))return!0;for(var c=this.children.slice(),d=0,e=c.length;e>d;d++){var f=c[d];f.isVisible()&&(a.save(),f.updateContext(a),f.draw(a),a.restore())}return!0},b.addChild=function(a){if(null==a)return a;var b=arguments.length;if(b>1){for(var c=0;b>c;c++)this.addChild(arguments[c]);return arguments[b-1]}return a.parent&&a.parent.removeChild(a),a.parent=this,this.children.push(a),a.dispatchEvent("added"),a},b.addChildAt=function(a,b){var c=arguments.length,d=arguments[c-1];if(0>d||d>this.children.length)return arguments[c-2];if(c>2){for(var e=0;c-1>e;e++)this.addChildAt(arguments[e],d+e);return arguments[c-2]}return a.parent&&a.parent.removeChild(a),a.parent=this,this.children.splice(b,0,a),a.dispatchEvent("added"),a},b.removeChild=function(a){var b=arguments.length;if(b>1){for(var c=!0,d=0;b>d;d++)c=c&&this.removeChild(arguments[d]);return c}return this.removeChildAt(createjs.indexOf(this.children,a))},b.removeChildAt=function(a){var b=arguments.length;if(b>1){for(var c=[],d=0;b>d;d++)c[d]=arguments[d];c.sort(function(a,b){return b-a});for(var e=!0,d=0;b>d;d++)e=e&&this.removeChildAt(c[d]);return e}if(0>a||a>this.children.length-1)return!1;var f=this.children[a];return f&&(f.parent=null),this.children.splice(a,1),f.dispatchEvent("removed"),!0},b.removeAllChildren=function(){for(var a=this.children;a.length;)this.removeChildAt(0)},b.getChildAt=function(a){return this.children[a]},b.getChildByName=function(a){for(var b=this.children,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},b.sortChildren=function(a){this.children.sort(a)},b.getChildIndex=function(a){return createjs.indexOf(this.children,a)},b.swapChildrenAt=function(a,b){var c=this.children,d=c[a],e=c[b];d&&e&&(c[a]=e,c[b]=d)},b.swapChildren=function(a,b){for(var c,d,e=this.children,f=0,g=e.length;g>f&&(e[f]==a&&(c=f),e[f]==b&&(d=f),null==c||null==d);f++);f!=g&&(e[c]=b,e[d]=a)},b.setChildIndex=function(a,b){var c=this.children,d=c.length;if(!(a.parent!=this||0>b||b>=d)){for(var e=0;d>e&&c[e]!=a;e++);e!=d&&e!=b&&(c.splice(e,1),c.splice(b,0,a))}},b.contains=function(a){for(;a;){if(a==this)return!0;a=a.parent}return!1},b.hitTest=function(a,b){return null!=this.getObjectUnderPoint(a,b)},b.getObjectsUnderPoint=function(a,b,c){var d=[],e=this.localToGlobal(a,b);return this._getObjectsUnderPoint(e.x,e.y,d,c>0,1==c),d},b.getObjectUnderPoint=function(a,b,c){var d=this.localToGlobal(a,b);return this._getObjectsUnderPoint(d.x,d.y,null,c>0,1==c)},b.getBounds=function(){return this._getBounds(null,!0)},b.getTransformedBounds=function(){return this._getBounds()},b.clone=function(b){var c=this._cloneProps(new a);return b&&this._cloneChildren(c),c},b.toString=function(){return"[Container (name="+this.name+")]"},b._tick=function(a){if(this.tickChildren)for(var b=this.children.length-1;b>=0;b--){var c=this.children[b];c.tickEnabled&&c._tick&&c._tick(a)}this.DisplayObject__tick(a)},b._cloneChildren=function(a){a.children.length&&a.removeAllChildren();for(var b=a.children,c=0,d=this.children.length;d>c;c++){var e=this.children[c].clone(!0);e.parent=a,b.push(e)}},b._getObjectsUnderPoint=function(b,c,d,e,f,g){if(g=g||0,!g&&!this._testMask(this,b,c))return null;var h,i=createjs.DisplayObject._hitTestContext;f=f||e&&this._hasMouseEventListener();for(var j=this.children,k=j.length,l=k-1;l>=0;l--){var m=j[l],n=m.hitArea;if(m.visible&&(n||m.isVisible())&&(!e||m.mouseEnabled)&&(n||this._testMask(m,b,c)))if(!n&&m instanceof a){var o=m._getObjectsUnderPoint(b,c,d,e,f,g+1);if(!d&&o)return e&&!this.mouseChildren?this:o}else{if(e&&!f&&!m._hasMouseEventListener())continue;var p=m.getConcatenatedDisplayProps(m._props);if(h=p.matrix,n&&(h.appendMatrix(n.getMatrix(n._props.matrix)),p.alpha=n.alpha),i.globalAlpha=p.alpha,i.setTransform(h.a,h.b,h.c,h.d,h.tx-b,h.ty-c),(n||m).draw(i),!this._testHit(i))continue;if(i.setTransform(1,0,0,1,0,0),i.clearRect(0,0,2,2),!d)return e&&!this.mouseChildren?this:m;d.push(m)}}return null},b._testMask=function(a,b,c){var d=a.mask;if(!d||!d.graphics||d.graphics.isEmpty())return!0;var e=this._props.matrix,f=a.parent;e=f?f.getConcatenatedMatrix(e):e.identity(),e=d.getMatrix(d._props.matrix).prependMatrix(e);var g=createjs.DisplayObject._hitTestContext;return g.setTransform(e.a,e.b,e.c,e.d,e.tx-b,e.ty-c),d.graphics.drawAsPath(g),g.fillStyle="#000",g.fill(),this._testHit(g)?(g.setTransform(1,0,0,1,0,0),g.clearRect(0,0,2,2),!0):!1},b._getBounds=function(a,b){var c=this.DisplayObject_getBounds();if(c)return this._transformBounds(c,a,b);var d=this._props.matrix;d=b?d.identity():this.getMatrix(d),a&&d.prependMatrix(a);for(var e=this.children.length,f=null,g=0;e>g;g++){var h=this.children[g];h.visible&&(c=h._getBounds(d))&&(f?f.extend(c.x,c.y,c.width,c.height):f=c.clone())}return f},createjs.Container=createjs.promote(a,"DisplayObject")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a){this.Container_constructor(),this.autoClear=!0,this.canvas="string"==typeof a?document.getElementById(a):a,this.mouseX=0,this.mouseY=0,this.drawRect=null,this.snapToPixelEnabled=!1,this.mouseInBounds=!1,this.tickOnUpdate=!0,this.mouseMoveOutside=!1,this.preventSelection=!0,this._pointerData={},this._pointerCount=0,this._primaryPointerID=null,this._mouseOverIntervalID=null,this._nextStage=null,this._prevStage=null,this.enableDOMEvents(!0)}var b=createjs.extend(a,createjs.Container);b._get_nextStage=function(){return this._nextStage},b._set_nextStage=function(a){this._nextStage&&(this._nextStage._prevStage=null),a&&(a._prevStage=this),this._nextStage=a};try{Object.defineProperties(b,{nextStage:{get:b._get_nextStage,set:b._set_nextStage}})}catch(c){}b.update=function(a){if(this.canvas&&(this.tickOnUpdate&&this.tick(a),this.dispatchEvent("drawstart",!1,!0)!==!1)){createjs.DisplayObject._snapToPixelEnabled=this.snapToPixelEnabled;var b=this.drawRect,c=this.canvas.getContext("2d");c.setTransform(1,0,0,1,0,0),this.autoClear&&(b?c.clearRect(b.x,b.y,b.width,b.height):c.clearRect(0,0,this.canvas.width+1,this.canvas.height+1)),c.save(),this.drawRect&&(c.beginPath(),c.rect(b.x,b.y,b.width,b.height),c.clip()),this.updateContext(c),this.draw(c,!1),c.restore(),this.dispatchEvent("drawend")}},b.tick=function(a){if(this.tickEnabled&&this.dispatchEvent("tickstart",!1,!0)!==!1){var b=new createjs.Event("tick");if(a)for(var c in a)a.hasOwnProperty(c)&&(b[c]=a[c]);this._tick(b),this.dispatchEvent("tickend")}},b.handleEvent=function(a){"tick"==a.type&&this.update(a)},b.clear=function(){if(this.canvas){var a=this.canvas.getContext("2d");a.setTransform(1,0,0,1,0,0),a.clearRect(0,0,this.canvas.width+1,this.canvas.height+1)}},b.toDataURL=function(a,b){var c,d=this.canvas.getContext("2d"),e=this.canvas.width,f=this.canvas.height;if(a){c=d.getImageData(0,0,e,f);var g=d.globalCompositeOperation;d.globalCompositeOperation="destination-over",d.fillStyle=a,d.fillRect(0,0,e,f)}var h=this.canvas.toDataURL(b||"image/png");return a&&(d.putImageData(c,0,0),d.globalCompositeOperation=g),h},b.enableMouseOver=function(a){if(this._mouseOverIntervalID&&(clearInterval(this._mouseOverIntervalID),this._mouseOverIntervalID=null,0==a&&this._testMouseOver(!0)),null==a)a=20;else if(0>=a)return;var b=this;this._mouseOverIntervalID=setInterval(function(){b._testMouseOver()},1e3/Math.min(50,a))},b.enableDOMEvents=function(a){null==a&&(a=!0);var b,c,d=this._eventListeners;if(!a&&d){for(b in d)c=d[b],c.t.removeEventListener(b,c.f,!1);this._eventListeners=null}else if(a&&!d&&this.canvas){var e=window.addEventListener?window:document,f=this;d=this._eventListeners={},d.mouseup={t:e,f:function(a){f._handleMouseUp(a)}},d.mousemove={t:e,f:function(a){f._handleMouseMove(a)}},d.dblclick={t:this.canvas,f:function(a){f._handleDoubleClick(a)}},d.mousedown={t:this.canvas,f:function(a){f._handleMouseDown(a)}};for(b in d)c=d[b],c.t.addEventListener(b,c.f,!1)}},b.clone=function(){throw"Stage cannot be cloned."},b.toString=function(){return"[Stage (name="+this.name+")]"},b._getElementRect=function(a){var b;try{b=a.getBoundingClientRect()}catch(c){b={top:a.offsetTop,left:a.offsetLeft,width:a.offsetWidth,height:a.offsetHeight}}var d=(window.pageXOffset||document.scrollLeft||0)-(document.clientLeft||document.body.clientLeft||0),e=(window.pageYOffset||document.scrollTop||0)-(document.clientTop||document.body.clientTop||0),f=window.getComputedStyle?getComputedStyle(a,null):a.currentStyle,g=parseInt(f.paddingLeft)+parseInt(f.borderLeftWidth),h=parseInt(f.paddingTop)+parseInt(f.borderTopWidth),i=parseInt(f.paddingRight)+parseInt(f.borderRightWidth),j=parseInt(f.paddingBottom)+parseInt(f.borderBottomWidth);return{left:b.left+d+g,right:b.right+d-i,top:b.top+e+h,bottom:b.bottom+e-j}},b._getPointerData=function(a){var b=this._pointerData[a];return b||(b=this._pointerData[a]={x:0,y:0}),b},b._handleMouseMove=function(a){a||(a=window.event),this._handlePointerMove(-1,a,a.pageX,a.pageY)},b._handlePointerMove=function(a,b,c,d,e){if((!this._prevStage||void 0!==e)&&this.canvas){var f=this._nextStage,g=this._getPointerData(a),h=g.inBounds;this._updatePointerPosition(a,b,c,d),(h||g.inBounds||this.mouseMoveOutside)&&(-1===a&&g.inBounds==!h&&this._dispatchMouseEvent(this,h?"mouseleave":"mouseenter",!1,a,g,b),this._dispatchMouseEvent(this,"stagemousemove",!1,a,g,b),this._dispatchMouseEvent(g.target,"pressmove",!0,a,g,b)),f&&f._handlePointerMove(a,b,c,d,null)}},b._updatePointerPosition=function(a,b,c,d){var e=this._getElementRect(this.canvas);c-=e.left,d-=e.top;var f=this.canvas.width,g=this.canvas.height;c/=(e.right-e.left)/f,d/=(e.bottom-e.top)/g;var h=this._getPointerData(a);(h.inBounds=c>=0&&d>=0&&f-1>=c&&g-1>=d)?(h.x=c,h.y=d):this.mouseMoveOutside&&(h.x=0>c?0:c>f-1?f-1:c,h.y=0>d?0:d>g-1?g-1:d),h.posEvtObj=b,h.rawX=c,h.rawY=d,(a===this._primaryPointerID||-1===a)&&(this.mouseX=h.x,this.mouseY=h.y,this.mouseInBounds=h.inBounds)},b._handleMouseUp=function(a){this._handlePointerUp(-1,a,!1)},b._handlePointerUp=function(a,b,c,d){var e=this._nextStage,f=this._getPointerData(a);if(!this._prevStage||void 0!==d){var g=null,h=f.target;d||!h&&!e||(g=this._getObjectsUnderPoint(f.x,f.y,null,!0)),f.down&&(this._dispatchMouseEvent(this,"stagemouseup",!1,a,f,b,g),f.down=!1),g==h&&this._dispatchMouseEvent(h,"click",!0,a,f,b),this._dispatchMouseEvent(h,"pressup",!0,a,f,b),c?(a==this._primaryPointerID&&(this._primaryPointerID=null),delete this._pointerData[a]):f.target=null,e&&e._handlePointerUp(a,b,c,d||g&&this)}},b._handleMouseDown=function(a){this._handlePointerDown(-1,a,a.pageX,a.pageY)},b._handlePointerDown=function(a,b,c,d,e){this.preventSelection&&b.preventDefault(),(null==this._primaryPointerID||-1===a)&&(this._primaryPointerID=a),null!=d&&this._updatePointerPosition(a,b,c,d);var f=null,g=this._nextStage,h=this._getPointerData(a);e||(f=h.target=this._getObjectsUnderPoint(h.x,h.y,null,!0)),h.inBounds&&(this._dispatchMouseEvent(this,"stagemousedown",!1,a,h,b,f),h.down=!0),this._dispatchMouseEvent(f,"mousedown",!0,a,h,b),g&&g._handlePointerDown(a,b,c,d,e||f&&this)},b._testMouseOver=function(a,b,c){if(!this._prevStage||void 0!==b){var d=this._nextStage;if(!this._mouseOverIntervalID)return void(d&&d._testMouseOver(a,b,c));var e=this._getPointerData(-1);if(e&&(a||this.mouseX!=this._mouseOverX||this.mouseY!=this._mouseOverY||!this.mouseInBounds)){var f,g,h,i=e.posEvtObj,j=c||i&&i.target==this.canvas,k=null,l=-1,m="";!b&&(a||this.mouseInBounds&&j)&&(k=this._getObjectsUnderPoint(this.mouseX,this.mouseY,null,!0),this._mouseOverX=this.mouseX,this._mouseOverY=this.mouseY);var n=this._mouseOverTarget||[],o=n[n.length-1],p=this._mouseOverTarget=[];for(f=k;f;)p.unshift(f),m||(m=f.cursor),f=f.parent;for(this.canvas.style.cursor=m,!b&&c&&(c.canvas.style.cursor=m),g=0,h=p.length;h>g&&p[g]==n[g];g++)l=g;for(o!=k&&this._dispatchMouseEvent(o,"mouseout",!0,-1,e,i,k),g=n.length-1;g>l;g--)this._dispatchMouseEvent(n[g],"rollout",!1,-1,e,i,k);for(g=p.length-1;g>l;g--)this._dispatchMouseEvent(p[g],"rollover",!1,-1,e,i,o);o!=k&&this._dispatchMouseEvent(k,"mouseover",!0,-1,e,i,o),d&&d._testMouseOver(a,b||k&&this,c||j&&this)}}},b._handleDoubleClick=function(a,b){var c=null,d=this._nextStage,e=this._getPointerData(-1);b||(c=this._getObjectsUnderPoint(e.x,e.y,null,!0),this._dispatchMouseEvent(c,"dblclick",!0,-1,e,a)),d&&d._handleDoubleClick(a,b||c&&this)},b._dispatchMouseEvent=function(a,b,c,d,e,f,g){if(a&&(c||a.hasEventListener(b))){var h=new createjs.MouseEvent(b,c,!1,e.x,e.y,f,d,d===this._primaryPointerID||-1===d,e.rawX,e.rawY,g);a.dispatchEvent(h)}},createjs.Stage=createjs.promote(a,"Container")}(),this.createjs=this.createjs||{},function(){function a(a){this.DisplayObject_constructor(),"string"==typeof a?(this.image=document.createElement("img"),this.image.src=a):this.image=a,this.sourceRect=null}var b=createjs.extend(a,createjs.DisplayObject);b.initialize=a,b.isVisible=function(){var a=this.image,b=this.cacheCanvas||a&&(a.naturalWidth||a.getContext||a.readyState>=2);return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY&&b)},b.draw=function(a,b){if(this.DisplayObject_draw(a,b)||!this.image)return!0;var c=this.image,d=this.sourceRect;if(d){var e=d.x,f=d.y,g=e+d.width,h=f+d.height,i=0,j=0,k=c.width,l=c.height;0>e&&(i-=e,e=0),g>k&&(g=k),0>f&&(j-=f,f=0),h>l&&(h=l),a.drawImage(c,e,f,g-e,h-f,i,j,g-e,h-f)}else a.drawImage(c,0,0);return!0},b.getBounds=function(){var a=this.DisplayObject_getBounds();if(a)return a;var b=this.image,c=this.sourceRect||b,d=b&&(b.naturalWidth||b.getContext||b.readyState>=2);return d?this._rectangle.setValues(0,0,c.width,c.height):null},b.clone=function(){var b=new a(this.image);return this.sourceRect&&(b.sourceRect=this.sourceRect.clone()),this._cloneProps(b),b},b.toString=function(){return"[Bitmap (name="+this.name+")]"},createjs.Bitmap=createjs.promote(a,"DisplayObject")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b){this.DisplayObject_constructor(),this.currentFrame=0,this.currentAnimation=null,this.paused=!0,this.spriteSheet=a,this.currentAnimationFrame=0,this.framerate=0,this._animation=null,this._currentFrame=null,this._skipAdvance=!1,null!=b&&this.gotoAndPlay(b)}var b=createjs.extend(a,createjs.DisplayObject);b.initialize=a,b.isVisible=function(){var a=this.cacheCanvas||this.spriteSheet.complete;return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY&&a)},b.draw=function(a,b){if(this.DisplayObject_draw(a,b))return!0;this._normalizeFrame();var c=this.spriteSheet.getFrame(0|this._currentFrame);if(!c)return!1;var d=c.rect;return d.width&&d.height&&a.drawImage(c.image,d.x,d.y,d.width,d.height,-c.regX,-c.regY,d.width,d.height),!0},b.play=function(){this.paused=!1},b.stop=function(){this.paused=!0},b.gotoAndPlay=function(a){this.paused=!1,this._skipAdvance=!0,this._goto(a)},b.gotoAndStop=function(a){this.paused=!0,this._goto(a)},b.advance=function(a){var b=this.framerate||this.spriteSheet.framerate,c=b&&null!=a?a/(1e3/b):1;this._normalizeFrame(c)},b.getBounds=function(){return this.DisplayObject_getBounds()||this.spriteSheet.getFrameBounds(this.currentFrame,this._rectangle)},b.clone=function(){return this._cloneProps(new a(this.spriteSheet))},b.toString=function(){return"[Sprite (name="+this.name+")]"},b._cloneProps=function(a){return this.DisplayObject__cloneProps(a),a.currentFrame=this.currentFrame,a.currentAnimation=this.currentAnimation,a.paused=this.paused,a.currentAnimationFrame=this.currentAnimationFrame,a.framerate=this.framerate,a._animation=this._animation,a._currentFrame=this._currentFrame,a._skipAdvance=this._skipAdvance,a},b._tick=function(a){this.paused||(this._skipAdvance||this.advance(a&&a.delta),this._skipAdvance=!1),this.DisplayObject__tick(a)},b._normalizeFrame=function(a){a=a||0;var b,c=this._animation,d=this.paused,e=this._currentFrame;if(c){var f=c.speed||1,g=this.currentAnimationFrame;if(b=c.frames.length,g+a*f>=b){var h=c.next;if(this._dispatchAnimationEnd(c,e,d,h,b-1))return;if(h)return this._goto(h,a-(b-g)/f);this.paused=!0,g=c.frames.length-1}else g+=a*f;this.currentAnimationFrame=g,this._currentFrame=c.frames[0|g]}else if(e=this._currentFrame+=a,b=this.spriteSheet.getNumFrames(),e>=b&&b>0&&!this._dispatchAnimationEnd(c,e,d,b-1)&&(this._currentFrame-=b)>=b)return this._normalizeFrame();e=0|this._currentFrame,this.currentFrame!=e&&(this.currentFrame=e,this.dispatchEvent("change"))},b._dispatchAnimationEnd=function(a,b,c,d,e){var f=a?a.name:null;if(this.hasEventListener("animationend")){var g=new createjs.Event("animationend");g.name=f,g.next=d,this.dispatchEvent(g)}var h=this._animation!=a||this._currentFrame!=b;return h||c||!this.paused||(this.currentAnimationFrame=e,h=!0),h},b._goto=function(a,b){if(this.currentAnimationFrame=0,isNaN(a)){var c=this.spriteSheet.getAnimation(a);c&&(this._animation=c,this.currentAnimation=a,this._normalizeFrame(b))}else this.currentAnimation=this._animation=null,this._currentFrame=a,this._normalizeFrame()},createjs.Sprite=createjs.promote(a,"DisplayObject")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a){this.DisplayObject_constructor(),this.graphics=a?a:new createjs.Graphics}var b=createjs.extend(a,createjs.DisplayObject);b.isVisible=function(){var a=this.cacheCanvas||this.graphics&&!this.graphics.isEmpty();return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY&&a)},b.draw=function(a,b){return this.DisplayObject_draw(a,b)?!0:(this.graphics.draw(a,this),!0)},b.clone=function(b){var c=b&&this.graphics?this.graphics.clone():this.graphics;return this._cloneProps(new a(c))},b.toString=function(){return"[Shape (name="+this.name+")]"},createjs.Shape=createjs.promote(a,"DisplayObject")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c){this.DisplayObject_constructor(),this.text=a,this.font=b,this.color=c,this.textAlign="left",this.textBaseline="top",this.maxWidth=null,this.outline=0,this.lineHeight=0,this.lineWidth=null}var b=createjs.extend(a,createjs.DisplayObject),c=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");c.getContext&&(a._workingContext=c.getContext("2d"),c.width=c.height=1),a.H_OFFSETS={start:0,left:0,center:-.5,end:-1,right:-1},a.V_OFFSETS={top:0,hanging:-.01,middle:-.4,alphabetic:-.8,ideographic:-.85,bottom:-1},b.isVisible=function(){var a=this.cacheCanvas||null!=this.text&&""!==this.text;return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY&&a)},b.draw=function(a,b){if(this.DisplayObject_draw(a,b))return!0;var c=this.color||"#000";return this.outline?(a.strokeStyle=c,a.lineWidth=1*this.outline):a.fillStyle=c,this._drawText(this._prepContext(a)),!0},b.getMeasuredWidth=function(){return this._getMeasuredWidth(this.text)},b.getMeasuredLineHeight=function(){return 1.2*this._getMeasuredWidth("M")},b.getMeasuredHeight=function(){return this._drawText(null,{}).height},b.getBounds=function(){var b=this.DisplayObject_getBounds();if(b)return b;if(null==this.text||""===this.text)return null;var c=this._drawText(null,{}),d=this.maxWidth&&this.maxWidthj;j++){var l=i[j],m=null;if(null!=this.lineWidth&&(m=b.measureText(l).width)>this.lineWidth){var n=l.split(/(\s)/);l=n[0],m=b.measureText(l).width;for(var o=1,p=n.length;p>o;o+=2){var q=b.measureText(n[o]+n[o+1]).width;m+q>this.lineWidth?(e&&this._drawTextLine(b,l,h*f),d&&d.push(l),m>g&&(g=m),l=n[o+1],m=b.measureText(l).width,h++):(l+=n[o]+n[o+1],m+=q)}}e&&this._drawTextLine(b,l,h*f),d&&d.push(l),c&&null==m&&(m=b.measureText(l).width),m>g&&(g=m),h++}return c&&(c.width=g,c.height=h*f),e||b.restore(),c},b._drawTextLine=function(a,b,c){this.outline?a.strokeText(b,0,c,this.maxWidth||65535):a.fillText(b,0,c,this.maxWidth||65535)},b._getMeasuredWidth=function(b){var c=a._workingContext;c.save();var d=this._prepContext(c).measureText(b).width;return c.restore(),d},createjs.Text=createjs.promote(a,"DisplayObject")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b){this.Container_constructor(),this.text=a||"",this.spriteSheet=b,this.lineHeight=0,this.letterSpacing=0,this.spaceWidth=0,this._oldProps={text:0,spriteSheet:0,lineHeight:0,letterSpacing:0,spaceWidth:0}}var b=createjs.extend(a,createjs.Container);a.maxPoolSize=100,a._spritePool=[],b.draw=function(a,b){this.DisplayObject_draw(a,b)||(this._updateText(),this.Container_draw(a,b))},b.getBounds=function(){return this._updateText(),this.Container_getBounds()},b.isVisible=function(){var a=this.cacheCanvas||this.spriteSheet&&this.spriteSheet.complete&&this.text;return!!(this.visible&&this.alpha>0&&0!==this.scaleX&&0!==this.scaleY&&a)},b.clone=function(){return this._cloneProps(new a(this.text,this.spriteSheet))},b.addChild=b.addChildAt=b.removeChild=b.removeChildAt=b.removeAllChildren=function(){},b._cloneProps=function(a){return this.Container__cloneProps(a),a.lineHeight=this.lineHeight,a.letterSpacing=this.letterSpacing,a.spaceWidth=this.spaceWidth,a},b._getFrameIndex=function(a,b){var c,d=b.getAnimation(a);return d||(a!=(c=a.toUpperCase())||a!=(c=a.toLowerCase())||(c=null),c&&(d=b.getAnimation(c))),d&&d.frames[0]},b._getFrame=function(a,b){var c=this._getFrameIndex(a,b);return null==c?c:b.getFrame(c)},b._getLineHeight=function(a){var b=this._getFrame("1",a)||this._getFrame("T",a)||this._getFrame("L",a)||a.getFrame(0);return b?b.rect.height:1},b._getSpaceWidth=function(a){var b=this._getFrame("1",a)||this._getFrame("l",a)||this._getFrame("e",a)||this._getFrame("a",a)||a.getFrame(0);return b?b.rect.width:1},b._updateText=function(){var b,c=0,d=0,e=this._oldProps,f=!1,g=this.spaceWidth,h=this.lineHeight,i=this.spriteSheet,j=a._spritePool,k=this.children,l=0,m=k.length;for(var n in e)e[n]!=this[n]&&(e[n]=this[n],f=!0);if(f){var o=!!this._getFrame(" ",i);o||g||(g=this._getSpaceWidth(i)),h||(h=this._getLineHeight(i));for(var p=0,q=this.text.length;q>p;p++){var r=this.text.charAt(p);if(" "!=r||o)if("\n"!=r&&"\r"!=r){var s=this._getFrameIndex(r,i);null!=s&&(m>l?b=k[l]:(k.push(b=j.length?j.pop():new createjs.Sprite),b.parent=this,m++),b.spriteSheet=i,b.gotoAndStop(s),b.x=c,b.y=d,l++,c+=b.getBounds().width+this.letterSpacing)}else"\r"==r&&"\n"==this.text.charAt(p+1)&&p++,c=0,d+=h;else c+=g}for(;m>l;)j.push(b=k.pop()),b.parent=null,m--;j.length>a.maxPoolSize&&(j.length=a.maxPoolSize)}},createjs.BitmapText=createjs.promote(a,"Container")}(),this.createjs=this.createjs||{},function(){"use strict";function a(b,c,d,e){this.Container_constructor(),!a.inited&&a.init(),this.mode=b||a.INDEPENDENT,this.startPosition=c||0,this.loop=d,this.currentFrame=0,this.timeline=new createjs.Timeline(null,e,{paused:!0,position:c,useTicks:!0}),this.paused=!1,this.actionsEnabled=!0,this.autoReset=!0,this.frameBounds=this.frameBounds||null,this.framerate=null,this._synchOffset=0,this._prevPos=-1,this._prevPosition=0,this._t=0,this._managed={}}function b(){throw"MovieClipPlugin cannot be instantiated."}var c=createjs.extend(a,createjs.Container);a.INDEPENDENT="independent",a.SINGLE_FRAME="single",a.SYNCHED="synched",a.inited=!1,a.init=function(){a.inited||(b.install(),a.inited=!0)},c.getLabels=function(){return this.timeline.getLabels()},c.getCurrentLabel=function(){return this._updateTimeline(),this.timeline.getCurrentLabel()},c.getDuration=function(){return this.timeline.duration};try{Object.defineProperties(c,{labels:{get:c.getLabels},currentLabel:{get:c.getCurrentLabel},totalFrames:{get:c.getDuration},duration:{get:c.getDuration}})}catch(d){}c.initialize=a,c.isVisible=function(){return!!(this.visible&&this.alpha>0&&0!=this.scaleX&&0!=this.scaleY)},c.draw=function(a,b){return this.DisplayObject_draw(a,b)?!0:(this._updateTimeline(),this.Container_draw(a,b),!0) 14 | },c.play=function(){this.paused=!1},c.stop=function(){this.paused=!0},c.gotoAndPlay=function(a){this.paused=!1,this._goto(a)},c.gotoAndStop=function(a){this.paused=!0,this._goto(a)},c.advance=function(b){var c=a.INDEPENDENT;if(this.mode==c){for(var d=this,e=d.framerate;(d=d.parent)&&null==e;)d.mode==c&&(e=d._framerate);this._framerate=e;var f=null!=e&&-1!=e&&null!=b?b/(1e3/e)+this._t:1,g=0|f;for(this._t=f-g;!this.paused&&g--;)this._prevPosition=this._prevPos<0?0:this._prevPosition+1,this._updateTimeline()}},c.clone=function(){throw"MovieClip cannot be cloned."},c.toString=function(){return"[MovieClip (name="+this.name+")]"},c._tick=function(a){this.advance(a&&a.delta),this.Container__tick(a)},c._goto=function(a){var b=this.timeline.resolve(a);null!=b&&(-1==this._prevPos&&(this._prevPos=0/0),this._prevPosition=b,this._t=0,this._updateTimeline())},c._reset=function(){this._prevPos=-1,this._t=this.currentFrame=0,this.paused=!1},c._updateTimeline=function(){var b=this.timeline,c=this.mode!=a.INDEPENDENT;b.loop=null==this.loop?!0:this.loop;var d=c?this.startPosition+(this.mode==a.SINGLE_FRAME?0:this._synchOffset):this._prevPos<0?0:this._prevPosition,e=c||!this.actionsEnabled?createjs.Tween.NONE:null;if(this.currentFrame=b._calcPosition(d),b.setPosition(d,e),this._prevPosition=b._prevPosition,this._prevPos!=b._prevPos){this.currentFrame=this._prevPos=b._prevPos;for(var f in this._managed)this._managed[f]=1;for(var g=b._tweens,h=0,i=g.length;i>h;h++){var j=g[h],k=j._target;if(k!=this&&!j.passive){var l=j._stepPosition;k instanceof createjs.DisplayObject?this._addManagedChild(k,l):this._setState(k.state,l)}}var m=this.children;for(h=m.length-1;h>=0;h--){var n=m[h].id;1==this._managed[n]&&(this.removeChildAt(h),delete this._managed[n])}}},c._setState=function(a,b){if(a)for(var c=a.length-1;c>=0;c--){var d=a[c],e=d.t,f=d.p;for(var g in f)e[g]=f[g];this._addManagedChild(e,b)}},c._addManagedChild=function(b,c){b._off||(this.addChildAt(b,0),b instanceof a&&(b._synchOffset=c,b.mode==a.INDEPENDENT&&b.autoReset&&!this._managed[b.id]&&b._reset()),this._managed[b.id]=2)},c._getBounds=function(a,b){var c=this.DisplayObject_getBounds();return c||(this._updateTimeline(),this.frameBounds&&(c=this._rectangle.copy(this.frameBounds[this.currentFrame]))),c?this._transformBounds(c,a,b):this.Container__getBounds(a,b)},createjs.MovieClip=createjs.promote(a,"Container"),b.priority=100,b.install=function(){createjs.Tween.installPlugin(b,["startPosition"])},b.init=function(a,b,c){return c},b.step=function(){},b.tween=function(b,c,d,e,f,g){return b.target instanceof a?1==g?f[c]:e[c]:d}}(),this.createjs=this.createjs||{},function(){"use strict";function a(){throw"SpriteSheetUtils cannot be instantiated"}var b=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");b.getContext&&(a._workingCanvas=b,a._workingContext=b.getContext("2d"),b.width=b.height=1),a.addFlippedFrames=function(b,c,d,e){if(c||d||e){var f=0;c&&a._flip(b,++f,!0,!1),d&&a._flip(b,++f,!1,!0),e&&a._flip(b,++f,!0,!0)}},a.extractFrame=function(b,c){isNaN(c)&&(c=b.getAnimation(c).frames[0]);var d=b.getFrame(c);if(!d)return null;var e=d.rect,f=a._workingCanvas;f.width=e.width,f.height=e.height,a._workingContext.drawImage(d.image,e.x,e.y,e.width,e.height,0,0,e.width,e.height);var g=document.createElement("img");return g.src=f.toDataURL("image/png"),g},a.mergeAlpha=function(a,b,c){c||(c=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas")),c.width=Math.max(b.width,a.width),c.height=Math.max(b.height,a.height);var d=c.getContext("2d");return d.save(),d.drawImage(a,0,0),d.globalCompositeOperation="destination-in",d.drawImage(b,0,0),d.restore(),c},a._flip=function(b,c,d,e){for(var f=b._images,g=a._workingCanvas,h=a._workingContext,i=f.length/c,j=0;i>j;j++){var k=f[j];k.__tmp=j,h.setTransform(1,0,0,1,0,0),h.clearRect(0,0,g.width+1,g.height+1),g.width=k.width,g.height=k.height,h.setTransform(d?-1:1,0,0,e?-1:1,d?k.width:0,e?k.height:0),h.drawImage(k,0,0);var l=document.createElement("img");l.src=g.toDataURL("image/png"),l.width=k.width,l.height=k.height,f.push(l)}var m=b._frames,n=m.length/c;for(j=0;n>j;j++){k=m[j];var o=k.rect.clone();l=f[k.image.__tmp+i*c];var p={image:l,rect:o,regX:k.regX,regY:k.regY};d&&(o.x=l.width-o.x-o.width,p.regX=o.width-k.regX),e&&(o.y=l.height-o.y-o.height,p.regY=o.height-k.regY),m.push(p)}var q="_"+(d?"h":"")+(e?"v":""),r=b._animations,s=b._data,t=r.length/c;for(j=0;t>j;j++){var u=r[j];k=s[u];var v={name:u+q,speed:k.speed,next:k.next,frames:[]};k.next&&(v.next+=q),m=k.frames;for(var w=0,x=m.length;x>w;w++)v.frames.push(m[w]+n*c);s[v.name]=v,r.push(v.name)}},createjs.SpriteSheetUtils=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a){this.EventDispatcher_constructor(),this.maxWidth=2048,this.maxHeight=2048,this.spriteSheet=null,this.scale=1,this.padding=1,this.timeSlice=.3,this.progress=-1,this.framerate=a||0,this._frames=[],this._animations={},this._data=null,this._nextFrameIndex=0,this._index=0,this._timerID=null,this._scale=1}var b=createjs.extend(a,createjs.EventDispatcher);a.ERR_DIMENSIONS="frame dimensions exceed max spritesheet dimensions",a.ERR_RUNNING="a build is already running",b.addFrame=function(b,c,d,e,f){if(this._data)throw a.ERR_RUNNING;var g=c||b.bounds||b.nominalBounds;return!g&&b.getBounds&&(g=b.getBounds()),g?(d=d||1,this._frames.push({source:b,sourceRect:g,scale:d,funct:e,data:f,index:this._frames.length,height:g.height*d})-1):null},b.addAnimation=function(b,c,d,e){if(this._data)throw a.ERR_RUNNING;this._animations[b]={frames:c,next:d,speed:e}},b.addMovieClip=function(b,c,d,e,f,g){if(this._data)throw a.ERR_RUNNING;var h=b.frameBounds,i=c||b.bounds||b.nominalBounds;if(!i&&b.getBounds&&(i=b.getBounds()),i||h){var j,k,l=this._frames.length,m=b.timeline.duration;for(j=0;m>j;j++){var n=h&&h[j]?h[j]:i;this.addFrame(b,n,d,this._setupMovieClipFrame,{i:j,f:e,d:f})}var o=b.timeline._labels,p=[];for(var q in o)p.push({index:o[q],label:q});if(p.length)for(p.sort(function(a,b){return a.index-b.index}),j=0,k=p.length;k>j;j++){for(var r=p[j].label,s=l+p[j].index,t=l+(j==k-1?m:p[j+1].index),u=[],v=s;t>v;v++)u.push(v);(!g||(r=g(r,b,s,t)))&&this.addAnimation(r,u,!0)}}},b.build=function(){if(this._data)throw a.ERR_RUNNING;for(this._startBuild();this._drawNext(););return this._endBuild(),this.spriteSheet},b.buildAsync=function(b){if(this._data)throw a.ERR_RUNNING;this.timeSlice=b,this._startBuild();var c=this;this._timerID=setTimeout(function(){c._run()},50-50*Math.max(.01,Math.min(.99,this.timeSlice||.3)))},b.stopAsync=function(){clearTimeout(this._timerID),this._data=null},b.clone=function(){throw"SpriteSheetBuilder cannot be cloned."},b.toString=function(){return"[SpriteSheetBuilder]"},b._startBuild=function(){var b=this.padding||0;this.progress=0,this.spriteSheet=null,this._index=0,this._scale=this.scale;var c=[];this._data={images:[],frames:c,framerate:this.framerate,animations:this._animations};var d=this._frames.slice();if(d.sort(function(a,b){return a.height<=b.height?-1:1}),d[d.length-1].height+2*b>this.maxHeight)throw a.ERR_DIMENSIONS;for(var e=0,f=0,g=0;d.length;){var h=this._fillRow(d,e,g,c,b);if(h.w>f&&(f=h.w),e+=h.h,!h.h||!d.length){var i=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");i.width=this._getSize(f,this.maxWidth),i.height=this._getSize(e,this.maxHeight),this._data.images[g]=i,h.h||(f=e=0,g++)}}},b._setupMovieClipFrame=function(a,b){var c=a.actionsEnabled;a.actionsEnabled=!1,a.gotoAndStop(b.i),a.actionsEnabled=c,b.f&&b.f(a,b.d,b.i)},b._getSize=function(a,b){for(var c=4;Math.pow(2,++c)=0;l--){var m=b[l],n=this._scale*m.scale,o=m.sourceRect,p=m.source,q=Math.floor(n*o.x-f),r=Math.floor(n*o.y-f),s=Math.ceil(n*o.height+2*f),t=Math.ceil(n*o.width+2*f);if(t>g)throw a.ERR_DIMENSIONS;s>i||j+t>g||(m.img=d,m.rect=new createjs.Rectangle(j,c,t,s),k=k||s,b.splice(l,1),e[m.index]=[j,c,t,s,d,Math.round(-q+n*p.regX-f),Math.round(-r+n*p.regY-f)],j+=t)}return{w:j,h:k}},b._endBuild=function(){this.spriteSheet=new createjs.SpriteSheet(this._data),this._data=null,this.progress=1,this.dispatchEvent("complete")},b._run=function(){for(var a=50*Math.max(.01,Math.min(.99,this.timeSlice||.3)),b=(new Date).getTime()+a,c=!1;b>(new Date).getTime();)if(!this._drawNext()){c=!0;break}if(c)this._endBuild();else{var d=this;this._timerID=setTimeout(function(){d._run()},50-a)}var e=this.progress=this._index/this._frames.length;if(this.hasEventListener("progress")){var f=new createjs.Event("progress");f.progress=e,this.dispatchEvent(f)}},b._drawNext=function(){var a=this._frames[this._index],b=a.scale*this._scale,c=a.rect,d=a.sourceRect,e=this._data.images[a.img],f=e.getContext("2d");return a.funct&&a.funct(a.source,a.data),f.save(),f.beginPath(),f.rect(c.x,c.y,c.width,c.height),f.clip(),f.translate(Math.ceil(c.x-d.x*b),Math.ceil(c.y-d.y*b)),f.scale(b,b),a.source.draw(f),f.restore(),++this._indexa)&&(a=0),(isNaN(b)||0>b)&&(b=0),(isNaN(c)||1>c)&&(c=1),this.blurX=0|a,this.blurY=0|b,this.quality=0|c}var b=createjs.extend(a,createjs.Filter);a.MUL_TABLE=[1,171,205,293,57,373,79,137,241,27,391,357,41,19,283,265,497,469,443,421,25,191,365,349,335,161,155,149,9,278,269,261,505,245,475,231,449,437,213,415,405,395,193,377,369,361,353,345,169,331,325,319,313,307,301,37,145,285,281,69,271,267,263,259,509,501,493,243,479,118,465,459,113,446,55,435,429,423,209,413,51,403,199,393,97,3,379,375,371,367,363,359,355,351,347,43,85,337,333,165,327,323,5,317,157,311,77,305,303,75,297,294,73,289,287,71,141,279,277,275,68,135,67,133,33,262,260,129,511,507,503,499,495,491,61,121,481,477,237,235,467,232,115,457,227,451,7,445,221,439,218,433,215,427,425,211,419,417,207,411,409,203,202,401,399,396,197,49,389,387,385,383,95,189,47,187,93,185,23,183,91,181,45,179,89,177,11,175,87,173,345,343,341,339,337,21,167,83,331,329,327,163,81,323,321,319,159,79,315,313,39,155,309,307,153,305,303,151,75,299,149,37,295,147,73,291,145,289,287,143,285,71,141,281,35,279,139,69,275,137,273,17,271,135,269,267,133,265,33,263,131,261,130,259,129,257,1],a.SHG_TABLE=[0,9,10,11,9,12,10,11,12,9,13,13,10,9,13,13,14,14,14,14,10,13,14,14,14,13,13,13,9,14,14,14,15,14,15,14,15,15,14,15,15,15,14,15,15,15,15,15,14,15,15,15,15,15,15,12,14,15,15,13,15,15,15,15,16,16,16,15,16,14,16,16,14,16,13,16,16,16,15,16,13,16,15,16,14,9,16,16,16,16,16,16,16,16,16,13,14,16,16,15,16,16,10,16,15,16,14,16,16,14,16,16,14,16,16,14,15,16,16,16,14,15,14,15,13,16,16,15,17,17,17,17,17,17,14,15,17,17,16,16,17,16,15,17,16,17,11,17,16,17,16,17,16,17,17,16,17,17,16,17,17,16,16,17,17,17,16,14,17,17,17,17,15,16,14,16,15,16,13,16,15,16,14,16,15,16,12,16,15,16,17,17,17,17,17,13,16,15,17,17,17,16,15,17,17,17,16,15,17,17,14,16,17,17,16,17,17,16,15,17,16,14,17,16,15,17,16,17,17,16,17,15,16,17,14,17,16,15,17,16,17,13,17,16,17,17,16,17,14,17,16,17,16,17,16,17,9],b.getBounds=function(a){var b=0|this.blurX,c=0|this.blurY;if(0>=b&&0>=c)return a;var d=Math.pow(this.quality,.2);return(a||new createjs.Rectangle).pad(b*d+1,c*d+1,b*d+1,c*d+1)},b.clone=function(){return new a(this.blurX,this.blurY,this.quality)},b.toString=function(){return"[BlurFilter]"},b._applyFilter=function(b){var c=this.blurX>>1;if(isNaN(c)||0>c)return!1;var d=this.blurY>>1;if(isNaN(d)||0>d)return!1;if(0==c&&0==d)return!1;var e=this.quality;(isNaN(e)||1>e)&&(e=1),e|=0,e>3&&(e=3),1>e&&(e=1);var f=b.data,g=0,h=0,i=0,j=0,k=0,l=0,m=0,n=0,o=0,p=0,q=0,r=0,s=0,t=0,u=0,v=c+c+1|0,w=d+d+1|0,x=0|b.width,y=0|b.height,z=x-1|0,A=y-1|0,B=c+1|0,C=d+1|0,D={r:0,b:0,g:0,a:0},E=D;for(i=1;v>i;i++)E=E.n={r:0,b:0,g:0,a:0};E.n=D;var F={r:0,b:0,g:0,a:0},G=F;for(i=1;w>i;i++)G=G.n={r:0,b:0,g:0,a:0};G.n=F;for(var H=null,I=0|a.MUL_TABLE[c],J=0|a.SHG_TABLE[c],K=0|a.MUL_TABLE[d],L=0|a.SHG_TABLE[d];e-->0;){m=l=0;var M=I,N=J;for(h=y;--h>-1;){for(n=B*(r=f[0|l]),o=B*(s=f[l+1|0]),p=B*(t=f[l+2|0]),q=B*(u=f[l+3|0]),E=D,i=B;--i>-1;)E.r=r,E.g=s,E.b=t,E.a=u,E=E.n;for(i=1;B>i;i++)j=l+((i>z?z:i)<<2)|0,n+=E.r=f[j],o+=E.g=f[j+1],p+=E.b=f[j+2],q+=E.a=f[j+3],E=E.n;for(H=D,g=0;x>g;g++)f[l++]=n*M>>>N,f[l++]=o*M>>>N,f[l++]=p*M>>>N,f[l++]=q*M>>>N,j=m+((j=g+c+1)g;g++){for(l=g<<2|0,n=C*(r=f[l])|0,o=C*(s=f[l+1|0])|0,p=C*(t=f[l+2|0])|0,q=C*(u=f[l+3|0])|0,G=F,i=0;C>i;i++)G.r=r,G.g=s,G.b=t,G.a=u,G=G.n;for(k=x,i=1;d>=i;i++)l=k+g<<2,n+=G.r=f[l],o+=G.g=f[l+1],p+=G.b=f[l+2],q+=G.a=f[l+3],G=G.n,A>i&&(k+=x);if(l=g,H=F,e>0)for(h=0;y>h;h++)j=l<<2,f[j+3]=u=q*M>>>N,u>0?(f[j]=n*M>>>N,f[j+1]=o*M>>>N,f[j+2]=p*M>>>N):f[j]=f[j+1]=f[j+2]=0,j=g+((j=h+C)h;h++)j=l<<2,f[j+3]=u=q*M>>>N,u>0?(u=255/u,f[j]=(n*M>>>N)*u,f[j+1]=(o*M>>>N)*u,f[j+2]=(p*M>>>N)*u):f[j]=f[j+1]=f[j+2]=0,j=g+((j=h+C)d;d+=4)b[d+3]=c[d]||0;return!0},b._prepAlphaMap=function(){if(!this.alphaMap)return!1;if(this.alphaMap==this._alphaMap&&this._mapData)return!0;this._mapData=null;var a,b=this._alphaMap=this.alphaMap,c=b;b instanceof HTMLCanvasElement?a=c.getContext("2d"):(c=createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"),c.width=b.width,c.height=b.height,a=c.getContext("2d"),a.drawImage(b,0,0));try{var d=a.getImageData(0,0,b.width,b.height)}catch(e){return!1}return this._mapData=d.data,!0},createjs.AlphaMapFilter=createjs.promote(a,"Filter")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a){this.mask=a}var b=createjs.extend(a,createjs.Filter);b.applyFilter=function(a,b,c,d,e,f,g,h){return this.mask?(f=f||a,null==g&&(g=b),null==h&&(h=c),f.save(),a!=f?!1:(f.globalCompositeOperation="destination-in",f.drawImage(this.mask,g,h),f.restore(),!0)):!0},b.clone=function(){return new a(this.mask)},b.toString=function(){return"[AlphaMaskFilter]"},createjs.AlphaMaskFilter=createjs.promote(a,"Filter")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d,e,f,g,h){this.redMultiplier=null!=a?a:1,this.greenMultiplier=null!=b?b:1,this.blueMultiplier=null!=c?c:1,this.alphaMultiplier=null!=d?d:1,this.redOffset=e||0,this.greenOffset=f||0,this.blueOffset=g||0,this.alphaOffset=h||0}var b=createjs.extend(a,createjs.Filter);b.toString=function(){return"[ColorFilter]"},b.clone=function(){return new a(this.redMultiplier,this.greenMultiplier,this.blueMultiplier,this.alphaMultiplier,this.redOffset,this.greenOffset,this.blueOffset,this.alphaOffset)},b._applyFilter=function(a){for(var b=a.data,c=b.length,d=0;c>d;d+=4)b[d]=b[d]*this.redMultiplier+this.redOffset,b[d+1]=b[d+1]*this.greenMultiplier+this.greenOffset,b[d+2]=b[d+2]*this.blueMultiplier+this.blueOffset,b[d+3]=b[d+3]*this.alphaMultiplier+this.alphaOffset;return!0},createjs.ColorFilter=createjs.promote(a,"Filter")}(),this.createjs=this.createjs||{},function(){"use strict";function a(a,b,c,d){this.setColor(a,b,c,d)}var b=a.prototype;a.DELTA_INDEX=[0,.01,.02,.04,.05,.06,.07,.08,.1,.11,.12,.14,.15,.16,.17,.18,.2,.21,.22,.24,.25,.27,.28,.3,.32,.34,.36,.38,.4,.42,.44,.46,.48,.5,.53,.56,.59,.62,.65,.68,.71,.74,.77,.8,.83,.86,.89,.92,.95,.98,1,1.06,1.12,1.18,1.24,1.3,1.36,1.42,1.48,1.54,1.6,1.66,1.72,1.78,1.84,1.9,1.96,2,2.12,2.25,2.37,2.5,2.62,2.75,2.87,3,3.2,3.4,3.6,3.8,4,4.3,4.7,4.9,5,5.5,6,6.5,6.8,7,7.3,7.5,7.8,8,8.4,8.7,9,9.4,9.6,9.8,10],a.IDENTITY_MATRIX=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1],a.LENGTH=a.IDENTITY_MATRIX.length,b.setColor=function(a,b,c,d){return this.reset().adjustColor(a,b,c,d)},b.reset=function(){return this.copy(a.IDENTITY_MATRIX)},b.adjustColor=function(a,b,c,d){return this.adjustHue(d),this.adjustContrast(b),this.adjustBrightness(a),this.adjustSaturation(c)},b.adjustBrightness=function(a){return 0==a||isNaN(a)?this:(a=this._cleanValue(a,255),this._multiplyMatrix([1,0,0,0,a,0,1,0,0,a,0,0,1,0,a,0,0,0,1,0,0,0,0,0,1]),this)},b.adjustContrast=function(b){if(0==b||isNaN(b))return this;b=this._cleanValue(b,100);var c;return 0>b?c=127+b/100*127:(c=b%1,c=0==c?a.DELTA_INDEX[b]:a.DELTA_INDEX[b<<0]*(1-c)+a.DELTA_INDEX[(b<<0)+1]*c,c=127*c+127),this._multiplyMatrix([c/127,0,0,0,.5*(127-c),0,c/127,0,0,.5*(127-c),0,0,c/127,0,.5*(127-c),0,0,0,1,0,0,0,0,0,1]),this},b.adjustSaturation=function(a){if(0==a||isNaN(a))return this;a=this._cleanValue(a,100);var b=1+(a>0?3*a/100:a/100),c=.3086,d=.6094,e=.082;return this._multiplyMatrix([c*(1-b)+b,d*(1-b),e*(1-b),0,0,c*(1-b),d*(1-b)+b,e*(1-b),0,0,c*(1-b),d*(1-b),e*(1-b)+b,0,0,0,0,0,1,0,0,0,0,0,1]),this},b.adjustHue=function(a){if(0==a||isNaN(a))return this;a=this._cleanValue(a,180)/180*Math.PI;var b=Math.cos(a),c=Math.sin(a),d=.213,e=.715,f=.072;return this._multiplyMatrix([d+b*(1-d)+c*-d,e+b*-e+c*-e,f+b*-f+c*(1-f),0,0,d+b*-d+.143*c,e+b*(1-e)+.14*c,f+b*-f+c*-.283,0,0,d+b*-d+c*-(1-d),e+b*-e+c*e,f+b*(1-f)+c*f,0,0,0,0,0,1,0,0,0,0,0,1]),this},b.concat=function(b){return b=this._fixMatrix(b),b.length!=a.LENGTH?this:(this._multiplyMatrix(b),this)},b.clone=function(){return(new a).copy(this)},b.toArray=function(){for(var b=[],c=0,d=a.LENGTH;d>c;c++)b[c]=this[c];return b},b.copy=function(b){for(var c=a.LENGTH,d=0;c>d;d++)this[d]=b[d];return this},b.toString=function(){return"[ColorMatrix]"},b._multiplyMatrix=function(a){var b,c,d,e=[];for(b=0;5>b;b++){for(c=0;5>c;c++)e[c]=this[c+5*b];for(c=0;5>c;c++){var f=0;for(d=0;5>d;d++)f+=a[c+5*d]*e[d];this[c+5*b]=f}}},b._cleanValue=function(a,b){return Math.min(b,Math.max(-b,a))},b._fixMatrix=function(b){return b instanceof a&&(b=b.toArray()),b.lengtha.LENGTH&&(b=b.slice(0,a.LENGTH)),b},createjs.ColorMatrix=a}(),this.createjs=this.createjs||{},function(){"use strict";function a(a){this.matrix=a}var b=createjs.extend(a,createjs.Filter);b.toString=function(){return"[ColorMatrixFilter]"},b.clone=function(){return new a(this.matrix)},b._applyFilter=function(a){for(var b,c,d,e,f=a.data,g=f.length,h=this.matrix,i=h[0],j=h[1],k=h[2],l=h[3],m=h[4],n=h[5],o=h[6],p=h[7],q=h[8],r=h[9],s=h[10],t=h[11],u=h[12],v=h[13],w=h[14],x=h[15],y=h[16],z=h[17],A=h[18],B=h[19],C=0;g>C;C+=4)b=f[C],c=f[C+1],d=f[C+2],e=f[C+3],f[C]=b*i+c*j+d*k+e*l+m,f[C+1]=b*n+c*o+d*p+e*q+r,f[C+2]=b*s+c*t+d*u+e*v+w,f[C+3]=b*x+c*y+d*z+e*A+B;return!0},createjs.ColorMatrixFilter=createjs.promote(a,"Filter")}(),this.createjs=this.createjs||{},function(){"use strict";function a(){throw"Touch cannot be instantiated"}a.isSupported=function(){return!!("ontouchstart"in window||window.navigator.msPointerEnabled&&window.navigator.msMaxTouchPoints>0||window.navigator.pointerEnabled&&window.navigator.maxTouchPoints>0)},a.enable=function(b,c,d){return b&&b.canvas&&a.isSupported()?b.__touch?!0:(b.__touch={pointers:{},multitouch:!c,preventDefault:!d,count:0},"ontouchstart"in window?a._IOS_enable(b):(window.navigator.msPointerEnabled||window.navigator.pointerEnabled)&&a._IE_enable(b),!0):!1},a.disable=function(b){b&&("ontouchstart"in window?a._IOS_disable(b):(window.navigator.msPointerEnabled||window.navigator.pointerEnabled)&&a._IE_disable(b),delete b.__touch)},a._IOS_enable=function(b){var c=b.canvas,d=b.__touch.f=function(c){a._IOS_handleEvent(b,c)};c.addEventListener("touchstart",d,!1),c.addEventListener("touchmove",d,!1),c.addEventListener("touchend",d,!1),c.addEventListener("touchcancel",d,!1)},a._IOS_disable=function(a){var b=a.canvas;if(b){var c=a.__touch.f;b.removeEventListener("touchstart",c,!1),b.removeEventListener("touchmove",c,!1),b.removeEventListener("touchend",c,!1),b.removeEventListener("touchcancel",c,!1)}},a._IOS_handleEvent=function(a,b){if(a){a.__touch.preventDefault&&b.preventDefault&&b.preventDefault();for(var c=b.changedTouches,d=b.type,e=0,f=c.length;f>e;e++){var g=c[e],h=g.identifier;g.target==a.canvas&&("touchstart"==d?this._handleStart(a,h,b,g.pageX,g.pageY):"touchmove"==d?this._handleMove(a,h,b,g.pageX,g.pageY):("touchend"==d||"touchcancel"==d)&&this._handleEnd(a,h,b))}}},a._IE_enable=function(b){var c=b.canvas,d=b.__touch.f=function(c){a._IE_handleEvent(b,c)};void 0===window.navigator.pointerEnabled?(c.addEventListener("MSPointerDown",d,!1),window.addEventListener("MSPointerMove",d,!1),window.addEventListener("MSPointerUp",d,!1),window.addEventListener("MSPointerCancel",d,!1),b.__touch.preventDefault&&(c.style.msTouchAction="none")):(c.addEventListener("pointerdown",d,!1),window.addEventListener("pointermove",d,!1),window.addEventListener("pointerup",d,!1),window.addEventListener("pointercancel",d,!1),b.__touch.preventDefault&&(c.style.touchAction="none")),b.__touch.activeIDs={}},a._IE_disable=function(a){var b=a.__touch.f;void 0===window.navigator.pointerEnabled?(window.removeEventListener("MSPointerMove",b,!1),window.removeEventListener("MSPointerUp",b,!1),window.removeEventListener("MSPointerCancel",b,!1),a.canvas&&a.canvas.removeEventListener("MSPointerDown",b,!1)):(window.removeEventListener("pointermove",b,!1),window.removeEventListener("pointerup",b,!1),window.removeEventListener("pointercancel",b,!1),a.canvas&&a.canvas.removeEventListener("pointerdown",b,!1))},a._IE_handleEvent=function(a,b){if(a){a.__touch.preventDefault&&b.preventDefault&&b.preventDefault();var c=b.type,d=b.pointerId,e=a.__touch.activeIDs;if("MSPointerDown"==c||"pointerdown"==c){if(b.srcElement!=a.canvas)return;e[d]=!0,this._handleStart(a,d,b,b.pageX,b.pageY)}else e[d]&&("MSPointerMove"==c||"pointermove"==c?this._handleMove(a,d,b,b.pageX,b.pageY):("MSPointerUp"==c||"MSPointerCancel"==c||"pointerup"==c||"pointercancel"==c)&&(delete e[d],this._handleEnd(a,d,b)))}},a._handleStart=function(a,b,c,d,e){var f=a.__touch;if(f.multitouch||!f.count){var g=f.pointers;g[b]||(g[b]=!0,f.count++,a._handlePointerDown(b,c,d,e))}},a._handleMove=function(a,b,c,d,e){a.__touch.pointers[b]&&a._handlePointerMove(b,c,d,e)},a._handleEnd=function(a,b,c){var d=a.__touch,e=d.pointers;e[b]&&(d.count--,a._handlePointerUp(b,c,!0),delete e[b])},createjs.Touch=a}(),this.createjs=this.createjs||{},function(){"use strict";var a=createjs.EaselJS=createjs.EaselJS||{};a.version="0.8.2",a.buildDate="Thu, 26 Nov 2015 20:44:34 GMT"}(); --------------------------------------------------------------------------------