├── .gitignore ├── .node-version ├── LICENSE ├── README.md ├── assets ├── asset-shapes.fla ├── generate-assets.jsfl ├── generate-assets.ts └── tsconfig.json ├── bs-config.json ├── docs ├── assets │ ├── css │ │ └── main.css │ ├── images │ │ ├── icons.png │ │ ├── icons@2x.png │ │ ├── widgets.png │ │ └── widgets@2x.png │ └── js │ │ ├── main.js │ │ └── search.js ├── classes │ ├── colordata.html │ ├── drawingdata.html │ ├── particle.html │ ├── particlesystem.html │ ├── shapedata.html │ ├── shapegenerator.html │ └── shapetype.html ├── enums │ └── alphacurvetype.html ├── examples │ ├── color-change.html │ ├── demo.html │ ├── first-step.html │ ├── index.html │ └── mouse-tracking.html ├── globals.html └── index.html ├── examples ├── color-change.html ├── demo.html ├── first-step.html ├── index.html └── mouse-tracking.html ├── eyecatch.png ├── generate-examples-code ├── example-template.html ├── index.js └── package.json ├── gulpfile.js ├── libs ├── d.ts │ ├── asset-shapes.d.ts │ ├── assets │ │ └── shape-generator.d.ts │ ├── data │ │ ├── data-color.d.ts │ │ ├── data-drawing.d.ts │ │ └── data-shape.d.ts │ ├── enum │ │ ├── alpha-curve-type.d.ts │ │ └── shape-type.d.ts │ ├── particle │ │ ├── particle-system.d.ts │ │ └── particle.d.ts │ └── particlejs.d.ts ├── particlejs.js └── particlejs.min.js ├── package-lock.json ├── package.json ├── src ├── asset-shapes.ts ├── assets │ └── shape-generator.ts ├── data │ ├── data-color.ts │ ├── data-drawing.ts │ └── data-shape.ts ├── enum │ ├── alpha-curve-type.ts │ └── shape-type.ts ├── particle │ ├── particle-system.ts │ └── particle.ts └── particlejs.ts ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | 3 | node_modules 4 | typings 5 | *.map 6 | src/**/*.js 7 | !src/asset-shapes.js 8 | tmp/ 9 | /.idea 10 | /yarn.lock 11 | /particlejs.js.tmp 12 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 10.16.0 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 ICS INC. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ParticleJS 2 | 3 | ![ParticleJS](https://raw.githubusercontent.com/ics-creative/ParticleJS/master/eyecatch.png) 4 | 5 | ParticleJS provide an easy way to display particle systems from within the EaselJS Framework. 6 | That way, adding special effects like explosions, smoke, snow, fire, etc. is very easy to do. 7 | 8 | - [API Document](https://ics-creative.github.io/ParticleJS/docs/) 9 | - Examples 10 | - [First step]( https://ics-creative.github.io/ParticleJS/docs/examples/first-step.html) 11 | - [Mouse tracking]( https://ics-creative.github.io/ParticleJS/docs/examples/mouse-tracking.html ) 12 | - [Color change]( https://ics-creative.github.io/ParticleJS/docs/examples/color-change.html ) 13 | - [MIT LICENSE](https://raw.githubusercontent.com/ics-creative/ParticleJS/master/LICENSE) 14 | -------------------------------------------------------------------------------- /assets/asset-shapes.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ics-creative/ParticleJS/3b478a502a74856e41c3fdc79735f1f36b8b72ce/assets/asset-shapes.fla -------------------------------------------------------------------------------- /assets/generate-assets.jsfl: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nyamogera on 2016/01/20. 3 | */ 4 | function exportAssets() { 5 | var pathArr = fl.getDocumentDOM().pathURI.split("/"); 6 | var flaName = pathArr.pop(); 7 | pathArr.pop(); 8 | var exportClassPath = pathArr.join("/"); 9 | var exportShapeClassPath = exportClassPath + "/core/app/assets/"; 10 | var exportShapeDataClassPath = exportClassPath + "/core/app/data/"; 11 | var exportPNGPath = pathArr.join("/"); 12 | exportPNGPath = exportPNGPath + "/core/images/shape/"; 13 | fl.trace(exportPNGPath); 14 | var assetList = new Array(); 15 | var assetHash = ""; 16 | var lib = fl.getDocumentDOM().library; 17 | var i = 0; 18 | for (var i = 0; i < lib.items.length; i++) { 19 | var o = lib.items[i]; 20 | var name_1 = o.name.replace("assets/", ""); 21 | if (o.itemType == "movie clip") { 22 | var pngPath = exportPNGPath + name_1 + ".png"; 23 | o.exportToPNGSequence(pngPath); 24 | assetHash += " this.shapeObjects[\"" + name_1 + "\"] = lib." + name_1 + "\n"; 25 | assetList.push("\"" + name_1 + "\""); 26 | } 27 | } 28 | var date = new Date().toDateString(); 29 | var assetArrayString = "[" + assetList.join(",") + "]"; 30 | var generatingClass = "/**\n * Created by \u300C" + flaName + "\u300D/\u300Cgenerate-assets.jsfl\u300D on " + date + "\n * !!!!!\u3053\u306E\u30B3\u30FC\u30C9\u306FJSFL\u304B\u3089\u81EA\u52D5\u751F\u6210\u3055\u308C\u305F\u30B3\u30FC\u30C9\u3067\u3059\u3002\u4FEE\u6B63\u3059\u308B\u5834\u5408\u306F\u3054\u6CE8\u610F\u304F\u3060\u3055\u3044\u3002!!!!!\n */\n\nexport class ShapeGenerator {\n shapeObjects:Object;\n\n constructor () {\n this.shapeObjects = new Object();\n" + assetHash + "\n }\n\n generateShape(id:string) {\n return new this.shapeObjects[id]();\n }\n}"; 31 | FLfile.write(exportShapeClassPath + "shape-generator.ts", generatingClass); 32 | var generatingDataClass = "/**\n * Created by \u300C" + flaName + "\u300D/\u300Cgenerate-assets.jsfl\u300D on " + date + "\n * !!!!!\u3053\u306E\u30B3\u30FC\u30C9\u306FJSFL\u304B\u3089\u81EA\u52D5\u751F\u6210\u3055\u308C\u305F\u30B3\u30FC\u30C9\u3067\u3059\u3002\u4FEE\u6B63\u3059\u308B\u5834\u5408\u306F\u3054\u6CE8\u610F\u304F\u3060\u3055\u3044\u3002!!!!!\n */\n\nexport class ShapeData {\n public assetList:string[];\n\n constructor () {\n this.assetList = " + assetArrayString + ";\n }\n}"; 33 | FLfile.write(exportShapeDataClassPath + "data-shape.ts", generatingDataClass); 34 | } 35 | exportAssets(); 36 | //# sourceMappingURL=generate-assets.js.map -------------------------------------------------------------------------------- /assets/generate-assets.ts: -------------------------------------------------------------------------------- 1 | declare class fl{ 2 | public static trace(str:string) : void; 3 | public static getDocumentDOM() : any; 4 | } 5 | declare class FLfile{ 6 | public static write(path:string,value:string):void; 7 | } 8 | 9 | /** 10 | * Created by nyamogera on 2016/01/20. 11 | */ 12 | function exportAssets(){ 13 | var pathArr = fl.getDocumentDOM().pathURI.split("/"); 14 | let flaName = pathArr.pop(); 15 | pathArr.pop(); 16 | 17 | var exportClassPath = pathArr.join("/"); 18 | let exportShapeClassPath = exportClassPath + "/core/app/assets/"; 19 | let exportShapeDataClassPath = exportClassPath + "/core/app/data/"; 20 | 21 | var exportPNGPath = pathArr.join("/"); 22 | 23 | exportPNGPath = exportPNGPath + "/core/images/shape/"; 24 | fl.trace(exportPNGPath); 25 | 26 | let assetList:string[] = new Array(); 27 | let assetHash:string = ""; 28 | var lib = fl.getDocumentDOM().library; 29 | var i=0; 30 | for(var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ParticleJS - デモ 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 | 48 |
49 |
50 | 
<html>
 51 | <head>
 52 |   <meta charset="UTF-8"/>
 53 |   <title>ParticleJS - デモ</title>
 54 | 
 55 |   <!-- CreateJSのライブラリー読み込み -->
 56 |   <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
 57 | 
 58 |   <!-- パーティクルシステムのライブラリー読み込み -->
 59 |   <script src="../libs/particlejs.min.js"></script>
 60 |   <!-- JS -->
 61 |   <script>
 62 |     var particleSystem = null;
 63 |     var stage = null;
 64 | 
 65 |     //  ウィンドウのロードが終わり次第、初期化コードを呼び出す。
 66 |     window.addEventListener("load", function () {
 67 |       // Stageオブジェクトを作成します。表示リストのルートになります。
 68 |       stage = new createjs.Stage("myCanvas");
 69 | 
 70 |       // パーティクルシステム作成します。
 71 |       particleSystem = new particlejs.ParticleSystem();
 72 | 
 73 |       // パーティクルシステムの描画コンテナーを表示リストに登録します。
 74 |       stage.addChild(particleSystem.container);
 75 | 
 76 |       // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む
 77 |       particleSystem.importFromJson(
 78 |         // パラメーターJSONのコピー＆ペースト ここから--
 79 |         {
 80 |           "bgColor": "#00000",
 81 |           "width": 838,
 82 |           "height": 607,
 83 |           "emitFrequency": "38",
 84 |           "startX": 480,
 85 |           "startXVariance": "570",
 86 |           "startY": 304,
 87 |           "startYVariance": "98",
 88 |           "initialDirection": "0",
 89 |           "initialDirectionVariance": "0",
 90 |           "initialSpeed": "0",
 91 |           "initialSpeedVariance": "0",
 92 |           "friction": "0",
 93 |           "accelerationSpeed": "0",
 94 |           "accelerationDirection": "0",
 95 |           "startScale": "0.98",
 96 |           "startScaleVariance": "1",
 97 |           "finishScale": "0.07",
 98 |           "finishScaleVariance": "0.23",
 99 |           "lifeSpan": "27",
100 |           "lifeSpanVariance": "93",
101 |           "startAlpha": "1",
102 |           "startAlphaVariance": "0",
103 |           "finishAlpha": "0.34",
104 |           "finishAlphaVariance": 0.5,
105 |           "shapeIdList": [
106 |             "blur_circle",
107 |             "kirakira2",
108 |             "kirakira",
109 |             "star"
110 |           ],
111 |           "startColor": {
112 |             "hue": "88",
113 |             "hueVariance": "99",
114 |             "saturation": "76",
115 |             "saturationVariance": "0",
116 |             "luminance": "77",
117 |             "luminanceVariance": "46"
118 |           },
119 |           "blendMode": true,
120 |           "alphaCurveType": "0"
121 |         }
122 |         // パラメーターJSONのコピー＆ペースト ここまで---
123 |       );
124 | 
125 |       // フレームレートの設定
126 |       createjs.Ticker.framerate = 60;
127 |       // requestAnimationFrameに従った呼び出し
128 |       createjs.Ticker.timingMode = createjs.Ticker.RAF;
129 |       // 定期的に呼ばれる関数を登録
130 |       createjs.Ticker.addEventListener("tick", handleTick);
131 |     });
132 | 
133 |     function handleTick() {
134 |       // 時間経過によって色相の基準値を変化させる
135 |       particleSystem.startColor.hue += 2;
136 |       if (particleSystem.startColor.hue >= 360) {
137 |         particleSystem.startColor.hue = 0;
138 |       }
139 | 
140 |       // パーティクルの発生・更新
141 |       particleSystem.update();
142 | 
143 |       // 描画を更新する
144 |       stage.update();
145 |     }
146 |   </script>
147 | 
148 |   <!-- CSS -->
149 |   <style>
150 |     canvas {
151 |       background-color: black;
152 |     }
153 | 
154 |     html, body {
155 |       height: 100%;
156 |     }
157 | 
158 |     body {
159 |       margin: 0;
160 |       padding: 0;
161 |       display: flex;
162 |       justify-content: center;
163 |       align-items: center;
164 |       background: #323232;
165 |       overflow: hidden;
166 |     }
167 |   </style>
168 | </head>
169 | <body>
170 | <canvas width="960" height="540" id="myCanvas"></canvas>
171 | </body>
172 | </html>
173 |
174 |
175 | 176 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /docs/examples/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ParticleJS - 色変化デモ 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 | 48 |
49 |
50 | 
<html>
 51 | <head>
 52 |   <meta charset="UTF-8"/>
 53 |   <title>ParticleJS - 色変化デモ</title>
 54 | 
 55 |   <!-- CreateJSのライブラリー読み込み -->
 56 |   <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
 57 | 
 58 |   <!-- パーティクルシステムのライブラリー読み込み -->
 59 |   <script src="../libs/particlejs.min.js"></script>
 60 | 
 61 |   <!-- JS -->
 62 |   <script>
 63 |     var particleSystem = null;
 64 |     var stage = null;
 65 | 
 66 |     //  ウィンドウのロードが終わり次第、初期化コードを呼び出す。
 67 |     window.addEventListener("load", function () {
 68 |       // Stageオブジェクトを作成します。表示リストのルートになります。
 69 |       stage = new createjs.Stage("myCanvas");
 70 | 
 71 |       // パーティクルシステム作成します。
 72 |       particleSystem = new particlejs.ParticleSystem();
 73 | 
 74 |       // パーティクルシステムの描画コンテナーを表示リストに登録します。
 75 |       stage.addChild(particleSystem.container);
 76 | 
 77 |       // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む
 78 |       particleSystem.importFromJson(
 79 |         // パラメーターJSONのコピー＆ペースト ここから--
 80 |         {
 81 |           "bgColor": "#00000",
 82 |           "width": 960,
 83 |           "height": 540,
 84 |           "emitFrequency": "100",
 85 |           "startX": 482,
 86 |           "startXVariance": 960,
 87 |           "startY": 396,
 88 |           "startYVariance": "222",
 89 |           "initialDirection": "0",
 90 |           "initialDirectionVariance": "360",
 91 |           "initialSpeed": "2",
 92 |           "initialSpeedVariance": "3.7",
 93 |           "friction": "0.038",
 94 |           "accelerationSpeed": "0.13",
 95 |           "accelerationDirection": "273.3",
 96 |           "startScale": 1,
 97 |           "startScaleVariance": 0.79,
 98 |           "finishScale": "0",
 99 |           "finishScaleVariance": "0",
100 |           "lifeSpan": "50",
101 |           "lifeSpanVariance": "196",
102 |           "startAlpha": "1",
103 |           "startAlphaVariance": "0",
104 |           "finishAlpha": "0.35",
105 |           "finishAlphaVariance": 0.5,
106 |           "shapeIdList": [
107 |             "blur_circle",
108 |             "circle"
109 |           ],
110 |           "startColor": {
111 |             "hue": 222,
112 |             "hueVariance": "55",
113 |             "saturation": "71",
114 |             "saturationVariance": "78",
115 |             "luminance": "83",
116 |             "luminanceVariance": "16"
117 |           },
118 |           "blendMode": true,
119 |           "alphaCurveType": "1"
120 |         }
121 |         // パラメーターJSONのコピー＆ペースト ここまで---
122 |       );
123 | 
124 |       // フレームレートの設定
125 |       createjs.Ticker.framerate = 60;
126 |       // requestAnimationFrameに従った呼び出し
127 |       createjs.Ticker.timingMode = createjs.Ticker.RAF;
128 |       // 定期的に呼ばれる関数を登録
129 |       createjs.Ticker.addEventListener("tick", handleTick);
130 |     });
131 | 
132 |     function handleTick() {
133 |       // パーティクルの発生・更新
134 |       particleSystem.update();
135 | 
136 |       // 描画を更新する
137 |       stage.update();
138 |     }
139 |   </script>
140 | 
141 |   <!-- CSS -->
142 |   <style>
143 |     canvas {
144 |       background-color: black;
145 |     }
146 | 
147 |     html, body {
148 |       height: 100%;
149 |     }
150 | 
151 |     body {
152 |       margin: 0;
153 |       padding: 0;
154 |       display: flex;
155 |       justify-content: center;
156 |       align-items: center;
157 |       background: #323232;
158 |       overflow: hidden;
159 |     }
160 |   </style>
161 | </head>
162 | <body>
163 | <canvas width="960" height="540" id="myCanvas"></canvas>
164 | </body>
165 | </html>
166 |
167 |
168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /docs/examples/first-step.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ParticleJS - 初めてのParticleJS 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 | 48 |
49 |
50 | 
<html>
 51 | <head>
 52 |   <meta charset="UTF-8"/>
 53 |   <title>ParticleJS - 初めてのParticleJS</title>
 54 | 
 55 |   <!-- CreateJSのライブラリー読み込み -->
 56 |   <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
 57 | 
 58 |   <!-- パーティクルシステムのライブラリー読み込み -->
 59 |   <script src="../libs/particlejs.min.js"></script>
 60 | 
 61 |   <!-- JS -->
 62 |   <script>
 63 |     var particleSystem = null;
 64 |     var stage = null;
 65 | 
 66 |     //  ウィンドウのロードが終わり次第、初期化コードを呼び出す。
 67 |     window.addEventListener('load', function () {
 68 |       // Stageオブジェクトを作成します。表示リストのルートになります。
 69 |       stage = new createjs.Stage('myCanvas');
 70 | 
 71 |       // パーティクルシステム作成します。
 72 |       particleSystem = new particlejs.ParticleSystem();
 73 | 
 74 |       // パーティクルシステムの描画コンテナーを表示リストに登録します。
 75 |       stage.addChild(particleSystem.container);
 76 | 
 77 |       // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む
 78 |       particleSystem.importFromJson(
 79 |         // パラメーターJSONのコピー＆ペースト ここから--
 80 |         {
 81 |           'bgColor': '#00000',
 82 |           'width': 500,
 83 |           'height': 500,
 84 |           'emitFrequency': '100',
 85 |           'startX': 480,
 86 |           'startXVariance': 400,
 87 |           'startY': 250,
 88 |           'startYVariance': 50,
 89 |           'initialDirection': '0',
 90 |           'initialDirectionVariance': '360',
 91 |           'initialSpeed': '5',
 92 |           'initialSpeedVariance': '3.7',
 93 |           'friction': '0.038',
 94 |           'accelerationSpeed': '0.0',
 95 |           'accelerationDirection': '0',
 96 |           'startScale': 1,
 97 |           'startScaleVariance': 0.79,
 98 |           'finishScale': '0',
 99 |           'finishScaleVariance': '0',
100 |           'lifeSpan': '50',
101 |           'lifeSpanVariance': '196',
102 |           'startAlpha': '1',
103 |           'startAlphaVariance': '0',
104 |           'finishAlpha': '0.35',
105 |           'finishAlphaVariance': 0.5,
106 |           'shapeIdList': [
107 |             'blur_circle',
108 |             'circle'
109 |           ],
110 |           'startColor': {
111 |             'hue': 222,
112 |             'hueVariance': '55',
113 |             'saturation': '71',
114 |             'saturationVariance': '78',
115 |             'luminance': '83',
116 |             'luminanceVariance': '16'
117 |           },
118 |           'blendMode': true,
119 |           'alphaCurveType': '1'
120 |         }
121 |         // パラメーターJSONのコピー＆ペースト ここまで---
122 |       );
123 | 
124 |       // フレームレートの設定
125 |       createjs.Ticker.framerate = 60;
126 |       // requestAnimationFrameに従った呼び出し
127 |       createjs.Ticker.timingMode = createjs.Ticker.RAF;
128 |       // 定期的に呼ばれる関数を登録
129 |       createjs.Ticker.addEventListener('tick', handleTick);
130 |     });
131 | 
132 |     function handleTick() {
133 |       // パーティクルの発生・更新
134 |       particleSystem.update();
135 | 
136 |       // 描画を更新する
137 |       stage.update();
138 |     }
139 |   </script>
140 | 
141 |   <!-- CSS -->
142 |   <style>
143 |     canvas {
144 |       background-color: black;
145 |     }
146 | 
147 |     html, body {
148 |       height: 100%;
149 |     }
150 | 
151 |     body {
152 |       margin: 0;
153 |       padding: 0;
154 |       display: flex;
155 |       justify-content: center;
156 |       align-items: center;
157 |       background: #323232;
158 |       overflow: hidden;
159 |     }
160 |   </style>
161 | </head>
162 | <body>
163 |   <div>
164 |     <canvas width="960" height="540" id="myCanvas"></canvas>
165 |   </div>
166 | </body>
167 | </html>
168 |
169 |
170 | 171 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /docs/examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ParticleJS Examples 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 | 48 |
49 |
50 | 
<!DOCTYPE html>
51 | <html lang="ja">
52 | <head>
53 |   <meta charset="UTF-8"/>
54 |   <title>ParticleJS Examples</title>
55 | </head>
56 | <body>
57 |   <ul>
58 |     <li><a href="color-change.html">color-change.html</a></li>
59 |     <li><a href="demo.html">demo.html</a></li>
60 |     <li><a href="first-step.html">first-step.html</a></li>
61 |     <li><a href="mouse-tracking.html">mouse-tracking.html</a></li>
62 |   </ul>
63 | </body>
64 | </html>
65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /docs/examples/mouse-tracking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ParticleJS - マウス追従 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 | 48 |
49 |
50 | 
<html>
 51 | <head>
 52 |   <meta charset="UTF-8"/>
 53 |   <title>ParticleJS - マウス追従</title>
 54 | 
 55 |   <!-- CreateJSのライブラリー読み込み -->
 56 |   <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
 57 | 
 58 |   <!-- パーティクルシステムのライブラリー読み込み -->
 59 |   <script src="../libs/particlejs.min.js"></script>
 60 | 
 61 |   <!-- JS -->
 62 |   <script>
 63 |     var particleSystem = null;
 64 |     var stage = null;
 65 | 
 66 |     //  ウィンドウのロードが終わり次第、初期化コードを呼び出す。
 67 |     window.addEventListener('load', function () {
 68 |       // Stageオブジェクトを作成します。表示リストのルートになります。
 69 |       stage = new createjs.Stage('myCanvas');
 70 | 
 71 |       // パーティクルシステム作成します。
 72 |       particleSystem = new particlejs.ParticleSystem();
 73 | 
 74 |       // パーティクルシステムの描画コンテナーを表示リストに登録します。
 75 |       stage.addChild(particleSystem.container);
 76 | 
 77 |       // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む
 78 |       particleSystem.importFromJson(
 79 |         // パラメーターJSONのコピー＆ペースト ここから--
 80 |         {
 81 |           'bgColor': '#00000',
 82 |           'width': 838,
 83 |           'height': 607,
 84 |           'emitFrequency': 300,
 85 |           'startX': 419,
 86 |           'startXVariance': '0',
 87 |           'startY': 304,
 88 |           'startYVariance': '0',
 89 |           'initialDirection': '209.5',
 90 |           'initialDirectionVariance': '155',
 91 |           'initialSpeed': '2.6',
 92 |           'initialSpeedVariance': '3.8',
 93 |           'friction': '0.0085',
 94 |           'accelerationSpeed': '0.835',
 95 |           'accelerationDirection': '233.2',
 96 |           'startScale': '1',
 97 |           'startScaleVariance': '0.52',
 98 |           'finishScale': '0',
 99 |           'finishScaleVariance': '0',
100 |           'lifeSpan': '40',
101 |           'lifeSpanVariance': '0',
102 |           'startAlpha': '1',
103 |           'startAlphaVariance': '0',
104 |           'finishAlpha': '1',
105 |           'finishAlphaVariance': '0',
106 |           'shapeIdList': [
107 |             'blur_circle'
108 |           ],
109 |           'startColor': {
110 |             'hue': '17',
111 |             'hueVariance': '32',
112 |             'saturation': '100',
113 |             'saturationVariance': '45',
114 |             'luminance': '56',
115 |             'luminanceVariance': '19'
116 |           },
117 |           'blendMode': true,
118 |           'alphaCurveType': '0'
119 |         }
120 |         // パラメーターJSONのコピー＆ペースト ここまで---
121 |       );
122 | 
123 |       // フレームレートの設定
124 |       createjs.Ticker.framerate = 60;
125 |       // requestAnimationFrameに従った呼び出し
126 |       createjs.Ticker.timingMode = createjs.Ticker.RAF;
127 |       // 定期的に呼ばれる関数を登録
128 |       createjs.Ticker.addEventListener('tick', handleTick);
129 |     });
130 | 
131 |     function handleTick() {
132 |       //  マウス位置に従って、パーティクル発生位置を変更する
133 |       particleSystem.startX = stage.mouseX;
134 |       particleSystem.startY = stage.mouseY;
135 | 
136 |       // パーティクルの発生・更新
137 |       particleSystem.update();
138 | 
139 |       // 描画を更新する
140 |       stage.update();
141 |     }
142 |   </script>
143 | 
144 |   <!-- CSS -->
145 |   <style>
146 |     canvas {
147 |       background-color: black;
148 |     }
149 | 
150 |     html, body {
151 |       height: 100%;
152 |     }
153 | 
154 |     body {
155 |       margin: 0;
156 |       padding: 0;
157 |       display: flex;
158 |       justify-content: center;
159 |       align-items: center;
160 |       background: #323232;
161 |       overflow: hidden;
162 |     }
163 |   </style>
164 | </head>
165 | <body>
166 |   <canvas width="960" height="540" id="myCanvas"></canvas>
167 | </body>
168 | </html>
169 |
170 |
171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /examples/color-change.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ParticleJS - デモ 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 98 | 99 | 100 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /examples/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ParticleJS - 色変化デモ 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 91 | 92 | 93 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /examples/first-step.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ParticleJS - 初めてのParticleJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 91 | 92 | 93 | 112 | 113 | 114 |
115 | 116 |
117 | 118 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ParticleJS Examples 6 | 7 | 8 | 14 | 15 | -------------------------------------------------------------------------------- /examples/mouse-tracking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ParticleJS - マウス追従 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 94 | 95 | 96 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /eyecatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ics-creative/ParticleJS/3b478a502a74856e41c3fdc79735f1f36b8b72ce/eyecatch.png -------------------------------------------------------------------------------- /generate-examples-code/example-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ${title} 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 | 48 |
49 |
50 | 
${sourcecode}
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /generate-examples-code/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const fs = require("fs"); 4 | const marked = require("marked"); 5 | const mkdirp = require("mkdirp"); 6 | let promises = []; 7 | let samplesUrl = "https://ics-creative.github.io/tutorial-createjs/"; 8 | let samplesHtmlUrl = "https://github.com/ics-creative/tutorial-createjs/blob/master/"; 9 | let templateHtml; 10 | /** 11 | * テンプレート文字列を展開 12 | * http://webdesign-dackel.com/2015/07/17/javascript-template-string/ 13 | * @param text:string テンプレート文字列 14 | * @param values:Object 展開する値 15 | * @return string 16 | */ 17 | let template = (text, values) => { 18 | if (!text) { 19 | console.log("template-error!"); 20 | return ""; 21 | } 22 | return text.replace(/\$\{(.*?)\}/g, function (all, key) { 23 | return Object.prototype.hasOwnProperty.call(values, key) ? values[key] : ""; 24 | }); 25 | }; 26 | const renderer = new marked.Renderer(); 27 | renderer.link = (href, title, text) => { 28 | //console.log("href:" + href); 29 | let sampledIndex = href.indexOf("samples/"); 30 | let absolutePass = href.indexOf("http") == 0; 31 | if (!absolutePass && sampledIndex >= 0) { 32 | href = samplesHtmlUrl + href.slice(sampledIndex); 33 | } 34 | else { 35 | if (!absolutePass && href.indexOf("md")) { 36 | href = href.replace("md", "html"); 37 | } 38 | } 39 | let htmlHref = (href != null && href != "") ? ` href="${href}"` : ""; 40 | let htmlTitle = (title != null && title != "") ? ` title=${title}` : ""; 41 | return `${text}`; 42 | }; 43 | renderer.image = (href, title, text) => { 44 | //console.log("imgs:" + href); 45 | let absolutePass = href.indexOf("http") == 0; 46 | let sampledIndex = href.indexOf("../imgs/"); 47 | if (!absolutePass && sampledIndex >= 0) { 48 | href = samplesUrl + href.slice(sampledIndex + ("../").length); 49 | } 50 | let htmlHref = (href != null && href != "") ? ` src="${href}"` : ""; 51 | let htmlTitle = (title != null && title != "") ? ` title=${title}` : ""; 52 | return ``; 53 | }; 54 | renderer.heading = function (text, level) { 55 | return `${text}`; 56 | }; 57 | marked.setOptions({ 58 | highlight: function (code) { 59 | return require("highlight.js").highlightAuto(code).value; 60 | }, 61 | renderer: renderer 62 | }); 63 | let generateHTML = (dirName, fileName, resolve) => { 64 | fs.readFile("../examples/" + dirName + fileName, "utf8", (error, text) => { 65 | if (error) { 66 | console.log("erroe exit:" + fileName); 67 | return; 68 | } 69 | let fileRawName = fileName.split(".html").join(""); 70 | let escapeHTML = (str) => { 71 | return str.replace(/&/g, '&') 72 | .replace(//g, '>') 74 | .replace(/"/g, '"') 75 | .replace(/'/g, '''); 76 | }; 77 | let headerMatch = text.match(/(.*?)<\/title>/); 78 | let articleTitle = headerMatch ? headerMatch[1] : fileRawName; 79 | // -------------------------------- 80 | // テンプレートへの適用 81 | // -------------------------------- 82 | let values = { 83 | "sourcecode": escapeHTML(text), 84 | "title": articleTitle, 85 | "url": "../../examples/" + fileName 86 | }; 87 | if (!templateHtml) { 88 | console.log(fileName + " generate error!"); 89 | return; 90 | } 91 | let textValue = template(templateHtml, values); 92 | fs.writeFile("../docs/examples/" + dirName + fileName.replace("md", "html"), textValue, (error) => { 93 | //console.log(fileName + "- maked"); 94 | if (error) { 95 | return; 96 | } 97 | resolve(); 98 | }); 99 | }); 100 | }; 101 | fs.readdir("../examples/", (err, files) => { 102 | promises.push(new Promise((resolve) => { 103 | mkdirp("../docs/examples/", function (err) { 104 | if (err) { 105 | console.error("mkdir-error" + err); 106 | } 107 | else { 108 | resolve(); 109 | } 110 | }); 111 | })); 112 | promises.push(new Promise((resolve) => { 113 | fs.readFile("example-template.html", "utf8", (error, text) => { 114 | templateHtml = text; 115 | resolve(); 116 | }); 117 | })); 118 | for (let i = 0; i < files.length; i++) { 119 | let filename = files[i]; 120 | let childPromise = new Promise((resolve) => { 121 | generateHTML("", filename, resolve); 122 | }); 123 | promises.push(childPromise); 124 | } 125 | Promise 126 | .all(promises) 127 | .then((results) => { 128 | console.log("[Success] HTML files are generated."); 129 | }); 130 | }); 131 | /** 132 | * 日付をフォーマットで変換します。 133 | * @param date Date オブジェクト 134 | * @returns {string} 「◯年◯月◯日」フォーマットの日付 135 | */ 136 | function toLocaleString(date) { 137 | return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`; 138 | } 139 | -------------------------------------------------------------------------------- /generate-examples-code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true 3 | } 4 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const shell = require("gulp-shell"); 3 | const uglify = require("gulp-uglify"); 4 | 5 | gulp.task( 6 | "uglify", 7 | shell.task([ 8 | "uglifyjs --compress --mangle -- libs/particlejs.js > libs/particlejs.min.js" 9 | ]) 10 | ); 11 | 12 | gulp.task("build-particle-system", shell.task(["webpack"])); 13 | 14 | gulp.task("start", gulp.series("build-particle-system", "uglify")); 15 | 16 | const typedoc = require("gulp-typedoc"); 17 | 18 | gulp.task("typedoc", () => 19 | gulp.src(["src/particlejs.ts"]).pipe( 20 | typedoc({ 21 | // TypeScript options (see typescript docs) 22 | module: "umd", 23 | target: "es5", 24 | includeDeclarations: false, 25 | 26 | // Output options (see typedoc docs) 27 | out: "./docs", 28 | mode: "file", 29 | 30 | // TypeDoc options (see typedoc docs) 31 | name: "ParticleJS", 32 | theme: "minimal", 33 | ignoreCompilerErrors: true, 34 | version: true 35 | }) 36 | ) 37 | ); 38 | -------------------------------------------------------------------------------- /libs/d.ts/asset-shapes.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * アセットを含むオブジェクトです。このクラスは将来変更する可能性が高いので deprecated とします。 3 | * 利用しないでください。 4 | * @type {{}} 5 | */ 6 | declare var Assets: {}; 7 | export { Assets }; 8 | -------------------------------------------------------------------------------- /libs/d.ts/assets/shape-generator.d.ts: -------------------------------------------------------------------------------- 1 | /// <reference types="easeljs" /> 2 | /** 3 | * シェイプをインスタンス化するクラスです。 4 | * ParticleJSの内部的な利用以外では使用しないことをオススメします。 5 | */ 6 | export declare class ShapeGenerator { 7 | constructor(); 8 | /** 9 | * シェイプインスタンスを作成します。 10 | * @param {string} id 11 | * @returns {createjs.Container} 12 | * @see data-shape.ts 13 | */ 14 | generateShape(id: string): createjs.Container; 15 | } 16 | -------------------------------------------------------------------------------- /libs/d.ts/data/data-color.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 色の情報を扱うデータ型クラスです。 3 | */ 4 | export declare class ColorData { 5 | /** 6 | * 色相を表します(0-360)。 7 | * @type {number} 8 | */ 9 | hue: number; 10 | /** 11 | * 色相のばらつきを示します。 12 | * @type {number} 13 | */ 14 | hueVariance: number; 15 | /** 16 | * 彩度です(0-100)。 17 | * @type {number} 18 | */ 19 | saturation: number; 20 | /** 21 | * 彩度のばらつきです。 22 | * @type {number} 23 | */ 24 | saturationVariance: number; 25 | /** 26 | * 輝度です(0-100)。 27 | * @type {number} 28 | */ 29 | luminance: number; 30 | /** 31 | * 輝度のばらつきです。 32 | * @type {number} 33 | */ 34 | luminanceVariance: number; 35 | constructor(); 36 | } 37 | -------------------------------------------------------------------------------- /libs/d.ts/data/data-drawing.d.ts: -------------------------------------------------------------------------------- 1 | import { ColorData } from "./data-color"; 2 | /** 3 | * パーティクルの描画情報を扱うデータ型クラスです。 4 | */ 5 | export declare class DrawingData { 6 | /** 7 | * 背景色です。 8 | * @type {string} 9 | */ 10 | bgColor: string; 11 | /** 12 | * 幅です。 13 | * @type {number} 14 | */ 15 | width: number; 16 | /** 17 | * 高さです。 18 | * @type {number} 19 | */ 20 | height: number; 21 | /** 22 | * 1秒あたりの発生数です。 23 | * @type {number} 24 | */ 25 | emitFrequency: number; 26 | /** 27 | * 発生基準位置 - X座標 (px)です。 28 | * @type {number} 29 | */ 30 | startX: number; 31 | /** 32 | * 発生基準位置 - X座標のばらつき (px)です。 33 | * @type {number} 34 | */ 35 | startXVariance: number; 36 | /** 37 | * 発生位置 - Y座標 (px)です。 38 | * @type {number} 39 | */ 40 | startY: number; 41 | /** 42 | * 発生位置 - Y座標のばらつき (px)です。 43 | * @type {number} 44 | */ 45 | startYVariance: number; 46 | /** 47 | * 初期速度 - 方向 (度)です。 48 | * @type {number} 49 | */ 50 | initialDirection: number; 51 | /** 52 | * 初期速度 - 方向のばらつき (度)です。 53 | * @type {number} 54 | */ 55 | initialDirectionVariance: number; 56 | /** 57 | * 初期速度 (px)です。 58 | * @type {number} 59 | */ 60 | initialSpeed: number; 61 | /** 62 | * 初期速度のばらつきです。 63 | * @type {number} 64 | */ 65 | initialSpeedVariance: number; 66 | /** 67 | * 摩擦です。 68 | * @type {number} 69 | */ 70 | friction: number; 71 | /** 重力です。 72 | * @type {number} 73 | */ 74 | accelerationSpeed: number; 75 | /** 76 | * 重力方向 (度)です。 77 | * @type {number} 78 | */ 79 | accelerationDirection: number; 80 | /** 81 | * 開始時のスケールです。 82 | * @type {number} 83 | */ 84 | startScale: number; 85 | /** 86 | * 開始時のスケールのばらつきです。 87 | * @type {number} 88 | */ 89 | startScaleVariance: number; 90 | /** 91 | * 終了時のスケールです。 92 | * @type {number} 93 | */ 94 | finishScale: number; 95 | /** 96 | * 終了時のスケールのばらつきです。 97 | * @type {number} 98 | */ 99 | finishScaleVariance: number; 100 | /** 101 | * ライフ(フレーム数)です。 102 | * @type {number} 103 | */ 104 | lifeSpan: number; 105 | /** 106 | * ライフのばらつき(フレーム数)です。 107 | * @type {number} 108 | */ 109 | /** */ lifeSpanVariance: number; 110 | /** 111 | * 開始時の透明度です。 112 | * @type {number} 113 | */ 114 | startAlpha: number; 115 | /** 116 | * 開始時の透明度のばらつきです。 117 | * @type {number} 118 | */ 119 | startAlphaVariance: number; 120 | /** 121 | * 終了時の透明度です。 122 | * @type {number} 123 | */ 124 | finishAlpha: number; 125 | /** 126 | * 終了時の透明度のばらつきです。 127 | * @type {number} 128 | */ 129 | finishAlphaVariance: number; 130 | /** 131 | * 使用するシェイプID設定です。 132 | * @type {string[]} 133 | */ 134 | shapeIdList: string[]; 135 | /** 136 | * 初期カラーの設定です。 137 | * @type {ColorData} 138 | */ 139 | startColor: ColorData; 140 | /** 141 | * シェイプを加算合成します。 142 | * @type {boolean} 143 | */ 144 | blendMode: boolean; 145 | /** 146 | * 透明度の計算式の設定です。 147 | * @type {AlphaCurveType.Normal} 148 | */ 149 | alphaCurveType: number; 150 | /** 151 | * コンストラクターです。 152 | * @param json 153 | */ 154 | constructor(json?: any); 155 | static ENABLE_REFLECT: boolean; 156 | /** 157 | * パーティクルの設定をJSON形式のオブジェクトから読み込みます。 158 | * @param json 159 | */ 160 | importFromJson(json: any): void; 161 | /** 162 | * パーティクルの設定をDrawingDataオブジェクトから読み込みます 163 | * @param {DrawingData} obj 164 | */ 165 | importData(obj: DrawingData): void; 166 | static checkReflectEnable(): boolean; 167 | private setData; 168 | } 169 | -------------------------------------------------------------------------------- /libs/d.ts/data/data-shape.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 「asset-shapes.fla」/「generate-assets.jsfl」 on Wed Jan 20 2016 3 | * !!!!!このコードはJSFLから自動生成されたコードです。修正する場合はご注意ください。!!!!! 4 | */ 5 | export declare class ShapeData { 6 | assetList: string[]; 7 | constructor(); 8 | } 9 | -------------------------------------------------------------------------------- /libs/d.ts/enum/alpha-curve-type.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 透明度の計算式の種類です。 3 | */ 4 | export declare enum AlphaCurveType { 5 | /** 6 | * 通常の透明度の計算式です。 7 | */ 8 | Normal = 0, 9 | /** 10 | * ランダムです。 11 | */ 12 | Random = 1 13 | } 14 | -------------------------------------------------------------------------------- /libs/d.ts/enum/shape-type.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * シェイプの種類を定義したクラスです。 3 | */ 4 | export declare class ShapeType { 5 | /** 6 | * ふわっとした円のシェイプIDです。 7 | * @type {string} 8 | */ 9 | static BLUR_CIRCLE: string; 10 | /** 11 | * 円のシェイプIDです。 12 | * @type {string} 13 | */ 14 | static CIRCLE: string; 15 | /** 16 | * 花の形のシェイプIDです。 17 | * @type {string} 18 | */ 19 | static FLOWER: string; 20 | /** 21 | * ハートの形のシェイプIDです。 22 | * @type {string} 23 | */ 24 | static HEART: string; 25 | /** 26 | * キラキラ(1)のシェイプIDです。 27 | * @type {string} 28 | */ 29 | static KIRAKIRA: string; 30 | /** 31 | * キラキラ(2)のシェイプIDです。 32 | * @type {string} 33 | */ 34 | static KIRAKIRA2: string; 35 | /** 36 | * 中央が繰り抜かれた円のシェイプIDです。 37 | * @type {string} 38 | */ 39 | static REVERSE_CIRCLE: string; 40 | /** 41 | * 四角形のシェイプIDです。 42 | * @type {string} 43 | */ 44 | static SQUARE: string; 45 | /** 46 | * 星形のシェイプIDです。 47 | * @type {string} 48 | */ 49 | static STAR: string; 50 | /** 51 | * 星形(棘が10)のシェイプIDです。 52 | * @type {string} 53 | */ 54 | static STAR_10: string; 55 | /** 56 | * 三角形のシェイプIDです。 57 | * @type {string} 58 | */ 59 | static TRIANGLE: string; 60 | } 61 | -------------------------------------------------------------------------------- /libs/d.ts/particle/particle-system.d.ts: -------------------------------------------------------------------------------- 1 | /// <reference types="easeljs" /> 2 | import { ColorData } from "../data/data-color"; 3 | import { DrawingData } from "../data/data-drawing"; 4 | import { Particle } from "./particle"; 5 | /** 6 | * ParticleJSのバージョン情報を示します。 7 | * @type {string} 8 | */ 9 | export declare const VERSION = "1.0.0"; 10 | /** 11 | * 現在のバージョンと互換性があるかどうかをチェックします。 12 | * @param value 13 | */ 14 | export declare function checkVersion(value: string): boolean; 15 | /** 16 | * パーティクルの制御クラスです。 17 | */ 18 | export declare class ParticleSystem { 19 | /** 20 | * グラフィックオブジェクトです。内部計算に使用します。 21 | */ 22 | private static HELPER_GRAPHICS; 23 | /** 24 | * パーティクルが配置されるコンテナーです。 25 | */ 26 | container: createjs.Container; 27 | /** @private */ 28 | private _particlesPool; 29 | /** @private */ 30 | private _activeParticles; 31 | /** @private */ 32 | private _drawingData; 33 | /** @private */ 34 | private _frameCount; 35 | /** @private */ 36 | private _playing; 37 | /** @private */ 38 | private shapeGenerator; 39 | /** 40 | * パーティクルのアニメーションが再生されているかどうかを示します。 41 | * @returns {boolean} 42 | */ 43 | isPlaying(): boolean; 44 | constructor(); 45 | /** 46 | * パーティクルの設定データを取り込みます。 47 | */ 48 | setData(drawingData: DrawingData): void; 49 | /** 50 | * パーティクルの設定データをJson形式のオブジェクトで取り込みます。 51 | */ 52 | importFromJson(jsonObject: any): void; 53 | /** 54 | * パーティクルシステムの更新を行います。 55 | */ 56 | update(): void; 57 | /** 58 | * パーティクルの動きを更新します。 59 | */ 60 | private animate; 61 | /** 62 | * パーティクルが生きているか確認します。 63 | */ 64 | private lifeCheck; 65 | /** 66 | * パーティクルを全て削除します。 67 | */ 68 | clear(): void; 69 | /** 70 | * パーティクルシステムを破棄します。 71 | */ 72 | dispose(): void; 73 | /** 74 | * パーティクルの生成を行います。 75 | */ 76 | private emit; 77 | /** 78 | * 個々のパーティクルを生成し、パーティクルシステムに登録します。 79 | * @returns {Particle} 80 | */ 81 | private emitParticle; 82 | /** 83 | * パーティクルを生成し、パラメーターを設定します。 84 | * @returns {Particle} 85 | */ 86 | private generateParticle; 87 | /** 88 | * パーティクルパラメータの設定を行います。 89 | * @param particle 90 | */ 91 | private setParticleParameter; 92 | /** 93 | * パーティクルに使用するシェイプを生成します。 94 | * @param particle 95 | * @param shapeIdList 96 | */ 97 | generateShape(particle: Particle, shapeIdList: string[]): void; 98 | /** 99 | * 一時的にパーティクルの再生を停止します。 100 | */ 101 | pause(): void; 102 | /** 103 | * pause()で停止したパーティクルの再生を再開します。 104 | */ 105 | resume(): void; 106 | /** 107 | * 一定範囲の数値を計算します。 108 | * @param minValue 109 | * @param maxValue 110 | * @param value 111 | * @returns {number} 112 | */ 113 | private calcRandomValueWithRange; 114 | /** 115 | * ばらつきのある値を計算し取得します。 116 | * @param value 基準値です。 117 | * @param variance バラつきの範囲です。 118 | * @param isInteger 整数であるかを指定します。 119 | * @returns {number} 数値を返します。 120 | */ 121 | private calcRandomValueWithVariance; 122 | /** 123 | * 現在の年齢依存の数値を計算します。 124 | * @param start 開始時の値です。 125 | * @param end 終了時の値です。 126 | * @param life 現在の寿命を示します。開始時は1.0で、終了時は0.0の想定です。 127 | * @returns {number} 現在の値です。 128 | */ 129 | private calcCurrentValue; 130 | /** 131 | * 1秒あたりの発生数です。 132 | * @param value 133 | */ 134 | /** 135 | * 1秒あたりの発生数です。 136 | * @returns {number} 137 | */ 138 | emitFrequency: number; 139 | /** 140 | * 発生基準位置 - X座標 (px)です。 141 | * @param value 142 | */ 143 | /** 144 | * 発生基準位置 - X座標 (px)です。 145 | * @returns {number} 146 | */ 147 | startX: number; 148 | /** 149 | * 発生基準位置 - X座標のばらつき (px)です。 150 | * @param value 151 | */ 152 | /** 153 | * 発生基準位置 - X座標のばらつき (px)です。 154 | * @returns {number} 155 | */ 156 | startXVariance: number; 157 | /** 158 | * 発生位置 - Y座標 (px)です。 159 | * @param value 160 | */ 161 | /** 162 | * 発生位置 - Y座標 (px)です。 163 | * @returns {number} 164 | */ 165 | startY: number; 166 | /** 167 | * 発生基準位置 - X座標のばらつき (px)です。 168 | * @param value 169 | */ 170 | /** 171 | * 発生基準位置 - X座標のばらつき (px)です。 172 | * @returns {number} 173 | */ 174 | startYVariance: number; 175 | /** 176 | * 初期速度 - 方向 (度)です。 177 | * @param value 178 | */ 179 | /** 180 | * 初期速度 - 方向 (度)です。 181 | * @returns {number} 182 | */ 183 | initialDirection: number; 184 | /** 185 | * 初期速度 - 方向のばらつき (度)です。 186 | * @param value 187 | */ 188 | /** 189 | * 初期速度 - 方向のばらつき (度)です。 190 | * @returns {number} 191 | */ 192 | initialDirectionVariance: number; 193 | /** 194 | * 初期速度 (px)です。 195 | * @param value 196 | */ 197 | /** 198 | * 初期速度 (px)です。 199 | * @returns {number} 200 | */ 201 | initialSpeed: number; 202 | /** 203 | * 初期速度のばらつきです。 204 | * @param value 205 | */ 206 | /** 207 | * 初期速度のばらつきです。 208 | * @returns {number} 209 | */ 210 | initialSpeedVariance: number; 211 | /** 212 | * 摩擦です。 213 | * @param value 214 | */ 215 | /** 216 | * 摩擦です。 217 | * @returns {number} 218 | */ 219 | friction: number; 220 | /** 221 | * 重力です。 222 | * @param value 223 | */ 224 | /** 225 | * 重力です。 226 | * @returns {number} 227 | */ 228 | accelerationSpeed: number; 229 | /** 230 | * 重力方向 (度)です。 231 | * @param value 232 | */ 233 | /** 234 | * 重力です。 235 | * @returns {number} 236 | */ 237 | accelerationDirection: number; 238 | /** 239 | * 開始時のスケールです。 240 | * @param value 241 | */ 242 | /** 243 | * 開始時のスケールです。 244 | * @returns {number} 245 | */ 246 | startScale: number; 247 | /** 248 | * 開始時のスケールのばらつきです。 249 | * @param value 250 | */ 251 | /** 252 | * 開始時のスケールのばらつきです。 253 | * @returns {number} 254 | */ 255 | startScaleVariance: number; 256 | /** 257 | * 終了時のスケールです。 258 | * @param value 259 | */ 260 | /** 261 | * 終了時のスケールです。 262 | * @returns {number} 263 | */ 264 | finishScale: number; 265 | /** 266 | * 終了時のスケールのばらつきです。 267 | * @param value 268 | */ 269 | /** 270 | * 終了時のスケールのばらつきです。 271 | * @returns {number} 272 | */ 273 | finishScaleVariance: number; 274 | /** 275 | * ライフ(フレーム数)です。 276 | * @param value 277 | */ 278 | /** 279 | * ライフ(フレーム数)です。 280 | * @returns {number} 281 | */ 282 | lifeSpan: number; 283 | /** 284 | * ライフのばらつき(フレーム数)です。 285 | * @param value 286 | */ 287 | /** 288 | * ライフのばらつき(フレーム数)です。 289 | * @returns {number} 290 | */ 291 | lifeSpanVariance: number; 292 | /** 293 | * 始時の透明度です。 294 | * @param value 295 | */ 296 | /** 297 | * 始時の透明度です。 298 | * @returns {number} 299 | */ 300 | startAlpha: number; 301 | /** 302 | * 開始時の透明度のばらつきです。 303 | * @param value 304 | */ 305 | /** 306 | * 開始時の透明度のばらつきです。 307 | * @returns {number} 308 | */ 309 | startAlphaVariance: number; 310 | /** 311 | * 終了時の透明度です。 312 | * @param value 313 | */ 314 | /** 315 | * 終了時の透明度です。 316 | * @returns {number} 317 | */ 318 | finishAlpha: number; 319 | /** 320 | * 終了時の透明度のばらつきです。 321 | * @param value 322 | */ 323 | /** 324 | * 終了時の透明度のばらつきです。 325 | * @returns {number} 326 | */ 327 | finishAlphaVariance: number; 328 | /** 329 | * 使用するシェイプID設定です。 330 | * @param string[] 331 | */ 332 | /** 333 | * 使用するシェイプID設定です。 334 | * @returns {string[]} 335 | */ 336 | shapeIdList: string[]; 337 | /** 338 | * 初期カラーの設定です。 339 | * @param value 340 | */ 341 | /** 342 | * 初期カラーの設定です。 343 | * @returns {ColorData} 344 | */ 345 | startColor: ColorData; 346 | /** 347 | * trueのときシェイプを加算合成します。 348 | * @param value 349 | */ 350 | /** 351 | * trueのときシェイプを加算合成します。 352 | * @returns {boolean} 353 | */ 354 | blendMode: boolean; 355 | /** 356 | * 透明度の計算式の設定です。 357 | * @param value - 0:通常, 1:ランダム 358 | */ 359 | /** 360 | * 透明度の計算式の設定です。 361 | * @returns {number} 362 | */ 363 | alphaCurveType: number; 364 | } 365 | -------------------------------------------------------------------------------- /libs/d.ts/particle/particle.d.ts: -------------------------------------------------------------------------------- 1 | /// <reference types="easeljs" /> 2 | import { ColorData } from "../data/data-color"; 3 | /** 4 | * パーティクルエミッターのバリューオブジェクトのクラスです。 5 | */ 6 | export declare class Particle { 7 | /** 8 | * パーティクルの形状です。 9 | * @type {createjs.Container} 10 | */ 11 | particleShape: createjs.Container; 12 | /** パーティクルが生きているかのフラグです。 */ 13 | isAlive: boolean; 14 | /** パーティクルの現在の残り生存期間（フレーム数）です。 */ 15 | currentLife: number; 16 | /** パーティクルの生存期間（フレーム数）です。 */ 17 | totalLife: number; 18 | /** パーティクルの現在のX位置です。 */ 19 | x: number; 20 | /** パーティクルの現在のY位置です。 */ 21 | y: number; 22 | /** パーティクルが現在向かっている方向ベクトルです。 */ 23 | vx: number; 24 | /** パーティクルが方向ベクトルです。 */ 25 | vy: number; 26 | /** アルファのイージング関数です。 */ 27 | easingAlpha: (life: number) => number; 28 | /** 開始アルファ値です0〜1.0の間になります。 */ 29 | startAlpha: number; 30 | /** 終了時のアルファ値です0〜1.0の間になります。 */ 31 | finishAlpha: number; 32 | /** スケールのイージング関数です。 */ 33 | easingScale: (life: number) => number; 34 | /** 開始スケール値です0〜1.0の間になります。 */ 35 | startScale: number; 36 | /** 終了時のスケール値です0〜1.0の間になります。 */ 37 | finishScale: number; 38 | /** 開始時のカラーです。 */ 39 | startColor: ColorData; 40 | /** カラーを設定するCreateJSのグラフィックスコマンドです。*/ 41 | colorCommand: any; 42 | /** アルファカーブ */ 43 | alphaCurveType: number; 44 | /** 45 | * コンストラクターです。 46 | */ 47 | constructor(); 48 | } 49 | -------------------------------------------------------------------------------- /libs/d.ts/particlejs.d.ts: -------------------------------------------------------------------------------- 1 | import { Assets } from "./asset-shapes"; 2 | import { ShapeGenerator } from "./assets/shape-generator"; 3 | import { ColorData } from "./data/data-color"; 4 | import { DrawingData } from "./data/data-drawing"; 5 | import { ShapeData } from "./data/data-shape"; 6 | import { AlphaCurveType } from "./enum/alpha-curve-type"; 7 | import { ShapeType } from "./enum/shape-type"; 8 | import { Particle } from "./particle/particle"; 9 | import { ParticleSystem, VERSION } from "./particle/particle-system"; 10 | export { ParticleSystem, Particle, VERSION, DrawingData, ColorData, ShapeData, ShapeGenerator, AlphaCurveType, ShapeType, Assets }; 11 | -------------------------------------------------------------------------------- /libs/particlejs.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["particlejs"] = factory(); 8 | else 9 | root["particlejs"] = factory(); 10 | })(window, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 50 | /******/ } 51 | /******/ }; 52 | /******/ 53 | /******/ // define __esModule on exports 54 | /******/ __webpack_require__.r = function(exports) { 55 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 56 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 57 | /******/ } 58 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 59 | /******/ }; 60 | /******/ 61 | /******/ // create a fake namespace object 62 | /******/ // mode & 1: value is a module id, require it 63 | /******/ // mode & 2: merge all properties of value into the ns 64 | /******/ // mode & 4: return value when already ns object 65 | /******/ // mode & 8|1: behave like require 66 | /******/ __webpack_require__.t = function(value, mode) { 67 | /******/ if(mode & 1) value = __webpack_require__(value); 68 | /******/ if(mode & 8) return value; 69 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 70 | /******/ var ns = Object.create(null); 71 | /******/ __webpack_require__.r(ns); 72 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 73 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 74 | /******/ return ns; 75 | /******/ }; 76 | /******/ 77 | /******/ // getDefaultExport function for compatibility with non-harmony modules 78 | /******/ __webpack_require__.n = function(module) { 79 | /******/ var getter = module && module.__esModule ? 80 | /******/ function getDefault() { return module['default']; } : 81 | /******/ function getModuleExports() { return module; }; 82 | /******/ __webpack_require__.d(getter, 'a', getter); 83 | /******/ return getter; 84 | /******/ }; 85 | /******/ 86 | /******/ // Object.prototype.hasOwnProperty.call 87 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 88 | /******/ 89 | /******/ // __webpack_public_path__ 90 | /******/ __webpack_require__.p = ""; 91 | /******/ 92 | /******/ 93 | /******/ // Load entry module and return exports 94 | /******/ return __webpack_require__(__webpack_require__.s = 0); 95 | /******/ }) 96 | /************************************************************************/ 97 | /******/ ([ 98 | /* 0 */ 99 | /***/ (function(module, exports, __webpack_require__) { 100 | 101 | module.exports = __webpack_require__(1); 102 | 103 | 104 | /***/ }), 105 | /* 1 */ 106 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 107 | 108 | "use strict"; 109 | __webpack_require__.r(__webpack_exports__); 110 | 111 | // CONCATENATED MODULE: ./src/asset-shapes.ts 112 | /** 113 | * アセットを含むオブジェクトです。このクラスは将来変更する可能性が高いので deprecated とします。 114 | * 利用しないでください。 115 | * @type {{}} 116 | */ 117 | var Assets = {}; 118 | var asset_shapes_images = {}; 119 | var asset_shapes_createjs = window["createjs"]; 120 | var ss = {}; 121 | (function (lib, img, cjs, ss) { 122 | var p; // shortcut to reference prototypes 123 | // library properties: 124 | lib.properties = { 125 | width: 550, 126 | height: 400, 127 | fps: 24, 128 | color: "#999999", 129 | manifest: [] 130 | }; 131 | // symbols: 132 | (lib.triangle = function () { 133 | this.initialize(); 134 | // レイヤー 1 135 | this.shape = new cjs.Shape(); 136 | this.shape.graphics 137 | .beginFill("#FFFFFF") 138 | .beginStroke() 139 | .moveTo(-0.7, -27.8) 140 | .lineTo(32, 27.1) 141 | .lineTo(-32, 27.8) 142 | .closePath(); 143 | this.shape.setTransform(0, -7); 144 | this.addChild(this.shape); 145 | }).prototype = p = new cjs.Container(); 146 | p.nominalBounds = new cjs.Rectangle(-32, -34.8, 64, 55.7); 147 | (lib.star_10 = function () { 148 | this.initialize(); 149 | // レイヤー 1 150 | this.shape = new cjs.Shape(); 151 | this.shape.graphics 152 | .beginFill("#FFFFFF") 153 | .beginStroke() 154 | .moveTo(-4.3, 18.3) 155 | .lineTo(-19.9, 29.3) 156 | .lineTo(-14.1, 10.3) 157 | .lineTo(-32, 10.3) 158 | .lineTo(-19.7, 0.7) 159 | .lineTo(-31.2, -8.7) 160 | .lineTo(-15.2, -8.8) 161 | .lineTo(-21.7, -26.4) 162 | .lineTo(-5.4, -16.4) 163 | .lineTo(-0.2, -31.8) 164 | .lineTo(4.4, -17.6) 165 | .lineTo(17.8, -27.4) 166 | .lineTo(13.1, -8.5) 167 | .lineTo(30.3, -8.1) 168 | .lineTo(19.9, 0.1) 169 | .lineTo(32, 8.4) 170 | .lineTo(12.8, 9.5) 171 | .lineTo(18.2, 29.8) 172 | .lineTo(4.9, 20) 173 | .lineTo(1.4, 31.8) 174 | .closePath(); 175 | this.addChild(this.shape); 176 | }).prototype = p = new cjs.Container(); 177 | p.nominalBounds = new cjs.Rectangle(-32, -31.7, 64, 63.6); 178 | (lib.star = function () { 179 | this.initialize(); 180 | // レイヤー 1 181 | this.shape = new cjs.Shape(); 182 | this.shape.graphics 183 | .beginFill("#FFFFFF") 184 | .beginStroke() 185 | .moveTo(-0.2, 17.3) 186 | .lineTo(-20.2, 31.5) 187 | .lineTo(-13, 7.4) 188 | .lineTo(-32, -8) 189 | .lineTo(-7.8, -8.4) 190 | .lineTo(0.3, -32) 191 | .lineTo(8, -8.2) 192 | .lineTo(32, -7.4) 193 | .lineTo(12.8, 7.5) 194 | .lineTo(19.4, 32) 195 | .closePath(); 196 | this.addChild(this.shape); 197 | }).prototype = p = new cjs.Container(); 198 | p.nominalBounds = new cjs.Rectangle(-32, -32, 64, 64); 199 | (lib.square = function () { 200 | this.initialize(); 201 | // レイヤー 1 202 | this.shape = new cjs.Shape(); 203 | this.shape.graphics 204 | .beginFill() 205 | .beginStroke("#FFFFFF") 206 | .setStrokeStyle(8, 1, 1) 207 | .moveTo(-32, -32) 208 | .lineTo(32, -32) 209 | .lineTo(32, 32) 210 | .lineTo(-32, 32) 211 | .closePath(); 212 | this.addChild(this.shape); 213 | }).prototype = p = new cjs.Container(); 214 | p.nominalBounds = new cjs.Rectangle(-36, -36, 72, 72); 215 | (lib.reverse_blur_circle = function () { 216 | this.initialize(); 217 | // レイヤー 1 218 | this.shape = new cjs.Shape(); 219 | this.shape.graphics 220 | .beginFill() 221 | .beginStroke("#FFFFFF") 222 | .setStrokeStyle(8, 1, 1) 223 | .moveTo(32, 0) 224 | .curveTo(32, 13.2, 22.6, 22.6) 225 | .curveTo(13.3, 32, 0, 32) 226 | .curveTo(-13.2, 32, -22.7, 22.6) 227 | .curveTo(-32, 13.2, -32, 0) 228 | .curveTo(-32, -13.3, -22.7, -22.7) 229 | .curveTo(-13.2, -32, 0, -32) 230 | .curveTo(13.3, -32, 22.6, -22.7) 231 | .curveTo(32, -13.3, 32, 0) 232 | .closePath(); 233 | this.addChild(this.shape); 234 | }).prototype = p = new cjs.Container(); 235 | p.nominalBounds = new cjs.Rectangle(-36, -36, 72, 72); 236 | (lib.kirakira2 = function () { 237 | this.initialize(); 238 | // レイヤー 1 239 | this.shape = new cjs.Shape(); 240 | this.shape.graphics 241 | .beginFill("#FFFFFF") 242 | .beginStroke() 243 | .moveTo(-4, 9.5) 244 | .curveTo(-7.8, 0, -13.4, -0.1) 245 | .curveTo(-7.8, -0.2, -4, -9.9) 246 | .curveTo(-0.1, -19.2, 0, -32) 247 | .curveTo(0.1, -19.2, 4, -9.9) 248 | .curveTo(8, -0.2, 13.4, -0.1) 249 | .curveTo(8, 0, 4, 9.5) 250 | .curveTo(0.1, 19, 0, 32) 251 | .curveTo(-0.1, 19, -4, 9.5) 252 | .closePath(); 253 | this.addChild(this.shape); 254 | }).prototype = p = new cjs.Container(); 255 | p.nominalBounds = new cjs.Rectangle(-13.4, -32, 26.8, 64); 256 | (lib.kirakira = function () { 257 | this.initialize(); 258 | // レイヤー 1 259 | this.shape = new cjs.Shape(); 260 | this.shape.graphics 261 | .beginFill("#FFFFFF") 262 | .beginStroke() 263 | .moveTo(-9.6, 9.3) 264 | .curveTo(-18.9, 0, -32, -0.1) 265 | .curveTo(-18.9, -0.2, -9.6, -9.6) 266 | .curveTo(-0.2, -19, -0.1, -32) 267 | .curveTo(0, -19, 9.4, -9.6) 268 | .curveTo(18.9, -0.2, 32, -0.1) 269 | .curveTo(18.9, 0, 9.4, 9.3) 270 | .curveTo(0, 18.8, -0.1, 32) 271 | .curveTo(-0.2, 18.8, -9.6, 9.3) 272 | .closePath(); 273 | this.addChild(this.shape); 274 | }).prototype = p = new cjs.Container(); 275 | p.nominalBounds = new cjs.Rectangle(-32, -32, 64, 64); 276 | (lib.heart = function () { 277 | this.initialize(); 278 | // レイヤー 1 279 | this.shape = new cjs.Shape(); 280 | this.shape.graphics 281 | .beginFill("#FFFFFF") 282 | .beginStroke() 283 | .moveTo(-20.2, 10) 284 | .lineTo(-24.8, 3.5) 285 | .curveTo(-27, 0.1, -28.5, -3.1) 286 | .curveTo(-30.1, -6.4, -31.1, -9.5) 287 | .curveTo(-32, -13, -32, -16) 288 | .curveTo(-32, -19.7, -30.4, -22.7) 289 | .curveTo(-29.1, -25.4, -26.6, -27.4) 290 | .curveTo(-24, -29.1, -21, -30.1) 291 | .curveTo(-18.1, -31.1, -15, -31.1) 292 | .curveTo(-11.7, -31.1, -8.8, -29.9) 293 | .curveTo(-6.4, -29, -4.5, -27.4) 294 | .curveTo(-3, -25.9, -1.7, -23.9) 295 | .lineTo(0, -20.8) 296 | .lineTo(1.7, -23.9) 297 | .curveTo(3, -25.9, 4.5, -27.4) 298 | .curveTo(6.6, -29.1, 8.8, -29.9) 299 | .curveTo(11.7, -31.1, 15.2, -31.1) 300 | .curveTo(18.4, -31.1, 21.3, -30.1) 301 | .curveTo(24.2, -29.1, 26.7, -27.2) 302 | .curveTo(29.1, -25.3, 30.5, -22.6) 303 | .curveTo(32, -19.7, 32, -16.1) 304 | .curveTo(32, -13.3, 31, -9.7) 305 | .curveTo(30.2, -6.5, 28.5, -3.2) 306 | .curveTo(27.1, 0, 24.9, 3.3) 307 | .lineTo(20.3, 9.7) 308 | .curveTo(13.4, 17.7, 9.7, 21.6) 309 | .lineTo(0, 31) 310 | .curveTo(-13.6, 18.3, -20.2, 10) 311 | .closePath(); 312 | this.addChild(this.shape); 313 | }).prototype = p = new cjs.Container(); 314 | p.nominalBounds = new cjs.Rectangle(-32, -31, 64, 62.1); 315 | (lib.flower = function () { 316 | this.initialize(); 317 | // レイヤー 1 318 | this.shape = new cjs.Shape(); 319 | this.shape.graphics 320 | .beginFill("#FFFFFF") 321 | .beginStroke() 322 | .moveTo(4, 27.3) 323 | .curveTo(0.5, 23.7, 0.5, 18.9) 324 | .lineTo(0.5, 15.2) 325 | .lineTo(-0.5, 15.2) 326 | .lineTo(-0.7, 18.9) 327 | .curveTo(-0.9, 24, -4.1, 27.6) 328 | .curveTo(-7.4, 31.1, -12.1, 31.1) 329 | .curveTo(-17, 31.1, -20.8, 27.5) 330 | .curveTo(-24.7, 23.7, -24.7, 19.1) 331 | .curveTo(-24.7, 15.3, -22.2, 12.1) 332 | .curveTo(-19.7, 8.8, -16.1, 7.7) 333 | .lineTo(-12.5, 6.4) 334 | .lineTo(-12.7, 5.8) 335 | .lineTo(-13, 5.4) 336 | .lineTo(-16.5, 6.6) 337 | .lineTo(-20.2, 7.1) 338 | .curveTo(-25.3, 7.1, -28.7, 4) 339 | .curveTo(-32, 0.7, -32, -4.1) 340 | .curveTo(-32, -9.4, -28.7, -13) 341 | .curveTo(-25.5, -16.8, -20.6, -16.8) 342 | .curveTo(-17.8, -16.8, -15, -15.4) 343 | .curveTo(-12.2, -14, -10.5, -11.6) 344 | .lineTo(-8.4, -8.7) 345 | .lineTo(-8, -8.8) 346 | .lineTo(-7.4, -9.3) 347 | .lineTo(-9.6, -12.2) 348 | .curveTo(-10.7, -14, -11.3, -15.8) 349 | .curveTo(-11.9, -17.9, -12, -19.9) 350 | .curveTo(-12, -24.7, -8.5, -28) 351 | .curveTo(-5.3, -31.1, -0.1, -31.1) 352 | .curveTo(5.2, -31.1, 8.5, -28) 353 | .curveTo(11.7, -24.7, 11.8, -19.9) 354 | .curveTo(11.7, -17.7, 11.2, -15.7) 355 | .curveTo(10.7, -13.8, 9.5, -12.2) 356 | .lineTo(7.4, -9.3) 357 | .lineTo(7.8, -9) 358 | .lineTo(8.2, -8.7) 359 | .lineTo(10.5, -11.6) 360 | .curveTo(12.2, -14, 14.8, -15.4) 361 | .curveTo(17.6, -16.8, 20.4, -16.8) 362 | .curveTo(25.3, -16.8, 28.5, -13) 363 | .curveTo(32, -9.4, 32, -4.1) 364 | .curveTo(32, 0.8, 28.5, 4) 365 | .curveTo(25.3, 7.1, 20, 7.1) 366 | .lineTo(16.4, 6.6) 367 | .lineTo(12.9, 5.5) 368 | .curveTo(12.8, 5.6, 12.8, 5.6) 369 | .curveTo(12.7, 5.7, 12.7, 5.7) 370 | .curveTo(12.7, 5.8, 12.7, 5.8) 371 | .curveTo(12.7, 5.9, 12.7, 6) 372 | .lineTo(12.5, 6.4) 373 | .lineTo(15.9, 7.7) 374 | .curveTo(19.7, 9.1, 22.1, 12.2) 375 | .curveTo(24.5, 15.3, 24.5, 19.1) 376 | .curveTo(24.5, 23.7, 20.8, 27.5) 377 | .curveTo(16.9, 31.1, 11.9, 31.1) 378 | .curveTo(7.4, 31.1, 4, 27.3) 379 | .closePath() 380 | .moveTo(-7.7, -5.9) 381 | .curveTo(-10.9, -2.7, -10.9, 1.8) 382 | .curveTo(-10.9, 6.3, -7.7, 9.4) 383 | .curveTo(-4.6, 12.5, -0.1, 12.5) 384 | .curveTo(4.4, 12.5, 7.6, 9.4) 385 | .curveTo(10.6, 6.3, 10.6, 1.8) 386 | .curveTo(10.6, -2.7, 7.6, -5.9) 387 | .curveTo(4.4, -9, -0.1, -9) 388 | .curveTo(-4.6, -9, -7.7, -5.9) 389 | .closePath(); 390 | this.addChild(this.shape); 391 | }).prototype = p = new cjs.Container(); 392 | p.nominalBounds = new cjs.Rectangle(-32, -31, 64, 62.2); 393 | (lib.circle = function () { 394 | this.initialize(); 395 | // レイヤー 1 396 | this.shape = new cjs.Shape(); 397 | this.shape.graphics 398 | .beginFill("#FFFFFF") 399 | .beginStroke() 400 | .drawEllipse(-10.8, -10.8, 21.7, 21.7); 401 | this.shape.setTransform(0, 0, 2.949, 2.949); 402 | this.addChild(this.shape); 403 | }).prototype = p = new cjs.Container(); 404 | p.nominalBounds = new cjs.Rectangle(-32, -32, 64, 64); 405 | (lib.blur_circle = function () { 406 | this.initialize(); 407 | // レイヤー 1 408 | this.shape = new cjs.Shape(); 409 | this.shape.graphics 410 | .beginRadialGradientFill(["#FFFFFF", "rgba(255,255,255,0)"], [0, 1], 0, 0, 0, 0, 0, 11) 411 | .beginStroke() 412 | .drawEllipse(-10.8, -10.8, 21.7, 21.7); 413 | this.shape.setTransform(0, 0, 3, 3); 414 | this.addChild(this.shape); 415 | }).prototype = p = new cjs.Container(); 416 | p.nominalBounds = new cjs.Rectangle(-32.5, -32.5, 65.1, 65.1); 417 | // stage content: 418 | (lib.assetshapes = function () { 419 | this.initialize(); 420 | // triangle 421 | this.instance = new lib.triangle(); 422 | this.instance.setTransform(323.6, 39.6); 423 | // square 424 | this.instance_1 = new lib.square(); 425 | this.instance_1.setTransform(518, 151.5); 426 | // kirakira2 427 | this.instance_2 = new lib.kirakira2(); 428 | this.instance_2.setTransform(420.8, 32.6); 429 | // kirakira 430 | this.instance_3 = new lib.kirakira(); 431 | this.instance_3.setTransform(32, 151.5); 432 | // flower 433 | this.instance_4 = new lib.flower(); 434 | this.instance_4.setTransform(396.5, 151.5); 435 | // star_10 436 | this.instance_5 = new lib.star_10(); 437 | this.instance_5.setTransform(518, 32.6); 438 | // star 439 | this.instance_6 = new lib.star(); 440 | this.instance_6.setTransform(275, 151.5); 441 | // circle 442 | this.instance_7 = new lib.circle(); 443 | this.instance_7.setTransform(226.4, 32.6); 444 | // reverse_blur_circle 445 | this.instance_8 = new lib.reverse_blur_circle(); 446 | this.instance_8.setTransform(153.5, 151.5); 447 | // blur_circle 448 | this.instance_9 = new lib.blur_circle(); 449 | this.instance_9.setTransform(129.2, 32.6); 450 | // heart 451 | this.instance_10 = new lib.heart(); 452 | this.instance_10.setTransform(32, 32.6); 453 | this.addChild(this.instance_10, this.instance_9, this.instance_8, this.instance_7, this.instance_6, this.instance_5, this.instance_4, this.instance_3, this.instance_2, this.instance_1, this.instance); 454 | }).prototype = p = new cjs.Container(); 455 | p.nominalBounds = new cjs.Rectangle(275, 200, 554, 187.5); 456 | })((Assets = Assets || {}), (asset_shapes_images = asset_shapes_images || {}), (asset_shapes_createjs = asset_shapes_createjs || {}), (ss = ss || {})); 457 | 458 | 459 | // CONCATENATED MODULE: ./src/assets/shape-generator.ts 460 | 461 | /** 462 | * シェイプをインスタンス化するクラスです。 463 | * ParticleJSの内部的な利用以外では使用しないことをオススメします。 464 | */ 465 | var shape_generator_ShapeGenerator = /** @class */ (function () { 466 | function ShapeGenerator() { 467 | } 468 | /** 469 | * シェイプインスタンスを作成します。 470 | * @param {string} id 471 | * @returns {createjs.Container} 472 | * @see data-shape.ts 473 | */ 474 | ShapeGenerator.prototype.generateShape = function (id) { 475 | var cls = Assets[id]; 476 | return new cls(); 477 | }; 478 | return ShapeGenerator; 479 | }()); 480 | 481 | 482 | // CONCATENATED MODULE: ./src/data/data-color.ts 483 | /** 484 | * 色の情報を扱うデータ型クラスです。 485 | */ 486 | var ColorData = /** @class */ (function () { 487 | function ColorData() { 488 | /** 489 | * 色相を表します(0-360)。 490 | * @type {number} 491 | */ 492 | this.hue = 0; 493 | /** 494 | * 色相のばらつきを示します。 495 | * @type {number} 496 | */ 497 | this.hueVariance = 0; 498 | /** 499 | * 彩度です(0-100)。 500 | * @type {number} 501 | */ 502 | this.saturation = 0; 503 | /** 504 | * 彩度のばらつきです。 505 | * @type {number} 506 | */ 507 | this.saturationVariance = 0; 508 | /** 509 | * 輝度です(0-100)。 510 | * @type {number} 511 | */ 512 | this.luminance = 0; 513 | /** 514 | * 輝度のばらつきです。 515 | * @type {number} 516 | */ 517 | this.luminanceVariance = 0; 518 | } 519 | return ColorData; 520 | }()); 521 | 522 | 523 | // CONCATENATED MODULE: ./src/enum/alpha-curve-type.ts 524 | /** 525 | * 透明度の計算式の種類です。 526 | */ 527 | var AlphaCurveType; 528 | (function (AlphaCurveType) { 529 | /** 530 | * 通常の透明度の計算式です。 531 | */ 532 | AlphaCurveType[AlphaCurveType["Normal"] = 0] = "Normal"; 533 | /** 534 | * ランダムです。 535 | */ 536 | AlphaCurveType[AlphaCurveType["Random"] = 1] = "Random"; 537 | })(AlphaCurveType || (AlphaCurveType = {})); 538 | 539 | // CONCATENATED MODULE: ./src/data/data-drawing.ts 540 | 541 | 542 | /** 543 | * パーティクルの描画情報を扱うデータ型クラスです。 544 | */ 545 | var data_drawing_DrawingData = /** @class */ (function () { 546 | /** 547 | * コンストラクターです。 548 | * @param json 549 | */ 550 | function DrawingData(json) { 551 | if (json === void 0) { json = null; } 552 | /** 553 | * 背景色です。 554 | * @type {string} 555 | */ 556 | this.bgColor = ""; 557 | /** 558 | * 幅です。 559 | * @type {number} 560 | */ 561 | this.width = 0.0; 562 | /** 563 | * 高さです。 564 | * @type {number} 565 | */ 566 | this.height = 0.0; 567 | /** 568 | * 1秒あたりの発生数です。 569 | * @type {number} 570 | */ 571 | this.emitFrequency = 0; 572 | /** 573 | * 発生基準位置 - X座標 (px)です。 574 | * @type {number} 575 | */ 576 | this.startX = 0; 577 | /** 578 | * 発生基準位置 - X座標のばらつき (px)です。 579 | * @type {number} 580 | */ 581 | this.startXVariance = 0; 582 | /** 583 | * 発生位置 - Y座標 (px)です。 584 | * @type {number} 585 | */ 586 | this.startY = 0; 587 | /** 588 | * 発生位置 - Y座標のばらつき (px)です。 589 | * @type {number} 590 | */ 591 | this.startYVariance = 0; 592 | /** 593 | * 初期速度 - 方向 (度)です。 594 | * @type {number} 595 | */ 596 | this.initialDirection = 0; 597 | /** 598 | * 初期速度 - 方向のばらつき (度)です。 599 | * @type {number} 600 | */ 601 | this.initialDirectionVariance = 0; 602 | /** 603 | * 初期速度 (px)です。 604 | * @type {number} 605 | */ 606 | this.initialSpeed = 0; 607 | /** 608 | * 初期速度のばらつきです。 609 | * @type {number} 610 | */ 611 | this.initialSpeedVariance = 0; 612 | /** 613 | * 摩擦です。 614 | * @type {number} 615 | */ 616 | this.friction = 0; 617 | /** 重力です。 618 | * @type {number} 619 | */ 620 | this.accelerationSpeed = 0; 621 | /** 622 | * 重力方向 (度)です。 623 | * @type {number} 624 | */ 625 | this.accelerationDirection = 0; 626 | /** 627 | * 開始時のスケールです。 628 | * @type {number} 629 | */ 630 | this.startScale = 0; 631 | /** 632 | * 開始時のスケールのばらつきです。 633 | * @type {number} 634 | */ 635 | this.startScaleVariance = 0; 636 | /** 637 | * 終了時のスケールです。 638 | * @type {number} 639 | */ 640 | this.finishScale = 0; 641 | /** 642 | * 終了時のスケールのばらつきです。 643 | * @type {number} 644 | */ 645 | this.finishScaleVariance = 0; 646 | /** 647 | * ライフ(フレーム数)です。 648 | * @type {number} 649 | */ 650 | this.lifeSpan = 0; 651 | /** 652 | * ライフのばらつき(フレーム数)です。 653 | * @type {number} 654 | */ 655 | /** */ this.lifeSpanVariance = 0; 656 | /** 657 | * 開始時の透明度です。 658 | * @type {number} 659 | */ 660 | this.startAlpha = 0; 661 | /** 662 | * 開始時の透明度のばらつきです。 663 | * @type {number} 664 | */ 665 | this.startAlphaVariance = 0; 666 | /** 667 | * 終了時の透明度です。 668 | * @type {number} 669 | */ 670 | this.finishAlpha = 0; 671 | /** 672 | * 終了時の透明度のばらつきです。 673 | * @type {number} 674 | */ 675 | this.finishAlphaVariance = 0; 676 | /** 677 | * 使用するシェイプID設定です。 678 | * @type {string[]} 679 | */ 680 | this.shapeIdList = [""]; 681 | /** 682 | * 初期カラーの設定です。 683 | * @type {ColorData} 684 | */ 685 | this.startColor = new ColorData(); 686 | /** 687 | * シェイプを加算合成します。 688 | * @type {boolean} 689 | */ 690 | this.blendMode = true; 691 | /** 692 | * 透明度の計算式の設定です。 693 | * @type {AlphaCurveType.Normal} 694 | */ 695 | this.alphaCurveType = AlphaCurveType.Normal; 696 | if (json) { 697 | this.importFromJson(json); 698 | } 699 | } 700 | /** 701 | * パーティクルの設定をJSON形式のオブジェクトから読み込みます。 702 | * @param json 703 | */ 704 | DrawingData.prototype.importFromJson = function (json) { 705 | var checkSkipKey = function (key) { 706 | return key == "width" || key == "height" || key == "bgColor"; 707 | }; 708 | this.setData(json, checkSkipKey); 709 | }; 710 | /** 711 | * パーティクルの設定をDrawingDataオブジェクトから読み込みます 712 | * @param {DrawingData} obj 713 | */ 714 | DrawingData.prototype.importData = function (obj) { 715 | var checkSkipKey = function (key) { 716 | return (key == "width" || key == "height" || key == "startX" || key == "startY"); 717 | }; 718 | this.setData(obj, checkSkipKey); 719 | }; 720 | DrawingData.checkReflectEnable = function () { 721 | try { 722 | var result = !!(Reflect && Reflect.has); 723 | return result; 724 | } 725 | catch (e) { 726 | return false; 727 | } 728 | }; 729 | DrawingData.prototype.setData = function (obj, checkSkipKey) { 730 | if (DrawingData.ENABLE_REFLECT) { 731 | for (var key in obj) { 732 | // 無視するプロパティー 733 | if (checkSkipKey(key)) { 734 | continue; 735 | } 736 | if (Reflect.has(this, key) == true) { 737 | var val = obj[key]; 738 | // イマドキなプロパティー反映方法を適用 ICS-Ikeda 2016-01-22 739 | Reflect.set(this, key, val); 740 | } 741 | } 742 | } 743 | else { 744 | var self_1 = this; 745 | for (var key in obj) { 746 | // 無視するプロパティー 747 | if (checkSkipKey(key)) { 748 | continue; 749 | } 750 | if (this.hasOwnProperty(key)) { 751 | self_1[key] = obj[key]; 752 | } 753 | } 754 | } 755 | }; 756 | DrawingData.ENABLE_REFLECT = DrawingData.checkReflectEnable(); 757 | return DrawingData; 758 | }()); 759 | 760 | 761 | // CONCATENATED MODULE: ./src/data/data-shape.ts 762 | /** 763 | * Created by 「asset-shapes.fla」/「generate-assets.jsfl」 on Wed Jan 20 2016 764 | * !!!!!このコードはJSFLから自動生成されたコードです。修正する場合はご注意ください。!!!!! 765 | */ 766 | var ShapeData = /** @class */ (function () { 767 | function ShapeData() { 768 | this.assetList = [ 769 | "blur_circle", 770 | "circle", 771 | "flower", 772 | "heart", 773 | "kirakira", 774 | "kirakira2", 775 | "reverse_blur_circle", 776 | "square", 777 | "star", 778 | "star_10", 779 | "triangle" 780 | ]; 781 | } 782 | return ShapeData; 783 | }()); 784 | 785 | 786 | // CONCATENATED MODULE: ./src/enum/shape-type.ts 787 | /** 788 | * シェイプの種類を定義したクラスです。 789 | */ 790 | var ShapeType = /** @class */ (function () { 791 | function ShapeType() { 792 | } 793 | /** 794 | * ふわっとした円のシェイプIDです。 795 | * @type {string} 796 | */ 797 | ShapeType.BLUR_CIRCLE = "blur_circle"; 798 | /** 799 | * 円のシェイプIDです。 800 | * @type {string} 801 | */ 802 | ShapeType.CIRCLE = "circle"; 803 | /** 804 | * 花の形のシェイプIDです。 805 | * @type {string} 806 | */ 807 | ShapeType.FLOWER = "flower"; 808 | /** 809 | * ハートの形のシェイプIDです。 810 | * @type {string} 811 | */ 812 | ShapeType.HEART = "heart"; 813 | /** 814 | * キラキラ(1)のシェイプIDです。 815 | * @type {string} 816 | */ 817 | ShapeType.KIRAKIRA = "kirakira"; 818 | /** 819 | * キラキラ(2)のシェイプIDです。 820 | * @type {string} 821 | */ 822 | ShapeType.KIRAKIRA2 = "kirakira2"; 823 | /** 824 | * 中央が繰り抜かれた円のシェイプIDです。 825 | * @type {string} 826 | */ 827 | ShapeType.REVERSE_CIRCLE = "reverse_blur_circle"; 828 | /** 829 | * 四角形のシェイプIDです。 830 | * @type {string} 831 | */ 832 | ShapeType.SQUARE = "square"; 833 | /** 834 | * 星形のシェイプIDです。 835 | * @type {string} 836 | */ 837 | ShapeType.STAR = "star"; 838 | /** 839 | * 星形(棘が10)のシェイプIDです。 840 | * @type {string} 841 | */ 842 | ShapeType.STAR_10 = "star_10"; 843 | /** 844 | * 三角形のシェイプIDです。 845 | * @type {string} 846 | */ 847 | ShapeType.TRIANGLE = "triangle"; 848 | return ShapeType; 849 | }()); 850 | 851 | 852 | // CONCATENATED MODULE: ./src/particle/particle.ts 853 | 854 | /** 855 | * パーティクルエミッターのバリューオブジェクトのクラスです。 856 | */ 857 | var particle_Particle = /** @class */ (function () { 858 | /** 859 | * コンストラクターです。 860 | */ 861 | function Particle() { 862 | this.particleShape = new createjs.Container(); 863 | this.startColor = new ColorData(); 864 | } 865 | return Particle; 866 | }()); 867 | 868 | 869 | // CONCATENATED MODULE: ./src/particle/particle-system.ts 870 | 871 | 872 | 873 | 874 | /** 875 | * ParticleJSのバージョン情報を示します。 876 | * @type {string} 877 | */ 878 | var VERSION = "1.0.0"; 879 | /** 880 | * 現在のバージョンと互換性があるかどうかをチェックします。 881 | * @param value 882 | */ 883 | function checkVersion(value) { 884 | var currentVersion = VERSION.split("."); 885 | // ここはそもそもこない想定だけれども。 886 | if (currentVersion.length <= 2) { 887 | console.log("バージョン表記エラーが発生しました。"); 888 | return false; 889 | } 890 | // versionが空の場合 891 | if (!value) { 892 | if (currentVersion[0] == "0" && currentVersion[1] == "1") { 893 | //「0.1.▲」のバージョンのParticleSystemは問題なく動作させる 894 | return true; 895 | } 896 | else { 897 | // バージョンが空の場合はエラー 898 | return false; 899 | } 900 | } 901 | var jsonVersion = value.split("."); 902 | // メジャーバージョンのチェック 903 | if (currentVersion[0] != jsonVersion[0]) { 904 | return false; 905 | } 906 | // マイナーバージョンのチェック 907 | if (currentVersion[1] != jsonVersion[1]) { 908 | return false; 909 | } 910 | // リビジョン番号が同じなら互換性があると行って良い 911 | return true; 912 | } 913 | /** 914 | * パーティクルの制御クラスです。 915 | */ 916 | var particle_system_ParticleSystem = /** @class */ (function () { 917 | function ParticleSystem() { 918 | /** @private */ 919 | this._frameCount = 0; 920 | this._drawingData = new data_drawing_DrawingData(); 921 | this._particlesPool = []; 922 | this._activeParticles = []; 923 | this.container = new createjs.Container(); 924 | // パフォーマンス向上の基本テクニック 925 | this.container.mouseChildren = false; 926 | this.container.mouseEnabled = false; 927 | this._playing = true; 928 | this.shapeGenerator = new shape_generator_ShapeGenerator(); 929 | } 930 | /** 931 | * パーティクルのアニメーションが再生されているかどうかを示します。 932 | * @returns {boolean} 933 | */ 934 | ParticleSystem.prototype.isPlaying = function () { 935 | return this._playing; 936 | }; 937 | /** 938 | * パーティクルの設定データを取り込みます。 939 | */ 940 | ParticleSystem.prototype.setData = function (drawingData) { 941 | this._drawingData = drawingData; 942 | }; 943 | /** 944 | * パーティクルの設定データをJson形式のオブジェクトで取り込みます。 945 | */ 946 | ParticleSystem.prototype.importFromJson = function (jsonObject) { 947 | if (!checkVersion(jsonObject["VERSION"] || "")) { 948 | console.warn("読み込んだJSONファイルとParticleJSのバージョンが異なります。\n" + 949 | "https://github.com/ics-creative/ParticleJS"); 950 | } 951 | this._drawingData.importFromJson(jsonObject); 952 | }; 953 | /** 954 | * パーティクルシステムの更新を行います。 955 | */ 956 | ParticleSystem.prototype.update = function () { 957 | if (!this._playing) { 958 | return; 959 | } 960 | this.emit(); 961 | this.animate(); 962 | this.lifeCheck(); 963 | }; 964 | /** 965 | * パーティクルの動きを更新します。 966 | */ 967 | ParticleSystem.prototype.animate = function () { 968 | var rad = createjs.Matrix2D.DEG_TO_RAD * this._drawingData.accelerationDirection; 969 | var accX = Math.cos(rad) * this._drawingData.accelerationSpeed; 970 | var accY = Math.sin(rad) * this._drawingData.accelerationSpeed; 971 | for (var i = 0; i < this._activeParticles.length; i++) { 972 | var particle = this._activeParticles[i]; 973 | // 加速度計算 (重力) 974 | particle.vx += accX; 975 | particle.vy += accY; 976 | // 摩擦計算 977 | particle.vx *= 1 - this._drawingData.friction; 978 | particle.vy *= 1 - this._drawingData.friction; 979 | // 座標計算 980 | particle.x += particle.vx; 981 | particle.y += particle.vy; 982 | // 座標の適用 983 | particle.particleShape.x = particle.x; 984 | particle.particleShape.y = particle.y; 985 | var lifeParcent = particle.currentLife / particle.totalLife; 986 | switch (Number(particle.alphaCurveType)) { 987 | case AlphaCurveType.Random: 988 | var min = Math.min(particle.finishAlpha, particle.startAlpha); 989 | var max = Math.max(particle.finishAlpha, particle.startAlpha); 990 | particle.particleShape.alpha = Math.random() * (max - min) + min; 991 | break; 992 | case AlphaCurveType.Normal: 993 | default: 994 | var alpha = this.calcCurrentValue(particle.startAlpha, particle.finishAlpha, lifeParcent); 995 | particle.particleShape.alpha = alpha; 996 | break; 997 | } 998 | var scale = this.calcCurrentValue(particle.startScale, particle.finishScale, lifeParcent); 999 | particle.particleShape.scaleX = particle.particleShape.scaleY = scale; 1000 | // パーティクルが死んでいたら、オブジェクトプールに移動 1001 | if (particle.currentLife < 0) { 1002 | particle.isAlive = false; 1003 | } 1004 | // 年齢追加 1005 | particle.currentLife--; 1006 | } 1007 | }; 1008 | /** 1009 | * パーティクルが生きているか確認します。 1010 | */ 1011 | ParticleSystem.prototype.lifeCheck = function () { 1012 | for (var i = 0; i < this._activeParticles.length; i++) { 1013 | // もしも死んでいたら、アクティブリストから外してプールに保存する。 1014 | if (!this._activeParticles[i].isAlive) { 1015 | var particle = this._activeParticles[i]; 1016 | this.container.removeChild(particle.particleShape); 1017 | this._activeParticles.splice(i, 1); 1018 | this._particlesPool.push(particle); 1019 | i--; 1020 | } 1021 | } 1022 | }; 1023 | /** 1024 | * パーティクルを全て削除します。 1025 | */ 1026 | ParticleSystem.prototype.clear = function () { 1027 | for (var i = 0; i < this._activeParticles.length; i++) { 1028 | var particle = this._activeParticles[i]; 1029 | particle.isAlive = false; 1030 | this.container.removeChild(particle.particleShape); 1031 | this._activeParticles.splice(i, 1); 1032 | this._particlesPool.push(particle); 1033 | i--; 1034 | } 1035 | }; 1036 | /** 1037 | * パーティクルシステムを破棄します。 1038 | */ 1039 | ParticleSystem.prototype.dispose = function () { 1040 | for (var i = 0; i < this._activeParticles.length; i++) { 1041 | var particle = this._activeParticles[i]; 1042 | particle.isAlive = false; 1043 | this.container.removeChild(particle.particleShape); 1044 | } 1045 | this._activeParticles.splice(0, this._activeParticles.length); 1046 | this._particlesPool.splice(0, this._particlesPool.length); 1047 | this._activeParticles = null; 1048 | this._particlesPool = null; 1049 | this.container = null; 1050 | }; 1051 | /** 1052 | * パーティクルの生成を行います。 1053 | */ 1054 | ParticleSystem.prototype.emit = function () { 1055 | // インターバルチェック 1056 | var framerate = Math.round(createjs.Ticker.framerate); 1057 | var frameInSec = this._frameCount % framerate; 1058 | var emitPerSec = this._drawingData.emitFrequency; 1059 | var loopInt = emitPerSec == 0 ? 0 : Math.floor(emitPerSec / framerate); 1060 | // ① 整数分の実行回数 1061 | for (var i = 0; i < loopInt; i++) { 1062 | this.emitParticle(); 1063 | } 1064 | // ② 小数点分の実行回数 1065 | var loopFloat = emitPerSec / framerate - loopInt; 1066 | // フレームレートより少ない場合、かつ、生成persecが0ではないとき 1067 | if (emitPerSec != 0 && frameInSec % Math.floor(1 / loopFloat) == 0) { 1068 | this.emitParticle(); 1069 | } 1070 | this._frameCount++; 1071 | if (this._frameCount >= framerate) { 1072 | this._frameCount = 0; 1073 | } 1074 | }; 1075 | /** 1076 | * 個々のパーティクルを生成し、パーティクルシステムに登録します。 1077 | * @returns {Particle} 1078 | */ 1079 | ParticleSystem.prototype.emitParticle = function () { 1080 | var particle = this.generateParticle(); 1081 | this.container.addChild(particle.particleShape); 1082 | this._activeParticles.push(particle); 1083 | }; 1084 | /** 1085 | * パーティクルを生成し、パラメーターを設定します。 1086 | * @returns {Particle} 1087 | */ 1088 | ParticleSystem.prototype.generateParticle = function () { 1089 | var particle = null; 1090 | if (this._particlesPool.length >= 1) { 1091 | particle = this._particlesPool.shift(); 1092 | } 1093 | else { 1094 | particle = new particle_Particle(); 1095 | } 1096 | this.setParticleParameter(particle); 1097 | return particle; 1098 | }; 1099 | /** 1100 | * パーティクルパラメータの設定を行います。 1101 | * @param particle 1102 | */ 1103 | ParticleSystem.prototype.setParticleParameter = function (particle) { 1104 | particle.particleShape.removeAllChildren(); 1105 | particle.isAlive = true; 1106 | particle.x = this.calcRandomValueWithVariance(this._drawingData.startX, this._drawingData.startXVariance, false); 1107 | particle.y = this.calcRandomValueWithVariance(this._drawingData.startY, this._drawingData.startYVariance, false); 1108 | this.generateShape(particle, this._drawingData.shapeIdList); 1109 | // 生存期間 1110 | particle.totalLife = Math.max(1, this.calcRandomValueWithVariance(this._drawingData.lifeSpan, this._drawingData.lifeSpanVariance, true)); 1111 | particle.currentLife = particle.totalLife; 1112 | // スピード 1113 | var speed = Math.max(0, this.calcRandomValueWithVariance(this._drawingData.initialSpeed, this._drawingData.initialSpeedVariance, false)); 1114 | var angle = createjs.Matrix2D.DEG_TO_RAD * 1115 | this.calcRandomValueWithVariance(this._drawingData.initialDirection, this._drawingData.initialDirectionVariance, false); 1116 | particle.vx = Math.cos(angle) * speed; 1117 | particle.vy = Math.sin(angle) * speed; 1118 | // アルファ 1119 | particle.startAlpha = this.calcRandomValueWithRange(0.0, 1.0, this.calcRandomValueWithVariance(this._drawingData.startAlpha, this._drawingData.startAlphaVariance, false)); 1120 | particle.finishAlpha = this.calcRandomValueWithRange(0.0, 1.0, this.calcRandomValueWithVariance(this._drawingData.finishAlpha, this._drawingData.finishAlphaVariance, false)); 1121 | // スケール 1122 | particle.startScale = Math.max(0, this.calcRandomValueWithVariance(this._drawingData.startScale, this._drawingData.startScaleVariance, false)); 1123 | particle.finishScale = Math.max(0, this.calcRandomValueWithVariance(this._drawingData.finishScale, this._drawingData.finishScaleVariance, false)); 1124 | // ブレンドモードを設定 1125 | particle.particleShape.compositeOperation = 1126 | this._drawingData.blendMode == true ? "lighter" : null; 1127 | particle.alphaCurveType = this._drawingData.alphaCurveType; 1128 | }; 1129 | /** 1130 | * パーティクルに使用するシェイプを生成します。 1131 | * @param particle 1132 | * @param shapeIdList 1133 | */ 1134 | ParticleSystem.prototype.generateShape = function (particle, shapeIdList) { 1135 | particle.particleShape.removeAllChildren(); 1136 | var startColor = this._drawingData.startColor; 1137 | particle.startColor.hue = 1138 | this.calcRandomValueWithVariance(startColor.hue, startColor.hueVariance, false) % 360; 1139 | particle.startColor.luminance = this.calcRandomValueWithVariance(startColor.luminance, startColor.luminanceVariance, false); 1140 | particle.startColor.saturation = this.calcRandomValueWithVariance(startColor.saturation, startColor.saturationVariance, false); 1141 | var hue = Number(particle.startColor.hue); 1142 | var saturation = Number(particle.startColor.saturation); 1143 | var luminance = Number(particle.startColor.luminance); 1144 | var color = "hsl(" + hue + ", " + saturation + "%, " + luminance + "%)"; 1145 | var r = Math.floor(Math.random() * this._drawingData.shapeIdList.length); 1146 | var shapeId = this._drawingData.shapeIdList.length == 0 1147 | ? "" 1148 | : this._drawingData.shapeIdList[r]; 1149 | particle.colorCommand = null; 1150 | var container = (this.shapeGenerator.generateShape(shapeId)); 1151 | particle.particleShape.addChild(container); 1152 | var shape = container.getChildAt(0); // こういう作りにする 1153 | if (shape == null) { 1154 | return; 1155 | } 1156 | var instructions = shape.graphics.instructions; 1157 | if (instructions && instructions.length > 0) { 1158 | for (var i = 0; i < instructions.length; i++) { 1159 | var cmd = instructions[i]; 1160 | if (cmd instanceof createjs.Graphics.Fill) { 1161 | // 塗りのとき 1162 | // グラデーション塗りだったら 1163 | if (cmd.style instanceof CanvasGradient) { 1164 | // 昔のグラデーションを保持 1165 | var oldStyle = cmd.style; 1166 | var g = ParticleSystem.HELPER_GRAPHICS; 1167 | var newStyle = g.beginRadialGradientFill([color, "hsla(" + hue + ", " + saturation + "%, " + luminance + "%, 0)"], oldStyle.props.ratios, oldStyle.props.x0, oldStyle.props.y0, oldStyle.props.r0, oldStyle.props.x1, oldStyle.props.y1, oldStyle.props.r1).command; 1168 | instructions[i] = newStyle; 1169 | } 1170 | else { 1171 | // 単色塗りなら 1172 | cmd.style = color; 1173 | particle.colorCommand = cmd; 1174 | } 1175 | } 1176 | else if (cmd instanceof createjs.Graphics.Stroke) { 1177 | // 線のとき 1178 | cmd.style = color; 1179 | particle.colorCommand = cmd; 1180 | } 1181 | } 1182 | } 1183 | }; 1184 | /** 1185 | * 一時的にパーティクルの再生を停止します。 1186 | */ 1187 | ParticleSystem.prototype.pause = function () { 1188 | this._playing = false; 1189 | }; 1190 | /** 1191 | * pause()で停止したパーティクルの再生を再開します。 1192 | */ 1193 | ParticleSystem.prototype.resume = function () { 1194 | this._playing = true; 1195 | }; 1196 | /** 1197 | * 一定範囲の数値を計算します。 1198 | * @param minValue 1199 | * @param maxValue 1200 | * @param value 1201 | * @returns {number} 1202 | */ 1203 | ParticleSystem.prototype.calcRandomValueWithRange = function (minValue, maxValue, value) { 1204 | return Math.min(maxValue, Math.max(minValue, value)); 1205 | }; 1206 | /** 1207 | * ばらつきのある値を計算し取得します。 1208 | * @param value 基準値です。 1209 | * @param variance バラつきの範囲です。 1210 | * @param isInteger 整数であるかを指定します。 1211 | * @returns {number} 数値を返します。 1212 | */ 1213 | ParticleSystem.prototype.calcRandomValueWithVariance = function (value, variance, isInteger) { 1214 | var result = Number(value) + (Math.random() - 0.5) * variance; 1215 | if (isInteger == true) { 1216 | return Math.floor(result); 1217 | } 1218 | return result; 1219 | }; 1220 | /** 1221 | * 現在の年齢依存の数値を計算します。 1222 | * @param start 開始時の値です。 1223 | * @param end 終了時の値です。 1224 | * @param life 現在の寿命を示します。開始時は1.0で、終了時は0.0の想定です。 1225 | * @returns {number} 現在の値です。 1226 | */ 1227 | ParticleSystem.prototype.calcCurrentValue = function (start, end, life) { 1228 | return Number(start) * life + Number(end) * (1 - life); 1229 | }; 1230 | Object.defineProperty(ParticleSystem.prototype, "emitFrequency", { 1231 | /** 1232 | * 1秒あたりの発生数です。 1233 | * @returns {number} 1234 | */ 1235 | get: function () { 1236 | return this._drawingData.emitFrequency; 1237 | }, 1238 | /** 1239 | * 1秒あたりの発生数です。 1240 | * @param value 1241 | */ 1242 | set: function (value) { 1243 | this._drawingData.emitFrequency = value; 1244 | }, 1245 | enumerable: true, 1246 | configurable: true 1247 | }); 1248 | Object.defineProperty(ParticleSystem.prototype, "startX", { 1249 | /** 1250 | * 発生基準位置 - X座標 (px)です。 1251 | * @returns {number} 1252 | */ 1253 | get: function () { 1254 | return this._drawingData.startX; 1255 | }, 1256 | /** 1257 | * 発生基準位置 - X座標 (px)です。 1258 | * @param value 1259 | */ 1260 | set: function (value) { 1261 | this._drawingData.startX = value; 1262 | }, 1263 | enumerable: true, 1264 | configurable: true 1265 | }); 1266 | Object.defineProperty(ParticleSystem.prototype, "startXVariance", { 1267 | /** 1268 | * 発生基準位置 - X座標のばらつき (px)です。 1269 | * @returns {number} 1270 | */ 1271 | get: function () { 1272 | return this._drawingData.startX; 1273 | }, 1274 | /** 1275 | * 発生基準位置 - X座標のばらつき (px)です。 1276 | * @param value 1277 | */ 1278 | set: function (value) { 1279 | this._drawingData.startXVariance = value; 1280 | }, 1281 | enumerable: true, 1282 | configurable: true 1283 | }); 1284 | Object.defineProperty(ParticleSystem.prototype, "startY", { 1285 | /** 1286 | * 発生位置 - Y座標 (px)です。 1287 | * @returns {number} 1288 | */ 1289 | get: function () { 1290 | return this._drawingData.startY; 1291 | }, 1292 | /** 1293 | * 発生位置 - Y座標 (px)です。 1294 | * @param value 1295 | */ 1296 | set: function (value) { 1297 | this._drawingData.startY = value; 1298 | }, 1299 | enumerable: true, 1300 | configurable: true 1301 | }); 1302 | Object.defineProperty(ParticleSystem.prototype, "startYVariance", { 1303 | /** 1304 | * 発生基準位置 - X座標のばらつき (px)です。 1305 | * @returns {number} 1306 | */ 1307 | get: function () { 1308 | return this._drawingData.startYVariance; 1309 | }, 1310 | /** 1311 | * 発生基準位置 - X座標のばらつき (px)です。 1312 | * @param value 1313 | */ 1314 | set: function (value) { 1315 | this._drawingData.startYVariance = value; 1316 | }, 1317 | enumerable: true, 1318 | configurable: true 1319 | }); 1320 | Object.defineProperty(ParticleSystem.prototype, "initialDirection", { 1321 | /** 1322 | * 初期速度 - 方向 (度)です。 1323 | * @returns {number} 1324 | */ 1325 | get: function () { 1326 | return this._drawingData.initialDirection; 1327 | }, 1328 | /** 1329 | * 初期速度 - 方向 (度)です。 1330 | * @param value 1331 | */ 1332 | set: function (value) { 1333 | this._drawingData.initialDirection = value; 1334 | }, 1335 | enumerable: true, 1336 | configurable: true 1337 | }); 1338 | Object.defineProperty(ParticleSystem.prototype, "initialDirectionVariance", { 1339 | /** 1340 | * 初期速度 - 方向のばらつき (度)です。 1341 | * @returns {number} 1342 | */ 1343 | get: function () { 1344 | return this._drawingData.initialDirectionVariance; 1345 | }, 1346 | /** 1347 | * 初期速度 - 方向のばらつき (度)です。 1348 | * @param value 1349 | */ 1350 | set: function (value) { 1351 | this._drawingData.initialDirectionVariance = value; 1352 | }, 1353 | enumerable: true, 1354 | configurable: true 1355 | }); 1356 | Object.defineProperty(ParticleSystem.prototype, "initialSpeed", { 1357 | /** 1358 | * 初期速度 (px)です。 1359 | * @returns {number} 1360 | */ 1361 | get: function () { 1362 | return this._drawingData.initialSpeed; 1363 | }, 1364 | /** 1365 | * 初期速度 (px)です。 1366 | * @param value 1367 | */ 1368 | set: function (value) { 1369 | this._drawingData.initialSpeed = value; 1370 | }, 1371 | enumerable: true, 1372 | configurable: true 1373 | }); 1374 | Object.defineProperty(ParticleSystem.prototype, "initialSpeedVariance", { 1375 | /** 1376 | * 初期速度のばらつきです。 1377 | * @returns {number} 1378 | */ 1379 | get: function () { 1380 | return this._drawingData.initialSpeedVariance; 1381 | }, 1382 | /** 1383 | * 初期速度のばらつきです。 1384 | * @param value 1385 | */ 1386 | set: function (value) { 1387 | this._drawingData.initialSpeedVariance = value; 1388 | }, 1389 | enumerable: true, 1390 | configurable: true 1391 | }); 1392 | Object.defineProperty(ParticleSystem.prototype, "friction", { 1393 | /** 1394 | * 摩擦です。 1395 | * @returns {number} 1396 | */ 1397 | get: function () { 1398 | return this._drawingData.friction; 1399 | }, 1400 | /** 1401 | * 摩擦です。 1402 | * @param value 1403 | */ 1404 | set: function (value) { 1405 | this._drawingData.friction = value; 1406 | }, 1407 | enumerable: true, 1408 | configurable: true 1409 | }); 1410 | Object.defineProperty(ParticleSystem.prototype, "accelerationSpeed", { 1411 | /** 1412 | * 重力です。 1413 | * @returns {number} 1414 | */ 1415 | get: function () { 1416 | return this._drawingData.accelerationSpeed; 1417 | }, 1418 | /** 1419 | * 重力です。 1420 | * @param value 1421 | */ 1422 | set: function (value) { 1423 | this._drawingData.accelerationSpeed = value; 1424 | }, 1425 | enumerable: true, 1426 | configurable: true 1427 | }); 1428 | Object.defineProperty(ParticleSystem.prototype, "accelerationDirection", { 1429 | /** 1430 | * 重力です。 1431 | * @returns {number} 1432 | */ 1433 | get: function () { 1434 | return this._drawingData.accelerationDirection; 1435 | }, 1436 | /** 1437 | * 重力方向 (度)です。 1438 | * @param value 1439 | */ 1440 | set: function (value) { 1441 | this._drawingData.accelerationDirection = value; 1442 | }, 1443 | enumerable: true, 1444 | configurable: true 1445 | }); 1446 | Object.defineProperty(ParticleSystem.prototype, "startScale", { 1447 | /** 1448 | * 開始時のスケールです。 1449 | * @returns {number} 1450 | */ 1451 | get: function () { 1452 | return this._drawingData.startScale; 1453 | }, 1454 | /** 1455 | * 開始時のスケールです。 1456 | * @param value 1457 | */ 1458 | set: function (value) { 1459 | this._drawingData.startScale = value; 1460 | }, 1461 | enumerable: true, 1462 | configurable: true 1463 | }); 1464 | Object.defineProperty(ParticleSystem.prototype, "startScaleVariance", { 1465 | /** 1466 | * 開始時のスケールのばらつきです。 1467 | * @returns {number} 1468 | */ 1469 | get: function () { 1470 | return this._drawingData.startScaleVariance; 1471 | }, 1472 | /** 1473 | * 開始時のスケールのばらつきです。 1474 | * @param value 1475 | */ 1476 | set: function (value) { 1477 | this._drawingData.startScaleVariance = value; 1478 | }, 1479 | enumerable: true, 1480 | configurable: true 1481 | }); 1482 | Object.defineProperty(ParticleSystem.prototype, "finishScale", { 1483 | /** 1484 | * 終了時のスケールです。 1485 | * @returns {number} 1486 | */ 1487 | get: function () { 1488 | return this._drawingData.finishScale; 1489 | }, 1490 | /** 1491 | * 終了時のスケールです。 1492 | * @param value 1493 | */ 1494 | set: function (value) { 1495 | this._drawingData.finishScale = value; 1496 | }, 1497 | enumerable: true, 1498 | configurable: true 1499 | }); 1500 | Object.defineProperty(ParticleSystem.prototype, "finishScaleVariance", { 1501 | /** 1502 | * 終了時のスケールのばらつきです。 1503 | * @returns {number} 1504 | */ 1505 | get: function () { 1506 | return this._drawingData.finishScaleVariance; 1507 | }, 1508 | /** 1509 | * 終了時のスケールのばらつきです。 1510 | * @param value 1511 | */ 1512 | set: function (value) { 1513 | this._drawingData.finishScaleVariance = value; 1514 | }, 1515 | enumerable: true, 1516 | configurable: true 1517 | }); 1518 | Object.defineProperty(ParticleSystem.prototype, "lifeSpan", { 1519 | /** 1520 | * ライフ(フレーム数)です。 1521 | * @returns {number} 1522 | */ 1523 | get: function () { 1524 | return this._drawingData.lifeSpan; 1525 | }, 1526 | /** 1527 | * ライフ(フレーム数)です。 1528 | * @param value 1529 | */ 1530 | set: function (value) { 1531 | this._drawingData.lifeSpan = value; 1532 | }, 1533 | enumerable: true, 1534 | configurable: true 1535 | }); 1536 | Object.defineProperty(ParticleSystem.prototype, "lifeSpanVariance", { 1537 | /** 1538 | * ライフのばらつき(フレーム数)です。 1539 | * @returns {number} 1540 | */ 1541 | get: function () { 1542 | return this._drawingData.lifeSpanVariance; 1543 | }, 1544 | /** 1545 | * ライフのばらつき(フレーム数)です。 1546 | * @param value 1547 | */ 1548 | set: function (value) { 1549 | this._drawingData.lifeSpanVariance = value; 1550 | }, 1551 | enumerable: true, 1552 | configurable: true 1553 | }); 1554 | Object.defineProperty(ParticleSystem.prototype, "startAlpha", { 1555 | /** 1556 | * 始時の透明度です。 1557 | * @returns {number} 1558 | */ 1559 | get: function () { 1560 | return this._drawingData.startAlpha; 1561 | }, 1562 | /** 1563 | * 始時の透明度です。 1564 | * @param value 1565 | */ 1566 | set: function (value) { 1567 | this._drawingData.startAlpha = value; 1568 | }, 1569 | enumerable: true, 1570 | configurable: true 1571 | }); 1572 | Object.defineProperty(ParticleSystem.prototype, "startAlphaVariance", { 1573 | /** 1574 | * 開始時の透明度のばらつきです。 1575 | * @returns {number} 1576 | */ 1577 | get: function () { 1578 | return this._drawingData.startAlphaVariance; 1579 | }, 1580 | /** 1581 | * 開始時の透明度のばらつきです。 1582 | * @param value 1583 | */ 1584 | set: function (value) { 1585 | this._drawingData.startAlphaVariance = value; 1586 | }, 1587 | enumerable: true, 1588 | configurable: true 1589 | }); 1590 | Object.defineProperty(ParticleSystem.prototype, "finishAlpha", { 1591 | /** 1592 | * 終了時の透明度です。 1593 | * @returns {number} 1594 | */ 1595 | get: function () { 1596 | return this._drawingData.finishAlpha; 1597 | }, 1598 | /** 1599 | * 終了時の透明度です。 1600 | * @param value 1601 | */ 1602 | set: function (value) { 1603 | this._drawingData.finishAlpha = value; 1604 | }, 1605 | enumerable: true, 1606 | configurable: true 1607 | }); 1608 | Object.defineProperty(ParticleSystem.prototype, "finishAlphaVariance", { 1609 | /** 1610 | * 終了時の透明度のばらつきです。 1611 | * @returns {number} 1612 | */ 1613 | get: function () { 1614 | return this._drawingData.finishAlphaVariance; 1615 | }, 1616 | /** 1617 | * 終了時の透明度のばらつきです。 1618 | * @param value 1619 | */ 1620 | set: function (value) { 1621 | this._drawingData.finishAlphaVariance = value; 1622 | }, 1623 | enumerable: true, 1624 | configurable: true 1625 | }); 1626 | Object.defineProperty(ParticleSystem.prototype, "shapeIdList", { 1627 | /** 1628 | * 使用するシェイプID設定です。 1629 | * @returns {string[]} 1630 | */ 1631 | get: function () { 1632 | return this._drawingData.shapeIdList; 1633 | }, 1634 | /** 1635 | * 使用するシェイプID設定です。 1636 | * @param string[] 1637 | */ 1638 | set: function (value) { 1639 | this._drawingData.shapeIdList = value; 1640 | }, 1641 | enumerable: true, 1642 | configurable: true 1643 | }); 1644 | Object.defineProperty(ParticleSystem.prototype, "startColor", { 1645 | /** 1646 | * 初期カラーの設定です。 1647 | * @returns {ColorData} 1648 | */ 1649 | get: function () { 1650 | return this._drawingData.startColor; 1651 | }, 1652 | /** 1653 | * 初期カラーの設定です。 1654 | * @param value 1655 | */ 1656 | set: function (value) { 1657 | this._drawingData.startColor = value; 1658 | }, 1659 | enumerable: true, 1660 | configurable: true 1661 | }); 1662 | Object.defineProperty(ParticleSystem.prototype, "blendMode", { 1663 | /** 1664 | * trueのときシェイプを加算合成します。 1665 | * @returns {boolean} 1666 | */ 1667 | get: function () { 1668 | return this._drawingData.blendMode; 1669 | }, 1670 | /** 1671 | * trueのときシェイプを加算合成します。 1672 | * @param value 1673 | */ 1674 | set: function (value) { 1675 | this._drawingData.blendMode = value; 1676 | }, 1677 | enumerable: true, 1678 | configurable: true 1679 | }); 1680 | Object.defineProperty(ParticleSystem.prototype, "alphaCurveType", { 1681 | /** 1682 | * 透明度の計算式の設定です。 1683 | * @returns {number} 1684 | */ 1685 | get: function () { 1686 | return this._drawingData.alphaCurveType; 1687 | }, 1688 | /** 1689 | * 透明度の計算式の設定です。 1690 | * @param value - 0:通常, 1:ランダム 1691 | */ 1692 | set: function (value) { 1693 | this._drawingData.alphaCurveType = value; 1694 | }, 1695 | enumerable: true, 1696 | configurable: true 1697 | }); 1698 | /** 1699 | * グラフィックオブジェクトです。内部計算に使用します。 1700 | */ 1701 | ParticleSystem.HELPER_GRAPHICS = new createjs.Graphics(); 1702 | return ParticleSystem; 1703 | }()); 1704 | 1705 | 1706 | // CONCATENATED MODULE: ./src/particlejs.ts 1707 | /* concated harmony reexport ParticleSystem */__webpack_require__.d(__webpack_exports__, "ParticleSystem", function() { return particle_system_ParticleSystem; }); 1708 | /* concated harmony reexport Particle */__webpack_require__.d(__webpack_exports__, "Particle", function() { return particle_Particle; }); 1709 | /* concated harmony reexport VERSION */__webpack_require__.d(__webpack_exports__, "VERSION", function() { return VERSION; }); 1710 | /* concated harmony reexport DrawingData */__webpack_require__.d(__webpack_exports__, "DrawingData", function() { return data_drawing_DrawingData; }); 1711 | /* concated harmony reexport ColorData */__webpack_require__.d(__webpack_exports__, "ColorData", function() { return ColorData; }); 1712 | /* concated harmony reexport ShapeData */__webpack_require__.d(__webpack_exports__, "ShapeData", function() { return ShapeData; }); 1713 | /* concated harmony reexport ShapeGenerator */__webpack_require__.d(__webpack_exports__, "ShapeGenerator", function() { return shape_generator_ShapeGenerator; }); 1714 | /* concated harmony reexport AlphaCurveType */__webpack_require__.d(__webpack_exports__, "AlphaCurveType", function() { return AlphaCurveType; }); 1715 | /* concated harmony reexport ShapeType */__webpack_require__.d(__webpack_exports__, "ShapeType", function() { return ShapeType; }); 1716 | /* concated harmony reexport Assets */__webpack_require__.d(__webpack_exports__, "Assets", function() { return Assets; }); 1717 | 1718 | 1719 | 1720 | 1721 | 1722 | 1723 | 1724 | 1725 | 1726 | 1727 | 1728 | 1729 | /***/ }) 1730 | /******/ ]); 1731 | }); 1732 | //# sourceMappingURL=particlejs.js.map -------------------------------------------------------------------------------- /libs/particlejs.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.particlejs=t():e.particlejs=t()}(window,function(){return a={},n.m=i=[function(e,t,i){e.exports=i(1)},function(e,t,i){"use strict";i.r(t);var a,n,r,o={},s=window.createjs;a=o=o||{},n=s=s||{},a.properties={width:550,height:400,fps:24,color:"#999999",manifest:[]},(a.triangle=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(-.7,-27.8).lineTo(32,27.1).lineTo(-32,27.8).closePath(),this.shape.setTransform(0,-7),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-34.8,64,55.7),(a.star_10=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(-4.3,18.3).lineTo(-19.9,29.3).lineTo(-14.1,10.3).lineTo(-32,10.3).lineTo(-19.7,.7).lineTo(-31.2,-8.7).lineTo(-15.2,-8.8).lineTo(-21.7,-26.4).lineTo(-5.4,-16.4).lineTo(-.2,-31.8).lineTo(4.4,-17.6).lineTo(17.8,-27.4).lineTo(13.1,-8.5).lineTo(30.3,-8.1).lineTo(19.9,.1).lineTo(32,8.4).lineTo(12.8,9.5).lineTo(18.2,29.8).lineTo(4.9,20).lineTo(1.4,31.8).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-31.7,64,63.6),(a.star=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(-.2,17.3).lineTo(-20.2,31.5).lineTo(-13,7.4).lineTo(-32,-8).lineTo(-7.8,-8.4).lineTo(.3,-32).lineTo(8,-8.2).lineTo(32,-7.4).lineTo(12.8,7.5).lineTo(19.4,32).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-32,64,64),(a.square=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill().beginStroke("#FFFFFF").setStrokeStyle(8,1,1).moveTo(-32,-32).lineTo(32,-32).lineTo(32,32).lineTo(-32,32).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-36,-36,72,72),(a.reverse_blur_circle=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill().beginStroke("#FFFFFF").setStrokeStyle(8,1,1).moveTo(32,0).curveTo(32,13.2,22.6,22.6).curveTo(13.3,32,0,32).curveTo(-13.2,32,-22.7,22.6).curveTo(-32,13.2,-32,0).curveTo(-32,-13.3,-22.7,-22.7).curveTo(-13.2,-32,0,-32).curveTo(13.3,-32,22.6,-22.7).curveTo(32,-13.3,32,0).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-36,-36,72,72),(a.kirakira2=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(-4,9.5).curveTo(-7.8,0,-13.4,-.1).curveTo(-7.8,-.2,-4,-9.9).curveTo(-.1,-19.2,0,-32).curveTo(.1,-19.2,4,-9.9).curveTo(8,-.2,13.4,-.1).curveTo(8,0,4,9.5).curveTo(.1,19,0,32).curveTo(-.1,19,-4,9.5).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-13.4,-32,26.8,64),(a.kirakira=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(-9.6,9.3).curveTo(-18.9,0,-32,-.1).curveTo(-18.9,-.2,-9.6,-9.6).curveTo(-.2,-19,-.1,-32).curveTo(0,-19,9.4,-9.6).curveTo(18.9,-.2,32,-.1).curveTo(18.9,0,9.4,9.3).curveTo(0,18.8,-.1,32).curveTo(-.2,18.8,-9.6,9.3).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-32,64,64),(a.heart=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(-20.2,10).lineTo(-24.8,3.5).curveTo(-27,.1,-28.5,-3.1).curveTo(-30.1,-6.4,-31.1,-9.5).curveTo(-32,-13,-32,-16).curveTo(-32,-19.7,-30.4,-22.7).curveTo(-29.1,-25.4,-26.6,-27.4).curveTo(-24,-29.1,-21,-30.1).curveTo(-18.1,-31.1,-15,-31.1).curveTo(-11.7,-31.1,-8.8,-29.9).curveTo(-6.4,-29,-4.5,-27.4).curveTo(-3,-25.9,-1.7,-23.9).lineTo(0,-20.8).lineTo(1.7,-23.9).curveTo(3,-25.9,4.5,-27.4).curveTo(6.6,-29.1,8.8,-29.9).curveTo(11.7,-31.1,15.2,-31.1).curveTo(18.4,-31.1,21.3,-30.1).curveTo(24.2,-29.1,26.7,-27.2).curveTo(29.1,-25.3,30.5,-22.6).curveTo(32,-19.7,32,-16.1).curveTo(32,-13.3,31,-9.7).curveTo(30.2,-6.5,28.5,-3.2).curveTo(27.1,0,24.9,3.3).lineTo(20.3,9.7).curveTo(13.4,17.7,9.7,21.6).lineTo(0,31).curveTo(-13.6,18.3,-20.2,10).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-31,64,62.1),(a.flower=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().moveTo(4,27.3).curveTo(.5,23.7,.5,18.9).lineTo(.5,15.2).lineTo(-.5,15.2).lineTo(-.7,18.9).curveTo(-.9,24,-4.1,27.6).curveTo(-7.4,31.1,-12.1,31.1).curveTo(-17,31.1,-20.8,27.5).curveTo(-24.7,23.7,-24.7,19.1).curveTo(-24.7,15.3,-22.2,12.1).curveTo(-19.7,8.8,-16.1,7.7).lineTo(-12.5,6.4).lineTo(-12.7,5.8).lineTo(-13,5.4).lineTo(-16.5,6.6).lineTo(-20.2,7.1).curveTo(-25.3,7.1,-28.7,4).curveTo(-32,.7,-32,-4.1).curveTo(-32,-9.4,-28.7,-13).curveTo(-25.5,-16.8,-20.6,-16.8).curveTo(-17.8,-16.8,-15,-15.4).curveTo(-12.2,-14,-10.5,-11.6).lineTo(-8.4,-8.7).lineTo(-8,-8.8).lineTo(-7.4,-9.3).lineTo(-9.6,-12.2).curveTo(-10.7,-14,-11.3,-15.8).curveTo(-11.9,-17.9,-12,-19.9).curveTo(-12,-24.7,-8.5,-28).curveTo(-5.3,-31.1,-.1,-31.1).curveTo(5.2,-31.1,8.5,-28).curveTo(11.7,-24.7,11.8,-19.9).curveTo(11.7,-17.7,11.2,-15.7).curveTo(10.7,-13.8,9.5,-12.2).lineTo(7.4,-9.3).lineTo(7.8,-9).lineTo(8.2,-8.7).lineTo(10.5,-11.6).curveTo(12.2,-14,14.8,-15.4).curveTo(17.6,-16.8,20.4,-16.8).curveTo(25.3,-16.8,28.5,-13).curveTo(32,-9.4,32,-4.1).curveTo(32,.8,28.5,4).curveTo(25.3,7.1,20,7.1).lineTo(16.4,6.6).lineTo(12.9,5.5).curveTo(12.8,5.6,12.8,5.6).curveTo(12.7,5.7,12.7,5.7).curveTo(12.7,5.8,12.7,5.8).curveTo(12.7,5.9,12.7,6).lineTo(12.5,6.4).lineTo(15.9,7.7).curveTo(19.7,9.1,22.1,12.2).curveTo(24.5,15.3,24.5,19.1).curveTo(24.5,23.7,20.8,27.5).curveTo(16.9,31.1,11.9,31.1).curveTo(7.4,31.1,4,27.3).closePath().moveTo(-7.7,-5.9).curveTo(-10.9,-2.7,-10.9,1.8).curveTo(-10.9,6.3,-7.7,9.4).curveTo(-4.6,12.5,-.1,12.5).curveTo(4.4,12.5,7.6,9.4).curveTo(10.6,6.3,10.6,1.8).curveTo(10.6,-2.7,7.6,-5.9).curveTo(4.4,-9,-.1,-9).curveTo(-4.6,-9,-7.7,-5.9).closePath(),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-31,64,62.2),(a.circle=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginFill("#FFFFFF").beginStroke().drawEllipse(-10.8,-10.8,21.7,21.7),this.shape.setTransform(0,0,2.949,2.949),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32,-32,64,64),(a.blur_circle=function(){this.initialize(),this.shape=new n.Shape,this.shape.graphics.beginRadialGradientFill(["#FFFFFF","rgba(255,255,255,0)"],[0,1],0,0,0,0,0,11).beginStroke().drawEllipse(-10.8,-10.8,21.7,21.7),this.shape.setTransform(0,0,3,3),this.addChild(this.shape)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(-32.5,-32.5,65.1,65.1),(a.assetshapes=function(){this.initialize(),this.instance=new a.triangle,this.instance.setTransform(323.6,39.6),this.instance_1=new a.square,this.instance_1.setTransform(518,151.5),this.instance_2=new a.kirakira2,this.instance_2.setTransform(420.8,32.6),this.instance_3=new a.kirakira,this.instance_3.setTransform(32,151.5),this.instance_4=new a.flower,this.instance_4.setTransform(396.5,151.5),this.instance_5=new a.star_10,this.instance_5.setTransform(518,32.6),this.instance_6=new a.star,this.instance_6.setTransform(275,151.5),this.instance_7=new a.circle,this.instance_7.setTransform(226.4,32.6),this.instance_8=new a.reverse_blur_circle,this.instance_8.setTransform(153.5,151.5),this.instance_9=new a.blur_circle,this.instance_9.setTransform(129.2,32.6),this.instance_10=new a.heart,this.instance_10.setTransform(32,32.6),this.addChild(this.instance_10,this.instance_9,this.instance_8,this.instance_7,this.instance_6,this.instance_5,this.instance_4,this.instance_3,this.instance_2,this.instance_1,this.instance)}).prototype=r=new n.Container,r.nominalBounds=new n.Rectangle(275,200,554,187.5);var c=(l.prototype.generateShape=function(e){return new o[e]},l);function l(){}var h,u,p=function(){this.hue=0,this.hueVariance=0,this.saturation=0,this.saturationVariance=0,this.luminance=0,this.luminanceVariance=0};(u=h=h||{})[u.Normal=0]="Normal",u[u.Random=1]="Random";var f=(d.prototype.importFromJson=function(e){this.setData(e,function(e){return"width"==e||"height"==e||"bgColor"==e})},d.prototype.importData=function(e){this.setData(e,function(e){return"width"==e||"height"==e||"startX"==e||"startY"==e})},d.checkReflectEnable=function(){try{return!(!Reflect||!Reflect.has)}catch(e){return!1}},d.prototype.setData=function(e,t){if(d.ENABLE_REFLECT){for(var i in e)if(!t(i)&&1==Reflect.has(this,i)){var a=e[i];Reflect.set(this,i,a)}}else for(var i in e)t(i)||this.hasOwnProperty(i)&&(this[i]=e[i])},d.ENABLE_REFLECT=d.checkReflectEnable(),d);function d(e){void 0===e&&(e=null),this.bgColor="",this.width=0,this.height=0,this.emitFrequency=0,this.startX=0,this.startXVariance=0,this.startY=0,this.startYVariance=0,this.initialDirection=0,this.initialDirectionVariance=0,this.initialSpeed=0,this.initialSpeedVariance=0,this.friction=0,this.accelerationSpeed=0,this.accelerationDirection=0,this.startScale=0,this.startScaleVariance=0,this.finishScale=0,this.finishScaleVariance=0,this.lifeSpan=0,this.lifeSpanVariance=0,this.startAlpha=0,this.startAlphaVariance=0,this.finishAlpha=0,this.finishAlphaVariance=0,this.shapeIdList=[""],this.startColor=new p,this.blendMode=!0,this.alphaCurveType=h.Normal,e&&this.importFromJson(e)}function g(){this.assetList=["blur_circle","circle","flower","heart","kirakira","kirakira2","reverse_blur_circle","square","star","star_10","triangle"]}var v=(T.BLUR_CIRCLE="blur_circle",T.CIRCLE="circle",T.FLOWER="flower",T.HEART="heart",T.KIRAKIRA="kirakira",T.KIRAKIRA2="kirakira2",T.REVERSE_CIRCLE="reverse_blur_circle",T.SQUARE="square",T.STAR="star",T.STAR_10="star_10",T.TRIANGLE="triangle",T);function T(){}var _=function(){this.particleShape=new createjs.Container,this.startColor=new p},m="1.0.0";var w=(b.prototype.isPlaying=function(){return this._playing},b.prototype.setData=function(e){this._drawingData=e},b.prototype.importFromJson=function(e){!function(e){var t=m.split(".");if(t.length<=2)return console.log("バージョン表記エラーが発生しました。"),!1;if(!e)return"0"==t[0]&&"1"==t[1];var i=e.split(".");return t[0]==i[0]&&t[1]==i[1]}(e.VERSION||"")&&console.warn("読み込んだJSONファイルとParticleJSのバージョンが異なります。\nhttps://github.com/ics-creative/ParticleJS"),this._drawingData.importFromJson(e)},b.prototype.update=function(){this._playing&&(this.emit(),this.animate(),this.lifeCheck())},b.prototype.animate=function(){for(var e=createjs.Matrix2D.DEG_TO_RAD*this._drawingData.accelerationDirection,t=Math.cos(e)*this._drawingData.accelerationSpeed,i=Math.sin(e)*this._drawingData.accelerationSpeed,a=0;a<this._activeParticles.length;a++){var n=this._activeParticles[a];n.vx+=t,n.vy+=i,n.vx*=1-this._drawingData.friction,n.vy*=1-this._drawingData.friction,n.x+=n.vx,n.y+=n.vy,n.particleShape.x=n.x,n.particleShape.y=n.y;var r=n.currentLife/n.totalLife;switch(Number(n.alphaCurveType)){case h.Random:var o=Math.min(n.finishAlpha,n.startAlpha),s=Math.max(n.finishAlpha,n.startAlpha);n.particleShape.alpha=Math.random()*(s-o)+o;break;case h.Normal:default:var c=this.calcCurrentValue(n.startAlpha,n.finishAlpha,r);n.particleShape.alpha=c}var l=this.calcCurrentValue(n.startScale,n.finishScale,r);n.particleShape.scaleX=n.particleShape.scaleY=l,n.currentLife<0&&(n.isAlive=!1),n.currentLife--}},b.prototype.lifeCheck=function(){for(var e=0;e<this._activeParticles.length;e++)if(!this._activeParticles[e].isAlive){var t=this._activeParticles[e];this.container.removeChild(t.particleShape),this._activeParticles.splice(e,1),this._particlesPool.push(t),e--}},b.prototype.clear=function(){for(var e=0;e<this._activeParticles.length;e++){var t=this._activeParticles[e];t.isAlive=!1,this.container.removeChild(t.particleShape),this._activeParticles.splice(e,1),this._particlesPool.push(t),e--}},b.prototype.dispose=function(){for(var e=0;e<this._activeParticles.length;e++){var t=this._activeParticles[e];t.isAlive=!1,this.container.removeChild(t.particleShape)}this._activeParticles.splice(0,this._activeParticles.length),this._particlesPool.splice(0,this._particlesPool.length),this._activeParticles=null,this._particlesPool=null,this.container=null},b.prototype.emit=function(){for(var e=Math.round(createjs.Ticker.framerate),t=this._frameCount%e,i=this._drawingData.emitFrequency,a=0==i?0:Math.floor(i/e),n=0;n<a;n++)this.emitParticle();var r=i/e-a;0!=i&&t%Math.floor(1/r)==0&&this.emitParticle(),this._frameCount++,this._frameCount>=e&&(this._frameCount=0)},b.prototype.emitParticle=function(){var e=this.generateParticle();this.container.addChild(e.particleShape),this._activeParticles.push(e)},b.prototype.generateParticle=function(){var e=null;return e=1<=this._particlesPool.length?this._particlesPool.shift():new _,this.setParticleParameter(e),e},b.prototype.setParticleParameter=function(e){e.particleShape.removeAllChildren(),e.isAlive=!0,e.x=this.calcRandomValueWithVariance(this._drawingData.startX,this._drawingData.startXVariance,!1),e.y=this.calcRandomValueWithVariance(this._drawingData.startY,this._drawingData.startYVariance,!1),this.generateShape(e,this._drawingData.shapeIdList),e.totalLife=Math.max(1,this.calcRandomValueWithVariance(this._drawingData.lifeSpan,this._drawingData.lifeSpanVariance,!0)),e.currentLife=e.totalLife;var t=Math.max(0,this.calcRandomValueWithVariance(this._drawingData.initialSpeed,this._drawingData.initialSpeedVariance,!1)),i=createjs.Matrix2D.DEG_TO_RAD*this.calcRandomValueWithVariance(this._drawingData.initialDirection,this._drawingData.initialDirectionVariance,!1);e.vx=Math.cos(i)*t,e.vy=Math.sin(i)*t,e.startAlpha=this.calcRandomValueWithRange(0,1,this.calcRandomValueWithVariance(this._drawingData.startAlpha,this._drawingData.startAlphaVariance,!1)),e.finishAlpha=this.calcRandomValueWithRange(0,1,this.calcRandomValueWithVariance(this._drawingData.finishAlpha,this._drawingData.finishAlphaVariance,!1)),e.startScale=Math.max(0,this.calcRandomValueWithVariance(this._drawingData.startScale,this._drawingData.startScaleVariance,!1)),e.finishScale=Math.max(0,this.calcRandomValueWithVariance(this._drawingData.finishScale,this._drawingData.finishScaleVariance,!1)),e.particleShape.compositeOperation=1==this._drawingData.blendMode?"lighter":null,e.alphaCurveType=this._drawingData.alphaCurveType},b.prototype.generateShape=function(e,t){e.particleShape.removeAllChildren();var i=this._drawingData.startColor;e.startColor.hue=this.calcRandomValueWithVariance(i.hue,i.hueVariance,!1)%360,e.startColor.luminance=this.calcRandomValueWithVariance(i.luminance,i.luminanceVariance,!1),e.startColor.saturation=this.calcRandomValueWithVariance(i.saturation,i.saturationVariance,!1);var a=Number(e.startColor.hue),n=Number(e.startColor.saturation),r=Number(e.startColor.luminance),o="hsl("+a+", "+n+"%, "+r+"%)",s=Math.floor(Math.random()*this._drawingData.shapeIdList.length),c=0==this._drawingData.shapeIdList.length?"":this._drawingData.shapeIdList[s];e.colorCommand=null;var l=this.shapeGenerator.generateShape(c);e.particleShape.addChild(l);var h=l.getChildAt(0);if(null!=h){var u=h.graphics.instructions;if(u&&0<u.length)for(var p=0;p<u.length;p++){var f=u[p];if(f instanceof createjs.Graphics.Fill)if(f.style instanceof CanvasGradient){var d=f.style,g=b.HELPER_GRAPHICS.beginRadialGradientFill([o,"hsla("+a+", "+n+"%, "+r+"%, 0)"],d.props.ratios,d.props.x0,d.props.y0,d.props.r0,d.props.x1,d.props.y1,d.props.r1).command;u[p]=g}else f.style=o,e.colorCommand=f;else f instanceof createjs.Graphics.Stroke&&(f.style=o,e.colorCommand=f)}}},b.prototype.pause=function(){this._playing=!1},b.prototype.resume=function(){this._playing=!0},b.prototype.calcRandomValueWithRange=function(e,t,i){return Math.min(t,Math.max(e,i))},b.prototype.calcRandomValueWithVariance=function(e,t,i){var a=Number(e)+(Math.random()-.5)*t;return 1==i?Math.floor(a):a},b.prototype.calcCurrentValue=function(e,t,i){return Number(e)*i+Number(t)*(1-i)},Object.defineProperty(b.prototype,"emitFrequency",{get:function(){return this._drawingData.emitFrequency},set:function(e){this._drawingData.emitFrequency=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startX",{get:function(){return this._drawingData.startX},set:function(e){this._drawingData.startX=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startXVariance",{get:function(){return this._drawingData.startX},set:function(e){this._drawingData.startXVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startY",{get:function(){return this._drawingData.startY},set:function(e){this._drawingData.startY=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startYVariance",{get:function(){return this._drawingData.startYVariance},set:function(e){this._drawingData.startYVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"initialDirection",{get:function(){return this._drawingData.initialDirection},set:function(e){this._drawingData.initialDirection=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"initialDirectionVariance",{get:function(){return this._drawingData.initialDirectionVariance},set:function(e){this._drawingData.initialDirectionVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"initialSpeed",{get:function(){return this._drawingData.initialSpeed},set:function(e){this._drawingData.initialSpeed=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"initialSpeedVariance",{get:function(){return this._drawingData.initialSpeedVariance},set:function(e){this._drawingData.initialSpeedVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"friction",{get:function(){return this._drawingData.friction},set:function(e){this._drawingData.friction=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"accelerationSpeed",{get:function(){return this._drawingData.accelerationSpeed},set:function(e){this._drawingData.accelerationSpeed=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"accelerationDirection",{get:function(){return this._drawingData.accelerationDirection},set:function(e){this._drawingData.accelerationDirection=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startScale",{get:function(){return this._drawingData.startScale},set:function(e){this._drawingData.startScale=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startScaleVariance",{get:function(){return this._drawingData.startScaleVariance},set:function(e){this._drawingData.startScaleVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"finishScale",{get:function(){return this._drawingData.finishScale},set:function(e){this._drawingData.finishScale=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"finishScaleVariance",{get:function(){return this._drawingData.finishScaleVariance},set:function(e){this._drawingData.finishScaleVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"lifeSpan",{get:function(){return this._drawingData.lifeSpan},set:function(e){this._drawingData.lifeSpan=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"lifeSpanVariance",{get:function(){return this._drawingData.lifeSpanVariance},set:function(e){this._drawingData.lifeSpanVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startAlpha",{get:function(){return this._drawingData.startAlpha},set:function(e){this._drawingData.startAlpha=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startAlphaVariance",{get:function(){return this._drawingData.startAlphaVariance},set:function(e){this._drawingData.startAlphaVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"finishAlpha",{get:function(){return this._drawingData.finishAlpha},set:function(e){this._drawingData.finishAlpha=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"finishAlphaVariance",{get:function(){return this._drawingData.finishAlphaVariance},set:function(e){this._drawingData.finishAlphaVariance=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"shapeIdList",{get:function(){return this._drawingData.shapeIdList},set:function(e){this._drawingData.shapeIdList=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"startColor",{get:function(){return this._drawingData.startColor},set:function(e){this._drawingData.startColor=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"blendMode",{get:function(){return this._drawingData.blendMode},set:function(e){this._drawingData.blendMode=e},enumerable:!0,configurable:!0}),Object.defineProperty(b.prototype,"alphaCurveType",{get:function(){return this._drawingData.alphaCurveType},set:function(e){this._drawingData.alphaCurveType=e},enumerable:!0,configurable:!0}),b.HELPER_GRAPHICS=new createjs.Graphics,b);function b(){this._frameCount=0,this._drawingData=new f,this._particlesPool=[],this._activeParticles=[],this.container=new createjs.Container,this.container.mouseChildren=!1,this.container.mouseEnabled=!1,this._playing=!0,this.shapeGenerator=new c}i.d(t,"ParticleSystem",function(){return w}),i.d(t,"Particle",function(){return _}),i.d(t,"VERSION",function(){return m}),i.d(t,"DrawingData",function(){return f}),i.d(t,"ColorData",function(){return p}),i.d(t,"ShapeData",function(){return g}),i.d(t,"ShapeGenerator",function(){return c}),i.d(t,"AlphaCurveType",function(){return h}),i.d(t,"ShapeType",function(){return v}),i.d(t,"Assets",function(){return o})}],n.c=a,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)n.d(i,a,function(e){return t[e]}.bind(null,a));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0);function n(e){if(a[e])return a[e].exports;var t=a[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,n),t.l=!0,t.exports}var i,a}); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "particlejs", 3 | "version": "1.0.0", 4 | "description": "![Particle Develop](https://ics.media/wp-content/uploads/2016/01/160125_particle_develop.png)", 5 | "main": "libs/particlejs.js", 6 | "types": "libs/d.ts/particlejs.d.ts", 7 | "devDependencies": { 8 | "gulp": "^4.0.2", 9 | "gulp-shell": "^0.7.1", 10 | "gulp-typedoc": "^2.2.0", 11 | "gulp-typescript": "^5.0.1", 12 | "gulp-uglify": "^3.0.0", 13 | "lite-server": "^2.5.4", 14 | "prettier": "^1.12.1", 15 | "ts-loader": "^6.0.4", 16 | "typedoc": "^0.15.0", 17 | "typescript": "^3.5.3", 18 | "uglify-js": "^3.3.21", 19 | "watch": "^1.0.2", 20 | "webpack": "^4.39.2", 21 | "webpack-cli": "^3.3.7" 22 | }, 23 | "scripts": { 24 | "start": "gulp start", 25 | "sync": "lite-server & watch 'gulp build-particle-system' src", 26 | "generate-documentation": "gulp typedoc; cd generate-examples-code; node index;", 27 | "format": "prettier --write 'src/**/*.ts' && prettier --write '*.js'" 28 | }, 29 | "repository": "ics-creative/ParticleJS", 30 | "author": "Nozomi Nohara <nozomi.nohara@ics-web.jp>", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/ics-creative/ParticleJS/issues" 34 | }, 35 | "homepage": "https://github.com/ics-creative/ParticleJS#readme", 36 | "dependencies": { 37 | "@types/createjs": "^0.0.29" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/asset-shapes.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * アセットを含むオブジェクトです。このクラスは将来変更する可能性が高いので deprecated とします。 3 | * 利用しないでください。 4 | * @type {{}} 5 | */ 6 | var Assets = {}; 7 | var images = {}; 8 | var createjs = window["createjs"]; 9 | var ss = {}; 10 | 11 | (function(lib: any, img, cjs, ss) { 12 | var p; // shortcut to reference prototypes 13 | 14 | // library properties: 15 | lib.properties = { 16 | width: 550, 17 | height: 400, 18 | fps: 24, 19 | color: "#999999", 20 | manifest: [] 21 | }; 22 | 23 | // symbols: 24 | 25 | (lib.triangle = function() { 26 | this.initialize(); 27 | 28 | // レイヤー 1 29 | this.shape = new cjs.Shape(); 30 | this.shape.graphics 31 | .beginFill("#FFFFFF") 32 | .beginStroke() 33 | .moveTo(-0.7, -27.8) 34 | .lineTo(32, 27.1) 35 | .lineTo(-32, 27.8) 36 | .closePath(); 37 | this.shape.setTransform(0, -7); 38 | 39 | this.addChild(this.shape); 40 | }).prototype = p = new cjs.Container(); 41 | p.nominalBounds = new cjs.Rectangle(-32, -34.8, 64, 55.7); 42 | 43 | (lib.star_10 = function() { 44 | this.initialize(); 45 | 46 | // レイヤー 1 47 | this.shape = new cjs.Shape(); 48 | this.shape.graphics 49 | .beginFill("#FFFFFF") 50 | .beginStroke() 51 | .moveTo(-4.3, 18.3) 52 | .lineTo(-19.9, 29.3) 53 | .lineTo(-14.1, 10.3) 54 | .lineTo(-32, 10.3) 55 | .lineTo(-19.7, 0.7) 56 | .lineTo(-31.2, -8.7) 57 | .lineTo(-15.2, -8.8) 58 | .lineTo(-21.7, -26.4) 59 | .lineTo(-5.4, -16.4) 60 | .lineTo(-0.2, -31.8) 61 | .lineTo(4.4, -17.6) 62 | .lineTo(17.8, -27.4) 63 | .lineTo(13.1, -8.5) 64 | .lineTo(30.3, -8.1) 65 | .lineTo(19.9, 0.1) 66 | .lineTo(32, 8.4) 67 | .lineTo(12.8, 9.5) 68 | .lineTo(18.2, 29.8) 69 | .lineTo(4.9, 20) 70 | .lineTo(1.4, 31.8) 71 | .closePath(); 72 | 73 | this.addChild(this.shape); 74 | }).prototype = p = new cjs.Container(); 75 | p.nominalBounds = new cjs.Rectangle(-32, -31.7, 64, 63.6); 76 | 77 | (lib.star = function() { 78 | this.initialize(); 79 | 80 | // レイヤー 1 81 | this.shape = new cjs.Shape(); 82 | this.shape.graphics 83 | .beginFill("#FFFFFF") 84 | .beginStroke() 85 | .moveTo(-0.2, 17.3) 86 | .lineTo(-20.2, 31.5) 87 | .lineTo(-13, 7.4) 88 | .lineTo(-32, -8) 89 | .lineTo(-7.8, -8.4) 90 | .lineTo(0.3, -32) 91 | .lineTo(8, -8.2) 92 | .lineTo(32, -7.4) 93 | .lineTo(12.8, 7.5) 94 | .lineTo(19.4, 32) 95 | .closePath(); 96 | 97 | this.addChild(this.shape); 98 | }).prototype = p = new cjs.Container(); 99 | p.nominalBounds = new cjs.Rectangle(-32, -32, 64, 64); 100 | 101 | (lib.square = function() { 102 | this.initialize(); 103 | 104 | // レイヤー 1 105 | this.shape = new cjs.Shape(); 106 | this.shape.graphics 107 | .beginFill() 108 | .beginStroke("#FFFFFF") 109 | .setStrokeStyle(8, 1, 1) 110 | .moveTo(-32, -32) 111 | .lineTo(32, -32) 112 | .lineTo(32, 32) 113 | .lineTo(-32, 32) 114 | .closePath(); 115 | 116 | this.addChild(this.shape); 117 | }).prototype = p = new cjs.Container(); 118 | p.nominalBounds = new cjs.Rectangle(-36, -36, 72, 72); 119 | 120 | (lib.reverse_blur_circle = function() { 121 | this.initialize(); 122 | 123 | // レイヤー 1 124 | this.shape = new cjs.Shape(); 125 | this.shape.graphics 126 | .beginFill() 127 | .beginStroke("#FFFFFF") 128 | .setStrokeStyle(8, 1, 1) 129 | .moveTo(32, 0) 130 | .curveTo(32, 13.2, 22.6, 22.6) 131 | .curveTo(13.3, 32, 0, 32) 132 | .curveTo(-13.2, 32, -22.7, 22.6) 133 | .curveTo(-32, 13.2, -32, 0) 134 | .curveTo(-32, -13.3, -22.7, -22.7) 135 | .curveTo(-13.2, -32, 0, -32) 136 | .curveTo(13.3, -32, 22.6, -22.7) 137 | .curveTo(32, -13.3, 32, 0) 138 | .closePath(); 139 | 140 | this.addChild(this.shape); 141 | }).prototype = p = new cjs.Container(); 142 | p.nominalBounds = new cjs.Rectangle(-36, -36, 72, 72); 143 | 144 | (lib.kirakira2 = function() { 145 | this.initialize(); 146 | 147 | // レイヤー 1 148 | this.shape = new cjs.Shape(); 149 | this.shape.graphics 150 | .beginFill("#FFFFFF") 151 | .beginStroke() 152 | .moveTo(-4, 9.5) 153 | .curveTo(-7.8, 0, -13.4, -0.1) 154 | .curveTo(-7.8, -0.2, -4, -9.9) 155 | .curveTo(-0.1, -19.2, 0, -32) 156 | .curveTo(0.1, -19.2, 4, -9.9) 157 | .curveTo(8, -0.2, 13.4, -0.1) 158 | .curveTo(8, 0, 4, 9.5) 159 | .curveTo(0.1, 19, 0, 32) 160 | .curveTo(-0.1, 19, -4, 9.5) 161 | .closePath(); 162 | 163 | this.addChild(this.shape); 164 | }).prototype = p = new cjs.Container(); 165 | p.nominalBounds = new cjs.Rectangle(-13.4, -32, 26.8, 64); 166 | 167 | (lib.kirakira = function() { 168 | this.initialize(); 169 | 170 | // レイヤー 1 171 | this.shape = new cjs.Shape(); 172 | this.shape.graphics 173 | .beginFill("#FFFFFF") 174 | .beginStroke() 175 | .moveTo(-9.6, 9.3) 176 | .curveTo(-18.9, 0, -32, -0.1) 177 | .curveTo(-18.9, -0.2, -9.6, -9.6) 178 | .curveTo(-0.2, -19, -0.1, -32) 179 | .curveTo(0, -19, 9.4, -9.6) 180 | .curveTo(18.9, -0.2, 32, -0.1) 181 | .curveTo(18.9, 0, 9.4, 9.3) 182 | .curveTo(0, 18.8, -0.1, 32) 183 | .curveTo(-0.2, 18.8, -9.6, 9.3) 184 | .closePath(); 185 | 186 | this.addChild(this.shape); 187 | }).prototype = p = new cjs.Container(); 188 | p.nominalBounds = new cjs.Rectangle(-32, -32, 64, 64); 189 | 190 | (lib.heart = function() { 191 | this.initialize(); 192 | 193 | // レイヤー 1 194 | this.shape = new cjs.Shape(); 195 | this.shape.graphics 196 | .beginFill("#FFFFFF") 197 | .beginStroke() 198 | .moveTo(-20.2, 10) 199 | .lineTo(-24.8, 3.5) 200 | .curveTo(-27, 0.1, -28.5, -3.1) 201 | .curveTo(-30.1, -6.4, -31.1, -9.5) 202 | .curveTo(-32, -13, -32, -16) 203 | .curveTo(-32, -19.7, -30.4, -22.7) 204 | .curveTo(-29.1, -25.4, -26.6, -27.4) 205 | .curveTo(-24, -29.1, -21, -30.1) 206 | .curveTo(-18.1, -31.1, -15, -31.1) 207 | .curveTo(-11.7, -31.1, -8.8, -29.9) 208 | .curveTo(-6.4, -29, -4.5, -27.4) 209 | .curveTo(-3, -25.9, -1.7, -23.9) 210 | .lineTo(0, -20.8) 211 | .lineTo(1.7, -23.9) 212 | .curveTo(3, -25.9, 4.5, -27.4) 213 | .curveTo(6.6, -29.1, 8.8, -29.9) 214 | .curveTo(11.7, -31.1, 15.2, -31.1) 215 | .curveTo(18.4, -31.1, 21.3, -30.1) 216 | .curveTo(24.2, -29.1, 26.7, -27.2) 217 | .curveTo(29.1, -25.3, 30.5, -22.6) 218 | .curveTo(32, -19.7, 32, -16.1) 219 | .curveTo(32, -13.3, 31, -9.7) 220 | .curveTo(30.2, -6.5, 28.5, -3.2) 221 | .curveTo(27.1, 0, 24.9, 3.3) 222 | .lineTo(20.3, 9.7) 223 | .curveTo(13.4, 17.7, 9.7, 21.6) 224 | .lineTo(0, 31) 225 | .curveTo(-13.6, 18.3, -20.2, 10) 226 | .closePath(); 227 | 228 | this.addChild(this.shape); 229 | }).prototype = p = new cjs.Container(); 230 | p.nominalBounds = new cjs.Rectangle(-32, -31, 64, 62.1); 231 | 232 | (lib.flower = function() { 233 | this.initialize(); 234 | 235 | // レイヤー 1 236 | this.shape = new cjs.Shape(); 237 | this.shape.graphics 238 | .beginFill("#FFFFFF") 239 | .beginStroke() 240 | .moveTo(4, 27.3) 241 | .curveTo(0.5, 23.7, 0.5, 18.9) 242 | .lineTo(0.5, 15.2) 243 | .lineTo(-0.5, 15.2) 244 | .lineTo(-0.7, 18.9) 245 | .curveTo(-0.9, 24, -4.1, 27.6) 246 | .curveTo(-7.4, 31.1, -12.1, 31.1) 247 | .curveTo(-17, 31.1, -20.8, 27.5) 248 | .curveTo(-24.7, 23.7, -24.7, 19.1) 249 | .curveTo(-24.7, 15.3, -22.2, 12.1) 250 | .curveTo(-19.7, 8.8, -16.1, 7.7) 251 | .lineTo(-12.5, 6.4) 252 | .lineTo(-12.7, 5.8) 253 | .lineTo(-13, 5.4) 254 | .lineTo(-16.5, 6.6) 255 | .lineTo(-20.2, 7.1) 256 | .curveTo(-25.3, 7.1, -28.7, 4) 257 | .curveTo(-32, 0.7, -32, -4.1) 258 | .curveTo(-32, -9.4, -28.7, -13) 259 | .curveTo(-25.5, -16.8, -20.6, -16.8) 260 | .curveTo(-17.8, -16.8, -15, -15.4) 261 | .curveTo(-12.2, -14, -10.5, -11.6) 262 | .lineTo(-8.4, -8.7) 263 | .lineTo(-8, -8.8) 264 | .lineTo(-7.4, -9.3) 265 | .lineTo(-9.6, -12.2) 266 | .curveTo(-10.7, -14, -11.3, -15.8) 267 | .curveTo(-11.9, -17.9, -12, -19.9) 268 | .curveTo(-12, -24.7, -8.5, -28) 269 | .curveTo(-5.3, -31.1, -0.1, -31.1) 270 | .curveTo(5.2, -31.1, 8.5, -28) 271 | .curveTo(11.7, -24.7, 11.8, -19.9) 272 | .curveTo(11.7, -17.7, 11.2, -15.7) 273 | .curveTo(10.7, -13.8, 9.5, -12.2) 274 | .lineTo(7.4, -9.3) 275 | .lineTo(7.8, -9) 276 | .lineTo(8.2, -8.7) 277 | .lineTo(10.5, -11.6) 278 | .curveTo(12.2, -14, 14.8, -15.4) 279 | .curveTo(17.6, -16.8, 20.4, -16.8) 280 | .curveTo(25.3, -16.8, 28.5, -13) 281 | .curveTo(32, -9.4, 32, -4.1) 282 | .curveTo(32, 0.8, 28.5, 4) 283 | .curveTo(25.3, 7.1, 20, 7.1) 284 | .lineTo(16.4, 6.6) 285 | .lineTo(12.9, 5.5) 286 | .curveTo(12.8, 5.6, 12.8, 5.6) 287 | .curveTo(12.7, 5.7, 12.7, 5.7) 288 | .curveTo(12.7, 5.8, 12.7, 5.8) 289 | .curveTo(12.7, 5.9, 12.7, 6) 290 | .lineTo(12.5, 6.4) 291 | .lineTo(15.9, 7.7) 292 | .curveTo(19.7, 9.1, 22.1, 12.2) 293 | .curveTo(24.5, 15.3, 24.5, 19.1) 294 | .curveTo(24.5, 23.7, 20.8, 27.5) 295 | .curveTo(16.9, 31.1, 11.9, 31.1) 296 | .curveTo(7.4, 31.1, 4, 27.3) 297 | .closePath() 298 | .moveTo(-7.7, -5.9) 299 | .curveTo(-10.9, -2.7, -10.9, 1.8) 300 | .curveTo(-10.9, 6.3, -7.7, 9.4) 301 | .curveTo(-4.6, 12.5, -0.1, 12.5) 302 | .curveTo(4.4, 12.5, 7.6, 9.4) 303 | .curveTo(10.6, 6.3, 10.6, 1.8) 304 | .curveTo(10.6, -2.7, 7.6, -5.9) 305 | .curveTo(4.4, -9, -0.1, -9) 306 | .curveTo(-4.6, -9, -7.7, -5.9) 307 | .closePath(); 308 | 309 | this.addChild(this.shape); 310 | }).prototype = p = new cjs.Container(); 311 | p.nominalBounds = new cjs.Rectangle(-32, -31, 64, 62.2); 312 | 313 | (lib.circle = function() { 314 | this.initialize(); 315 | 316 | // レイヤー 1 317 | this.shape = new cjs.Shape(); 318 | this.shape.graphics 319 | .beginFill("#FFFFFF") 320 | .beginStroke() 321 | .drawEllipse(-10.8, -10.8, 21.7, 21.7); 322 | this.shape.setTransform(0, 0, 2.949, 2.949); 323 | 324 | this.addChild(this.shape); 325 | }).prototype = p = new cjs.Container(); 326 | p.nominalBounds = new cjs.Rectangle(-32, -32, 64, 64); 327 | 328 | (lib.blur_circle = function() { 329 | this.initialize(); 330 | 331 | // レイヤー 1 332 | this.shape = new cjs.Shape(); 333 | this.shape.graphics 334 | .beginRadialGradientFill( 335 | ["#FFFFFF", "rgba(255,255,255,0)"], 336 | [0, 1], 337 | 0, 338 | 0, 339 | 0, 340 | 0, 341 | 0, 342 | 11 343 | ) 344 | .beginStroke() 345 | .drawEllipse(-10.8, -10.8, 21.7, 21.7); 346 | this.shape.setTransform(0, 0, 3, 3); 347 | 348 | this.addChild(this.shape); 349 | }).prototype = p = new cjs.Container(); 350 | p.nominalBounds = new cjs.Rectangle(-32.5, -32.5, 65.1, 65.1); 351 | 352 | // stage content: 353 | (lib.assetshapes = function() { 354 | this.initialize(); 355 | 356 | // triangle 357 | this.instance = new lib.triangle(); 358 | this.instance.setTransform(323.6, 39.6); 359 | 360 | // square 361 | this.instance_1 = new lib.square(); 362 | this.instance_1.setTransform(518, 151.5); 363 | 364 | // kirakira2 365 | this.instance_2 = new lib.kirakira2(); 366 | this.instance_2.setTransform(420.8, 32.6); 367 | 368 | // kirakira 369 | this.instance_3 = new lib.kirakira(); 370 | this.instance_3.setTransform(32, 151.5); 371 | 372 | // flower 373 | this.instance_4 = new lib.flower(); 374 | this.instance_4.setTransform(396.5, 151.5); 375 | 376 | // star_10 377 | this.instance_5 = new lib.star_10(); 378 | this.instance_5.setTransform(518, 32.6); 379 | 380 | // star 381 | this.instance_6 = new lib.star(); 382 | this.instance_6.setTransform(275, 151.5); 383 | 384 | // circle 385 | this.instance_7 = new lib.circle(); 386 | this.instance_7.setTransform(226.4, 32.6); 387 | 388 | // reverse_blur_circle 389 | this.instance_8 = new lib.reverse_blur_circle(); 390 | this.instance_8.setTransform(153.5, 151.5); 391 | 392 | // blur_circle 393 | this.instance_9 = new lib.blur_circle(); 394 | this.instance_9.setTransform(129.2, 32.6); 395 | 396 | // heart 397 | this.instance_10 = new lib.heart(); 398 | this.instance_10.setTransform(32, 32.6); 399 | 400 | this.addChild( 401 | this.instance_10, 402 | this.instance_9, 403 | this.instance_8, 404 | this.instance_7, 405 | this.instance_6, 406 | this.instance_5, 407 | this.instance_4, 408 | this.instance_3, 409 | this.instance_2, 410 | this.instance_1, 411 | this.instance 412 | ); 413 | }).prototype = p = new cjs.Container(); 414 | p.nominalBounds = new cjs.Rectangle(275, 200, 554, 187.5); 415 | })( 416 | (Assets = Assets || {}), 417 | (images = images || {}), 418 | (createjs = createjs || {}), 419 | (ss = ss || {}) 420 | ); 421 | 422 | export { Assets }; 423 | -------------------------------------------------------------------------------- /src/assets/shape-generator.ts: -------------------------------------------------------------------------------- 1 | import { Assets } from "../asset-shapes"; 2 | 3 | /** 4 | * シェイプをインスタンス化するクラスです。 5 | * ParticleJSの内部的な利用以外では使用しないことをオススメします。 6 | */ 7 | export class ShapeGenerator { 8 | constructor() {} 9 | 10 | /** 11 | * シェイプインスタンスを作成します。 12 | * @param {string} id 13 | * @returns {createjs.Container} 14 | * @see data-shape.ts 15 | */ 16 | public generateShape(id: string): createjs.Container { 17 | const cls = <any>Assets[id]; 18 | return <createjs.Container>new cls(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/data/data-color.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 色の情報を扱うデータ型クラスです。 3 | */ 4 | export class ColorData { 5 | /** 6 | * 色相を表します(0-360)。 7 | * @type {number} 8 | */ 9 | public hue: number = 0; 10 | 11 | /** 12 | * 色相のばらつきを示します。 13 | * @type {number} 14 | */ 15 | public hueVariance: number = 0; 16 | /** 17 | * 彩度です(0-100)。 18 | * @type {number} 19 | */ 20 | public saturation: number = 0; 21 | /** 22 | * 彩度のばらつきです。 23 | * @type {number} 24 | */ 25 | public saturationVariance: number = 0; 26 | /** 27 | * 輝度です(0-100)。 28 | * @type {number} 29 | */ 30 | public luminance: number = 0; 31 | /** 32 | * 輝度のばらつきです。 33 | * @type {number} 34 | */ 35 | public luminanceVariance: number = 0; 36 | 37 | constructor() {} 38 | } 39 | -------------------------------------------------------------------------------- /src/data/data-drawing.ts: -------------------------------------------------------------------------------- 1 | import { ColorData } from "./data-color"; 2 | import { AlphaCurveType } from "../enum/alpha-curve-type"; 3 | 4 | /** 5 | * パーティクルの描画情報を扱うデータ型クラスです。 6 | */ 7 | export class DrawingData { 8 | /** 9 | * 背景色です。 10 | * @type {string} 11 | */ 12 | bgColor: string = ""; 13 | /** 14 | * 幅です。 15 | * @type {number} 16 | */ 17 | width: number = 0.0; 18 | /** 19 | * 高さです。 20 | * @type {number} 21 | */ 22 | height: number = 0.0; 23 | 24 | /** 25 | * 1秒あたりの発生数です。 26 | * @type {number} 27 | */ 28 | emitFrequency: number = 0; 29 | 30 | /** 31 | * 発生基準位置 - X座標 (px)です。 32 | * @type {number} 33 | */ 34 | startX: number = 0; 35 | 36 | /** 37 | * 発生基準位置 - X座標のばらつき (px)です。 38 | * @type {number} 39 | */ 40 | startXVariance: number = 0; 41 | 42 | /** 43 | * 発生位置 - Y座標 (px)です。 44 | * @type {number} 45 | */ 46 | startY: number = 0; 47 | 48 | /** 49 | * 発生位置 - Y座標のばらつき (px)です。 50 | * @type {number} 51 | */ 52 | startYVariance: number = 0; 53 | 54 | /** 55 | * 初期速度 - 方向 (度)です。 56 | * @type {number} 57 | */ 58 | initialDirection: number = 0; 59 | 60 | /** 61 | * 初期速度 - 方向のばらつき (度)です。 62 | * @type {number} 63 | */ 64 | initialDirectionVariance: number = 0; 65 | 66 | /** 67 | * 初期速度 (px)です。 68 | * @type {number} 69 | */ 70 | initialSpeed: number = 0; 71 | 72 | /** 73 | * 初期速度のばらつきです。 74 | * @type {number} 75 | */ 76 | initialSpeedVariance: number = 0; 77 | 78 | /** 79 | * 摩擦です。 80 | * @type {number} 81 | */ 82 | friction: number = 0; 83 | 84 | /** 重力です。 85 | * @type {number} 86 | */ 87 | accelerationSpeed: number = 0; 88 | 89 | /** 90 | * 重力方向 (度)です。 91 | * @type {number} 92 | */ 93 | accelerationDirection: number = 0; 94 | 95 | /** 96 | * 開始時のスケールです。 97 | * @type {number} 98 | */ 99 | startScale: number = 0; 100 | 101 | /** 102 | * 開始時のスケールのばらつきです。 103 | * @type {number} 104 | */ 105 | startScaleVariance: number = 0; 106 | 107 | /** 108 | * 終了時のスケールです。 109 | * @type {number} 110 | */ 111 | finishScale: number = 0; 112 | 113 | /** 114 | * 終了時のスケールのばらつきです。 115 | * @type {number} 116 | */ 117 | finishScaleVariance: number = 0; 118 | 119 | /** 120 | * ライフ(フレーム数)です。 121 | * @type {number} 122 | */ 123 | lifeSpan: number = 0; 124 | 125 | /** 126 | * ライフのばらつき(フレーム数)です。 127 | * @type {number} 128 | */ 129 | /** */ lifeSpanVariance: number = 0; 130 | 131 | /** 132 | * 開始時の透明度です。 133 | * @type {number} 134 | */ 135 | startAlpha: number = 0; 136 | 137 | /** 138 | * 開始時の透明度のばらつきです。 139 | * @type {number} 140 | */ 141 | startAlphaVariance: number = 0; 142 | 143 | /** 144 | * 終了時の透明度です。 145 | * @type {number} 146 | */ 147 | finishAlpha: number = 0; 148 | 149 | /** 150 | * 終了時の透明度のばらつきです。 151 | * @type {number} 152 | */ 153 | finishAlphaVariance: number = 0; 154 | 155 | /** 156 | * 使用するシェイプID設定です。 157 | * @type {string[]} 158 | */ 159 | shapeIdList: string[] = [""]; 160 | 161 | /** 162 | * 初期カラーの設定です。 163 | * @type {ColorData} 164 | */ 165 | startColor: ColorData = new ColorData(); 166 | 167 | /** 168 | * シェイプを加算合成します。 169 | * @type {boolean} 170 | */ 171 | blendMode: boolean = true; 172 | 173 | /** 174 | * 透明度の計算式の設定です。 175 | * @type {AlphaCurveType.Normal} 176 | */ 177 | alphaCurveType: number = AlphaCurveType.Normal; 178 | 179 | /** 180 | * コンストラクターです。 181 | * @param json 182 | */ 183 | constructor(json: any = null) { 184 | if (json) { 185 | this.importFromJson(json); 186 | } 187 | } 188 | 189 | static ENABLE_REFLECT: boolean = DrawingData.checkReflectEnable(); 190 | 191 | /** 192 | * パーティクルの設定をJSON形式のオブジェクトから読み込みます。 193 | * @param json 194 | */ 195 | public importFromJson(json: any): void { 196 | const checkSkipKey = (key: string) => { 197 | return key == "width" || key == "height" || key == "bgColor"; 198 | }; 199 | 200 | this.setData(json, checkSkipKey); 201 | } 202 | 203 | /** 204 | * パーティクルの設定をDrawingDataオブジェクトから読み込みます 205 | * @param {DrawingData} obj 206 | */ 207 | public importData(obj: DrawingData) { 208 | const checkSkipKey = (key: string) => { 209 | return ( 210 | key == "width" || key == "height" || key == "startX" || key == "startY" 211 | ); 212 | }; 213 | 214 | this.setData(obj, checkSkipKey); 215 | } 216 | 217 | static checkReflectEnable(): boolean { 218 | try { 219 | const result = !!(Reflect && Reflect.has); 220 | return result; 221 | } catch (e) { 222 | return false; 223 | } 224 | } 225 | 226 | private setData(obj: any, checkSkipKey: (key: string) => boolean): void { 227 | if (DrawingData.ENABLE_REFLECT) { 228 | for (let key in obj) { 229 | // 無視するプロパティー 230 | if (checkSkipKey(key)) { 231 | continue; 232 | } 233 | if (Reflect.has(this, key) == true) { 234 | let val = <any>obj[key]; 235 | // イマドキなプロパティー反映方法を適用 ICS-Ikeda 2016-01-22 236 | Reflect.set(this, key, val); 237 | } 238 | } 239 | } else { 240 | const self = <any>this; 241 | for (let key in obj) { 242 | // 無視するプロパティー 243 | if (checkSkipKey(key)) { 244 | continue; 245 | } 246 | if (this.hasOwnProperty(key)) { 247 | self[key] = obj[key]; 248 | } 249 | } 250 | } 251 | } 252 | } 253 | -------------------------------------------------------------------------------- /src/data/data-shape.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 「asset-shapes.fla」/「generate-assets.jsfl」 on Wed Jan 20 2016 3 | * !!!!!このコードはJSFLから自動生成されたコードです。修正する場合はご注意ください。!!!!! 4 | */ 5 | 6 | export class ShapeData { 7 | public assetList: string[]; 8 | 9 | constructor() { 10 | this.assetList = [ 11 | "blur_circle", 12 | "circle", 13 | "flower", 14 | "heart", 15 | "kirakira", 16 | "kirakira2", 17 | "reverse_blur_circle", 18 | "square", 19 | "star", 20 | "star_10", 21 | "triangle" 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/enum/alpha-curve-type.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 透明度の計算式の種類です。 3 | */ 4 | export enum AlphaCurveType { 5 | /** 6 | * 通常の透明度の計算式です。 7 | */ 8 | Normal = 0, 9 | /** 10 | * ランダムです。 11 | */ 12 | Random = 1 13 | } 14 | -------------------------------------------------------------------------------- /src/enum/shape-type.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * シェイプの種類を定義したクラスです。 3 | */ 4 | export class ShapeType { 5 | /** 6 | * ふわっとした円のシェイプIDです。 7 | * @type {string} 8 | */ 9 | public static BLUR_CIRCLE = "blur_circle"; 10 | 11 | /** 12 | * 円のシェイプIDです。 13 | * @type {string} 14 | */ 15 | public static CIRCLE = "circle"; 16 | 17 | /** 18 | * 花の形のシェイプIDです。 19 | * @type {string} 20 | */ 21 | public static FLOWER = "flower"; 22 | /** 23 | * ハートの形のシェイプIDです。 24 | * @type {string} 25 | */ 26 | public static HEART = "heart"; 27 | /** 28 | * キラキラ(1)のシェイプIDです。 29 | * @type {string} 30 | */ 31 | public static KIRAKIRA = "kirakira"; 32 | /** 33 | * キラキラ(2)のシェイプIDです。 34 | * @type {string} 35 | */ 36 | public static KIRAKIRA2 = "kirakira2"; 37 | /** 38 | * 中央が繰り抜かれた円のシェイプIDです。 39 | * @type {string} 40 | */ 41 | public static REVERSE_CIRCLE = "reverse_blur_circle"; 42 | 43 | /** 44 | * 四角形のシェイプIDです。 45 | * @type {string} 46 | */ 47 | public static SQUARE = "square"; 48 | 49 | /** 50 | * 星形のシェイプIDです。 51 | * @type {string} 52 | */ 53 | public static STAR = "star"; 54 | 55 | /** 56 | * 星形(棘が10)のシェイプIDです。 57 | * @type {string} 58 | */ 59 | public static STAR_10 = "star_10"; 60 | 61 | /** 62 | * 三角形のシェイプIDです。 63 | * @type {string} 64 | */ 65 | public static TRIANGLE = "triangle"; 66 | } 67 | -------------------------------------------------------------------------------- /src/particle/particle-system.ts: -------------------------------------------------------------------------------- 1 | import { ShapeGenerator } from "../assets/shape-generator"; 2 | import { ColorData } from "../data/data-color"; 3 | import { DrawingData } from "../data/data-drawing"; 4 | import { AlphaCurveType } from "../enum/alpha-curve-type"; 5 | import { Particle } from "./particle"; 6 | 7 | /** 8 | * ParticleJSのバージョン情報を示します。 9 | * @type {string} 10 | */ 11 | export const VERSION = "1.0.0"; 12 | 13 | /** 14 | * 現在のバージョンと互換性があるかどうかをチェックします。 15 | * @param value 16 | */ 17 | export function checkVersion(value: string) { 18 | const currentVersion = VERSION.split("."); 19 | 20 | // ここはそもそもこない想定だけれども。 21 | if (currentVersion.length <= 2) { 22 | console.log("バージョン表記エラーが発生しました。"); 23 | return false; 24 | } 25 | 26 | // versionが空の場合 27 | if (!value) { 28 | if (currentVersion[0] == "0" && currentVersion[1] == "1") { 29 | //「0.1.▲」のバージョンのParticleSystemは問題なく動作させる 30 | return true; 31 | } else { 32 | // バージョンが空の場合はエラー 33 | return false; 34 | } 35 | } 36 | 37 | const jsonVersion = value.split("."); 38 | 39 | // メジャーバージョンのチェック 40 | if (currentVersion[0] != jsonVersion[0]) { 41 | return false; 42 | } 43 | // マイナーバージョンのチェック 44 | if (currentVersion[1] != jsonVersion[1]) { 45 | return false; 46 | } 47 | 48 | // リビジョン番号が同じなら互換性があると行って良い 49 | return true; 50 | } 51 | 52 | /** 53 | * パーティクルの制御クラスです。 54 | */ 55 | export class ParticleSystem { 56 | /** 57 | * グラフィックオブジェクトです。内部計算に使用します。 58 | */ 59 | private static HELPER_GRAPHICS: createjs.Graphics = new createjs.Graphics(); 60 | 61 | /** 62 | * パーティクルが配置されるコンテナーです。 63 | */ 64 | public container: createjs.Container; 65 | 66 | /** @private */ 67 | private _particlesPool: Particle[]; 68 | /** @private */ 69 | private _activeParticles: Particle[]; 70 | /** @private */ 71 | private _drawingData: DrawingData; 72 | /** @private */ 73 | private _frameCount: number = 0; 74 | /** @private */ 75 | private _playing: boolean; 76 | /** @private */ 77 | private shapeGenerator: ShapeGenerator; 78 | /** 79 | * パーティクルのアニメーションが再生されているかどうかを示します。 80 | * @returns {boolean} 81 | */ 82 | public isPlaying(): boolean { 83 | return this._playing; 84 | } 85 | 86 | constructor() { 87 | this._drawingData = new DrawingData(); 88 | this._particlesPool = []; 89 | this._activeParticles = []; 90 | 91 | this.container = new createjs.Container(); 92 | 93 | // パフォーマンス向上の基本テクニック 94 | this.container.mouseChildren = false; 95 | this.container.mouseEnabled = false; 96 | 97 | this._playing = true; 98 | 99 | this.shapeGenerator = new ShapeGenerator(); 100 | } 101 | 102 | /** 103 | * パーティクルの設定データを取り込みます。 104 | */ 105 | public setData(drawingData: DrawingData) { 106 | this._drawingData = drawingData; 107 | } 108 | 109 | /** 110 | * パーティクルの設定データをJson形式のオブジェクトで取り込みます。 111 | */ 112 | public importFromJson(jsonObject: any) { 113 | if (!checkVersion(jsonObject["VERSION"] || "")) { 114 | console.warn( 115 | "読み込んだJSONファイルとParticleJSのバージョンが異なります。\n" + 116 | "https://github.com/ics-creative/ParticleJS" 117 | ); 118 | } 119 | 120 | this._drawingData.importFromJson(jsonObject); 121 | } 122 | 123 | /** 124 | * パーティクルシステムの更新を行います。 125 | */ 126 | public update() { 127 | if (!this._playing) { 128 | return; 129 | } 130 | 131 | this.emit(); 132 | this.animate(); 133 | this.lifeCheck(); 134 | } 135 | 136 | /** 137 | * パーティクルの動きを更新します。 138 | */ 139 | private animate() { 140 | const rad = 141 | createjs.Matrix2D.DEG_TO_RAD * this._drawingData.accelerationDirection; 142 | const accX = Math.cos(rad) * this._drawingData.accelerationSpeed; 143 | const accY = Math.sin(rad) * this._drawingData.accelerationSpeed; 144 | 145 | for (let i = 0; i < this._activeParticles.length; i++) { 146 | const particle: Particle = this._activeParticles[i]; 147 | 148 | // 加速度計算 (重力) 149 | particle.vx += accX; 150 | particle.vy += accY; 151 | 152 | // 摩擦計算 153 | particle.vx *= 1 - this._drawingData.friction; 154 | particle.vy *= 1 - this._drawingData.friction; 155 | 156 | // 座標計算 157 | particle.x += particle.vx; 158 | particle.y += particle.vy; 159 | 160 | // 座標の適用 161 | particle.particleShape.x = particle.x; 162 | particle.particleShape.y = particle.y; 163 | 164 | const lifeParcent = particle.currentLife / particle.totalLife; 165 | 166 | switch (Number(particle.alphaCurveType)) { 167 | case AlphaCurveType.Random: 168 | const min = Math.min(particle.finishAlpha, particle.startAlpha); 169 | const max = Math.max(particle.finishAlpha, particle.startAlpha); 170 | particle.particleShape.alpha = Math.random() * (max - min) + min; 171 | break; 172 | case AlphaCurveType.Normal: 173 | default: 174 | const alpha = this.calcCurrentValue( 175 | particle.startAlpha, 176 | particle.finishAlpha, 177 | lifeParcent 178 | ); 179 | particle.particleShape.alpha = alpha; 180 | break; 181 | } 182 | 183 | const scale = this.calcCurrentValue( 184 | particle.startScale, 185 | particle.finishScale, 186 | lifeParcent 187 | ); 188 | particle.particleShape.scaleX = particle.particleShape.scaleY = scale; 189 | 190 | // パーティクルが死んでいたら、オブジェクトプールに移動 191 | if (particle.currentLife < 0) { 192 | particle.isAlive = false; 193 | } 194 | 195 | // 年齢追加 196 | particle.currentLife--; 197 | } 198 | } 199 | 200 | /** 201 | * パーティクルが生きているか確認します。 202 | */ 203 | private lifeCheck(): void { 204 | for (let i = 0; i < this._activeParticles.length; i++) { 205 | // もしも死んでいたら、アクティブリストから外してプールに保存する。 206 | if (!this._activeParticles[i].isAlive) { 207 | const particle = this._activeParticles[i]; 208 | this.container.removeChild(particle.particleShape); 209 | this._activeParticles.splice(i, 1); 210 | this._particlesPool.push(particle); 211 | i--; 212 | } 213 | } 214 | } 215 | 216 | /** 217 | * パーティクルを全て削除します。 218 | */ 219 | public clear(): void { 220 | for (let i = 0; i < this._activeParticles.length; i++) { 221 | const particle = this._activeParticles[i]; 222 | particle.isAlive = false; 223 | this.container.removeChild(particle.particleShape); 224 | this._activeParticles.splice(i, 1); 225 | this._particlesPool.push(particle); 226 | i--; 227 | } 228 | } 229 | 230 | /** 231 | * パーティクルシステムを破棄します。 232 | */ 233 | public dispose(): void { 234 | for (let i = 0; i < this._activeParticles.length; i++) { 235 | const particle = this._activeParticles[i]; 236 | particle.isAlive = false; 237 | this.container.removeChild(particle.particleShape); 238 | } 239 | 240 | this._activeParticles.splice(0, this._activeParticles.length); 241 | this._particlesPool.splice(0, this._particlesPool.length); 242 | 243 | this._activeParticles = null; 244 | this._particlesPool = null; 245 | 246 | this.container = null; 247 | } 248 | 249 | /** 250 | * パーティクルの生成を行います。 251 | */ 252 | private emit(): void { 253 | // インターバルチェック 254 | const framerate = Math.round(createjs.Ticker.framerate); 255 | const frameInSec = this._frameCount % framerate; 256 | const emitPerSec = this._drawingData.emitFrequency; 257 | const loopInt = emitPerSec == 0 ? 0 : Math.floor(emitPerSec / framerate); 258 | 259 | // ① 整数分の実行回数 260 | for (let i = 0; i < loopInt; i++) { 261 | this.emitParticle(); 262 | } 263 | 264 | // ② 小数点分の実行回数 265 | const loopFloat = emitPerSec / framerate - loopInt; 266 | // フレームレートより少ない場合、かつ、生成persecが0ではないとき 267 | if (emitPerSec != 0 && frameInSec % Math.floor(1 / loopFloat) == 0) { 268 | this.emitParticle(); 269 | } 270 | 271 | this._frameCount++; 272 | if (this._frameCount >= framerate) { 273 | this._frameCount = 0; 274 | } 275 | } 276 | 277 | /** 278 | * 個々のパーティクルを生成し、パーティクルシステムに登録します。 279 | * @returns {Particle} 280 | */ 281 | private emitParticle(): void { 282 | const particle = this.generateParticle(); 283 | this.container.addChild(particle.particleShape); 284 | this._activeParticles.push(particle); 285 | } 286 | 287 | /** 288 | * パーティクルを生成し、パラメーターを設定します。 289 | * @returns {Particle} 290 | */ 291 | private generateParticle(): Particle { 292 | let particle: Particle = null; 293 | if (this._particlesPool.length >= 1) { 294 | particle = this._particlesPool.shift(); 295 | } else { 296 | particle = new Particle(); 297 | } 298 | 299 | this.setParticleParameter(particle); 300 | 301 | return particle; 302 | } 303 | 304 | /** 305 | * パーティクルパラメータの設定を行います。 306 | * @param particle 307 | */ 308 | private setParticleParameter(particle: Particle): void { 309 | particle.particleShape.removeAllChildren(); 310 | 311 | particle.isAlive = true; 312 | particle.x = this.calcRandomValueWithVariance( 313 | this._drawingData.startX, 314 | this._drawingData.startXVariance, 315 | false 316 | ); 317 | particle.y = this.calcRandomValueWithVariance( 318 | this._drawingData.startY, 319 | this._drawingData.startYVariance, 320 | false 321 | ); 322 | 323 | this.generateShape(particle, this._drawingData.shapeIdList); 324 | 325 | // 生存期間 326 | particle.totalLife = Math.max( 327 | 1, 328 | this.calcRandomValueWithVariance( 329 | this._drawingData.lifeSpan, 330 | this._drawingData.lifeSpanVariance, 331 | true 332 | ) 333 | ); 334 | particle.currentLife = particle.totalLife; 335 | 336 | // スピード 337 | const speed: number = Math.max( 338 | 0, 339 | this.calcRandomValueWithVariance( 340 | this._drawingData.initialSpeed, 341 | this._drawingData.initialSpeedVariance, 342 | false 343 | ) 344 | ); 345 | const angle = 346 | createjs.Matrix2D.DEG_TO_RAD * 347 | this.calcRandomValueWithVariance( 348 | this._drawingData.initialDirection, 349 | this._drawingData.initialDirectionVariance, 350 | false 351 | ); 352 | particle.vx = Math.cos(angle) * speed; 353 | particle.vy = Math.sin(angle) * speed; 354 | 355 | // アルファ 356 | particle.startAlpha = this.calcRandomValueWithRange( 357 | 0.0, 358 | 1.0, 359 | this.calcRandomValueWithVariance( 360 | this._drawingData.startAlpha, 361 | this._drawingData.startAlphaVariance, 362 | false 363 | ) 364 | ); 365 | particle.finishAlpha = this.calcRandomValueWithRange( 366 | 0.0, 367 | 1.0, 368 | this.calcRandomValueWithVariance( 369 | this._drawingData.finishAlpha, 370 | this._drawingData.finishAlphaVariance, 371 | false 372 | ) 373 | ); 374 | 375 | // スケール 376 | particle.startScale = Math.max( 377 | 0, 378 | this.calcRandomValueWithVariance( 379 | this._drawingData.startScale, 380 | this._drawingData.startScaleVariance, 381 | false 382 | ) 383 | ); 384 | particle.finishScale = Math.max( 385 | 0, 386 | this.calcRandomValueWithVariance( 387 | this._drawingData.finishScale, 388 | this._drawingData.finishScaleVariance, 389 | false 390 | ) 391 | ); 392 | 393 | // ブレンドモードを設定 394 | particle.particleShape.compositeOperation = 395 | this._drawingData.blendMode == true ? "lighter" : null; 396 | 397 | particle.alphaCurveType = this._drawingData.alphaCurveType; 398 | } 399 | 400 | /** 401 | * パーティクルに使用するシェイプを生成します。 402 | * @param particle 403 | * @param shapeIdList 404 | */ 405 | public generateShape(particle: Particle, shapeIdList: string[]) { 406 | particle.particleShape.removeAllChildren(); 407 | 408 | const startColor: ColorData = this._drawingData.startColor; 409 | 410 | particle.startColor.hue = 411 | this.calcRandomValueWithVariance( 412 | startColor.hue, 413 | startColor.hueVariance, 414 | false 415 | ) % 360; 416 | particle.startColor.luminance = this.calcRandomValueWithVariance( 417 | startColor.luminance, 418 | startColor.luminanceVariance, 419 | false 420 | ); 421 | particle.startColor.saturation = this.calcRandomValueWithVariance( 422 | startColor.saturation, 423 | startColor.saturationVariance, 424 | false 425 | ); 426 | 427 | const hue = Number(particle.startColor.hue); 428 | const saturation = Number(particle.startColor.saturation); 429 | const luminance = Number(particle.startColor.luminance); 430 | 431 | const color = `hsl(${hue}, ${saturation}%, ${luminance}%)`; 432 | 433 | const r = Math.floor(Math.random() * this._drawingData.shapeIdList.length); 434 | const shapeId = 435 | this._drawingData.shapeIdList.length == 0 436 | ? "" 437 | : this._drawingData.shapeIdList[r]; 438 | 439 | particle.colorCommand = null; 440 | 441 | const container = <createjs.Container>( 442 | this.shapeGenerator.generateShape(shapeId) 443 | ); 444 | particle.particleShape.addChild(container); 445 | 446 | const shape = <createjs.Shape>container.getChildAt(0); // こういう作りにする 447 | 448 | if (shape == null) { 449 | return; 450 | } 451 | 452 | const instructions = shape.graphics.instructions; 453 | if (instructions && instructions.length > 0) { 454 | for (let i = 0; i < instructions.length; i++) { 455 | const cmd = instructions[i]; 456 | if (cmd instanceof createjs.Graphics.Fill) { 457 | // 塗りのとき 458 | // グラデーション塗りだったら 459 | if (cmd.style instanceof CanvasGradient) { 460 | // 昔のグラデーションを保持 461 | const oldStyle = <any>cmd.style; 462 | const g = ParticleSystem.HELPER_GRAPHICS; 463 | const newStyle = g.beginRadialGradientFill( 464 | [color, `hsla(${hue}, ${saturation}%, ${luminance}%, 0)`], 465 | oldStyle.props.ratios, 466 | oldStyle.props.x0, 467 | oldStyle.props.y0, 468 | oldStyle.props.r0, 469 | oldStyle.props.x1, 470 | oldStyle.props.y1, 471 | oldStyle.props.r1 472 | ).command; 473 | instructions[i] = newStyle; 474 | } else { 475 | // 単色塗りなら 476 | cmd.style = color; 477 | particle.colorCommand = cmd; 478 | } 479 | } else if (cmd instanceof createjs.Graphics.Stroke) { 480 | // 線のとき 481 | cmd.style = color; 482 | particle.colorCommand = cmd; 483 | } 484 | } 485 | } 486 | } 487 | 488 | /** 489 | * 一時的にパーティクルの再生を停止します。 490 | */ 491 | public pause(): void { 492 | this._playing = false; 493 | } 494 | 495 | /** 496 | * pause()で停止したパーティクルの再生を再開します。 497 | */ 498 | public resume(): void { 499 | this._playing = true; 500 | } 501 | 502 | /** 503 | * 一定範囲の数値を計算します。 504 | * @param minValue 505 | * @param maxValue 506 | * @param value 507 | * @returns {number} 508 | */ 509 | private calcRandomValueWithRange( 510 | minValue: number, 511 | maxValue: number, 512 | value: number 513 | ): number { 514 | return Math.min(maxValue, Math.max(minValue, value)); 515 | } 516 | 517 | /** 518 | * ばらつきのある値を計算し取得します。 519 | * @param value 基準値です。 520 | * @param variance バラつきの範囲です。 521 | * @param isInteger 整数であるかを指定します。 522 | * @returns {number} 数値を返します。 523 | */ 524 | private calcRandomValueWithVariance( 525 | value: number, 526 | variance: number, 527 | isInteger: boolean 528 | ): number { 529 | const result = Number(value) + (Math.random() - 0.5) * variance; 530 | 531 | if (isInteger == true) { 532 | return Math.floor(result); 533 | } 534 | 535 | return result; 536 | } 537 | 538 | /** 539 | * 現在の年齢依存の数値を計算します。 540 | * @param start 開始時の値です。 541 | * @param end 終了時の値です。 542 | * @param life 現在の寿命を示します。開始時は1.0で、終了時は0.0の想定です。 543 | * @returns {number} 現在の値です。 544 | */ 545 | private calcCurrentValue(start: number, end: number, life: number): number { 546 | return Number(start) * life + Number(end) * (1 - life); 547 | } 548 | 549 | /** 550 | * 1秒あたりの発生数です。 551 | * @param value 552 | */ 553 | public set emitFrequency(value: number) { 554 | this._drawingData.emitFrequency = value; 555 | } 556 | 557 | /** 558 | * 1秒あたりの発生数です。 559 | * @returns {number} 560 | */ 561 | public get emitFrequency(): number { 562 | return this._drawingData.emitFrequency; 563 | } 564 | 565 | /** 566 | * 発生基準位置 - X座標 (px)です。 567 | * @param value 568 | */ 569 | public set startX(value: number) { 570 | this._drawingData.startX = value; 571 | } 572 | 573 | /** 574 | * 発生基準位置 - X座標 (px)です。 575 | * @returns {number} 576 | */ 577 | public get startX(): number { 578 | return this._drawingData.startX; 579 | } 580 | 581 | /** 582 | * 発生基準位置 - X座標のばらつき (px)です。 583 | * @param value 584 | */ 585 | public set startXVariance(value: number) { 586 | this._drawingData.startXVariance = value; 587 | } 588 | 589 | /** 590 | * 発生基準位置 - X座標のばらつき (px)です。 591 | * @returns {number} 592 | */ 593 | public get startXVariance(): number { 594 | return this._drawingData.startX; 595 | } 596 | 597 | /** 598 | * 発生位置 - Y座標 (px)です。 599 | * @param value 600 | */ 601 | public set startY(value: number) { 602 | this._drawingData.startY = value; 603 | } 604 | 605 | /** 606 | * 発生位置 - Y座標 (px)です。 607 | * @returns {number} 608 | */ 609 | public get startY(): number { 610 | return this._drawingData.startY; 611 | } 612 | 613 | /** 614 | * 発生基準位置 - X座標のばらつき (px)です。 615 | * @param value 616 | */ 617 | public set startYVariance(value: number) { 618 | this._drawingData.startYVariance = value; 619 | } 620 | 621 | /** 622 | * 発生基準位置 - X座標のばらつき (px)です。 623 | * @returns {number} 624 | */ 625 | public get startYVariance(): number { 626 | return this._drawingData.startYVariance; 627 | } 628 | 629 | /** 630 | * 初期速度 - 方向 (度)です。 631 | * @param value 632 | */ 633 | public set initialDirection(value: number) { 634 | this._drawingData.initialDirection = value; 635 | } 636 | 637 | /** 638 | * 初期速度 - 方向 (度)です。 639 | * @returns {number} 640 | */ 641 | public get initialDirection(): number { 642 | return this._drawingData.initialDirection; 643 | } 644 | 645 | /** 646 | * 初期速度 - 方向のばらつき (度)です。 647 | * @param value 648 | */ 649 | public set initialDirectionVariance(value: number) { 650 | this._drawingData.initialDirectionVariance = value; 651 | } 652 | 653 | /** 654 | * 初期速度 - 方向のばらつき (度)です。 655 | * @returns {number} 656 | */ 657 | public get initialDirectionVariance(): number { 658 | return this._drawingData.initialDirectionVariance; 659 | } 660 | 661 | /** 662 | * 初期速度 (px)です。 663 | * @param value 664 | */ 665 | public set initialSpeed(value: number) { 666 | this._drawingData.initialSpeed = value; 667 | } 668 | 669 | /** 670 | * 初期速度 (px)です。 671 | * @returns {number} 672 | */ 673 | public get initialSpeed(): number { 674 | return this._drawingData.initialSpeed; 675 | } 676 | 677 | /** 678 | * 初期速度のばらつきです。 679 | * @param value 680 | */ 681 | public set initialSpeedVariance(value: number) { 682 | this._drawingData.initialSpeedVariance = value; 683 | } 684 | 685 | /** 686 | * 初期速度のばらつきです。 687 | * @returns {number} 688 | */ 689 | public get initialSpeedVariance(): number { 690 | return this._drawingData.initialSpeedVariance; 691 | } 692 | 693 | /** 694 | * 摩擦です。 695 | * @param value 696 | */ 697 | public set friction(value: number) { 698 | this._drawingData.friction = value; 699 | } 700 | 701 | /** 702 | * 摩擦です。 703 | * @returns {number} 704 | */ 705 | public get friction(): number { 706 | return this._drawingData.friction; 707 | } 708 | 709 | /** 710 | * 重力です。 711 | * @param value 712 | */ 713 | public set accelerationSpeed(value: number) { 714 | this._drawingData.accelerationSpeed = value; 715 | } 716 | 717 | /** 718 | * 重力です。 719 | * @returns {number} 720 | */ 721 | public get accelerationSpeed(): number { 722 | return this._drawingData.accelerationSpeed; 723 | } 724 | 725 | /** 726 | * 重力方向 (度)です。 727 | * @param value 728 | */ 729 | public set accelerationDirection(value: number) { 730 | this._drawingData.accelerationDirection = value; 731 | } 732 | 733 | /** 734 | * 重力です。 735 | * @returns {number} 736 | */ 737 | public get accelerationDirection(): number { 738 | return this._drawingData.accelerationDirection; 739 | } 740 | 741 | /** 742 | * 開始時のスケールです。 743 | * @param value 744 | */ 745 | public set startScale(value: number) { 746 | this._drawingData.startScale = value; 747 | } 748 | 749 | /** 750 | * 開始時のスケールです。 751 | * @returns {number} 752 | */ 753 | public get startScale(): number { 754 | return this._drawingData.startScale; 755 | } 756 | 757 | /** 758 | * 開始時のスケールのばらつきです。 759 | * @param value 760 | */ 761 | public set startScaleVariance(value: number) { 762 | this._drawingData.startScaleVariance = value; 763 | } 764 | 765 | /** 766 | * 開始時のスケールのばらつきです。 767 | * @returns {number} 768 | */ 769 | public get startScaleVariance(): number { 770 | return this._drawingData.startScaleVariance; 771 | } 772 | 773 | /** 774 | * 終了時のスケールです。 775 | * @param value 776 | */ 777 | public set finishScale(value: number) { 778 | this._drawingData.finishScale = value; 779 | } 780 | 781 | /** 782 | * 終了時のスケールです。 783 | * @returns {number} 784 | */ 785 | public get finishScale(): number { 786 | return this._drawingData.finishScale; 787 | } 788 | 789 | /** 790 | * 終了時のスケールのばらつきです。 791 | * @param value 792 | */ 793 | public set finishScaleVariance(value: number) { 794 | this._drawingData.finishScaleVariance = value; 795 | } 796 | 797 | /** 798 | * 終了時のスケールのばらつきです。 799 | * @returns {number} 800 | */ 801 | public get finishScaleVariance(): number { 802 | return this._drawingData.finishScaleVariance; 803 | } 804 | 805 | /** 806 | * ライフ(フレーム数)です。 807 | * @param value 808 | */ 809 | public set lifeSpan(value: number) { 810 | this._drawingData.lifeSpan = value; 811 | } 812 | 813 | /** 814 | * ライフ(フレーム数)です。 815 | * @returns {number} 816 | */ 817 | public get lifeSpan(): number { 818 | return this._drawingData.lifeSpan; 819 | } 820 | 821 | /** 822 | * ライフのばらつき(フレーム数)です。 823 | * @param value 824 | */ 825 | public set lifeSpanVariance(value: number) { 826 | this._drawingData.lifeSpanVariance = value; 827 | } 828 | 829 | /** 830 | * ライフのばらつき(フレーム数)です。 831 | * @returns {number} 832 | */ 833 | public get lifeSpanVariance(): number { 834 | return this._drawingData.lifeSpanVariance; 835 | } 836 | 837 | /** 838 | * 始時の透明度です。 839 | * @param value 840 | */ 841 | public set startAlpha(value: number) { 842 | this._drawingData.startAlpha = value; 843 | } 844 | 845 | /** 846 | * 始時の透明度です。 847 | * @returns {number} 848 | */ 849 | public get startAlpha(): number { 850 | return this._drawingData.startAlpha; 851 | } 852 | 853 | /** 854 | * 開始時の透明度のばらつきです。 855 | * @param value 856 | */ 857 | public set startAlphaVariance(value: number) { 858 | this._drawingData.startAlphaVariance = value; 859 | } 860 | 861 | /** 862 | * 開始時の透明度のばらつきです。 863 | * @returns {number} 864 | */ 865 | public get startAlphaVariance(): number { 866 | return this._drawingData.startAlphaVariance; 867 | } 868 | 869 | /** 870 | * 終了時の透明度です。 871 | * @param value 872 | */ 873 | public set finishAlpha(value: number) { 874 | this._drawingData.finishAlpha = value; 875 | } 876 | 877 | /** 878 | * 終了時の透明度です。 879 | * @returns {number} 880 | */ 881 | public get finishAlpha(): number { 882 | return this._drawingData.finishAlpha; 883 | } 884 | 885 | /** 886 | * 終了時の透明度のばらつきです。 887 | * @param value 888 | */ 889 | public set finishAlphaVariance(value: number) { 890 | this._drawingData.finishAlphaVariance = value; 891 | } 892 | 893 | /** 894 | * 終了時の透明度のばらつきです。 895 | * @returns {number} 896 | */ 897 | public get finishAlphaVariance(): number { 898 | return this._drawingData.finishAlphaVariance; 899 | } 900 | 901 | /** 902 | * 使用するシェイプID設定です。 903 | * @param string[] 904 | */ 905 | public set shapeIdList(value: string[]) { 906 | this._drawingData.shapeIdList = value; 907 | } 908 | 909 | /** 910 | * 使用するシェイプID設定です。 911 | * @returns {string[]} 912 | */ 913 | public get shapeIdList(): string[] { 914 | return this._drawingData.shapeIdList; 915 | } 916 | 917 | /** 918 | * 初期カラーの設定です。 919 | * @param value 920 | */ 921 | public set startColor(value: ColorData) { 922 | this._drawingData.startColor = value; 923 | } 924 | 925 | /** 926 | * 初期カラーの設定です。 927 | * @returns {ColorData} 928 | */ 929 | public get startColor(): ColorData { 930 | return this._drawingData.startColor; 931 | } 932 | 933 | /** 934 | * trueのときシェイプを加算合成します。 935 | * @param value 936 | */ 937 | public set blendMode(value: boolean) { 938 | this._drawingData.blendMode = value; 939 | } 940 | 941 | /** 942 | * trueのときシェイプを加算合成します。 943 | * @returns {boolean} 944 | */ 945 | public get blendMode(): boolean { 946 | return this._drawingData.blendMode; 947 | } 948 | 949 | /** 950 | * 透明度の計算式の設定です。 951 | * @param value - 0:通常, 1:ランダム 952 | */ 953 | public set alphaCurveType(value: number) { 954 | this._drawingData.alphaCurveType = value; 955 | } 956 | 957 | /** 958 | * 透明度の計算式の設定です。 959 | * @returns {number} 960 | */ 961 | public get alphaCurveType(): number { 962 | return this._drawingData.alphaCurveType; 963 | } 964 | } 965 | -------------------------------------------------------------------------------- /src/particle/particle.ts: -------------------------------------------------------------------------------- 1 | import { ColorData } from "../data/data-color"; 2 | 3 | /** 4 | * パーティクルエミッターのバリューオブジェクトのクラスです。 5 | */ 6 | export class Particle { 7 | /** 8 | * パーティクルの形状です。 9 | * @type {createjs.Container} 10 | */ 11 | public particleShape: createjs.Container; 12 | 13 | /** パーティクルが生きているかのフラグです。 */ 14 | public isAlive: boolean; 15 | /** パーティクルの現在の残り生存期間（フレーム数）です。 */ 16 | public currentLife: number; 17 | /** パーティクルの生存期間（フレーム数）です。 */ 18 | public totalLife: number; 19 | 20 | /** パーティクルの現在のX位置です。 */ 21 | public x: number; 22 | /** パーティクルの現在のY位置です。 */ 23 | public y: number; 24 | 25 | /** パーティクルが現在向かっている方向ベクトルです。 */ 26 | public vx: number; 27 | /** パーティクルが方向ベクトルです。 */ 28 | public vy: number; 29 | 30 | /** アルファのイージング関数です。 */ 31 | public easingAlpha: (life: number) => number; 32 | /** 開始アルファ値です0〜1.0の間になります。 */ 33 | public startAlpha: number; 34 | /** 終了時のアルファ値です0〜1.0の間になります。 */ 35 | public finishAlpha: number; 36 | 37 | /** スケールのイージング関数です。 */ 38 | public easingScale: (life: number) => number; 39 | /** 開始スケール値です0〜1.0の間になります。 */ 40 | public startScale: number; 41 | /** 終了時のスケール値です0〜1.0の間になります。 */ 42 | public finishScale: number; 43 | 44 | /** 開始時のカラーです。 */ 45 | public startColor: ColorData; 46 | /** カラーを設定するCreateJSのグラフィックスコマンドです。*/ 47 | public colorCommand: any; 48 | 49 | /** アルファカーブ */ 50 | public alphaCurveType: number; 51 | 52 | /** 53 | * コンストラクターです。 54 | */ 55 | constructor() { 56 | this.particleShape = new createjs.Container(); 57 | 58 | this.startColor = new ColorData(); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/particlejs.ts: -------------------------------------------------------------------------------- 1 | import { Assets } from "./asset-shapes"; 2 | import { ShapeGenerator } from "./assets/shape-generator"; 3 | import { ColorData } from "./data/data-color"; 4 | import { DrawingData } from "./data/data-drawing"; 5 | import { ShapeData } from "./data/data-shape"; 6 | import { AlphaCurveType } from "./enum/alpha-curve-type"; 7 | import { ShapeType } from "./enum/shape-type"; 8 | import { Particle } from "./particle/particle"; 9 | import { ParticleSystem, VERSION } from "./particle/particle-system"; 10 | 11 | export { 12 | ParticleSystem, 13 | Particle, 14 | VERSION, 15 | DrawingData, 16 | ColorData, 17 | ShapeData, 18 | ShapeGenerator, 19 | AlphaCurveType, 20 | ShapeType, 21 | Assets 22 | }; 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "es5", 5 | // TSはECMAScript 5に変換 6 | "module": "es2015", 7 | // TSのモジュールはES Modulesとして出力 8 | "lib": [ 9 | "es2017", 10 | "dom" 11 | ], 12 | "declaration": true, 13 | "declarationDir": "libs/d.ts" 14 | }, 15 | "files": [ 16 | "./src/particlejs.ts" 17 | ], 18 | "exclude": [ 19 | "./node_modules" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // モード値を production に設定すると最適化された状態で、 3 | // development に設定するとソースマップ有効でJSファイルが出力される 4 | mode: "production", 5 | 6 | // メインとなるJavaScriptファイル（エントリーポイント） 7 | entry: ["./src/particlejs.ts"], 8 | 9 | // ファイルの出力設定 10 | output: { 11 | // 出力ファイルのディレクトリ名 12 | path: `${__dirname}/libs`, 13 | // 出力ファイル名 14 | filename: "particlejs.js", 15 | library: ["particlejs"], 16 | libraryTarget: "umd" 17 | }, 18 | 19 | devtool: "source-map", 20 | 21 | // ミニマイズは Gulp 側の Uglify で適用する 22 | optimization: { 23 | minimize: false 24 | }, 25 | 26 | module: { 27 | rules: [ 28 | { 29 | // 拡張子 .ts の場合 30 | test: /\.ts$/, 31 | // TypeScript をコンパイルする 32 | use: "ts-loader" 33 | } 34 | ] 35 | }, 36 | // import 文で .ts ファイルを解決するため 37 | resolve: { 38 | extensions: [".ts", ".js"] 39 | } 40 | }; 41 | --------------------------------------------------------------------------------