1
好的，所以我正在學習HTML5，並且我想更新我的投資組合以使其具有移動的黑洞而不是靜態圖片。我本來可以拍攝照片並在畫布上旋轉它，但我認爲如果我在沒有圖像的情況下完成了這一切會更好。我遇到的主要問題是我似乎無法理解如何計算（併爲此更新）沿着圓形路徑的每個粒子的路徑。在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個問題我有是：
如何獲得基於從圓的中心，它的速度和當前的X，Y座標的距離每個粒子遵循其自身的圓形路徑。
我怎麼顆粒，顯示在遵循以上（因爲某些原因而不能顯示所有，可能是因爲他們的速度？）描述的路徑
我的最終目標是有一個空的內圈，接近內圈半徑的許多粒子快速移動。然後當粒子移動較慢時，移出黑洞外半徑的粒子越少。我一整天都在尋找教程，除了循環路徑方程式之外，我還沒有發現太多有用的東西。但我似乎無法得到那個工作。
任何洞察力或參考，其中類似的問題被打破我真的很感激它。感謝您抽時間閱讀。
-Alan
你能告訴我如何你正在調用你的刷新方法？我有一種感覺，這就是爲什麼你沒有看到任何東西，直到你停下來......還有你看過使用框架來幫助你一起嗎？有一些優秀的選擇，包括http://mrdoob.github.com/three.js/ – timothyclifford 2012-08-13 01:26:55
@timothyclifford而three.js是不錯的，它似乎是矯枉過正，推薦一個3d庫的人只是試圖製作一個2D粒子引擎。 – Loktar 2012-08-13 14:07:01
這很有趣，你應該把它提出來，因爲我實際上看着three.js，並且找到了一個關於構建更有趣的教程的教程。但我仍然想嘗試弄清楚如何使這個工作。我非常積極地發生刷新，因爲我使用了一個框架腳本，並在我自己的代碼中添加了刷新方法。我的骨架使用了基本的腳本代碼。我知道找到下一個xy座標的方程有些問題，因爲它們只在正x方向上移動。 – 2012-08-13 19:03:02