Encoding state in URL-safe 64 bit string

[lightroastespresso]

I really wanted to make the designs in Fractal Play shareable in an editable way, not just with screenshots. With no server backing it, this means some way to save and share the state. Ideally something simple like a URL would be nice, doubly so if it can be compact enough to fit in places with character limits. This got me looking at bytes and 64 bit string representations.

The end result is pretty good in my view! Simpler designs can fit in under 100 characters:
https://morrna.github.io/fractal-play/?=KhIEE8cL3uw5C97sOQP1E8cD9UT_uwFLZUwJ9CL8C0y7Djy-LDToCiEDag
And even designs based on the most complex starting point so far, the Sierpinski carpet, only take 194 characters:
https://morrna.github.io/fractal-play/?=ERgE7DnsORPH7DkTxxPH7DkTxx5wHebiGh5w8njz2h3zHmPhnR3z_83zqB00Hxrg5h00DOPz8x494eceGR498rf_2h6_HZTibB6_DS8AAB4zHiPh3R4z8x0Mix4-Hhjh6B4-ADMMsR4UHkLhvh4UDP0M4w

While the math to optimize the amount of information to keep was interesting, I think this group would be most interested in the elm project stack that I used to make the encoding. It’s a bit different from the other post on a similar subject I noticed.

1. Create byte encodings with elm/bytes.
2. Create 64 bit strings from the bytes with chelovek0v/bbase64.
3. Make the 64 bit strings URL safe with prozacchiwawa/elm-urlbase64.

Here’s the module that does all this for those who are interested. I really liked being able to work with elm/bytes together with the base math to really be careful about how many bits I was spending on each piece. Many thanks to everyone who contributed to these packages! All it took was a bit of wiring to get up and running, and I never had to think too much about the string encoding itself.

The amazing fuzz testing capabilities in elm-test were also crucial for me. I was able to test encoding and then decoding all of my state elements, while making sure the values stayed within the right tolerances. I would have had a very hard time catching my mistakes if I had not been able to test the pieces along the way.

Let me know if you’re curious about the graphical details of encoding points and transforms. I could reply or make a new post.

[dirkbj]

Thanks for sharing this; this is very interesting. And great timing as I am working on an app with the same needs (no backend and need to “save state” of the board.

[lightroastespresso]

I’m curious - What sort of state for what sort of board?

[dirkbj]

Basically, its a chess-like game where I want to pass back-and-forth the updated view of all the pieces on the board.

[lightroastespresso]

Makes sense. Assuming your board is 8x8, you could get one piece’s position in 6 bytes total. The other bits in an 8 bit int could encode things like capture. Seems like you could get this pretty compact.

[dirkbj]

The two player board has 19 hexes. The pieces have facing, and can have custom stats. I would also need to encode scoring as pieces are taken, and pieces added to the board over time, as the game has 2 reinforcement opportunities. I guess a bit more complex that regular chess.

[Erkal_Selman]

Thank you for sharing this! I’ve been wanting to make experiments like this one sharable by encoding the configurations (left side on the screenshot) as URL parameters, but wasn’t sure how to approach it. This is exactly what I needed!