Question

嗨伙伴stackoverflowers！

我正在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>

Answer 1

问题在于您的等式：

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/

围绕一个环的Javascript粒子动画

1 个答案: