Particle Weights

[Annabelle]

I think having particle weights would be cool. Obviously, you made it without weights for simplicity, but I think it could be an interesting addition.

[Anas Qiblawi]

I was thinking maybe we should add a GUI section for additional physics options.

Maybe we treat empty void as fluid.
perhaps add gravity.
or even perform the calculations using different formulae.

and give particles more properties so they can be used in these options

I believe that would be cool.

[Rodrigo Souza]

You can add it easily by changing this formula here:
F = (g * 1) / d;

Change the "1" with a Long parameter.

Every atom must have a mass, so change the property of them:
atom = (x, y, c, m) => {
return { x: x, y: y, vx: 0, vy: 0, color: c, mass: m };
};

[Rodrigo Souza]

I have made a version with mass:

<canvas id="life" width="500" height="500"></canvas>
<script>
//Hunar Ahmad @ brainxyz
m = document.getElementById("life").getContext("2d");
draw = (x, y, c, s) => {
m.fillStyle = c;
m.fillRect(x, y, s, s);
};
atoms = [];
atom = (x, y, c, m) => {
return { x: x, y: y, vx: 0, vy: 0, color: c, mass: m };
};
random = () => {
return Math.random() * 400 + 50;
};
create = (number, color, mass) => {
group = [];
for (let i = 0; i < number; i++) {
group.push(atom(random(), random(), color, mass));
atoms.push(group[i]);
}
return group;
};
rule = (atoms1, atoms2, g) => {
for (let i = 0; i < atoms1.length; i++) {
fx = 0;
fy = 0;
for (let j = 0; j < atoms2.length; j++) {
a = atoms1[i];
b = atoms2[j];
dx = a.x - b.x;
dy = a.y - b.y;
d = Math.sqrt(dx * dx + dy * dy);
if (d > 0 && d < 80) {
F = (g * 1) / d;
fx += F * dx;
fy += F * dy;
}
}
a.vx = (a.vx + fx) * 0.5;
a.vy = (a.vy + fy) * 0.5;
a.x += a.vx;
a.y += a.vy;
if (a.x <= 0 || a.x >= 500) { a.vx *= -1; }
if (a.y <= 0 || a.y >= 500) { a.vy *= -1; }
}
};
yellow = create(200, "yellow", 0.8);
red = create(200, "red", 0.9);
green = create(200, "green", 1.1);
update = () => {
rule(green, green, -0.32);
rule(green, red, -0.17);
rule(green, yellow, 0.34);
rule(red, red, -0.1);
rule(red, green, -0.34);
rule(yellow, yellow, 0.15);
rule(yellow, green, -0.2);
m.clearRect(0, 0, 500, 500);
draw(0, 0, "black", 500);
for (i = 0; i < atoms.length; i++) {
draw(atoms[i].x, atoms[i].y, atoms[i].color, atoms[i].mass);
}
requestAnimationFrame(update);
};
update();
</script>