A few years ago I hand-coded a first prototype of this: hearts rotating inside a hexagon grid, overlapping into interference patterns. It was working, but inefficient as hell. Then I lost it in a data crash and nearly forgot about it.
Recently I rebuilt it from scratch with the help of a coding agent - and the result is of course way cooler than my old prototype ever was. The ideas, the decisions and a ridiculous amount of fine-tuning (plus plenty of discarded attempts) are mine, the agent was the rocket backpack.
Under the hood:
- all the core logic in a single HTML file, WebGL2, no libraries
- the hearts are calculated in a fragment shader, the sound is synthesized live in Web Audio
- works on phones and can be added to the home screen like an app
- GPL-3.0, the source is right there in your browser
The sound is driven by the same settings as the image, so every pattern sounds a little different.
The first people I showed it to kept asking me what it's actually good for. I couldn't really answer that, besides "it looks beautiful and I love it". Over time it turned more and more into a kind of relaxation tool for me - a lot of ideas actually came while "testing" things and looking at it with an empty mind. Now there's a breathing mode that paces your breath, plus these ambient sounds, making it the ideal methadone for doom-scroll addicts.
Oh - and I'm playing with the idea of building an arcade cabinet for it someday, with real knobs and switches instead of sliders.
If you wanna give it a try: https://herzagon.de
My family and friends are already getting slightly tired of me showing it to them, so I'm hoping to find some equally nerdy people here to share this fascination with, even without a sensible use case.