Canvas Particles
Orbit Game + Canvas Particles
As with Orbit Game, this is based off a program called Text Particles by William Hoza. In his program, particles are created and gather to form letters. The program operates by writing the letters normally to a text area. It creates particles for each pixel and gives each particle a target position. The particles are moved according to a proportional control system, like a rubber band is attached from the target point to the particle. The force on a particle is proportional to the distance it is away from its target point.
I modified the program in two ways. One, I modified the forces on the particles. Two, I added new sources for the particles besides letters. I used dat.gui to easily provide a user interface to modify variables in real time. The dat.gui light theme was a nice change from the usual black theme most other places that use dat.gui have.
Forces
First, I added a scaling factor to the homing force. The forces on a particle are broken down into X and Y components based on the angle from the target point to the particle. I added a constant to the angle. This causes the particle to approach the target obliquely as it is pulled in. Depending on the homing force, the particle can spiral in and converge, or it can orbit the target. The third variable I made was “jitteriness”, a constant added to the homing force. This means that even when the particle is right at the target, there is still a force on it. This causes it to never be in equilibrium so it is always moving around.
You can modify these three values and see the effect in real time. Generally, a large homing force, small homing angle, and small jitteriness cause the particles to converge to their targets quickly. If you draw a straight line, it will look like a rotating cylinder. In this case, increasing the homing angle increases the diameter of the cylinder. Increasing the homing force causes the particles to move faster and be flung outwards more, which also increases the diameter of the cylinder. Increasing jitteriness causes the cylinder to spread out because the particles each have additional velocity.
Sources
I used three sources for the particles to follow: Drawing, Circle Animation, and Shapes. I also modified the separate Orbit Game to use the particles.
Drawing
I used functions from a helpful tutorial by William Malone to allow you to click and drag to draw on the source canvas. When the user clicks and drags on the canvas, the mouse position is recorded into an array. Then, the array of points is drawn. It’s interesting how the particles move to modify the image. If you draw a wavy line and then draw a second wavy line under it, it will send the particles that formed the right half of the original line to form the left half of the bottom line. The new particles come in and form the right half of both the top and bottom lines.
Circle Animation
I made a simple canvas animation with a circle, where the position and size change over time. You can control the properties with the UI. By default, the circle moves downward diagonally and grows in size. If you want to make the circle move in other ways, you can modify the animation() function. I modified it once to make the circle actually move in a circle. Because the particles lagged behind the actual circle, the particles looked like a crescent. At times, they even looked like a banana.
Increasing the size of the circle while moving it causes some interesting things. This one looks like a snake.
Here’s a sequence of images from a circle moving to the right and growing:
Shapes
This uses the 2D Canvas Image Particles library from Arkounay. It generates six different types of shapes and sends them around the canvas. You can push them around with your mouse as well. The downside of using this library is that there isn’t an easy way to stop it from running and writing to the canvas. I modified the library to only draw and clear the canvas when the program is in particle mode. It was tough to figure out what was going on in the minified JavaScript, but the Chrome Developer Tools formats it like normal code so I could tell what functions to change.
The particles look very little like the shapes floating around on the source canvas. In fact, they can look like a graph of the stock market. It’s kind of like the particles are fitting a curve with the shapes as the points.
Orbit Game
Orbit Game writes to a canvas so it was easy to modify it to display particles based on the source canvas instead. There are a lot of calculations going on every iteration, but it still works well. There are lines connecting the planets because the particles on that line are attracted to both planets, similar to gravity. Every so often, about half the particles from one planet will switch with half the particles from another planet. This is because all the pixels’ targets are reassigned each iteration.
To see the relationship between the source and particle canvases, you can always change the displayCanvas option view to view either one. As far as performance, my browser could handle upwards of 800,000 particles. CPU usage goes to 100% while memory usage is only 100 MB.
These are some more cool images I got:
Let me know if you come up with interesting images or modifications with Canvas Particles!