ParticleJS v0.1.4 α 回転機能・桜パーティクル nyamogera Follow 2016-04-06 22:40:36 License: MIT License Fork2 Fav2 View1081 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 118 lines CSS 10 lines ・ [ParticleJS](https://github.com/ics-creative/ParticleJS) 回転機能検討中 ParticleJS v0.1.4 α 回転機能・桜パーティクル <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ParticleJS - デモ</title> <!-- CreateJSのライブラリー読み込み --> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <!-- パーティクルシステムのライブラリー読み込み --> <script src="https://rawgit.com/ics-creative/ParticleJS/alpha/0.1.4/libs/particlejs.min.js"></script> <!-- JS --> <script> var particleSystem = null; var stage = null; // ウィンドウのロードが終わり次第、初期化コードを呼び出す。 window.addEventListener("load", function () { // Stageオブジェクトを作成します。表示リストのルートになります。 stage = new createjs.Stage("myCanvas"); // パーティクルシステム作成します。 particleSystem = new particlejs.ParticleSystem(); // パーティクルシステムの描画コンテナーを表示リストに登録します。 stage.addChild(particleSystem.container); // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む particleSystem.importFromJson( // パラメーターJSONのコピー＆ペースト ここから-- { "bgColor": "#00000", "width": 460, "height": 460, "emitFrequency": 30, "startX": 500, "startXVariance": 200, "startY": 0, "startYVariance": "150", "rotationMode": "1", "initialRotation": 90, "initialRotationVariance": 30, "initialRotationSpeed": 0, "initialRotationSpeedVariance": 2, "initialDirection": "135.5", "initialDirectionVariance": "90.5", "initialSpeed": "2.4", "initialSpeedVariance": "3.0", "friction": "0.0006", "accelerationSpeed": "0.05205", "accelerationDirection": "165.7", "startScale": "0.5", "startScaleVariance": "0.3", "finishScale": "0.2", "finishScaleVariance": "0", "lifeSpan": "400", "lifeSpanVariance": "500", "startAlpha": 1, "startAlphaVariance": "1", "finishAlpha": 0.35, "finishAlphaVariance": 0, "shapeIdList": [ "sakura" ], "startColor": { "hue": 312, "hueVariance": 4, "saturation": 71, "saturationVariance": 78, "luminance": 83, "luminanceVariance": 16 }, "blendMode": false, "alphaCurveType": "0" } // パラメーターJSONのコピー＆ペースト ここまで--- ); // フレームレートの設定 createjs.Ticker.framerate = 60; // requestAnimationFrameに従った呼び出し createjs.Ticker.timingMode = createjs.Ticker.RAF; // 定期的に呼ばれる関数を登録 createjs.Ticker.addEventListener("tick", handleTick); }); function handleTick() { // パーティクルの発生・更新 particleSystem.update(); // 描画を更新する stage.update(); } </script> <!-- CSS --> <style> canvas { background-color: black; } * { margin: 0px; padding: 0px; } </style> </head> <body> <canvas width="460" height="460" id="myCanvas"></canvas> </body> </html> ParticleJS v0.1.4 α 回転機能・桜パーティクル * { margin: 0; padding: 0; border: 0; } body { background: #fdf; font: 30px sans-serif; } ・ [ParticleJS](https://github.com/ics-creative/ParticleJS) 回転機能検討中 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ParticleJS - デモ</title> <!-- CreateJSのライブラリー読み込み --> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <!-- パーティクルシステムのライブラリー読み込み --> <script src="https://rawgit.com/ics-creative/ParticleJS/alpha/0.1.4/libs/particlejs.min.js"></script> <!-- JS --> <script> var particleSystem = null; var stage = null; // ウィンドウのロードが終わり次第、初期化コードを呼び出す。 window.addEventListener("load", function () { // Stageオブジェクトを作成します。表示リストのルートになります。 stage = new createjs.Stage("myCanvas"); // パーティクルシステム作成します。 particleSystem = new particlejs.ParticleSystem(); // パーティクルシステムの描画コンテナーを表示リストに登録します。 stage.addChild(particleSystem.container); // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む particleSystem.importFromJson( // パラメーターJSONのコピー＆ペースト ここから-- { "bgColor": "#00000", "width": 460, "height": 460, "emitFrequency": 30, "startX": 500, "startXVariance": 200, "startY": 0, "startYVariance": "150", "rotationMode": "1", "initialRotation": 90, "initialRotationVariance": 30, "initialRotationSpeed": 0, "initialRotationSpeedVariance": 2, "initialDirection": "135.5", "initialDirectionVariance": "90.5", "initialSpeed": "2.4", "initialSpeedVariance": "3.0", "friction": "0.0006", "accelerationSpeed": "0.05205", "accelerationDirection": "165.7", "startScale": "0.5", "startScaleVariance": "0.3", "finishScale": "0.2", "finishScaleVariance": "0", "lifeSpan": "400", "lifeSpanVariance": "500", "startAlpha": 1, "startAlphaVariance": "1", "finishAlpha": 0.35, "finishAlphaVariance": 0, "shapeIdList": [ "sakura" ], "startColor": { "hue": 312, "hueVariance": 4, "saturation": 71, "saturationVariance": 78, "luminance": 83, "luminanceVariance": 16 }, "blendMode": false, "alphaCurveType": "0" } // パラメーターJSONのコピー＆ペースト ここまで--- ); // フレームレートの設定 createjs.Ticker.framerate = 60; // requestAnimationFrameに従った呼び出し createjs.Ticker.timingMode = createjs.Ticker.RAF; // 定期的に呼ばれる関数を登録 createjs.Ticker.addEventListener("tick", handleTick); }); function handleTick() { // パーティクルの発生・更新 particleSystem.update(); // 描画を更新する stage.update(); } </script> <!-- CSS --> <style> canvas { background-color: black; } * { margin: 0px; padding: 0px; } </style> </head> <body> <canvas width="460" height="460" id="myCanvas"></canvas> </body> </html> * { margin: 0; padding: 0; border: 0; } body { background: #fdf; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? ・ [ParticleJS](https://github.com/ics-creative/ParticleJS) 回転機能検討中 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author nyamogera URLhttp://nyamogera.net Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/WIjk/js"></script> art&design library&test Discussion Questions on this code? Tags art&design library&test Favorite by siavko pego451 Forked sort by latest page views favorite forked ParticleJS v0.1.4 α 回転機能・桜パーティ nyamogera 00 439 2/117/10 art&design library&test ParticleJS v0.1.4 α 回転機能・金平糖ぐる nyamogera 10 576 2/115/10 art&design library&test
