Unfortunately it's a bit difficult to have good sharing interaction from a static webapp hosted on github.
Plus, the SVG rendering on browser is not good enough (you can see the sharpness) to export the drawing as a picture for future sharing.
A 24-bit color stored in base64 gets stored in 4 characters. Your default 20x30 map, multiplied by 4 bytes, is still just 2400 bytes. That fits in a URL, quite comfortably, at least as far as browsers are concerned.
If you want to pack tighter, a palettized serialization would work fine here. Since you don't have a gradient tool or anything else that can span colors, you have a bound on the amount of information being put into the image by the fact the human is only clicking so many times and can only put so much effort into it.
Basically, store each 24-bit color at the beginning with a tight mapping (4 bytes each with a base64), put an end-marker on the palette set, store the map size, then store the palette entry of each of the width x height triangles. If the user uses less than 256 colors, the default 20x30 size you bring up will end up as 4 times colors + 800 bytes, and that's before you do things like bitpacking ("I see the palette only has 8 colors in it so I only need three bits per cell") or any simple RLE you may be inclined to.
(I'd paste in the example of a Christmas tree a friend drew, except it's, uh... a lot. But the source code might help as a starting point. The OP's URLs wouldn't be as huge since it has a much coarser grid.)
38 comments
[ 4.1 ms ] story [ 83.4 ms ] threadBut this is a dummy basic editor. I know a looooot of features are missing. Check the GitHub repo for more info.
And what is the word for xy-axis-aligned rectangle? :)
But if you're up for it, please make a PR! :-D
A simple 256-bit hash is probably plenty but if I'm off by a few thousand orders of magnitude, just make it a 512-bit hash. :)
If you want to pack tighter, a palettized serialization would work fine here. Since you don't have a gradient tool or anything else that can span colors, you have a bound on the amount of information being put into the image by the fact the human is only clicking so many times and can only put so much effort into it.
Basically, store each 24-bit color at the beginning with a tight mapping (4 bytes each with a base64), put an end-marker on the palette set, store the map size, then store the palette entry of each of the width x height triangles. If the user uses less than 256 colors, the default 20x30 size you bring up will end up as 4 times colors + 800 bytes, and that's before you do things like bitpacking ("I see the palette only has 8 colors in it so I only need three bits per cell") or any simple RLE you may be inclined to.
(I'd paste in the example of a Christmas tree a friend drew, except it's, uh... a lot. But the source code might help as a starting point. The OP's URLs wouldn't be as huge since it has a much coarser grid.)
An option to choose a hexagon shaped canvas and have it repeatedly tiled would be great for designing bathroom floors.
Same reason minecraft and lego are such inspiring tools.
First time I somehow didn't notice the color picker, which is simple & effective. Having a couple preset colors already there might not hurt though?
https://www.google.com/search?q=Ridiculous+Fishing&tbm=isch