異なる設定のパーティクルを同時に生成するHTML5

Question

最初に、HTML5またはCanvasの新機能だけでなく、コーディングプロセス全体で新しい機能を追加しました。私はこの例のhttp://rectangleworld.com/demos/DustySphere/DustySphere.htmlを使って、自分の必要に応じて使うように修正しようとしました。それが今、私は別の設定を組み合わせて、同時に2つの異なる粒子のアニメーションを生成することを試みた this.

code is on codepen 

のように見える瞬間

。例えば、2050年と2070年のパーティクルは2090年に表示されます。この問題の簡単な解決法はありますか？私はあらゆる助けに感謝します。異なる設定で

Answer 1

ドロー粒子あなたはコーディングに慣れていないので機能

を使用して、あなたはおよそfunctionsを知っていれば、私は思ったんだけど。

• functionは再利用可能なコードブロックです。
• argumentsを使用して機能を送信することができます。
• 引数を使用すると、コードを実行するときに異なる設定を適用できます。

異なる設定でパーティクルを描画するために異なる引数を受け入れる単一のfunctionを使用する簡単な例を以下に示します。

一般に、さまざまな設定を描画するパラメータを受け入れる関数を作成することによって、異なる設定を適用できます。そのようにして、同じ機能を異なる設定で複数回呼び出すことができます。あなたはたとえば、多様設定

を描画するifステートメントを使用することができ、より複雑な設定について

// draw a small red circle at [x=50,y=50] with full alpha 
drawParticle(50,50,10,'red',1.00); 

// draw a large green circle at [x=150,y=100] with half alpha 
drawParticle(150,100,50,'green',0.50); 

function drawParticle(cx,cy,radius,color,alpha){ 
    ctx.beginPath(); 
    ctx.arc(cx,cy,radius,0,Math.PI*2); 
    ctx.fillStyle=color; 
    ctx.globalAlpha=alpha; 
    ctx.fill(); 
} 

、この機能を使用すると、0から100の

に「年齢」という粒子を描くことができますパーティクルの年齢を引数として渡し、関数はifステートメントを使用して、パーティクルの年齢を表すアルファ値を減らします。

function drawParticle(cx,cy,radius,color,age){ 
    ctx.beginPath(); 
    ctx.arc(cx,cy,radius,0,Math.PI*2); 
    ctx.fillStyle=color; 
    if(age<25){ 
     ctx.globalAlpha=1.00; 
    }else if(age<50){ 
     ctx.globalAlpha=.75; 
    }else if(age<75){ 
     ctx.globalAlpha=.50; 
    }else{ 
     ctx.globalAlpha=.25; 
    } 
    ctx.fill(); 
}