1

さて、私はHTML5を学んでいて、ポートフォリオを更新して、静止画ではなく動くブラックホールを作成したいと思いました。写真を撮って帆布の中で回転させることもできたのですが、画像なしで全部やったほうがいいと思いました。私が抱えている主な問題は、円形のパスに沿った各パーティクルのパスを計算する（そしてそのために更新する）方法を理解できないように見えることです。

極座標からデカルト座標に変換する方程式を読みましたが、明らかに間違っていることがあります。

最も関連性の高いコードスニペットは次のとおりです。

パーティクルクラス

 function particle(rad, vel, dist, angle, x, y){

   this.rad = rad;
   this.vel = vel;
   this.dist = dist;
   this.x = x;
   this.y = y;
   this.angle = angle;
}

使用しているパーティクルを初期化する機能

function initParticles(parts, innerCircleRad, nbr_circles, w, h){
   var rad, vel, dist;

   for (var i = 1; i <= nbr_circles; ++i) {
      if(i < 10){
          rad = (Math.random()*2.5)+1;
          vel = (Math.random()*.5)+3;
          dist = (Math.random()*1.5) + innerCircleRad;
          angle = Math.floor(Math.random()*(360))
      }else if( i < 15){
          rad = (Math.random()*2.7)+1;
          vel = (Math.random()*.4)+2;
          dist = (Math.random()*1.5) + innerCircleRad+1;
          angle = Math.floor(Math.random()*(360))
      }else if( i < 18){
          rad = (Math.random()*2.8)+1;
          vel = (Math.random()*.3)+1;
          dist = (Math.random()*1.5) + innerCircleRad+2.5;
          angle = Math.floor(Math.random()*(360))
      }else {
          rad = (Math.random()*2.9)+1;
          vel = (Math.random()*.2)+1;
          dist = (Math.random()*1.5) + innerCircleRad+4;
          angle = Math.floor(Math.random()*(360))
      }

    var x = w/2 + Math.cos(angle) * dist;
    var y = h/2 + Math.sin(angle) * dist;
    parts[i] = new particle(rad, vel, dist, angle, x, y);       
  }
}

キャンバスを更新してポイントを描画するために継続的に呼び出される関数

function refresh(dc,width,height,frame_number, particles, nbr_circles) {
  dc.clearRect(0,0,width,height);  
  dc.fillStyle='#000';

  for (var i = 1; i <= nbr_circles; ++i) {
    // set up increment for new angle based on particles velocity
    var angle_incr = ((frame_number)/12.0) * Math.PI/180;
    // updated new angle, make sure it is in correct range of circle
    particles[i].angle = (angle_incr+particles[i].angle)%Math.PI/180
    // set new x and y points based on the angle change
    particles[i].x = particles[i].x + Math.cos(particles[i].angle) * particles[i].dist;
    particles[i].y = particles[i].y + Math.sin(particles[i].angle) * particles[i].dist;

    // draw tiny circle at x,y
    dc.beginPath();
    dc.arc(particles[i].x, particles[i].y, particles[i].rad, 0, 2*Math.PI, false);
    dc.fill();
  }
}

一時停止して再生できるようにコードを設定しました。これにより、更新メソッドのオンとオフが切り替わります。何らかの理由で、再生中（更新中）はキャンバスに何も表示されませんが、一時停止するとすべてのドットが表示されます。それが最初の問題なので、速度が速すぎることが関係しているのではないかと思い、落としましたが、更新中はいつでもパーティクルが見えませんでした。再生するたびに一時停止すると、ドットが表示されますが、ドットは回転せず、x軸に沿って右にシフトしています...パーティクルのx座標とy座標を出力すると、x値のみが更新されているように見えます。上がるだけです。それは彼らの動きを説明しています。

したがって、私が持っている2つの質問は次のとおりです。

  1. 円の中心からの距離、速度、現在のxy座標に基づいて、各パーティクルを独自の円形パスに従わせるにはどうすればよいですか。

  2. 上記のパスをたどりながらパーティクルを表示するにはどうすればよいですか（何らかの理由でパーティクルがまったく表示されないため、速度が原因で可能ですか？）

私の最終目標は、内側の円を空にして、内側の円の半径に近い多くの粒子を高速で移動させることです。次に、粒子がゆっくりと移動するブラックホールの外半径に移動するにつれて、粒子が少なくなります。私は一日中チュートリアルを探しましたが、循環パスの方程式以外に関連するものはあまり見つかりませんでした。しかし、私はそれを機能させることができないようです。

同様の問題が解決された洞察や参考資料があれば、本当にありがたいです。これをお読みいただきありがとうございます。

-アラン

4

2 に答える 2

0

プロトン html5 パーティクル エンジンを使用できますhttp://a-jie.github.io/Proton/ とても簡単です。

于 2013-08-19T10:09:18.577 に答える