Forked from: nekodon's EaselJSでキラキラエフェクト View Diff (3) forked: EaselJSでキラキラエフェクト dirablue Follow 2014-12-23 20:11:47 License: MIT License Fork0 Fav5 View1618 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 71 lines HTML 6 lines CSS 8 lines forked: EaselJSでキラキラエフェクト // forked from nekodon's "EaselJSでキラキラエフェクト" http://jsdo.it/nekodon/thMU var count = 10; 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(30); 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 nekodon's "EaselJSでキラキラエフェクト" http://jsdo.it/nekodon/thMU var count = 10; 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(30); 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 dirablue 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/kq4D/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 カラフル キラキラ Favorite by monocore1934 aki.mt moonblogger kinvix fernandojsg
