Javascript particle animation around a ring

Question

Hi fellow stackoverflowers!

I'm building a particle animation in Javascript where I want all the particles to go in the direction to the center of the canvas and form a ring around the text. However, my code so far forms a square (most probably because of the distribution in the generation of random position of the particles). Any ideas on how to make them build a ring around the center instead of a square? Thanks a lot, I would greatly appreciate your input on this.

Here is the code (inspired on 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>

Shmiddty · Accepted Answer · 2012-09-07T17:58:19.157

2

The problem is with your equation:

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/

You can include the tolerance that you're incrementing like so: (note I extracted the circle radius to a global variable. Also, this will move any particles inside of the circle to the edge)

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/

edited Sep 07 '12 at 17:58

answered Sep 07 '12 at 17:49

Shmiddty

13,847
1
35
52

You'll also probably want to add a check to clear the interval in the event that the particles are done animating. see: http://jsfiddle.net/mLMKR/2/ – Shmiddty Sep 07 '12 at 18:06
Thank you so much, it makes a lot of sense. I've corrected the equation as you suggested and added a check to clear the interval when particles are done :) Thanks a lot! – abmirayo Sep 07 '12 at 18:52
No problem. I love this kind of question. :D – Shmiddty Sep 07 '12 at 18:55

Javascript particle animation around a ring

1 Answers1