[HN Gopher] How Hackerman would create an image just by typing 0...
___________________________________________________________________
How Hackerman would create an image just by typing 0 and 1 - deep
dive into GIF
Author : happybits
Score : 85 points
Date : 2023-12-05 10:30 UTC (1 days ago)
(HTM) web link (medium.com)
(TXT) w3m dump (medium.com)
| happybits wrote:
| CUSTOMER
|
| Hackerman, I need an impressive icon for my website. It should be
| 5x5 pixels big and look like a rabbit. Can you please draw it for
| me?
|
| HACKERMAN
|
| Draw!? Bah! I don't need any graphic program for that. I am
| Hackerman. I will code it for you. You will get the image next
| week.
|
| CUSTOMER
|
| Next week?? But...
|
| HACKERMAN
|
| No buts! I just need to read about how the GIF file format works,
| then I can create the image in no time.
|
| [TIME PASSES]
|
| After spending some evenings, Hackerman gets the main idea of how
| the GIF file format works and the compression algorithm called
| LZW. With that knowledge, he succeeded in creating the image
| within an hour.
|
| Hackerman calculated that the binary of the image should be as
| follows:
|
| 47 49 46 38 39 61 00 00 00 00 70 00 00 2c 00 00 00 00 05 00 05 00
| 81 11 11 11 FF FF FF D5 D7 D9 00 00 00 07 0F 80 01 00 83 01 82 84
| 85 88 82 8A 85 02 85 81 00 3b
|
| So he just opened his code editor, saved the file as rabbit.gif,
| and sent it to his customer. Boom! Easy-peasy!
|
| Do you want understand the GIF-file format and be as cool as
| Hackerman?
| bluejekyll wrote:
| Yes? Is that such a bad thing? Is this trying to say there is
| no value in learning something so low level. Exploration leads
| to learning, and learning leads to innovation. Perhaps
| Hackerman will go on to create the greatest image encoding
| library for images so that they can easily scale from 5x5 to
| 25x25 or more and fit in the same space as the 5x5. Who knows.
| loloquwowndueo wrote:
| He's quoting from TFA.
| atoav wrote:
| I teach a foundational media technology course at on of the
| bigger european art universities -- I do the same thing with
| the students using a broadcast wave file.
|
| The goal of the thing isn't to turn them into hackers, it is to
| give them a feeling what the stuff they work with is made of,
| what _a file is_. This is also a great introduction to talk
| about compression, metadata, encoding, decoding, sample rate,
| bitdepth and so on.
|
| If you dive that deep into it, the settings in a typical media
| conversion program will suddenly become much less intimidating.
| My motto always was: this was made by humans so it should be
| possible for humans to understand it as well. And this is maybe
| the "hidden" lesson: If you bring enough patience you can go
| into the depth of nearly every topic.
| JohnFen wrote:
| I absolutely love that you do this. There appears to be a
| trend to discount the value of knowing the low-level details
| of these sorts of things -- but even if you never actually
| work at that level, knowing what's happening "behind the
| scenes" increases and deepens understanding and can make
| high-level things that seem arbitrary or nonsensical make
| sense.
| jolmg wrote:
| That first
|
| > 00 00 00 00
|
| should be `05 00 05 00`.
| Brentward wrote:
| Yeah the article says these "aren't used anymore," but my
| image viewer (sxiv) complained that the gif was corrupted
| until I put something there. It still displayed the image,
| but it also complained afterwards.
| jolmg wrote:
| In the case of viewnior, it said that the resulting image
| has zero size and displayed nothing. That statement of it
| not being used seems false.
| mikecx wrote:
| Love learning about image/video formats and I enjoy how you broke
| it all down. Just a heads up, pretty sure you've got a typo:
|
| "Next is the Global Packed Field, which in this case is 70 which
| in binary form is 00000000."
|
| 70 in binary would be 100110. (64 + 0 + 0 + 4 + 2 + 0)
| jsf01 wrote:
| This pops up again later when he says 81 is 10000001. Or that
| width 8 corresponds to 04. I don't know enough about the gif
| format to know if I just misunderstood these parts or if they
| were written incorrectly, but it was a bit confusing.
| jtaft wrote:
| Reminds me of graphic designer vs css programmer
|
| https://youtube.com/shorts/YWT8Dqd-AmQ?feature=shared
| dfox wrote:
| Note that the article glances over the first byte of image data
| which specifies how many bits each pixel occupies and sets it 07,
| which makes first 128 symbols of the resulting LZW stream byte
| aligned. This is probably never the case in practice (for the
| presented images it should be 1 respectively 2).
| gpvos wrote:
| It is mentioned near the end though.
| snoopsnopp wrote:
| Someone needs to release bit for bit break downs of common
| image formats. It's always fun to draw by hand.
| pjc50 wrote:
| Some years ago (1996) I wrote a GIF decoder from scratch based
| entirely on http://qzx.com/pc-gpe/gif.txt (and a description of
| LZW bundled with my copy of pcgpe that seems to be missing from
| that page) . I remember it being quite a struggle against off-by-
| one errors.
|
| I do wish there was a _really good_ format for describing binary
| file formats in a way that was amenable to codegen. Kaitai
| https://kaitai.io/ seems to be the state of the art.
| charlieyu1 wrote:
| I like reading articles like this. Compression is always a hard
| part for me to understand, just feels very unintuitive
| seiferteric wrote:
| Netpbm https://en.wikipedia.org/wiki/Netpbm is even easier
| 1-6 wrote:
| Thanks, I wonder if I can now train an AI to create exquisite
| GIFs using binary using these instructions.
| mock-possum wrote:
| > Next is the Global Packed Field, which in this case is 70 which
| in binary form is 00000000
|
| ... what? 70 should be 1000110 surely?
| jszymborski wrote:
| Defeats the purpose a bit, but its far easier to type out a PBM
| [0] file by hand and then just convert it to gif using e.g.
| imagemagick
|
| [0] https://en.wikipedia.org/wiki/Netpbm
| fwip wrote:
| There's a cute plugin[0] for Vim which converts any image to
| XPM, which is a similar format that Vim has syntax-coloring
| for. You can edit the text, and then on save, it will get
| converted back to the original format. I've used it a few times
| to quickly preview an image or edit a favicon. It's more of
| party trick than seriously useful, though.
|
| [0]https://github.com/tpope/vim-afterimage
| TacticalCoder wrote:
| Wait, TFA doesn't even contain a link to this vid from Hackerman
| hacking time!?
|
| https://youtu.be/KEkrWRHCDQU
|
| (my favorite part is when he goes into hardcore hacking mode
| while putting a Nintendo glove on)
| Moru wrote:
| Eh, yes it did :-)
| kristopolous wrote:
| What was the follow up content that's no longer available?
___________________________________________________________________
(page generated 2023-12-06 23:00 UTC)