Advanced Particle Motion

What's next?

Okay, so by this point you should've read "Elementary Particle Motion" and mastered the basics—that is, creating arrays of particles. That's the setup! So congratulations, you've finished step one! Now it's time to tackle the next stage of the problem—animation. Now, this is probably the most critical component in any particle motion library, so Particle-Motion prioritizes effectiveness and simplicity to make this process as streamlined and scalable as possible. Let's get started! ⛵

The Array

Quick notes on arrays. These are important and were not mentioned in "Elementary Particle Motion." Each element of the particles array looks like this: [x_position, y_position, x_velocity, y_velocity, ...properties] The x and y positions all range from 0-1 and can be scaled appropriately for drawing. The x and y velocity are typically small numbers which represent how much of a 1x1 square the particle will travel through. These don't really matter because they are controlled randomly. Lastly, the properties array is listed at the end and is no longer an array. If your properties list looked like: [3, 5], your particle array might look like: [0.5, 0.67, 0.02, 0.01, 3, 5] where [3, 5] is appended at the end. You're on to the next step! Keep going strong! 👍

Animation

The key function for animation is the ReFrame function. It takes in a few key parameters:
ReFrame = function(particles, Draw, Compare, Metrics, boost, speedboost, bubble)
Let's break this down 🎊

1. particles

This is just the standard particles array that was created in the last step of this process (see "Elementary Particle Motion")

2. Draw

As the capitalization suggests, Draw should be a function which draws the particles. The function should look like this:
function (particle)
It takes in one element of the particle array and uses its properties to draw the particle to the canvas.

3. Compare

Compare is called many different times on every single particle arrangement in order to compare two particles in a frame. It is passed the following parameters: particle1, particle2. Anything can be done with the particles after that.

4. Metrics

Metrics is called on every particle, like Draw, but for any metrics or statistics that need to be collected from a particle on a frame-to-frame basis.

5. boost

This just measures how fast the speed of the particles should be (roughly) when artificially boosting their speed. Experiment with different values (~0.01-0.05) to find what works best

6. speedboost

This measures the speed variability or how often and fast the speed changes. If set too high, this can make the animation shaky and not-smooth. Try values in the same interval as boost to see what works best. Make sure not to set it too low though, or the speed won't be randomized anymore.

7. bubble

This just measures the radius between circles that needs to be maintained. If two circles are too close to each other, they will automatically "bounce" off each other by reversing their velocities.