Force-Field Particle Animator

This is a generative art project which turns images into "force-field" particle animations in real-time. The animation effect uses a force repulsion / self-healing effect.

Upload your own image, open the GUI controls to change the animation parameters, and then use your mouse or touchscreen to activate the animation.

This project is open source (offered under MIT license), so feel free to use it however you wish.

There are a few hotkeys which can speed up using the tool:

• Press "r" to reset the canvas. This will move all particles back to their original position in the source image
• Press "s" to save a screenshot of the current state of the animation (png image)
• Press "v" to start recording a video of the animation. Press v again to stop the recording. An mp4 video file will be exported to your downloads folder afterwards

If you liked this and are feeling generous, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!

This project is coded using Javascript, HTML, and CSS (see github repo linked below). Video creation and encoding is done using mp4 muxer.

Enormous thanks and credit to the project "1 million particles" by Tezumie, which provided the code foundation for the particle repulsion animation.

Feel free to reach out to discuss, ask questions, or to share your creations! The animations can be easily uploaded to instagram or otherwise -- you can tag me @stereo.drift :)