TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

4 pointsby getToTheChopin6 months ago
This is a generative art project which turns images into &quot;force-field&quot; particle animations in real-time. The animation effect uses a force repulsion &#x2F; self-healing effect.<p>Upload your own image, open the GUI controls to change the animation parameters, and then use your mouse or touchscreen to activate the animation.<p>This project is open source (offered under MIT license), so feel free to use it however you wish.<p>This project is coded using Javascript, HTML, and CSS. Video creation and encoding is done using mp4 muxer. Github repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;collidingScopes&#x2F;forcefield">https:&#x2F;&#x2F;github.com&#x2F;collidingScopes&#x2F;forcefield</a><p>Enormous thanks and credit to the project &quot;1 million particles&quot; by Tezumie, which provided the code foundation for the particle repulsion animation.

2 comments

earthWindFi6 months ago
I&#x27;m getting a really smooth animation with anything &lt;1,000,000 particles. Very cool to see what can be done with vanilla JS and canvas.
nimzoLarsen6 months ago
Love these types of real-time effects rendered in the browser. Nice work!