Forked from: tarou's forked: EaselJSでキラキラエフェクト View Diff (1) forked: EaselJSでキラキラエフェクト yamacd Follow 2013-09-27 18:43:48 License: MIT License Fork0 Fav0 View1375 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 72 lines HTML 6 lines CSS 8 lines forked: EaselJSでキラキラエフェクト // forked from tarou's "forked: EaselJSでキラキラエフェクト" http://jsdo.it/tarou/tCQD // forked from nekodon's "EaselJSでキラキラエフェクト" http://jsdo.it/nekodon/thMU var count = 30; var stage; var maxWidth; var maxHeight; $(document).ready(function(){ init(); }); function init(){ var canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); maxWidth = $("#canvas").width(); maxHeight =$("#canvas").height(); stage.compositeOperation = "lighter"; for(var i = 0; i<count; i++){ var myShape = new createjs.Shape(); //ランダムな色を取得 var randomColor = "#" + Math.floor(Math.random()*0xFFFFFF).toString(16); myShape.vx = myShape.x = Math.random()*maxWidth; myShape.vy = myShape.y = Math.random()*maxHeight; myShape.rot = Math.random()*360; myShape.radius = 10+(Math.random()*100); myShape.speed = (9-myShape.radius*0.1)/4; var graphics = myShape.graphics; graphics.beginFill(randomColor); graphics.drawCircle(0, 0, myShape.radius); var blurStrong = 0.5+myShape.radius/5; var blurFilter = new createjs.BoxBlurFilter(blurStrong, blurStrong, 2); myShape.filters = [blurFilter]; var margins = blurFilter.getBounds(); myShape.cache(-myShape.radius+margins.x-7, -myShape.radius+margins.y-7, myShape.radius*2+margins.width+14, myShape.radius*2+margins.height+14); stage.addChild(myShape); } createjs.Ticker.setFPS(60); createjs.Ticker.addListener(window); stage.update(); } function tick(){ var l = stage.getNumChildren(); for(var i=0; i<l; i++){ var circle = stage.getChildAt(i); circle.vx += Math.cos(circle.rot*Math.PI/180)*circle.speed; circle.vy += Math.sin(circle.rot*Math.PI/180)*circle.speed; circle.x = circle.vx; circle.y = circle.vy; if(circle.x > maxWidth+circle.radius){ circle.x = circle.vx = -circle.radius; }else if(circle.x < -circle.radius){ circle.x = circle.vx = maxWidth+circle.radius; } if(circle.y > maxHeight+circle.radius){ circle.vy = circle.y = -circle.radius; }else if(circle.y < -circle.radius){ circle.vy = circle.y = maxHeight + circle.radius; } } stage.update(); } <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <!--BoxBlurFilter.js--> <script type="text/javascript" src="http://jsrun.it/assets/q/l/d/O/qldOs"></script> <canvas id="canvas" width="430" height="430"></canvas> forked: EaselJSでキラキラエフェクト body{ background:#fff; } canvas#canvas{ background:#000000; } // forked from tarou's "forked: EaselJSでキラキラエフェクト" http://jsdo.it/tarou/tCQD // forked from nekodon's "EaselJSでキラキラエフェクト" http://jsdo.it/nekodon/thMU var count = 30; var stage; var maxWidth; var maxHeight; $(document).ready(function(){ init(); }); function init(){ var canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); maxWidth = $("#canvas").width(); maxHeight =$("#canvas").height(); stage.compositeOperation = "lighter"; for(var i = 0; i<count; i++){ var myShape = new createjs.Shape(); //ランダムな色を取得 var randomColor = "#" + Math.floor(Math.random()*0xFFFFFF).toString(16); myShape.vx = myShape.x = Math.random()*maxWidth; myShape.vy = myShape.y = Math.random()*maxHeight; myShape.rot = Math.random()*360; myShape.radius = 10+(Math.random()*100); myShape.speed = (9-myShape.radius*0.1)/4; var graphics = myShape.graphics; graphics.beginFill(randomColor); graphics.drawCircle(0, 0, myShape.radius); var blurStrong = 0.5+myShape.radius/5; var blurFilter = new createjs.BoxBlurFilter(blurStrong, blurStrong, 2); myShape.filters = [blurFilter]; var margins = blurFilter.getBounds(); myShape.cache(-myShape.radius+margins.x-7, -myShape.radius+margins.y-7, myShape.radius*2+margins.width+14, myShape.radius*2+margins.height+14); stage.addChild(myShape); } createjs.Ticker.setFPS(60); createjs.Ticker.addListener(window); stage.update(); } function tick(){ var l = stage.getNumChildren(); for(var i=0; i<l; i++){ var circle = stage.getChildAt(i); circle.vx += Math.cos(circle.rot*Math.PI/180)*circle.speed; circle.vy += Math.sin(circle.rot*Math.PI/180)*circle.speed; circle.x = circle.vx; circle.y = circle.vy; if(circle.x > maxWidth+circle.radius){ circle.x = circle.vx = -circle.radius; }else if(circle.x < -circle.radius){ circle.x = circle.vx = maxWidth+circle.radius; } if(circle.y > maxHeight+circle.radius){ circle.vy = circle.y = -circle.radius; }else if(circle.y < -circle.radius){ circle.vy = circle.y = maxHeight + circle.radius; } } stage.update(); } <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <!--BoxBlurFilter.js--> <script type="text/javascript" src="http://jsrun.it/assets/q/l/d/O/qldOs"></script> <canvas id="canvas" width="430" height="430"></canvas> body{ background:#fff; } canvas#canvas{ background:#000000; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author yamacd 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/c4QS/js"></script> art&design blurfilter canvas easeljs html5_elements&api library&test カラフル キラキラ Discussion Questions on this code? Tags art&design blurfilter canvas easeljs html5_elements&api library&test カラフル キラキラ
