54 comments

[ 2.9 ms ] story [ 56.2 ms ] thread
Experimenting with drawing a world map and micro-optimization.
Why is there a lake in Africa near Congo/Gabon istead of one near Uganda?

Also, can this be done with png? Most consecutive lines are very similar, so I'd expect the algebraic pass to be very useful.

> Why is there a lake in Africa near Congo/Gabon istead of one near Uganda?

Africa and Europe are connected through Spain.

There's no Suez channel.

There are plenty of approximation: it's the whole point of the thing... You only get 1013 bytes (or, well, 500 bytes in the question asked).

If you were to render only one lake in Africa I would expect Lake Victoria
Is there a good known algorithm which performs general purpose compression where the target is a given turing complete instruction set? Rather than relying on a fixed general purpose decoder and the associated compresses data.
Presumably you could precompute some parametric function (probably a Fourier sum) which draws a reasonably close map of the world, and get that into 500 bytes with a math-focused programming environment (R, Julia, etc.)? I might try throwing Fable at this and seeing what I can get.
Well, here's what Fable came up with in 499 bytes of R in about half an hour: https://pastebin.com/sBsiGD9t, result: https://imgur.com/a/W3eDdIC. Probably with sitting down and tweaking you could do even better, but I think this is a decent first start.
I can see leas than half of it. Imgur?
Thanks? for the obtrusive ads and the downvote?

HN can do better.

Did you or Fable decide to split North and South America?

Can the it also split Africa/Arabia/Eurasia?

Who/how decided which islands to keep and which to erase?

If you want to save a few characters, you can replace `length(v)` with the actual number.

Fable did that, I pretty much just told it to find the best Fourier sum which can draw a map of the world in less than 500 bytes of R. It downloaded geo data and made the curves to fit that on its own.
Can you post the unencode version? It would be nice to see the vector with the data, for example to count how many coefficients each continent got.

Have you tried with Bezier curves? Your images show a lot of pointy parts, like Southeast Asia and that usually needs a lot of high frequencies in the Fourier representation, so I think something piecewise may be better. (Perhaps a polygon is better.)

And it made a classic optimization: removing New Zealand :).
Since the map just has two states - land or water - I wonder if there's a way to represent the same information more efficiently bits rather than bytes.
Any decent compressor will take care of this - and much more.
I didn't know you could do this with fetch() and a data: URI:

  fetch('data:;base64,1ZpLsgIxCEXnrM...==').then(
    r => r.body.pipeThrough(new DecompressionStream('deflate-raw'))
  ).then(
    s => new Response(s).text()
  ).then(
    t => b.innerHTML = '<pre style=font-size:.65vw>' + t
  )
What's the point in doing things like this if you just get Claude to do it?
What's the point of any of it to begin with? Why paint a painting? Why learn to play guitar?
I wonder how many people hallucinated the word "can" in your comment and downvoted because of it..
To be fair, the greyed-out text is hard to read.
well i did it 10 years ago by myself in 1013 bytes :)
Going from "SVG/Canvas is wasteful" to a tile based approach is a giant leap. Wouldn't AI suggest delta encoding of polyline coordinates and discretization of deltas as small, maybe just 2-4 bit integers? Storing the X and Y delta vectors separately, rather than interleaved, could lead to a further increase to the compression ratio.

What was asked of Claude? The article is very sparse on this.

32x32 4bpp 16-color icon is 512 bytes. There definitely were programs that had a recognisable world map for an icon in those days, so the answer is yes.
I like that yours is 45 rows of asterisks.

Makes me think a project-and-rasterize pipeline, sampling a simplified world water boundary map under a variety of projection parameters should give you a range of bitmaps, and then it is up to whoever to decide if the detail lost in all if this renders it incompatible with the world as they know it.

The site below takes detailed map files and removes significant detail for practical purposes:

https://mapshaper.org/

I feel like this challenge would be a lot more interesting if the size of complete code needed to output the map were counted.
Both are interesting, my html file is 846 bytes and the actual map data pulled in is 445 bytes but a comment on my blog someone came down to 786 bytes and it looks like under 400 bytes of data for the map.
Representation for this I came up with: Allocate one magic number for "start line with space" another for "start line with asterisk" then any other number means this many of the current character and then swap character.

Then it's a matter of picking a suitable way to encode numbers into bits.

I came up with groups of four bits. If the high bit is not set that is the number, if it is set then read an additional group of four bits, and interpret as a biased 7 bit number. This came out to 400 bytes not including decompressor.

> Allocate one magic number for "start line with space" another for "start line with asterisk" then any other number means this many of the current character and then swap character.

The galaxy brain move would be to always arbitrarily start with one character, replace the two special numbers with a single "don't output any characters, just swap" number, and then... congratulations, you just reinvented CompuServe RLE!

http://fileformats.archiveteam.org/index.php?title=CompuServ...

While the idea of using RLE with implicit swapping is the same, everything else is different. I'm not sure it's better in this case. One thing my version did is that it had explicit linebreaks, this approach was chosen as the map in the article had lines of varying lengths. If you don't now you have to accomplish that some other way, e.g. explicitly fill the line up with spaces and some mechanism of communicating the width of the image.

I also think using a varint encoding is a big win over fixed-width.

Yes. Here's a map of the entire world in 1 byte. Both hemispheres. The northern hemisphere is depicted above, the southern hemisphere is depicted below:

  :
You're welcome.
How is that "recognizable"?
I claim it's obviously recognizable as the entire surface of a 3-sphere projected onto 2 dimensions, and therefore is clearly an acceptable answer to the original question posed. I added some helpful and clarifying prose expounding upon which hemisphere is what, but could have left that as an exercise to the reader without loss of generality.
(comment deleted)
(comment deleted)
I know this doesn't meet the spirit of the challenge, but...

          _,--',   _._.--._____
   .--.--';_'-.', ";_      _.,-'
  .'--'.  _.'    {`'-;_ .-.>.'
        '-:_      )  / `' '=.
          ) >     {_/,     /~)
  snd     |/               `^ .'
One could probably map this in JavaScript in 3D on a rotating sphere and it'd be a "recognizable world map" of sorts.
it said recognizable, and I recognize this :)
Its a fun challenge.

I used https://squoosh.app to make a pretty good one. Mostly just a resize and then OxiPNG for compression. Managed a 124x62 black/white image. OP has a resolution of 195x53, so I had very similar, but slightly worse i think? mostly a different aspect ratio + map projection i think.

playing with Squoosh.app is very fun, and you can very easily see how the jump from 500b to 1-2kb turns a map from "awful" to "very good" with the right settings.

great job, looks like you got it down to 786 bytes of html and under 400 for the map data. I like your approach.
you could save some bytes by removing new Zealand, the world would still be recognizable ;)