[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)
 
web link (medium.com)
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)