Building images with code is a hobby of mine. In Python, generating images with Pillow is very easy. All you have to do is generate the image’s bytes and pass it to an Image object.

I wanted to see how this could be done at a very low level in JavaScript. You can use the Canvas and draw one-pixel rectangles, or just use WebGL, but I chose to go lower. Instead, I ended up converting a raw image to a BMP file (think Windows Paint), and displaying it directly within an <img> tag. The BMP format seemed like the simplest image format that worked in web browsers.

While I was working on a program that could read in MIDI files and (roughly) replay them, I ran into something I had never seen before: Variable Length Quantities (VLQs). It’s an integer format unlike any fixed-length type: smaller numbers are represented in less space than large numbers.