Fractal Play — SVG fractals with mouse controls

I wrote a client-only app in Elm for drawing fractals in SVG! Play with it here: https://morrna.github.io/fractal-play/

There are lots of tools out there for generating fractals, but all the ones I’ve seen require you to do things like type in parameters to customize them. This app is my attempt to make a more intuitive version of that with a click and drag interface so you can just fiddle with things and see how they affect the final image. You can find all sorts of interesting in-between patterns that you wouldn’t find otherwise.

The features are still pretty bare bones. It’s just a weekend passion project, so I can’t make promises about what I’ll add, but I am open to ideas on what to improve next. Feel free to check out the code or leave feedback on github: https://github.com/morrna/fractal-play

Enjoy!

11 Likes

This is really cool @lightroastespresso!

I didn’t know you could define fractals like this, it’s really beautiful.
It seems that the “Start from” dropdown doesn’t work (EDIT: on Chrome), which makes me sad because I really wanted to see the other fractals.

I am open to ideas on what to improve next

I think that a undo-redo button/shortcut would be great here. Having to carefully drag the knob back to where they were originally is tricky :sweat_smile:

1 Like

The “Start from” dropdown works for me (firefox).

2 Likes

Ah right, it seems to be a problem only on Chrome. Cool, now I can play with them :sunglasses:

1 Like

Thanks for the undo-redo idea! I was also considering an idea to make URLs encode the state so that they could be bookmarked and shared. There might be some useful overlap between these.

2 Likes

Oh thank you for pointing that out! Over the holidays I tried it out on someone’s iPad and it had similar behavior, but I couldn’t tell if it was a touchscreen problem, a Safari problem, or something else. I couldn’t reproduce it on my own since I don’t have a device, but I can reproduce it now in Chromium, so maybe I’ll figure it out. I have the messages wired to the Option element, so I guess Chrome must push events somewhere else, maybe to the parent Select.

2 Likes

Having click listeners on <option> elements is unconventional (I didn’t even know that worked). I’d say listening for the “change” event on the <select> is more common. That might be why it works in some environments but not others.

2 Likes

This is definitely a case of me taking the path of least resistance. I got the change event working, but I ran into an odd wrinkle with the mapping of values to messages. See my new topic if you’re curious.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.