- ベストアンサー
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)
- kamepanman
- ベストアンサー率43% (19/44)
ctx.fillStyle = "rgba(255,255,255,.65)"; このせいで薄くなっているのであれば、 canvasを２枚使用し、ダブルバッファリングするのはどうでしょうか？ front_canvasは、画面に見えているcanvas back_canbasは、背面で計算・描画が行われているcanvas で、最後にz-indexで前後入れ替えれば、いいのではないでしょうか？ ざっとしかコード読んでないので、的外れだったらごめんなさい
- fujillin
- ベストアンサー率61% (1594/2576)
かき忘れました。 ＞パーティクルのアニメーションは終了する canvasを書き直しているので、一個だけ止めるということはできませんが、移動計算を省略することは可能です。 計算中/終了のフラグを作っておいて、そのフラグによって（移動計算+表示）/（表示のみ）の処理をしてあげるとかの方法はあるのではないでしょうか。 移動計算をした回数を数えておいて、その数が0だったらもう計算する対象が残っていないことになるので、全体のsetIntervalを停止するとか。
お礼
ご回答ありがとうございます。 やりたいことについては、下記に途中状態のものを作成しました。 http://drmkr.net/test/particle_test.html 動きについては、#13様の回答も参考にしたいと思っています。 ＞あるいは位置と速度の両方を判断基準とするとか… （位置が近くても速度が速い時はそのままスルーするとか） それはいいですね、挑戦してみたいと思います。 とりあえず引き続き制作していきたいと思います。 また報告させていただきます。
補足
fujillin様、こんにちは。 おかげさまで完成形に近づきつつあります。 http://drmkr.net/test/particle_test.html そこで、#13の補足に書いてありますように、(1)(2)について、もし可能であれば、またアドバイスをいただけますと幸甚です。 よろしくお願い致します。
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 おやおや、いつの間にか壮大な回答が・・・ 質問者様のやりたいこともこれに似たことか、あるいは逆のことなのかなぁ。 （直線が点になるのか、点から直線になるのか・・・） #1の回答では誤解していましたが、参考サイトのスクリプトをいじりたいのなら、そこから移動する部分だけを新しく組みなおしてみれば、計算の骨格がわかるはず。 いらないところを省いて、必要最小限のものに再組み立て直すことで、どこ変えればよいか見えてくるかと。 まぁ、#13様の回答を見れば目的位置との距離がわかるようになっていますので、そこから計算を分岐するようにするという手もありそう。 あるいは位置と速度の両方を判断基準とするとか… （位置が近くても速度が速い時はそのままスルーするとか）
- babu_baboo
- ベストアンサー率51% (268/525)
[278,25,79,0,0],[278,26,41,0,0],[278,27,1,0,0] ]; var PI_2 = Math.PI * 2; var canvasW = 900; var canvasH = 200; var friction = .92; var movers = []; var canvas; var ctx; var isMouseDown; (function init(){ canvas = document.getElementById("mainCanvas"); if ( canvas.getContext ){ setup(); setInterval( draw , 33 ); } })(); function setup(){ ctx = canvas.getContext("2d"); 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+1); m.vY = Math.sin(i) * (Math.random() * 34+1); m.eX = data[i][0]*3; m.eY = data[i][1]*3+50; m.color = 'rgb('+data[i][2]+','+data[i][3]+','+data[i][4]+')'; movers[i] = m; } document.onmousedown = onDocMouseDown; document.onmouseup = onDocMouseUp; } function draw () { ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(8,8,12,.65)"; 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 x = m.x; var y = m.y; var vX = m.vX; var vY = m.vY; var dX = x - m.eX; var dY = y - m.eY; var d = Math.sqrt( dX * dX + dY * dY );//これが距離なんだから if( d == 0 ) d = 0.001; dX /= d; dY /= d; if ( isMouseDown ){ if ( d < blowDist ){ var blowAcc = ( 1 - ( d / blowDist ) ) * 5; vX += dX * blowAcc + 0.5 - Mrnd(); vY += dY * blowAcc + 0.5 - Mrnd(); } } if ( d < toDist ){ var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0005; vX -= dX * toAcc; vY -= dY * toAcc; } vX *= friction; vY *= friction; var avgVX = Mabs( vX ); var avgVY = Mabs( vY ); var avgV = ( avgVX + avgVY ) * 0.5; var sc = Math.max( Math.min( avgV * 0.45 , 3.5 ) , 1.2 ); var nextX = x + vX; var nextY = y + vY; if ( nextX > canvasW ){ nextX = canvasW; vX *= -1; } else if ( nextX < 0 ){ nextX = 0; vX *= -1; } if ( nextY > canvasH ){ nextY = canvasH; vY *= -1; } else if ( nextY < 0 ){ nextY = 0; vY *= -1; } m.vX = vX; m.vY = vY; m.x = nextX; m.y = nextY; ctx.fillStyle = m.color; ctx.beginPath (); ctx.arc ( nextX , nextY , sc , 0 , PI_2 , true ); ctx.closePath (); ctx.fill (); } } function onDocMouseDown( e ){ isMouseDown = true; return false; } function onDocMouseUp( e ){ isMouseDown = false; return false; } 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; } function rect( context , x , y , w , h ){ context.beginPath(); context.rect( x , y , w , h ); context.closePath(); context.fill(); } </script> ごめんなさい。いきおいで、データをかきこんだものの、つかれはてました。（放棄） ぜんかくくうはくは、はんかくに。 タイマーはとめていません。 てろりすと！よばわりされるね。
お礼
babu_baboo様、スケールの大きい答えありがとうございます。 早速実行させていただきました。作りたかったものとは少し違いますが、こちらもなかなかカッコいいです。 細かいところはこれから確認していきますが、取り急ぎお礼までに。
補足
babu_baboo様、こんにちは。 いただきましたスクリプトを元に、完成形に近づきつつあります。 http://drmkr.net/test/particle_test.html いろいろやってみて気づいたことがございますので、もしお時間ございましたら、ご教授願いたいです。 var d = Math.sqrt( dX * dX + dY * dY );が距離というのはわかっていましたが、以前 if(d==0) としても全く効いていなかったのですが、いろいろやってやっと気づいたのですが、どうやらdがピッタリ0になることはほとんどないようですね。if(d<=5)などとしたところ、パーティクルを止めることができました。 そこで、いくつか質問がございます。 (1)パーティクルを止めたあと、x=m.eX; y=m.eY; としても、やはりすこし座標のズレが生じてしまうようですが、これはどうしようもないことでしょうか。（特にChrome） (2)canvasが常に描き直されているため、止めたあとのパーティクルが薄くなってしまいますが、これもなにか対処法がございますでしょうか。（こちらも特にChrome） もしどうしようもない場合は、画像を用意し、クロスフェードさせようかなと考えております。 以上、何卒よろしくお願い致します。
- babu_baboo
- ベストアンサー率51% (268/525)
[215,21,143,0,72],[215,22,119,0,60],[215,24,172,0,86],[215,25,92,0,46],[215,28,140,0,70], [215,29,113,0,57],[215,31,154,0,77],[215,32,105,0,53],[216,14,120,0,60],[216,15,136,0,68], [216,17,117,0,59],[216,18,141,0,71],[216,21,186,0,93],[216,22,77,0,39],[216,24,208,0,104], [216,25,52,0,26],[216,28,177,0,89],[216,29,79,0,40],[216,31,202,0,101],[216,32,65,0,33], [217,14,111,0,56],[217,15,145,0,73],[217,17,92,0,46],[217,18,166,0,83],[217,21,228,0,114], [217,22,34,0,17],[217,24,242,0,121],[217,25,18,0,9],[217,27,32,0,16],[217,28,240,0,120], [217,29,14,0,7],[217,30,22,0,11],[217,31,242,0,121],[217,32,11,0,6],[218,14,92,0,46], [218,15,171,0,86],[218,17,39,0,20],[218,18,232,0,116],[218,19,7,0,4],[218,20,34,0,17], [218,21,237,0,119],[218,22,2,0,1],[218,23,37,0,19],[218,24,223,0,112],[218,26,13,0,7], [218,27,194,0,97],[218,28,123,0,62],[218,30,145,0,73],[218,31,146,0,73],[219,14,33,0,17], [219,15,227,0,114],[219,16,1,0,1],[219,18,165,0,83],[219,19,201,0,101],[219,20,177,0,89], [219,21,170,0,85],[219,23,103,0,52],[219,24,218,0,109],[219,25,151,0,76],[219,26,223,0,112], [219,27,154,0,77],[219,28,3,0,2],[219,29,73,0,37],[219,30,248,0,124],[219,31,37,0,19], [220,15,209,0,105],[220,16,77,0,39],[220,18,2,0,1],[220,19,81,0,41],[220,20,122,0,61], [220,21,56,0,28],[220,23,80,0,40],[220,24,124,0,62],[220,25,105,0,53],[220,26,50,0,25], [220,29,91,0,46],[220,30,178,0,89],[220,31,227,0,114],[220,32,54,0,27],[221,15,67,0,34], [221,16,227,0,114],[221,17,47,0,24],[221,31,147,0,74],[221,32,119,0,60],[222,16,86,0,43], [222,17,230,0,115],[222,18,192,0,96],[222,19,152,0,76],[222,20,137,0,69],[222,21,128,0,64], [222,22,128,0,64],[222,23,128,0,64],[222,24,126,0,63],[222,25,117,0,59],[222,26,106,0,53], [222,27,95,0,48],[222,28,85,0,43],[222,29,64,0,32],[222,30,14,0,7],[222,31,136,0,68], [222,32,119,0,60],[223,17,8,0,4],[223,18,75,0,38],[223,19,104,0,52],[223,20,119,0,60], [223,21,127,0,64],[223,22,128,0,64],[223,23,128,0,64],[223,24,129,0,65],[223,25,138,0,69], [223,26,149,0,75],[223,27,160,0,80],[223,28,170,0,85],[223,29,195,0,98],[223,30,241,0,121], [223,31,234,0,117],[223,32,119,0,60],[224,30,8,0,4],[224,31,88,0,44],[224,32,79,0,40], [227,8,68,0,0],[227,9,128,0,0],[227,10,128,0,0],[227,11,128,0,0],[227,12,128,0,0], [227,13,128,0,0],[227,14,128,0,0],[227,15,128,0,0],[227,16,128,0,0],[227,17,128,0,0], [227,18,128,0,0],[227,19,128,0,0],[227,20,128,0,0],[227,21,128,0,0],[227,22,128,0,0], [227,23,128,0,0],[227,24,128,0,0],[227,25,128,0,0],[227,26,128,0,0],[227,27,128,0,0], [227,28,128,0,0],[227,29,128,0,0],[227,30,128,0,0],[227,31,128,0,0],[227,32,60,0,0], [228,8,136,0,0],[228,9,187,0,0],[228,10,128,0,0],[228,11,128,0,0],[228,12,128,0,0], [228,13,128,0,0],[228,14,128,0,0],[228,15,128,0,0],[228,16,128,0,0],[228,17,128,0,0], [228,18,128,0,0],[228,19,128,0,0],[228,20,128,0,0],[228,21,128,0,0],[228,22,128,0,0], [228,23,128,0,0],[228,24,128,0,0],[228,25,128,0,0],[228,26,128,0,0],[228,27,128,0,0], [228,28,128,0,0],[228,29,128,0,0],[228,30,128,0,0],[228,31,196,0,0],[228,32,119,0,0], [229,8,136,0,0],[229,9,119,0,0],[229,31,136,0,0],[229,32,119,0,0],[230,8,136,0,0], [230,9,187,0,0],[230,10,128,0,0],[230,11,128,0,0],[230,12,128,0,0],[230,13,128,0,0], [230,14,128,0,0],[230,15,128,0,0],[230,16,128,0,0],[230,17,128,0,0],[230,18,127,0,0], [230,19,43,0,0],[230,20,14,0,0],[230,21,79,0,0],[230,22,116,0,0],[230,23,124,0,0], [230,24,106,0,0],[230,25,82,0,0],[230,26,24,0,0],[230,27,101,0,0],[230,28,128,0,0], [230,29,128,0,0],[230,30,128,0,0],[230,31,196,0,0],[230,32,119,0,0],[231,8,68,0,0], [231,9,128,0,0],[231,10,128,0,0],[231,11,128,0,0],[231,12,128,0,0],[231,13,128,0,0], [231,14,128,0,0],[231,15,130,0,0],[231,16,242,0,0],[231,17,215,0,0],[231,18,62,0,0], [231,19,126,0,0],[231,20,237,0,0],[231,21,182,0,0],[231,22,140,0,0],[231,23,132,0,0], [231,24,150,0,0],[231,25,179,0,0],[231,26,239,0,0],[231,27,154,0,0],[231,28,113,0,0], [231,29,235,0,0],[231,30,231,0,0],[231,31,128,0,0],[231,32,60,0,0],[232,15,137,0,0],
- babu_baboo
- ベストアンサー率51% (268/525)
[196,15,137,0,137],[196,16,192,0,192],[196,17,10,0,10],[196,18,141,0,141],[196,19,199,0,199], [196,20,30,0,30],[196,26,17,0,17],[196,27,171,0,171],[196,28,172,0,172],[196,29,20,0,20], [196,30,204,0,204],[196,31,130,0,130],[197,14,35,0,35],[197,15,234,0,234],[197,16,17,0,17], [197,17,42,0,42],[197,18,231,0,231],[197,19,17,0,17],[197,27,5,0,5],[197,28,213,0,213], [197,29,56,0,56],[197,30,20,0,20],[197,31,233,0,233],[197,32,30,0,30],[198,14,98,0,98], [198,15,164,0,164],[198,17,114,0,114],[198,18,148,0,148],[198,28,145,0,145],[198,29,112,0,112], [198,31,162,0,162],[198,32,100,0,100],[199,14,121,0,121],[199,15,136,0,136],[199,17,119,0,119], [199,18,144,0,144],[199,28,149,0,149],[199,29,114,0,114],[199,31,138,0,138],[199,32,119,0,119], [200,14,98,0,98],[200,15,165,0,165],[200,17,55,0,55],[200,18,224,0,224],[200,19,8,0,8], [200,27,18,0,18],[200,28,231,0,231],[200,29,39,0,39],[200,31,170,0,170],[200,32,93,0,93], [201,14,31,0,31],[201,15,238,0,238],[201,16,6,0,6],[201,18,167,0,167],[201,19,181,0,181], [201,20,23,0,23],[201,26,32,0,32],[201,27,198,0,198],[201,28,139,0,139],[201,30,10,0,10], [201,31,237,0,237],[201,32,20,0,20],[202,15,185,0,185],[202,16,118,0,118],[202,18,6,0,6], [202,19,140,0,140],[202,20,241,0,241],[202,21,185,0,185],[202,22,144,0,144],[202,23,133,0,133], [202,24,146,0,146],[202,25,191,0,191],[202,26,238,0,238],[202,27,120,0,120],[202,28,1,0,1], [202,30,146,0,146],[202,31,156,0,156],[203,15,36,0,36],[203,16,233,0,233],[203,17,83,0,83], [203,20,17,0,17],[203,21,75,0,75],[203,22,111,0,111],[203,23,123,0,123],[203,24,111,0,111], [203,25,71,0,71],[203,26,12,0,12],[203,28,2,0,2],[203,29,124,0,124],[203,30,216,0,216], [203,31,20,0,20],[204,16,48,0,48],[204,17,224,0,224],[204,18,166,0,166],[204,19,52,0,52], [204,26,1,0,1],[204,27,68,0,68],[204,28,193,0,193],[204,29,201,0,201],[204,30,27,0,27], [205,17,11,0,11],[205,18,124,0,124],[205,19,223,0,223],[205,20,221,0,221],[205,21,167,0,167], [205,22,143,0,143],[205,23,134,0,134],[205,24,150,0,150],[205,25,180,0,180],[205,26,233,0,233], [205,27,209,0,209],[205,28,102,0,102],[205,29,4,0,4],[206,19,1,0,1],[206,20,40,0,40], [206,21,91,0,91],[206,22,114,0,114],[206,23,122,0,122],[206,24,107,0,107],[206,25,79,0,79], [206,26,26,0,26],[208,18,18,0,9],[208,19,94,0,47],[208,20,67,0,34],[208,25,55,0,28], [208,26,109,0,55],[208,27,121,0,61],[208,28,89,0,45],[208,29,17,0,9],[209,16,7,0,4], [209,17,132,0,66],[209,18,238,0,119],[209,19,227,0,114],[209,20,119,0,60],[209,23,30,0,15], [209,24,192,0,96],[209,25,221,0,111],[209,26,148,0,74],[209,27,135,0,68],[209,28,176,0,88], [209,29,235,0,118],[209,30,95,0,48],[210,15,3,0,2],[210,16,174,0,87],[210,17,175,0,88], [210,18,23,0,12],[210,19,136,0,68],[210,20,119,0,60],[210,22,19,0,10],[210,23,219,0,110], [210,24,119,0,60],[210,25,2,0,1],[210,29,39,0,20],[210,30,222,0,111],[210,31,90,0,45], [211,15,97,0,49],[211,16,193,0,97],[211,17,5,0,3],[211,19,153,0,77],[211,20,119,0,60], [211,22,151,0,76],[211,23,147,0,74],[211,25,13,0,7],[211,26,106,0,53],[211,27,98,0,49], [211,28,9,0,5],[211,30,51,0,26],[211,31,230,0,115],[211,32,7,0,4],[212,15,218,0,109], [212,16,62,0,31],[212,18,140,0,70],[212,19,215,0,108],[212,20,53,0,27],[212,21,11,0,6], [212,22,239,0,120],[212,23,22,0,11],[212,24,2,0,1],[212,25,204,0,102],[212,26,173,0,87], [212,27,182,0,91],[212,28,194,0,97],[212,29,1,0,1],[212,31,194,0,97],[212,32,67,0,34], [213,14,34,0,17],[213,15,227,0,114],[213,17,32,0,16],[213,18,232,0,116],[213,19,18,0,9], [213,21,58,0,29],[213,22,205,0,103],[213,24,67,0,34],[213,25,202,0,101],[213,27,1,0,1], [213,28,211,0,106],[213,29,68,0,34],[213,31,141,0,71],[213,32,116,0,58],[214,14,93,0,47], [214,15,170,0,85],[214,17,94,0,47],[214,18,163,0,82],[214,21,101,0,51],[214,22,162,0,81], [214,24,121,0,61],[214,25,144,0,72],[214,28,145,0,73],[214,29,112,0,56],[214,31,136,0,68], [214,32,119,0,60],[215,14,111,0,56],[215,15,145,0,73],[215,17,114,0,57],[215,18,142,0,71],
- babu_baboo
- ベストアンサー率51% (268/525)
[170,15,0,0,128],[170,16,0,0,128],[170,17,0,0,128],[170,18,0,0,128],[170,19,0,0,128], [170,20,0,0,128],[170,21,0,0,128],[170,22,0,0,128],[170,23,0,0,128],[170,24,0,0,128], [170,25,0,0,128],[170,26,0,0,128],[170,27,0,0,128],[170,28,0,0,128],[170,29,0,0,128], [170,30,0,0,128],[170,31,0,0,128],[170,32,0,0,60],[170,34,32,0,64],[170,35,60,0,120], [170,36,60,0,120],[170,37,60,0,120],[170,38,28,0,56],[171,34,68,0,136],[171,35,96,0,191], [171,36,68,0,135],[171,37,100,0,199],[171,38,60,0,119],[172,34,68,0,136],[172,35,60,0,119], [172,37,68,0,136],[172,38,60,0,119],[173,34,68,0,136],[173,35,60,0,119],[173,37,68,0,136], [173,38,60,0,119],[174,34,68,0,136],[174,35,60,0,119],[174,37,68,0,136],[174,38,60,0,119], [175,34,68,0,136],[175,35,60,0,119],[175,37,68,0,136],[175,38,60,0,119],[176,34,68,0,136], [176,35,60,0,119],[176,37,68,0,136],[176,38,60,0,119],[177,34,68,0,136],[177,35,60,0,119], [177,37,68,0,136],[177,38,60,0,119],[178,34,68,0,136],[178,35,60,0,119],[178,37,68,0,136], [178,38,60,0,119],[179,34,68,0,136],[179,35,60,0,119],[179,37,68,0,136],[179,38,60,0,119], [180,34,68,0,136],[180,35,60,0,119],[180,37,68,0,136],[180,38,60,0,119],[181,34,68,0,136], [181,35,60,0,119],[181,37,68,0,136],[181,38,60,0,119],[182,34,68,0,136],[182,35,60,0,119], [182,37,68,0,136],[182,38,60,0,119],[183,34,68,0,136],[183,35,60,0,119],[183,37,68,0,136], [183,38,60,0,119],[184,34,68,0,136],[184,35,60,0,119],[184,37,68,0,136],[184,38,60,0,119], [185,34,68,0,136],[185,35,60,0,119],[185,37,68,0,136],[185,38,60,0,119],[186,34,68,0,136], [186,35,60,0,119],[186,37,68,0,136],[186,38,60,0,119],[187,34,68,0,136],[187,35,60,0,119], [187,37,68,0,136],[187,38,60,0,119],[188,34,68,0,136],[188,35,60,0,119],[188,37,68,0,136], [188,38,60,0,119],[189,34,68,0,136],[189,35,92,0,183],[189,36,60,0,120],[189,37,96,0,192], [189,38,60,0,119],[190,34,36,0,72],[190,35,68,0,135],[190,36,68,0,135],[190,37,68,0,135], [190,38,32,0,63],[191,8,68,0,68],[191,9,128,0,128],[191,10,128,0,128],[191,11,128,0,128], [191,12,128,0,128],[191,13,128,0,128],[191,14,128,0,128],[191,15,128,0,128],[191,16,128,0,128], [191,17,128,0,128],[191,18,128,0,128],[191,19,128,0,128],[191,20,128,0,128],[191,21,128,0,128], [191,22,128,0,128],[191,23,128,0,128],[191,24,128,0,128],[191,25,128,0,128],[191,26,128,0,128], [191,27,128,0,128],[191,28,128,0,128],[191,29,128,0,128],[191,30,128,0,128],[191,31,128,0,128], [191,32,60,0,60],[192,8,136,0,136],[192,9,187,0,187],[192,10,128,0,128],[192,11,128,0,128], [192,12,128,0,128],[192,13,128,0,128],[192,14,128,0,128],[192,15,128,0,128],[192,16,128,0,128], [192,17,128,0,128],[192,18,128,0,128],[192,19,128,0,128],[192,20,128,0,128],[192,21,128,0,128], [192,22,128,0,128],[192,23,128,0,128],[192,24,128,0,128],[192,25,128,0,128],[192,26,128,0,128], [192,27,128,0,128],[192,28,128,0,128],[192,29,128,0,128],[192,30,128,0,128],[192,31,196,0,196], [192,32,119,0,119],[193,8,136,0,136],[193,9,119,0,119],[193,31,136,0,136],[193,32,119,0,119], [194,8,136,0,136],[194,9,187,0,187],[194,10,128,0,128],[194,11,128,0,128],[194,12,128,0,128], [194,13,128,0,128],[194,14,128,0,128],[194,15,128,0,128],[194,16,128,0,128],[194,17,128,0,128], [194,18,127,0,127],[194,19,43,0,43],[194,20,14,0,14],[194,21,79,0,79],[194,22,116,0,116], [194,23,124,0,124],[194,24,106,0,106],[194,25,82,0,82],[194,26,24,0,24],[194,27,101,0,101], [194,28,128,0,128],[194,29,128,0,128],[194,30,128,0,128],[194,31,196,0,196],[194,32,119,0,119], [195,8,68,0,68],[195,9,128,0,128],[195,10,128,0,128],[195,11,128,0,128],[195,12,128,0,128], [195,13,128,0,128],[195,14,128,0,128],[195,15,130,0,130],[195,16,242,0,242],[195,17,215,0,215], [195,18,62,0,62],[195,19,126,0,126],[195,20,237,0,237],[195,21,182,0,182],[195,22,140,0,140], [195,23,132,0,132],[195,24,150,0,150],[195,25,179,0,179],[195,26,239,0,239],[195,27,154,0,154], [195,28,113,0,113],[195,29,235,0,235],[195,30,231,0,231],[195,31,128,0,128],[195,32,60,0,60],
- babu_baboo
- ベストアンサー率51% (268/525)
[147,30,0,5,10],[147,31,0,119,237],[147,32,0,10,20],[148,15,0,93,185],[148,16,0,59,118], [148,18,0,3,6],[148,19,0,70,140],[148,20,0,121,241],[148,21,0,93,185],[148,22,0,72,144], [148,23,0,67,133],[148,24,0,73,146],[148,25,0,96,191],[148,26,0,119,238],[148,27,0,60,120], [148,28,0,1,1],[148,30,0,73,146],[148,31,0,78,156],[149,15,0,18,36],[149,16,0,117,233], [149,17,0,42,83],[149,20,0,9,17],[149,21,0,38,75],[149,22,0,56,111],[149,23,0,62,123], [149,24,0,56,111],[149,25,0,36,71],[149,26,0,6,12],[149,28,0,1,2],[149,29,0,62,124], [149,30,0,108,216],[149,31,0,10,20],[150,16,0,24,48],[150,17,0,112,224],[150,18,0,83,166], [150,19,0,26,52],[150,26,0,1,1],[150,27,0,34,68],[150,28,0,97,193],[150,29,0,101,201], [150,30,0,14,27],[151,17,0,6,11],[151,18,0,62,124],[151,19,0,112,223],[151,20,0,111,221], [151,21,0,84,167],[151,22,0,72,143],[151,23,0,67,134],[151,24,0,75,150],[151,25,0,90,180], [151,26,0,117,233],[151,27,0,105,209],[151,28,0,51,102],[151,29,0,2,4],[152,19,0,1,1], [152,20,0,20,40],[152,21,0,46,91],[152,22,0,57,114],[152,23,0,61,122],[152,24,0,54,107], [152,25,0,40,79],[152,26,0,13,26],[155,14,0,0,68],[155,15,0,0,128],[155,16,0,0,128], [155,17,0,0,128],[155,18,0,0,128],[155,19,0,0,128],[155,20,0,0,128],[155,21,0,0,128], [155,22,0,0,128],[155,23,0,0,128],[155,24,0,0,128],[155,25,0,0,124],[155,26,0,0,108], [155,27,0,0,92],[155,28,0,0,48],[155,29,0,0,1],[156,14,0,0,136],[156,15,0,0,187], [156,16,0,0,128],[156,17,0,0,128],[156,18,0,0,128],[156,19,0,0,128],[156,20,0,0,128], [156,21,0,0,128],[156,22,0,0,128],[156,23,0,0,128],[156,24,0,0,128],[156,25,0,0,132], [156,26,0,0,148],[156,27,0,0,165],[156,28,0,0,219],[156,29,0,0,207],[156,30,0,0,54], [157,14,0,0,136],[157,15,0,0,119],[157,29,0,0,86],[157,30,0,0,233],[157,31,0,0,47], [158,14,0,0,136],[158,15,0,0,187],[158,16,0,0,128],[158,17,0,0,128],[158,18,0,0,128], [158,19,0,0,128],[158,20,0,0,128],[158,21,0,0,128],[158,22,0,0,128],[158,23,0,0,127], [158,24,0,0,118],[158,25,0,0,104],[158,26,0,0,87],[158,27,0,0,18],[158,30,0,0,98], [158,31,0,0,193],[159,14,0,0,68],[159,15,0,0,128],[159,16,0,0,128],[159,17,0,0,128], [159,18,0,0,128],[159,19,0,0,128],[159,20,0,0,128],[159,21,0,0,128],[159,22,0,0,128], [159,23,0,0,128],[159,24,0,0,138],[159,25,0,0,152],[159,26,0,0,176],[159,27,0,0,239], [159,28,0,0,80],[159,30,0,0,2],[159,31,0,0,232],[159,32,0,0,38],[160,27,0,0,53], [160,28,0,0,235],[160,29,0,0,17],[160,31,0,0,164],[160,32,0,0,99],[161,28,0,0,171], [161,29,0,0,99],[161,31,0,0,137],[161,32,0,0,119],[162,28,0,0,136],[162,29,0,0,119], [162,31,0,0,156],[162,32,0,0,104],[163,28,0,0,165],[163,29,0,0,101],[163,30,0,0,2], [163,31,0,0,222],[163,32,0,0,55],[164,27,0,0,18],[164,28,0,0,238],[164,29,0,0,24], [164,30,0,0,98],[164,31,0,0,204],[165,26,0,0,17],[165,27,0,0,185],[165,28,0,0,142], [165,29,0,0,71],[165,30,0,0,236],[165,31,0,0,50],[166,14,0,0,68],[166,15,0,0,128], [166,16,0,0,128],[166,17,0,0,128],[166,18,0,0,128],[166,19,0,0,128],[166,20,0,0,128], [166,21,0,0,128],[166,22,0,0,128],[166,23,0,0,130],[166,24,0,0,146],[166,25,0,0,175], [166,26,0,0,238],[166,27,0,0,159],[166,28,0,0,146],[166,29,0,0,253],[166,30,0,0,186], [166,31,0,0,128],[166,32,0,0,60],[167,14,0,0,136],[167,15,0,0,187],[167,16,0,0,128], [167,17,0,0,128],[167,18,0,0,128],[167,19,0,0,128],[167,20,0,0,128],[167,21,0,0,128], [167,22,0,0,128],[167,23,0,0,126],[167,24,0,0,110],[167,25,0,0,87],[167,26,0,0,30], [167,27,0,0,99],[167,28,0,0,128],[167,29,0,0,128],[167,30,0,0,128],[167,31,0,0,196], [167,32,0,0,119],[168,14,0,0,136],[168,15,0,0,119],[168,31,0,0,136],[168,32,0,0,119], [169,14,0,0,136],[169,15,0,0,187],[169,16,0,0,128],[169,17,0,0,128],[169,18,0,0,128], [169,19,0,0,128],[169,20,0,0,128],[169,21,0,0,128],[169,22,0,0,128],[169,23,0,0,128], [169,24,0,0,128],[169,25,0,0,128],[169,26,0,0,128],[169,27,0,0,128],[169,28,0,0,128], [169,29,0,0,128],[169,30,0,0,128],[169,31,0,0,196],[169,32,0,0,119],[170,14,0,0,68],
- babu_baboo
- ベストアンサー率51% (268/525)
[130,19,0,81,81],[130,20,0,122,122],[130,21,0,56,56],[130,23,0,80,80],[130,24,0,124,124], [130,25,0,105,105],[130,26,0,50,50],[130,29,0,91,91],[130,30,0,178,178],[130,31,0,227,227], [130,32,0,54,54],[131,15,0,67,67],[131,16,0,227,227],[131,17,0,47,47],[131,31,0,147,147], [131,32,0,119,119],[132,16,0,86,86],[132,17,0,230,230],[132,18,0,192,192],[132,19,0,152,152], [132,20,0,137,137],[132,21,0,128,128],[132,22,0,128,128],[132,23,0,128,128],[132,24,0,126,126], [132,25,0,117,117],[132,26,0,106,106],[132,27,0,95,95],[132,28,0,85,85],[132,29,0,64,64], [132,30,0,14,14],[132,31,0,136,136],[132,32,0,119,119],[133,17,0,8,8],[133,18,0,75,75], [133,19,0,104,104],[133,20,0,119,119],[133,21,0,127,127],[133,22,0,128,128],[133,23,0,128,128], [133,24,0,129,129],[133,25,0,138,138],[133,26,0,149,149],[133,27,0,160,160],[133,28,0,170,170], [133,29,0,195,195],[133,30,0,241,241],[133,31,0,234,234],[133,32,0,119,119],[134,30,0,8,8], [134,31,0,88,88],[134,32,0,79,79],[137,8,0,34,68],[137,9,0,64,128],[137,10,0,64,128], [137,11,0,64,128],[137,12,0,64,128],[137,13,0,64,128],[137,14,0,64,128],[137,15,0,64,128], [137,16,0,64,128],[137,17,0,64,128],[137,18,0,64,128],[137,19,0,64,128],[137,20,0,64,128], [137,21,0,64,128],[137,22,0,64,128],[137,23,0,64,128],[137,24,0,64,128],[137,25,0,64,128], [137,26,0,64,128],[137,27,0,64,128],[137,28,0,64,128],[137,29,0,64,128],[137,30,0,64,128], [137,31,0,64,128],[137,32,0,30,60],[138,8,0,68,136],[138,9,0,94,187],[138,10,0,64,128], [138,11,0,64,128],[138,12,0,64,128],[138,13,0,64,128],[138,14,0,64,128],[138,15,0,64,128], [138,16,0,64,128],[138,17,0,64,128],[138,18,0,64,128],[138,19,0,64,128],[138,20,0,64,128], [138,21,0,64,128],[138,22,0,64,128],[138,23,0,64,128],[138,24,0,64,128],[138,25,0,64,128], [138,26,0,64,128],[138,27,0,64,128],[138,28,0,64,128],[138,29,0,64,128],[138,30,0,64,128], [138,31,0,98,196],[138,32,0,60,119],[139,8,0,68,136],[139,9,0,60,119],[139,31,0,68,136], [139,32,0,60,119],[140,8,0,68,136],[140,9,0,94,187],[140,10,0,64,128],[140,11,0,64,128], [140,12,0,64,128],[140,13,0,64,128],[140,14,0,64,128],[140,15,0,64,128],[140,16,0,64,128], [140,17,0,64,128],[140,18,0,64,127],[140,19,0,22,43],[140,20,0,7,14],[140,21,0,40,79], [140,22,0,58,116],[140,23,0,62,124],[140,24,0,53,106],[140,25,0,41,82],[140,26,0,12,24], [140,27,0,51,101],[140,28,0,64,128],[140,29,0,64,128],[140,30,0,64,128],[140,31,0,98,196], [140,32,0,60,119],[141,8,0,34,68],[141,9,0,64,128],[141,10,0,64,128],[141,11,0,64,128], [141,12,0,64,128],[141,13,0,64,128],[141,14,0,64,128],[141,15,0,65,130],[141,16,0,121,242], [141,17,0,108,215],[141,18,0,31,62],[141,19,0,63,126],[141,20,0,119,237],[141,21,0,91,182], [141,22,0,70,140],[141,23,0,66,132],[141,24,0,75,150],[141,25,0,90,179],[141,26,0,120,239], [141,27,0,77,154],[141,28,0,57,113],[141,29,0,118,235],[141,30,0,116,231],[141,31,0,64,128], [141,32,0,30,60],[142,15,0,69,137],[142,16,0,96,192],[142,17,0,5,10],[142,18,0,71,141], [142,19,0,100,199],[142,20,0,15,30],[142,26,0,9,17],[142,27,0,86,171],[142,28,0,86,172], [142,29,0,10,20],[142,30,0,102,204],[142,31,0,65,130],[143,14,0,18,35],[143,15,0,117,234], [143,16,0,9,17],[143,17,0,21,42],[143,18,0,116,231],[143,19,0,9,17],[143,27,0,3,5], [143,28,0,107,213],[143,29,0,28,56],[143,30,0,10,20],[143,31,0,117,233],[143,32,0,15,30], [144,14,0,49,98],[144,15,0,82,164],[144,17,0,57,114],[144,18,0,74,148],[144,28,0,73,145], [144,29,0,56,112],[144,31,0,81,162],[144,32,0,50,100],[145,14,0,61,121],[145,15,0,68,136], [145,17,0,60,119],[145,18,0,72,144],[145,28,0,75,149],[145,29,0,57,114],[145,31,0,69,138], [145,32,0,60,119],[146,14,0,49,98],[146,15,0,83,165],[146,17,0,28,55],[146,18,0,112,224], [146,19,0,4,8],[146,27,0,9,18],[146,28,0,116,231],[146,29,0,20,39],[146,31,0,85,170], [146,32,0,47,93],[147,14,0,16,31],[147,15,0,119,238],[147,16,0,3,6],[147,18,0,84,167], [147,19,0,91,181],[147,20,0,12,23],[147,26,0,16,32],[147,27,0,99,198],[147,28,0,70,139],
- babu_baboo
- ベストアンサー率51% (268/525)
[112,22,0,144,72],[112,23,0,133,67],[112,24,0,146,73],[112,25,0,191,96],[112,26,0,238,119], [112,27,0,120,60],[112,28,0,1,1],[112,30,0,146,73],[112,31,0,156,78],[113,15,0,36,18], [113,16,0,233,117],[113,17,0,83,42],[113,20,0,17,9],[113,21,0,75,38],[113,22,0,111,56], [113,23,0,123,62],[113,24,0,111,56],[113,25,0,71,36],[113,26,0,12,6],[113,28,0,2,1], [113,29,0,124,62],[113,30,0,216,108],[113,31,0,20,10],[114,16,0,48,24],[114,17,0,224,112], [114,18,0,166,83],[114,19,0,52,26],[114,26,0,1,1],[114,27,0,68,34],[114,28,0,193,97], [114,29,0,201,101],[114,30,0,27,14],[115,17,0,11,6],[115,18,0,124,62],[115,19,0,223,112], [115,20,0,221,111],[115,21,0,167,84],[115,22,0,143,72],[115,23,0,134,67],[115,24,0,150,75], [115,25,0,180,90],[115,26,0,233,117],[115,27,0,209,105],[115,28,0,102,51],[115,29,0,4,2], [116,19,0,1,1],[116,20,0,40,20],[116,21,0,91,46],[116,22,0,114,57],[116,23,0,122,61], [116,24,0,107,54],[116,25,0,79,40],[116,26,0,26,13],[118,18,0,18,18],[118,19,0,94,94], [118,20,0,67,67],[118,25,0,55,55],[118,26,0,109,109],[118,27,0,121,121],[118,28,0,89,89], [118,29,0,17,17],[119,16,0,7,7],[119,17,0,132,132],[119,18,0,238,238],[119,19,0,227,227], [119,20,0,119,119],[119,23,0,30,30],[119,24,0,192,192],[119,25,0,221,221],[119,26,0,148,148], [119,27,0,135,135],[119,28,0,176,176],[119,29,0,235,235],[119,30,0,95,95],[120,15,0,3,3], [120,16,0,174,174],[120,17,0,175,175],[120,18,0,23,23],[120,19,0,136,136],[120,20,0,119,119], [120,22,0,19,19],[120,23,0,219,219],[120,24,0,119,119],[120,25,0,2,2],[120,29,0,39,39], [120,30,0,222,222],[120,31,0,90,90],[121,15,0,97,97],[121,16,0,193,193],[121,17,0,5,5], [121,19,0,153,153],[121,20,0,119,119],[121,22,0,151,151],[121,23,0,147,147],[121,25,0,13,13], [121,26,0,106,106],[121,27,0,98,98],[121,28,0,9,9],[121,30,0,51,51],[121,31,0,230,230], [121,32,0,7,7],[122,15,0,218,218],[122,16,0,62,62],[122,18,0,140,140],[122,19,0,215,215], [122,20,0,53,53],[122,21,0,11,11],[122,22,0,239,239],[122,23,0,22,22],[122,24,0,2,2], [122,25,0,204,204],[122,26,0,173,173],[122,27,0,182,182],[122,28,0,194,194],[122,29,0,1,1], [122,31,0,194,194],[122,32,0,67,67],[123,14,0,34,34],[123,15,0,227,227],[123,17,0,32,32], [123,18,0,232,232],[123,19,0,18,18],[123,21,0,58,58],[123,22,0,205,205],[123,24,0,67,67], [123,25,0,202,202],[123,27,0,1,1],[123,28,0,211,211],[123,29,0,68,68],[123,31,0,141,141], [123,32,0,116,116],[124,14,0,93,93],[124,15,0,170,170],[124,17,0,94,94],[124,18,0,163,163], [124,21,0,101,101],[124,22,0,162,162],[124,24,0,121,121],[124,25,0,144,144],[124,28,0,145,145], [124,29,0,112,112],[124,31,0,136,136],[124,32,0,119,119],[125,14,0,111,111],[125,15,0,145,145], [125,17,0,114,114],[125,18,0,142,142],[125,21,0,143,143],[125,22,0,119,119],[125,24,0,172,172], [125,25,0,92,92],[125,28,0,140,140],[125,29,0,113,113],[125,31,0,154,154],[125,32,0,105,105], [126,14,0,120,120],[126,15,0,136,136],[126,17,0,117,117],[126,18,0,141,141],[126,21,0,186,186], [126,22,0,77,77],[126,24,0,208,208],[126,25,0,52,52],[126,28,0,177,177],[126,29,0,79,79], [126,31,0,202,202],[126,32,0,65,65],[127,14,0,111,111],[127,15,0,145,145],[127,17,0,92,92], [127,18,0,166,166],[127,21,0,228,228],[127,22,0,34,34],[127,24,0,242,242],[127,25,0,18,18], [127,27,0,32,32],[127,28,0,240,240],[127,29,0,14,14],[127,30,0,22,22],[127,31,0,242,242], [127,32,0,11,11],[128,14,0,92,92],[128,15,0,171,171],[128,17,0,39,39],[128,18,0,232,232], [128,19,0,7,7],[128,20,0,34,34],[128,21,0,237,237],[128,22,0,2,2],[128,23,0,37,37], [128,24,0,223,223],[128,26,0,13,13],[128,27,0,194,194],[128,28,0,123,123],[128,30,0,145,145], [128,31,0,146,146],[129,14,0,33,33],[129,15,0,227,227],[129,16,0,1,1],[129,18,0,165,165], [129,19,0,201,201],[129,20,0,177,177],[129,21,0,170,170],[129,23,0,103,103],[129,24,0,218,218], [129,25,0,151,151],[129,26,0,223,223],[129,27,0,154,154],[129,28,0,3,3],[129,29,0,73,73], [129,30,0,248,248],[129,31,0,37,37],[130,15,0,209,209],[130,16,0,77,77],[130,18,0,2,2],
- 1
- 2
補足
kamepanman様、早速ご回答いただきましてありがとうございます。 こちらのやり方ですと、最後にz-indexで入れ替えるまでは薄いままの状態にはならないでしょうか。 まだイメージ段階ですが、2枚のcanvasを用意し、指定座標に到達したパーティクルは、前面のcanvasに再描画する方法になるんじゃないかなと考えております。