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