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>
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;
}
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;
}