Particles III
Applying Forces
A "force" is a push or pull on an object that can cause it to change its motion, speed, or direction. A force is a vector, meaning that it has magnitude and direction.
vector: a quantity that has magnitude and direction and that is commonly represented by a directed line segment whose length represents the magnitude and whose orientation in space represents the direction. Merriam-Webster Dictionary
So the force above with a magnitude of 10 and an angle of 60° will be represented as a vector like this:
const someForce = {x:5, y:8.66}
We can apply a force to an object using the Body modules *applyForce" module:
Body.applyForce(body, position, someForce);
Let's update our MatterJS - Multiple Particles codepen so that we can apply a wind force to our particles. First we'll need to create a variable for our force:
1
2
3
// wind force
let windForce = { x: 0, y: 0 };
The force of wind is a bit different than the force of a bat hitting a baseball, in that the force is applied over a longer period of time. So for this exercise we'll apply the force in our update method.
1
2
3
4
5
6
7
8
9
10
11
12
function update() {
// look at the particleBody position and update graphic position accordingly.
particleBodies.forEach((particleBody, index) => {
const pos = particleBody.position;
Matter.Body.applyForce(particleBody, pos, windForce);
const particleGraphic = particleGraphics[index];
particleGraphic.setAttribute("cx", pos.x);
particleGraphic.setAttribute("cy", pos.y);
});
window.requestAnimationFrame(update);
};Since the windForce is essentially 0, you won't see any change in the way the particles move. Go ahead and set a really small value for x - something like 0.001. You'll see the particles look like they are being pushed to the right of our scene. Changing to a negative value pushes the particles to the left.
I've created an interactive version that let's you adjust the wind force with an input slider:
Here's another example where I apply an upward force once the particle falls to a certain level. You'll notice that the force is much larger than the force applied in the wind example (0.2 for the popcorn example vs 0.005 maximum for the wind example). That's because the wind force is being applied every frame, which causes the particle to accelerate. If the force is to large, it ends up accelerating so fast that you can't even see it. In the "popcorn" force example, the force is only applied briefly, when it falls below a certain y threshold, so the particle doesn't continue to accelerate.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function update() {
// update the engine
Engine.update(engine);
// look at the particleBody position and update graphic position accordingly.
particleBodies.forEach((particleBody, index) => {
const pos = particleBody.position;
if (pos.y > h-50){
Matter.Body.applyForce(particleBody, pos, popcornForce)
}
const particleGraphic = particleGraphics[index];
particleGraphic.setAttribute("cx", pos.x);
particleGraphic.setAttribute("cy", pos.y);
});
window.requestAnimationFrame(update);
};