JavaScriptでパーティクルアニメーションを実装する方法

2012/06/28 15:58

このQ&Aのポイント

JavaScriptを使用してパーティクルアニメーションを実装する方法について紹介します。
参考アニメーションを基に、マウス追跡とマウスクリック効果をなくし、パーティクルが画面端で反転し停止する動きを実現する方法を説明します。
最終的には所定の座標で停止する仕様にするため、徐々に動く量を減らしていく方法も紹介します。

ixkaito
お礼率47% (29/61)

JavaScript
回答数17
ありがとう数2

みんなの回答 （17）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2012/07/03 09:14 回答No.17

<!DOCTYPE html> <title>名前を点で、もてあそぶ</title> <meta charset="utf-8"> <style> </style> <body> <canvas id="mainCanvas" width="900" height="200"></canvas> <canvas id="hoge" width="600" height="50" style="display:none;"></canvas> <script> var w = 600; var h = 50; var ctx = document.querySelector ('#hoge').getContext ('2d'); var title = 'Fujillin'; var rgb = [ 　'rgb(255,　 0,　 0)', 'rgb(255, 128,　 0)', 'rgb(255, 255,　 0)', 　'rgb(128, 255,　 0)', 'rgb(　0, 255,　 0)', 'rgb(　0, 255, 128)', 　'rgb(　0, 255, 255)', 'rgb(　0, 128, 255)', 'rgb(　0,　 0, 255)', 　'rgb(128,　 0, 255)', 'rgb(255,　 0, 255)', 'rgb(255,　 0, 128)', 　'rgb(255,　 0, 0)' ]; var data = []; var p=[0,1,2,2.4,2.8,3.2,3.6,4]; ctx.fillRect (0, 0, w, h); ctx.font = "50px Arial"; for (var i = 0, I = title.length; i < I; i++) { 　ctx.strokeStyle = rgb[i]; 　ctx.strokeText (title.charAt (i), 30 * p[i]+10, h-h/5); } var n = 0, img, r, g, b; for (var x = 0; x < w; x++) { 　for (var y = 0; y < h; y++) { 　　img = ctx.getImageData (x, y, x+1,y+1); 　　r = img.data[0]; 　　g = img.data[1]; 　　b = img.data[2]; 　　if (r||g||b) 　　　data.push ([x,y,r,g,b]); 　} } var PI_2　　　　= Math.PI * 2; var canvasW　　 = 900; var canvasH　　 = 200; var friction　　= .94; var movers　　　= []; var canvas = document.getElementById ("mainCanvas"); var ctx = canvas.getContext ("2d"); (function () { 　for (var i = 0, I = data.length; i < I; i++) { 　　var m = new Mover(); 　　m.x　 = canvasW * 0.5; 　　m.y　 = canvasH * 0.5; 　　m.vX　= Math.cos(i) * Math.random() * 34; 　　m.vY　= Math.sin(i) * Math.random() * 34; 　　m.eX　= data[i][0]*4+100; 　　m.eY　= data[i][1]*3+25; 　　m.color = 'rgb('+data[i][2]+','+data[i][3]+','+data[i][4]+')'; 　　movers[i] = m; 　} 　setInterval (draw , 33); }) (); function draw(){ 　ctx.globalCompositeOperation = "source-over"; 　ctx.fillStyle = "rgb(0,0,0)"; 　ctx.fillRect( 0 , 0 , canvasW , canvasH ); 　ctx.globalCompositeOperation = "lighter"; 　　　var toDist　 = canvasW * 0.9; 　var blowDist = canvasW * 0.5; 　　var Mrnd = Math.random; 　var Mabs = Math.abs; 　　　　for (var i = 0, I = data.length; i < I; i++) { 　　var m　= movers[i]; 　　var dx = m.eX - m.x;//距離　　var nx = m.x - m.vX; 　　var dy = m.eY - m.y;//距離　　var ny = m.y - m.vY; 　　　　var ds = Math.sqrt (dx*dx + dy*dy); 　　　　if (ds < 2) { 　　　if (m.vX < 1) nx = m.eX; 　　　if (m.vY < 1) ny = m.eY; 　　} 　　else { 　　　m.vX = m.vX * friction - (dx / (ds *10)); 　　　m.vY = m.vY * friction - (dy / (ds *10)); 　　} 　　m.x = nx; 　　m.y = ny; 　　　　ctx.fillStyle = m.color; 　　ctx.beginPath (); 　　ctx.arc ( m.x , m.y , 1.5 , 0 , PI_2 , true ); 　　ctx.closePath (); 　　ctx.fill ();　　　} } function Mover(){ 　this.color = ''; 　this.y　　 = 0; 　this.x　　 = 0; 　this.vX　　= 0; 　this.vY　　= 0; 　this.size　= 1; 　this.eX　　= 0; 　this.eY　　= 0; } </script>

ログインすると、全ての回答が全文表示されます。

その他の回答 (16)

babu_baboo
ベストアンサー率51% (268/525)

2012/06/29 21:18 回答No.6

[89,37,0,136,0],[89,38,0,119,0],[90,34,0,136,0],[90,35,0,119,0],[90,37,0,136,0], [90,38,0,119,0],[91,34,0,136,0],[91,35,0,119,0],[91,37,0,136,0],[91,38,0,119,0], [92,34,0,136,0],[92,35,0,119,0],[92,37,0,136,0],[92,38,0,119,0],[93,34,0,136,0], [93,35,0,119,0],[93,37,0,136,0],[93,38,0,119,0],[94,34,0,136,0],[94,35,0,119,0], [94,37,0,136,0],[94,38,0,119,0],[95,34,0,136,0],[95,35,0,119,0],[95,37,0,136,0], [95,38,0,119,0],[96,34,0,136,0],[96,35,0,119,0],[96,37,0,136,0],[96,38,0,119,0], [97,34,0,136,0],[97,35,0,119,0],[97,37,0,136,0],[97,38,0,119,0],[98,34,0,136,0], [98,35,0,119,0],[98,37,0,136,0],[98,38,0,119,0],[99,34,0,136,0],[99,35,0,183,0], [99,36,0,120,0],[99,37,0,192,0],[99,38,0,119,0],[100,34,0,72,0],[100,35,0,135,0], [100,36,0,135,0],[100,37,0,135,0],[100,38,0,63,0],[101,8,0,68,34],[101,9,0,128,64], [101,10,0,128,64],[101,11,0,128,64],[101,12,0,128,64],[101,13,0,128,64],[101,14,0,128,64], [101,15,0,128,64],[101,16,0,128,64],[101,17,0,128,64],[101,18,0,128,64],[101,19,0,128,64], [101,20,0,128,64],[101,21,0,128,64],[101,22,0,128,64],[101,23,0,128,64],[101,24,0,128,64], [101,25,0,128,64],[101,26,0,128,64],[101,27,0,128,64],[101,28,0,128,64],[101,29,0,128,64], [101,30,0,128,64],[101,31,0,128,64],[101,32,0,60,30],[102,8,0,136,68],[102,9,0,187,94], [102,10,0,128,64],[102,11,0,128,64],[102,12,0,128,64],[102,13,0,128,64],[102,14,0,128,64], [102,15,0,128,64],[102,16,0,128,64],[102,17,0,128,64],[102,18,0,128,64],[102,19,0,128,64], [102,20,0,128,64],[102,21,0,128,64],[102,22,0,128,64],[102,23,0,128,64],[102,24,0,128,64], [102,25,0,128,64],[102,26,0,128,64],[102,27,0,128,64],[102,28,0,128,64],[102,29,0,128,64], [102,30,0,128,64],[102,31,0,196,98],[102,32,0,119,60],[103,8,0,136,68],[103,9,0,119,60], [103,31,0,136,68],[103,32,0,119,60],[104,8,0,136,68],[104,9,0,187,94],[104,10,0,128,64], [104,11,0,128,64],[104,12,0,128,64],[104,13,0,128,64],[104,14,0,128,64],[104,15,0,128,64], [104,16,0,128,64],[104,17,0,128,64],[104,18,0,127,64],[104,19,0,43,22],[104,20,0,14,7], [104,21,0,79,40],[104,22,0,116,58],[104,23,0,124,62],[104,24,0,106,53],[104,25,0,82,41], [104,26,0,24,12],[104,27,0,101,51],[104,28,0,128,64],[104,29,0,128,64],[104,30,0,128,64], [104,31,0,196,98],[104,32,0,119,60],[105,8,0,68,34],[105,9,0,128,64],[105,10,0,128,64], [105,11,0,128,64],[105,12,0,128,64],[105,13,0,128,64],[105,14,0,128,64],[105,15,0,130,65], [105,16,0,242,121],[105,17,0,215,108],[105,18,0,62,31],[105,19,0,126,63],[105,20,0,237,119], [105,21,0,182,91],[105,22,0,140,70],[105,23,0,132,66],[105,24,0,150,75],[105,25,0,179,90], [105,26,0,239,120],[105,27,0,154,77],[105,28,0,113,57],[105,29,0,235,118],[105,30,0,231,116], [105,31,0,128,64],[105,32,0,60,30],[106,15,0,137,69],[106,16,0,192,96],[106,17,0,10,5], [106,18,0,141,71],[106,19,0,199,100],[106,20,0,30,15],[106,26,0,17,9],[106,27,0,171,86], [106,28,0,172,86],[106,29,0,20,10],[106,30,0,204,102],[106,31,0,130,65],[107,14,0,35,18], [107,15,0,234,117],[107,16,0,17,9],[107,17,0,42,21],[107,18,0,231,116],[107,19,0,17,9], [107,27,0,5,3],[107,28,0,213,107],[107,29,0,56,28],[107,30,0,20,10],[107,31,0,233,117], [107,32,0,30,15],[108,14,0,98,49],[108,15,0,164,82],[108,17,0,114,57],[108,18,0,148,74], [108,28,0,145,73],[108,29,0,112,56],[108,31,0,162,81],[108,32,0,100,50],[109,14,0,121,61], [109,15,0,136,68],[109,17,0,119,60],[109,18,0,144,72],[109,28,0,149,75],[109,29,0,114,57], [109,31,0,138,69],[109,32,0,119,60],[110,14,0,98,49],[110,15,0,165,83],[110,17,0,55,28], [110,18,0,224,112],[110,19,0,8,4],[110,27,0,18,9],[110,28,0,231,116],[110,29,0,39,20], [110,31,0,170,85],[110,32,0,93,47],[111,14,0,31,16],[111,15,0,238,119],[111,16,0,6,3], [111,18,0,167,84],[111,19,0,181,91],[111,20,0,23,12],[111,26,0,32,16],[111,27,0,198,99], [111,28,0,139,70],[111,30,0,10,5],[111,31,0,237,119],[111,32,0,20,10],[112,15,0,185,93], [112,16,0,118,59],[112,18,0,6,3],[112,19,0,140,70],[112,20,0,241,121],[112,21,0,185,93],

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2012/06/29 21:17 回答No.5

[61,29,4,4,0],[62,19,1,1,0],[62,20,40,40,0],[62,21,91,91,0],[62,22,114,114,0], [62,23,122,122,0],[62,24,107,107,0],[62,25,79,79,0],[62,26,26,26,0],[65,14,34,68,0], [65,15,64,128,0],[65,16,64,128,0],[65,17,64,128,0],[65,18,64,128,0],[65,19,64,128,0], [65,20,64,128,0],[65,21,64,128,0],[65,22,64,128,0],[65,23,64,128,0],[65,24,64,128,0], [65,25,62,124,0],[65,26,54,108,0],[65,27,46,92,0],[65,28,24,48,0],[65,29,1,1,0], [66,14,68,136,0],[66,15,94,187,0],[66,16,64,128,0],[66,17,64,128,0],[66,18,64,128,0], [66,19,64,128,0],[66,20,64,128,0],[66,21,64,128,0],[66,22,64,128,0],[66,23,64,128,0], [66,24,64,128,0],[66,25,66,132,0],[66,26,74,148,0],[66,27,83,165,0],[66,28,110,219,0], [66,29,104,207,0],[66,30,27,54,0],[67,14,68,136,0],[67,15,60,119,0],[67,29,43,86,0], [67,30,117,233,0],[67,31,24,47,0],[68,14,68,136,0],[68,15,94,187,0],[68,16,64,128,0], [68,17,64,128,0],[68,18,64,128,0],[68,19,64,128,0],[68,20,64,128,0],[68,21,64,128,0], [68,22,64,128,0],[68,23,64,127,0],[68,24,59,118,0],[68,25,52,104,0],[68,26,44,87,0], [68,27,9,18,0],[68,30,49,98,0],[68,31,97,193,0],[69,14,34,68,0],[69,15,64,128,0], [69,16,64,128,0],[69,17,64,128,0],[69,18,64,128,0],[69,19,64,128,0],[69,20,64,128,0], [69,21,64,128,0],[69,22,64,128,0],[69,23,64,128,0],[69,24,69,138,0],[69,25,76,152,0], [69,26,88,176,0],[69,27,120,239,0],[69,28,40,80,0],[69,30,1,2,0],[69,31,116,232,0], [69,32,19,38,0],[70,27,27,53,0],[70,28,118,235,0],[70,29,9,17,0],[70,31,82,164,0], [70,32,50,99,0],[71,28,86,171,0],[71,29,50,99,0],[71,31,69,137,0],[71,32,60,119,0], [72,28,68,136,0],[72,29,60,119,0],[72,31,78,156,0],[72,32,52,104,0],[73,28,83,165,0], [73,29,51,101,0],[73,30,1,2,0],[73,31,111,222,0],[73,32,28,55,0],[74,27,9,18,0], [74,28,119,238,0],[74,29,12,24,0],[74,30,49,98,0],[74,31,102,204,0],[75,26,9,17,0], [75,27,93,185,0],[75,28,71,142,0],[75,29,36,71,0],[75,30,118,236,0],[75,31,25,50,0], [76,14,34,68,0],[76,15,64,128,0],[76,16,64,128,0],[76,17,64,128,0],[76,18,64,128,0], [76,19,64,128,0],[76,20,64,128,0],[76,21,64,128,0],[76,22,64,128,0],[76,23,65,130,0], [76,24,73,146,0],[76,25,88,175,0],[76,26,119,238,0],[76,27,80,159,0],[76,28,73,146,0], [76,29,127,253,0],[76,30,93,186,0],[76,31,64,128,0],[76,32,30,60,0],[77,14,68,136,0], [77,15,94,187,0],[77,16,64,128,0],[77,17,64,128,0],[77,18,64,128,0],[77,19,64,128,0], [77,20,64,128,0],[77,21,64,128,0],[77,22,64,128,0],[77,23,63,126,0],[77,24,55,110,0], [77,25,44,87,0],[77,26,15,30,0],[77,27,50,99,0],[77,28,64,128,0],[77,29,64,128,0], [77,30,64,128,0],[77,31,98,196,0],[77,32,60,119,0],[78,14,68,136,0],[78,15,60,119,0], [78,31,68,136,0],[78,32,60,119,0],[79,14,68,136,0],[79,15,94,187,0],[79,16,64,128,0], [79,17,64,128,0],[79,18,64,128,0],[79,19,64,128,0],[79,20,64,128,0],[79,21,64,128,0], [79,22,64,128,0],[79,23,64,128,0],[79,24,64,128,0],[79,25,64,128,0],[79,26,64,128,0], [79,27,64,128,0],[79,28,64,128,0],[79,29,64,128,0],[79,30,64,128,0],[79,31,98,196,0], [79,32,60,119,0],[80,14,34,68,0],[80,15,64,128,0],[80,16,64,128,0],[80,17,64,128,0], [80,18,64,128,0],[80,19,64,128,0],[80,20,64,128,0],[80,21,64,128,0],[80,22,64,128,0], [80,23,64,128,0],[80,24,64,128,0],[80,25,64,128,0],[80,26,64,128,0],[80,27,64,128,0], [80,28,64,128,0],[80,29,64,128,0],[80,30,64,128,0],[80,31,64,128,0],[80,32,30,60,0], [80,34,0,64,0],[80,35,0,120,0],[80,36,0,120,0],[80,37,0,120,0],[80,38,0,56,0], [81,34,0,136,0],[81,35,0,191,0],[81,36,0,135,0],[81,37,0,199,0],[81,38,0,119,0], [82,34,0,136,0],[82,35,0,119,0],[82,37,0,136,0],[82,38,0,119,0],[83,34,0,136,0], [83,35,0,119,0],[83,37,0,136,0],[83,38,0,119,0],[84,34,0,136,0],[84,35,0,119,0], [84,37,0,136,0],[84,38,0,119,0],[85,34,0,136,0],[85,35,0,119,0],[85,37,0,136,0], [85,38,0,119,0],[86,34,0,136,0],[86,35,0,119,0],[86,37,0,136,0],[86,38,0,119,0], [87,34,0,136,0],[87,35,0,119,0],[87,37,0,136,0],[87,38,0,119,0],[88,34,0,136,0], [88,35,0,119,0],[88,37,0,136,0],[88,38,0,119,0],[89,34,0,136,0],[89,35,0,119,0],

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2012/06/29 21:15 回答No.4

[47,9,128,128,0],[47,10,128,128,0],[47,11,128,128,0],[47,12,128,128,0],[47,13,128,128,0], [47,14,128,128,0],[47,15,128,128,0],[47,16,128,128,0],[47,17,128,128,0],[47,18,128,128,0], [47,19,128,128,0],[47,20,128,128,0],[47,21,128,128,0],[47,22,128,128,0],[47,23,128,128,0], [47,24,128,128,0],[47,25,128,128,0],[47,26,128,128,0],[47,27,128,128,0],[47,28,128,128,0], [47,29,128,128,0],[47,30,128,128,0],[47,31,128,128,0],[47,32,60,60,0],[48,8,136,136,0], [48,9,187,187,0],[48,10,128,128,0],[48,11,128,128,0],[48,12,128,128,0],[48,13,128,128,0], [48,14,128,128,0],[48,15,128,128,0],[48,16,128,128,0],[48,17,128,128,0],[48,18,128,128,0], [48,19,128,128,0],[48,20,128,128,0],[48,21,128,128,0],[48,22,128,128,0],[48,23,128,128,0], [48,24,128,128,0],[48,25,128,128,0],[48,26,128,128,0],[48,27,128,128,0],[48,28,128,128,0], [48,29,128,128,0],[48,30,128,128,0],[48,31,196,196,0],[48,32,119,119,0],[49,8,136,136,0], [49,9,119,119,0],[49,31,136,136,0],[49,32,119,119,0],[50,8,136,136,0],[50,9,187,187,0], [50,10,128,128,0],[50,11,128,128,0],[50,12,128,128,0],[50,13,128,128,0],[50,14,128,128,0], [50,15,128,128,0],[50,16,128,128,0],[50,17,128,128,0],[50,18,127,127,0],[50,19,43,43,0], [50,20,14,14,0],[50,21,79,79,0],[50,22,116,116,0],[50,23,124,124,0],[50,24,106,106,0], [50,25,82,82,0],[50,26,24,24,0],[50,27,101,101,0],[50,28,128,128,0],[50,29,128,128,0], [50,30,128,128,0],[50,31,196,196,0],[50,32,119,119,0],[51,8,68,68,0],[51,9,128,128,0], [51,10,128,128,0],[51,11,128,128,0],[51,12,128,128,0],[51,13,128,128,0],[51,14,128,128,0], [51,15,130,130,0],[51,16,242,242,0],[51,17,215,215,0],[51,18,62,62,0],[51,19,126,126,0], [51,20,237,237,0],[51,21,182,182,0],[51,22,140,140,0],[51,23,132,132,0],[51,24,150,150,0], [51,25,179,179,0],[51,26,239,239,0],[51,27,154,154,0],[51,28,113,113,0],[51,29,235,235,0], [51,30,231,231,0],[51,31,128,128,0],[51,32,60,60,0],[52,15,137,137,0],[52,16,192,192,0], [52,17,10,10,0],[52,18,141,141,0],[52,19,199,199,0],[52,20,30,30,0],[52,26,17,17,0], [52,27,171,171,0],[52,28,172,172,0],[52,29,20,20,0],[52,30,204,204,0],[52,31,130,130,0], [53,14,35,35,0],[53,15,234,234,0],[53,16,17,17,0],[53,17,42,42,0],[53,18,231,231,0], [53,19,17,17,0],[53,27,5,5,0],[53,28,213,213,0],[53,29,56,56,0],[53,30,20,20,0], [53,31,233,233,0],[53,32,30,30,0],[54,14,98,98,0],[54,15,164,164,0],[54,17,114,114,0], [54,18,148,148,0],[54,28,145,145,0],[54,29,112,112,0],[54,31,162,162,0],[54,32,100,100,0], [55,14,121,121,0],[55,15,136,136,0],[55,17,119,119,0],[55,18,144,144,0],[55,28,149,149,0], [55,29,114,114,0],[55,31,138,138,0],[55,32,119,119,0],[56,14,98,98,0],[56,15,165,165,0], [56,17,55,55,0],[56,18,224,224,0],[56,19,8,8,0],[56,27,18,18,0],[56,28,231,231,0], [56,29,39,39,0],[56,31,170,170,0],[56,32,93,93,0],[57,14,31,31,0],[57,15,238,238,0], [57,16,6,6,0],[57,18,167,167,0],[57,19,181,181,0],[57,20,23,23,0],[57,26,32,32,0], [57,27,198,198,0],[57,28,139,139,0],[57,30,10,10,0],[57,31,237,237,0],[57,32,20,20,0], [58,15,185,185,0],[58,16,118,118,0],[58,18,6,6,0],[58,19,140,140,0],[58,20,241,241,0], [58,21,185,185,0],[58,22,144,144,0],[58,23,133,133,0],[58,24,146,146,0],[58,25,191,191,0], [58,26,238,238,0],[58,27,120,120,0],[58,28,1,1,0],[58,30,146,146,0],[58,31,156,156,0], [59,15,36,36,0],[59,16,233,233,0],[59,17,83,83,0],[59,20,17,17,0],[59,21,75,75,0], [59,22,111,111,0],[59,23,123,123,0],[59,24,111,111,0],[59,25,71,71,0],[59,26,12,12,0], [59,28,2,2,0],[59,29,124,124,0],[59,30,216,216,0],[59,31,20,20,0],[60,16,48,48,0], [60,17,224,224,0],[60,18,166,166,0],[60,19,52,52,0],[60,26,1,1,0],[60,27,68,68,0], [60,28,193,193,0],[60,29,201,201,0],[60,30,27,27,0],[61,17,11,11,0],[61,18,124,124,0], [61,19,223,223,0],[61,20,221,221,0],[61,21,167,167,0],[61,22,143,143,0],[61,23,134,134,0], [61,24,150,150,0],[61,25,180,180,0],[61,26,233,233,0],[61,27,209,209,0],[61,28,102,102,0],

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2012/06/29 21:14 回答No.3

[25,23,134,0,0],[25,24,150,0,0],[25,25,180,0,0],[25,26,233,0,0],[25,27,209,0,0], [25,28,102,0,0],[25,29,4,0,0],[26,19,1,0,0],[26,20,40,0,0],[26,21,91,0,0], [26,22,114,0,0],[26,23,122,0,0],[26,24,107,0,0],[26,25,79,0,0],[26,26,26,0,0], [28,18,18,9,0],[28,19,94,47,0],[28,20,67,34,0],[28,25,55,28,0],[28,26,109,55,0], [28,27,121,61,0],[28,28,89,45,0],[28,29,17,9,0],[29,16,7,4,0],[29,17,132,66,0], [29,18,238,119,0],[29,19,227,114,0],[29,20,119,60,0],[29,23,30,15,0],[29,24,192,96,0], [29,25,221,111,0],[29,26,148,74,0],[29,27,135,68,0],[29,28,176,88,0],[29,29,235,118,0], [29,30,95,48,0],[30,15,3,2,0],[30,16,174,87,0],[30,17,175,88,0],[30,18,23,12,0], [30,19,136,68,0],[30,20,119,60,0],[30,22,19,10,0],[30,23,219,110,0],[30,24,119,60,0], [30,25,2,1,0],[30,29,39,20,0],[30,30,222,111,0],[30,31,90,45,0],[31,15,97,49,0], [31,16,193,97,0],[31,17,5,3,0],[31,19,153,77,0],[31,20,119,60,0],[31,22,151,76,0], [31,23,147,74,0],[31,25,13,7,0],[31,26,106,53,0],[31,27,98,49,0],[31,28,9,5,0], [31,30,51,26,0],[31,31,230,115,0],[31,32,7,4,0],[32,15,218,109,0],[32,16,62,31,0], [32,18,140,70,0],[32,19,215,108,0],[32,20,53,27,0],[32,21,11,6,0],[32,22,239,120,0], [32,23,22,11,0],[32,24,2,1,0],[32,25,204,102,0],[32,26,173,87,0],[32,27,182,91,0], [32,28,194,97,0],[32,29,1,1,0],[32,31,194,97,0],[32,32,67,34,0],[33,14,34,17,0], [33,15,227,114,0],[33,17,32,16,0],[33,18,232,116,0],[33,19,18,9,0],[33,21,58,29,0], [33,22,205,103,0],[33,24,67,34,0],[33,25,202,101,0],[33,27,1,1,0],[33,28,211,106,0], [33,29,68,34,0],[33,31,141,71,0],[33,32,116,58,0],[34,14,93,47,0],[34,15,170,85,0], [34,17,94,47,0],[34,18,163,82,0],[34,21,101,51,0],[34,22,162,81,0],[34,24,121,61,0], [34,25,144,72,0],[34,28,145,73,0],[34,29,112,56,0],[34,31,136,68,0],[34,32,119,60,0], [35,14,111,56,0],[35,15,145,73,0],[35,17,114,57,0],[35,18,142,71,0],[35,21,143,72,0], [35,22,119,60,0],[35,24,172,86,0],[35,25,92,46,0],[35,28,140,70,0],[35,29,113,57,0], [35,31,154,77,0],[35,32,105,53,0],[36,14,120,60,0],[36,15,136,68,0],[36,17,117,59,0], [36,18,141,71,0],[36,21,186,93,0],[36,22,77,39,0],[36,24,208,104,0],[36,25,52,26,0], [36,28,177,89,0],[36,29,79,40,0],[36,31,202,101,0],[36,32,65,33,0],[37,14,111,56,0], [37,15,145,73,0],[37,17,92,46,0],[37,18,166,83,0],[37,21,228,114,0],[37,22,34,17,0], [37,24,242,121,0],[37,25,18,9,0],[37,27,32,16,0],[37,28,240,120,0],[37,29,14,7,0], [37,30,22,11,0],[37,31,242,121,0],[37,32,11,6,0],[38,14,92,46,0],[38,15,171,86,0], [38,17,39,20,0],[38,18,232,116,0],[38,19,7,4,0],[38,20,34,17,0],[38,21,237,119,0], [38,22,2,1,0],[38,23,37,19,0],[38,24,223,112,0],[38,26,13,7,0],[38,27,194,97,0], [38,28,123,62,0],[38,30,145,73,0],[38,31,146,73,0],[39,14,33,17,0],[39,15,227,114,0], [39,16,1,1,0],[39,18,165,83,0],[39,19,201,101,0],[39,20,177,89,0],[39,21,170,85,0], [39,23,103,52,0],[39,24,218,109,0],[39,25,151,76,0],[39,26,223,112,0],[39,27,154,77,0], [39,28,3,2,0],[39,29,73,37,0],[39,30,248,124,0],[39,31,37,19,0],[40,15,209,105,0], [40,16,77,39,0],[40,18,2,1,0],[40,19,81,41,0],[40,20,122,61,0],[40,21,56,28,0], [40,23,80,40,0],[40,24,124,62,0],[40,25,105,53,0],[40,26,50,25,0],[40,29,91,46,0], [40,30,178,89,0],[40,31,227,114,0],[40,32,54,27,0],[41,15,67,34,0],[41,16,227,114,0], [41,17,47,24,0],[41,31,147,74,0],[41,32,119,60,0],[42,16,86,43,0],[42,17,230,115,0], [42,18,192,96,0],[42,19,152,76,0],[42,20,137,69,0],[42,21,128,64,0],[42,22,128,64,0], [42,23,128,64,0],[42,24,126,63,0],[42,25,117,59,0],[42,26,106,53,0],[42,27,95,48,0], [42,28,85,43,0],[42,29,64,32,0],[42,30,14,7,0],[42,31,136,68,0],[42,32,119,60,0], [43,17,8,4,0],[43,18,75,38,0],[43,19,104,52,0],[43,20,119,60,0],[43,21,127,64,0], [43,22,128,64,0],[43,23,128,64,0],[43,24,129,65,0],[43,25,138,69,0],[43,26,149,75,0], [43,27,160,80,0],[43,28,170,85,0],[43,29,195,98,0],[43,30,241,121,0],[43,31,234,117,0], [43,32,119,60,0],[44,30,8,4,0],[44,31,88,44,0],[44,32,79,40,0],[47,8,68,68,0],

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2012/06/29 21:11 回答No.2

<!DOCTYPE html> <title></title> <meta charset="utf-8" /> <style type="text/css">canvas { background-color:#000; }</style> <body><canvas id="mainCanvas" width="900" height="200"></canvas> <script> var data = [ [11,8,68,0,0],[11,9,128,0,0],[11,10,128,0,0],[11,11,128,0,0],[11,12,128,0,0], [11,13,128,0,0],[11,14,128,0,0],[11,15,128,0,0],[11,16,128,0,0],[11,17,128,0,0], [11,18,128,0,0],[11,19,128,0,0],[11,20,128,0,0],[11,21,128,0,0],[11,22,128,0,0], [11,23,128,0,0],[11,24,128,0,0],[11,25,128,0,0],[11,26,128,0,0],[11,27,128,0,0], [11,28,128,0,0],[11,29,128,0,0],[11,30,128,0,0],[11,31,128,0,0],[11,32,60,0,0], [12,8,136,0,0],[12,9,187,0,0],[12,10,128,0,0],[12,11,128,0,0],[12,12,128,0,0], [12,13,128,0,0],[12,14,128,0,0],[12,15,128,0,0],[12,16,128,0,0],[12,17,128,0,0], [12,18,128,0,0],[12,19,128,0,0],[12,20,128,0,0],[12,21,128,0,0],[12,22,128,0,0], [12,23,128,0,0],[12,24,128,0,0],[12,25,128,0,0],[12,26,128,0,0],[12,27,128,0,0], [12,28,128,0,0],[12,29,128,0,0],[12,30,128,0,0],[12,31,196,0,0],[12,32,119,0,0], [13,8,136,0,0],[13,9,119,0,0],[13,31,136,0,0],[13,32,119,0,0],[14,8,136,0,0], [14,9,187,0,0],[14,10,128,0,0],[14,11,128,0,0],[14,12,128,0,0],[14,13,128,0,0], [14,14,128,0,0],[14,15,128,0,0],[14,16,128,0,0],[14,17,128,0,0],[14,18,127,0,0], [14,19,43,0,0],[14,20,14,0,0],[14,21,79,0,0],[14,22,116,0,0],[14,23,124,0,0], [14,24,106,0,0],[14,25,82,0,0],[14,26,24,0,0],[14,27,101,0,0],[14,28,128,0,0], [14,29,128,0,0],[14,30,128,0,0],[14,31,196,0,0],[14,32,119,0,0],[15,8,68,0,0], [15,9,128,0,0],[15,10,128,0,0],[15,11,128,0,0],[15,12,128,0,0],[15,13,128,0,0], [15,14,128,0,0],[15,15,130,0,0],[15,16,242,0,0],[15,17,215,0,0],[15,18,62,0,0], [15,19,126,0,0],[15,20,237,0,0],[15,21,182,0,0],[15,22,140,0,0],[15,23,132,0,0], [15,24,150,0,0],[15,25,179,0,0],[15,26,239,0,0],[15,27,154,0,0],[15,28,113,0,0], [15,29,235,0,0],[15,30,231,0,0],[15,31,128,0,0],[15,32,60,0,0],[16,15,137,0,0], [16,16,192,0,0],[16,17,10,0,0],[16,18,141,0,0],[16,19,199,0,0],[16,20,30,0,0], [16,26,17,0,0],[16,27,171,0,0],[16,28,172,0,0],[16,29,20,0,0],[16,30,204,0,0], [16,31,130,0,0],[17,14,35,0,0],[17,15,234,0,0],[17,16,17,0,0],[17,17,42,0,0], [17,18,231,0,0],[17,19,17,0,0],[17,27,5,0,0],[17,28,213,0,0],[17,29,56,0,0], [17,30,20,0,0],[17,31,233,0,0],[17,32,30,0,0],[18,14,98,0,0],[18,15,164,0,0], [18,17,114,0,0],[18,18,148,0,0],[18,28,145,0,0],[18,29,112,0,0],[18,31,162,0,0], [18,32,100,0,0],[19,14,121,0,0],[19,15,136,0,0],[19,17,119,0,0],[19,18,144,0,0], [19,28,149,0,0],[19,29,114,0,0],[19,31,138,0,0],[19,32,119,0,0],[20,14,98,0,0], [20,15,165,0,0],[20,17,55,0,0],[20,18,224,0,0],[20,19,8,0,0],[20,27,18,0,0], [20,28,231,0,0],[20,29,39,0,0],[20,31,170,0,0],[20,32,93,0,0],[21,14,31,0,0], [21,15,238,0,0],[21,16,6,0,0],[21,18,167,0,0],[21,19,181,0,0],[21,20,23,0,0], [21,26,32,0,0],[21,27,198,0,0],[21,28,139,0,0],[21,30,10,0,0],[21,31,237,0,0], [21,32,20,0,0],[22,15,185,0,0],[22,16,118,0,0],[22,18,6,0,0],[22,19,140,0,0], [22,20,241,0,0],[22,21,185,0,0],[22,22,144,0,0],[22,23,133,0,0],[22,24,146,0,0], [22,25,191,0,0],[22,26,238,0,0],[22,27,120,0,0],[22,28,1,0,0],[22,30,146,0,0], [22,31,156,0,0],[23,15,36,0,0],[23,16,233,0,0],[23,17,83,0,0],[23,20,17,0,0], [23,21,75,0,0],[23,22,111,0,0],[23,23,123,0,0],[23,24,111,0,0],[23,25,71,0,0], [23,26,12,0,0],[23,28,2,0,0],[23,29,124,0,0],[23,30,216,0,0],[23,31,20,0,0], [24,16,48,0,0],[24,17,224,0,0],[24,18,166,0,0],[24,19,52,0,0],[24,26,1,0,0], [24,27,68,0,0],[24,28,193,0,0],[24,29,201,0,0],[24,30,27,0,0],[25,17,11,0,0], [25,18,124,0,0],[25,19,223,0,0],[25,20,221,0,0],[25,21,167,0,0],[25,22,143,0,0],

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2012/06/29 11:16 回答No.1

ご質問文を読んだ印象では、コードをいろいろ考える前に、まず、ロジックを整理なさるのがよろしそうに感じます。（印象なので、違うかも知れませんが）それから、1個の場合の動きを実現し、それを複数対応にしてゆくとか… 参考サイトの、「アニメーション」から「大量の物体をアニメーションする」と同じような順で作成するのがわかり易いのではないでしょうか。＞マウスへの追跡とマウスクリック効果をなくしとのことなので、「さらに高度なアニメーション表現へ」のところまでは必要ないですね。蛇足ながら… ＞画面端で一度跳ね返ったあと、予め所定の座標へ到達すると止まるということなので、直線運動を前提とするのであれば、初期の位置から一回跳ね返って所定の位置に到達できる方向は4通りのうちのどれかに決まってしまいます。（コーナーで跳ね返る特殊なケースもありますが…）ということで、初期位置を（ランダムにするのかどうか不明ですが）決定する時に、移動方向も決めておけばよいのではないでしょうか。（移動方向が自由（ランダム）ではない点が、参考サイトとは異なってきます。）＞徐々に動く量を減らし、最終的には所定の座標で止まる仕様速度が段々減ってゆくような方法を（こちらは何でも良いので自由に）決めてあげればよろしいかと。例えば、目的位置までの距離との関数にするとか、経過時間に応じて減ってゆくようにするとか… いずれにしろ、目的地に到達した時には速度が0になる必要があります。また、ご提示の仕様ですと、所定の位置に集まってしまった後は動かないと想像しますが、参考サイトの方法のままだと、ずっとアニメーションを描き続ける（実は、同じ画像なので見た目は同じ）ことになりますので、目的地に到達したパーティクルのアニメーションは終了するようにしておいたほうが望ましいかと思います。また、参考サイトと同じ方法で位置の計算を行なうとわずかに誤差が出る可能性があるので、最後に所定の位置へピッタリとなるかどうかがちょっと怪しそうです。（画面程度の座標系であれば問題ないと思いますが、正確な座標系だと多分ピッタリにならない）確実を期するのなら、パーティクルの次の位置を計算する時に、単位ベクトルの加算という方法ではなく、毎回、現在位置と目的位置から次の位置を計算するようにしてあげる方が正確になるかと思います。

質問者

補足 2012/06/29 14:58

fujillin様、早速ご回答いただきましてありがとうございます。 >それから、1個の場合の動きを実現し、それを複数対応にしてゆくとか… 早速パーティクル1つの場合を作成してみましたので、アドバイスをいただけますでしょうか。 http://drmkr.net/test/particle_test.html ○マウス追跡とマウスクリックの効果について、それっぽいところをコメントアウトしました。合っていますでしょうか。（一応現在のところアニメーションに影響は出ていないようです） ○画面端で弾く仕様について、訂正させていただきます。テストページの仕様で問題ございません。開始点を画面中央にし、ランダムで外に弾くスタートなので、パーティクルによっては画面端に到達する前に指定座標に引き寄せられますが、これで問題ございません。何回か更新すると動きを確認できると思います。離れたところに弾くと、引き寄せられるのに結構時間かかりますが、ソース101行目の"0.86"を調整できそうなので、（合っていますでしょうか？）こちらも問題ございません。 ○徐々に動く量を減らし、最終的には所定の座標で止まる仕様について、ソース116、117行目のmouseX,Yを仮に(100,100)にしました。問題なく動作している模様ですが、以下が解決できないところですので、どうかご教授いただけますと幸甚です。 ※(1)パーティクルが止まってくれません・・・ソース119～121行目のところっぽいですが、他の式にしたら動きがおかしくなりました。。。 119行目の対処もよくわかりません・・・ ※(2)一番上に"var logo"で最終の座標と色の配列の一部をコメントアウトしていますが、これをどのように使えばいいのでしょうか。そもそもこの配列の書き方で大丈夫でしょうか。 ※(3)＞目的地に到達したパーティクルのアニメーションは終了するようにしておいたほうが望ましいおっしゃっていただいたように、確かにそうですね。どのようにすればいいのかご教授いただけますでしょうか。以上、大変長くなりましたが、何卒よろしくお願い致します。

ログインすると、全ての回答が全文表示されます。