I have been wanting to look into flint particles for some time now. I have tried to use the library for some other demos, however at the time it felt like I would struggle to get into the inner workings of the library. I wanted to push some particles around with gravitational wells.
The flint library had a demo for gravity-wells and there is a similar effect for anti-gravity physics. After a bit of fiddling I found that some of the physics effects could be attached to the mouse.
The code for this demo has been uploaded to github due to popular demand.
Everything in this demo is procedural and placed randomly. The image that looks like a planet is code that came from the smoke demo I posted a while back. The particles spawn randomly on the canvas and avoid the planets by making use of anti-gravity wells. Yes, this is not realistic portrayal of the galaxy! Who cares? If you look closely, you will be able to see that the particles are pulled towards another type of image. That image is supposed to depict a black hole. This image is essentially a inverse of the planet graphic. The black holes attract the particles with the gravity-well physics and they have a dead zone in their center to kill the particles.
There are five particles that are tracked with a target. The reason for this is that I wanted to know if I could identify and interact with the particles managed by the flint particle-system. I also hid the mouse to remind myself that I can actually do that and replaced it with the rings. The particles react with the mouse and try to avoid the mouse, just like with the planets. The only difference being that the mouse can move.
The twinkle effect
The twinkle effect is borrowed from another demo that I did a while back. It essentially draws the particles to a canvas four times smaller than the particle canvas, without pixel snapping enabled. This forces the pixels to disappear if they do not fit on the smaller canvas. Then when you scale the bitmap back up to the size of the original canvas, only some of the particles remain and they are blurred, giving the sparkle effect.