大家好，stackoverflowers!
我正在用 Javascript 构建一个粒子动画，我希望所有粒子都朝 Canvas 中心的方向移动，并在文本周围形成一个环。然而，到目前为止，我的代码形成了一个正方形(很可能是因为粒子随机位置生成的分布)。关于如何让他们围绕中心构建一个环而不是一个正方形有什么想法吗？非常感谢，非常感谢您对此的意见。
这是代码(灵感来自 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>
最佳答案
问题出在你的方程上:
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;
}
您可以包含要增加的公差，如下所示:(请注意，我将圆半径提取到全局变量。此外，这会将圆内的任何粒子移动到边缘)
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;
}
关于围绕圆环的 Javascript 粒子动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12322719/