圍繞一個圓環的Javascript粒子動畫

嗨，夥伴們stackoverflowers！圍繞一個圓環的Javascript粒子動畫

我在Javascript中構建了一個粒子動畫，其中我希望所有粒子都朝向畫布中心的方向，並圍繞文本形成環。但是，到目前爲止，我的代碼形成了一個正方形（最有可能是因爲粒子隨機位置的分佈）。有關如何讓他們圍繞中心而不是方形建造戒指的任何想法？非常感謝，我非常感謝你對此的意見。

這裏是（靈感上this tutorial）代碼：

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title> :: Particle Animation Demo</title> 
</head> 

<body> 

    <canvas id="canvas" width="960" height="500"></canvas> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script>$(document).ready(function(){ 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var W = 960; var H = 500; 

var tolerance = 2; 

var particles = []; 
for(var i = 0; i < 1000; i++) 
{ 
    particles.push(new create_particle()); 
} 

function create_particle() 
{ 

    this.x = Math.random()*W*2 * (Math.random()<0.5 ? -1 : 1)+W;//Math.random() * (W*2 - W) + W; 
    this.y = Math.random()*H*2 * (Math.random()<0.5 ? -1 : 1)+H;//Math.random() * (H*2 - H) + H; 

    this.vector_x = (W/2) - this.x; 
    this.vector_y = (H/2) - this.y; 

    this.distance = Math.sqrt(this.vector_x*this.vector_x + this.vector_y*this.vector_y); 

    this.normvector_x = this.vector_x/this.distance; 
    this.normvector_y = this.vector_y/this.distance; 


    this.vx = Math.random()*20-10; 
    this.vy = Math.random()*20-10; 
    this.radius = Math.random()*10; 
} 

function draw() 
{ 
    ctx.fillStyle = "white"; 
    ctx.fillRect(0, 0, W, H); 

    for(var t = 0; t < particles.length; t++) 
    { 
     var p = particles[t]; 

     ctx.beginPath(); 

     ctx.fillStyle = "gray"; 
     ctx.arc(p.x, p.y, p.radius, Math.PI*2, false); 
     ctx.fill(); 

     //p.x += p.vx; 
     //p.y +=p.vy; 
     if (!(Math.abs(p.x-W/2)<120 && Math.abs(p.y-H/2)<120)) { 
      p.x = p.x+ p.normvector_x*7; 
      p.y = p.y+ p.normvector_y*7; 
     } else { 
      if (t%2) 
         tolerance+=0.0005; 
      //console.log(tolerance); 
     } 

     //if(p.x < -50) p.x = W+50; 
     //if(p.y < -50) p.y = H+50; 
     //if(p.x > W+50) p.x = -50; 
     //if(p.y > H+50) p.y = -50; 
    } 
} 

setInterval(draw, 33); 
});</script>  
</body> 

</html>

來源

2012-09-07 abmirayo

問題是與你的公式：

var inside = Math.sqrt(Math.pow(p.x - W/2, 2) + Math.pow(p.y - H/2, 2)) < 120; 
if (!inside) { 
    p.x = p.x+ p.normvector_x*7; 
    p.y = p.y+ p.normvector_y*7; 
} else { 
    if (t%2) 
     tolerance+=0.0005;  
}

http://jsfiddle.net/mLMKR/

您可以包括你增加的公差像這樣:(注意，我將圓半徑提取爲一個全局變量，並且這會將圓內的任何粒子移動到邊緣）

var distance = Math.sqrt(Math.pow(p.x - W/2, 2) + Math.pow(p.y - H/2, 2)); 
var inside = Math.abs(distance - radius) < tolerance; 
if (!inside) { 
    p.x = p.x+ p.normvector_x*7; 
    p.y = p.y+ p.normvector_y*7; 
} else { 
    if (t%2) 
     tolerance+=0.0005; 
}

http://jsfiddle.net/mLMKR/1/

來源

2012-09-07 17:49:49 Shmiddty

你也可能會想添加一個檢查，以清除在該粒子做動畫事件的時間間隔。請參閱：http://jsfiddle.net/mLMKR/2/ – Shmiddty

非常感謝，這很有道理。我已按照您的建議更正了方程式，並添加了一個檢查以清除粒子完成時的間隔:)非常感謝！ – abmirayo

沒問題。我喜歡這種問題。：d – Shmiddty

圍繞一個圓環的Javascript粒子動畫

回答

相關問題