Particle Attraction and Gravity - HTML5 Animation with JavaScript - page 281

Figure 12-5. Subtle change, but a world of difference
Nodes with mass
We can also experiment further with this example by having nodes with mass (document 08-nodes-
mass.html ). At the top of the script, set each node to a random size, and then set the mass based on that
size:
for (var size, particle, i = 0; i < numParticles; i++) {
size = Math.random() * 10 + 2;
particle = new Ball( size , "#ffffff");
particle.x = Math.random() * canvas.width;
particle.y = Math.random() * canvas.height;
particle.vx = Math.random() * 6 - 3;
particle.vy = Math.random() * 6 - 3;
particle.mass = size;
particles.push(particle);
}
The mass is used in the spring function when adding in the velocities. Divide the velocity by the mass of
each particle, which gives the larger ones more inertia:
function spring (partA, partB) {
var dx = partB.x - partA.x,
dy = partB.y - partA.y,
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < minDist) {
var alpha = 1 - dist / minDist;
context.strokeStyle = utils.colorToRGB("#ffffff", alpha);