Inspiration

I always wanted a better user experience to create art, this is my take on it, there is a huge gap between what is possible and what people have time for. I saw the hackathon few days before the deadline, and I was waiting for a moment to implement some sort of gamified experience in the fractal renderer Lumen Apeiron - The Chaos Master. That's where the ideas for the Lumen Apeiron Arcade started to flow.

What it does

Lumen Apeiron Arcade makes the hard part of learning to create appealing art easy, it teaches you how the tool works, it shows you new ways to be creative, it animates exactly how you like it, without messing with the controls 10 hours in. And there is a duel too! Human vs AI, try your luck!

How we built it

The project was built over the last 2 years, mostly hand coded every little detail, we love to mess with rendering, maths, and new technologies. So we used SolidJS (with Typescript), WebGPU with TypeGPU, and later added Cloudflare support for more advanced features, galleries, sharing the flames etc.

Since this year, I wanted to sped things up, so I started imagining my ideas through various coding agents, it was rough at the beginning, even for AI, dabbling into unknown languages, under specified specifications (looking at you WebGPU and Firefox), and dealing with running the test loops without making your GPU explode.

The WebMCP layer was a breeze, I recently added recorder, replay feature, where (almost) every action you do is tracked and can be made into a video. The WebMCP is a thin layer on top where the commands can be executed using any agent.

The Arcade was built on top of this layer, so that making art is easy, fun, and challenging (pun intended) at the same time!

Challenges we ran into

The development of such a complex system, graphics pipelines, UI that has thousands of little buttons and sliders is really slow, especially on the web, where every second device either doesn't support WebGPU at all or it looks and crashes in all the different flavors (Chrome, Firefox, Linux, Windows, MacOS and iOS, Android) you can think of.

It didn't stop with the WebMCP though, enabling various development flags in Chrome, trying to make it work in ChatGPT desktop app on Arch Linux, running various smaller models (agents) that feel lost on what the API even means, it felt like compatibility flashbacks all over again.

Accomplishments that we're proud of

After every struggle, we managed, we wanted to do even better, the chaos master is now working quite well on a huge list of devices, it is even usable on the phones. WebGPU and TypeGPU made all of this possible and we even contributed to their projects as well.

The Chaos Master is simply 100% usable as client only application, so all the computations, all the data, stays at your own discretion.

I am just happy that I managed to endure this WebMCP hackathon, to fill this application after such a rush of creativity to finalize the release I have been postponing for weeks.

What we learned

Development is hard, time consuming and device compatibility, edge cases and testing most important. Making something looks good is just first step, making it usable is another, making it fun is what gives back and makes people think about what is possible.

Agents are only as safe as the page makes them, having everything played before your eyes is the beauty of our tool, but not really specific feature of it, so we hope that any app with a command bus and a recorder would steal this, to make a tutor and animator.

What's next for Lumen Apeiron Arcade: fractal flames your agent can drive

Art director - A way for you and AI to create your taste, by being the hand that moves the brush, and picks the winners, while the agent tracks every movement, so it can practically predict the next point, nevertheless how chaotic (pun intended) the art is

Beats - Making actual music with fractals and vice versa, a universe full of weird creatures and sounds

The Human vs Human challenges, as well as AI vs AI, a plethora of great fun, making art fun, and hearing fractal dimensions alive.

Built With

Share this project:

Updates

Submission history