News for hackers. Stuff that matters.

Show HN: turn images into realtime forcefield animations (free and open source)

https://collidingscopes.github.io/forcefield/

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.

This project is coded using Javascript, HTML, and CSS. Video creation and encoding is done using mp4 muxer. Github repo: https://github.com/collidingScopes/forcefield

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

( 2 comments | 4 points | on HN )
Re:Show HN: turn images into realtime forcefield animations ... by earthWindFi on Tuesday November 12, 2024 @09:52PM (#42122430)
I'm getting a really smooth animation with anything <1,000,000 particles. Very cool to see what can be done with vanilla JS and canvas.
Re:Show HN: turn images into realtime forcefield animations ... by nimzoLarsen on Tuesday November 12, 2024 @09:34PM (#42122343)
Love these types of real-time effects rendered in the browser. Nice work!