2

I'm building a grid where each box has a different color value using HTML & Javascript.

Example: A 5x5 grid where I'd have 25 values to keep track of. I'd like to be able to send the grid's information via a 'grid' parameter so when any user wants to view this specific grid, they'd see the fully drawn grid. Initially, the URL would be: www.mysite.com?grid=0123401234012340123401234 Ideally, the parameter would be under 25 characters.

How would I go about converting '0123401234012340123401234' to a smaller string? Is it best using a compression algorithm or just using decimal to hex conversion?

mellowjen
  • 153
  • 2
  • 6
  • What is the range of values that will be stored in each cell? Is it a number within a small set (e.g. 0-10?), a freeform string? A date? Knowing how constrained the data is will greatly influence possible solutions. – maerics Apr 30 '12 at 21:18
  • It would be a small set so 0-10, at max. – mellowjen Apr 30 '12 at 21:21
  • The range of values is critical. Since your answer looks like "yeah, something like 1-10", you should be more definitive. What is the exact range of possible values in each position on the grid? Is that range the same for all positions? – Mark Adler May 01 '12 at 01:04
  • The reason behind my nonchalant comment is that I'd be mapping these values to their color values. For example, 0 would translate to #000111, 1 would be #FFF123, etc. These values would be stored separately in a different parameter since it would be overkill to specify the actual value for each cell. – mellowjen May 01 '12 at 20:32

2 Answers2

0

You can just use a higher base. Something like 30, for example: (123401234012340123401234).toString(30) --> "8i015nb02ib0c4ik". Note that, for this to work properly, the 123401234012340123401234 has to be a number rather than a string.

Tikhon Jelvis
  • 67,485
  • 18
  • 177
  • 214
  • Except that number (123401234012340123401234) is already out of bounds for JavaScript to represent exactly... – maerics Apr 30 '12 at 21:21
  • Hmm, good point. You could always break it up into smaller chunks or something. – Tikhon Jelvis Apr 30 '12 at 21:23
  • Using base 30 for each chunk could work but it'd still produce a very long parameter value. It would be shorter than the original so that could be a solution. – mellowjen May 01 '12 at 20:35
0

If each cell contains a color, that means each cell needs 3 bytes (or 4 if you include changes in the alpha channel). This means that you need 6 hexadecimal characters for each cell if you were encoding in hexadecimal.

This isn't optimal, so I suggest using a-zA-Z0-9 which equals 26 + 26 + 10 = 62 characters . Then use the two characters - and _ as well, to get a full 64 characters. Using hexadecimal, you needed 6 characters to encode 2^(24) possible values (or 2^32 if you are using alpha channel).

With 64-base characters, you only need 4 characters per cell. The reason I am mentioning this is because a-zA-Z0-9 - and _ are valid url characters.

All of this is assuming of course you are using all the colors. If you limit the domain, you can reduce the number of characters per cell drastically, but you should still use the same encoding scheme.

Kaushik Shankar
  • 5,491
  • 4
  • 30
  • 36