How To Create A Bitmap Image File By Hand Without Stencils - BappyTechTips

Viewers looking at a painting from On Kawara's "Today Series."
As someone deeply invested in the art world, chances are you’ve
found yourself playing art-guide to your friends or relatives on
trips to the museum. And chances are, your friends or relatives will
consistently praise the old Renaissance paintings, while drawing blank
 stares at anything modern. “What’s the big deal, I could do that?!”

The issue here, for some reason, is a matter of old-fashioned skill
 and labor (or lack thereof). Take On Kawara’s Today Series. At first
 glance, your friends or relatives will inevitably dismiss them (“why would anyone do that?”),
but when you explain that Kawara painted the dates by hand without
using a stencil they are immediately impressed. “Without a stencil?”

The artist’s labor has always been a precarious currency in the art
market; occasionally exchanged for monies, other times for less
tangible payments like publicity, access-to-networks or rare experiences.
 While there are always exceptions to any rule, the amount of labor expended
 has traditionally remained a mathematical measure of validity for the art
 objects that result.

In the age of automation, software tools, and outsourced development,
 how can any digital artist expect to be taken seriously, if the “labor”
expended is a matter of keeping up a Tumblr blog or printing out and blowing
up Photoshop gradients? Is there some kind of heroic equivalent to making digital
 images from scratch, “by hand” and “without stencils?” Look no further! In this
tutorial we will be showing you how to create a Bitmap Image File (.bmp).
 A .bmp file, like any image file, is a matrix of pixels sized a particular
 width by a particular height. We will be creating our .bmp from scratch, by
 typing in machine code bit by bit. When one hears the term “machine code,”
binary-code is likely the first thing that comes to mind. For this tutorial,
 however, we’ll be working in Hexadecimal. In order to write in Hex code you’ll
 need a hex editor. You can download Hex Fiend, a free and open source hex editor
 for MAC, here. (NOTE: Call us crazy, but we’re assuming you’re a MAC user.
Don’t worry, the same principles apply to all platforms).

Hexadecimal Numbers

Hexadecimal is base 16, this means it is a numerical system which uses 16 characters,
 0 through 9 and A through F. We’ve put together a chart for you to use as a “cheat-sheet”
until you get used to writing in hex.

If you were to continue adding to this chart,
 decimal 16 would be hexadecimal 10, 17 would be 11, 18 would be 12 and
if we jumped a bit further, 26 would be hexadecimal 1A, 27 would be 1B, 28 would be 1C and so on.
 We’ll be converting larger numbers into hex a bit later on in this tutorial, when we set our .bmp’s width and height.

Hexadecimal Colors

Now that we understand how regular numbers translate to hex we’ll take a look at colors.
If you are a web developer or you use Photoshop you might already be familiar with hex color values.
 You might already know that FFFFFF translates to white and 000000 to black, but why?
 It’s actually very simple: each pixel in a .bmp has a red value, a blue value and a green value.
 These values can range from 0 to 255, which is 00 – FF in hexadecimal.
A pixel contains 6 characters, or three sets of two, one set for each value R, G and B.
 So if I wanted to make a pixel red, I would type FF0000,
 setting my red value to the max of FF while maintaining my green and blue values at 00.

File Header

Now that we understand the basics of Hexadecimal numbers and colors we can start a small sketch.
Every .bmp file contains two sections, the file’s header followed by the image data.
 The header is the first couple of lines of code which contains the file’s basic information (what kind of file it is, what its dimensions are, etc.)

Lets go ahead and open up Hex Fiend.
Before we start constructing our header we should make some changes to Hex Fiend’s set-up to make it a bit clearer.
 Select the Views tab in the Menu.
 Then un-check Plain Text (this can get distracting), then at the button where it says Byte Grouping select None.
 Now we can start creating our header. The first thing we’ll need is some basic .bmp info, type the following code into your file:

42 4D 4C 00 00 00 00 00 00 00 1A 00 00 00 0C 00 00 00

Next we’ll need to set our .bmp’s dimensions. We’ll keep it small for this first sketch, lets make our width four pixels wide:

04 00

Lets also set our height to four pixels:

04 00

Last, we’ll type in some more standard .bmp header code:

01 00 18 00

We’ve now finished setting up our header, if you did this right it should look like the image below:

Image Data

Here’s where we start typing our pixels.
Usually .bmp files read from right to left and bottom to top,
which is the exact opposite of the way we read words on a page
and can get confusing! The particular kind of .bmp we set up in
this file will also read bottom to top, but will read left to right
instead of right to left, which will make things a bit easier for us.
 So the first pixel we type will be showing up on the bottom left
 hand corner of our .bmp image and the last pixel will show up on
 the top right hand corner. As if things weren’t backwards enough,
 we’ll also be writing our color values backwards, this mean B-G-R
rather than R-G-B.

Once we’ve wrapped our heads around that, we can start typing our
first row (i.e. bottom row). Lets set it up to alternate between red
and white pixels. First I’ll type my red pixel:

00 00 FF

Next we’ll type our white pixel:

FF FF FF

Because we set up our .bmp to be 4px wide, we still need two more pixels
 to finish off our first row; let’s type one more red pixel and one more white pixel:

00 00 FF FF FF FF

That should finish off our bottom row. For the next row we’ll alternate
 between white and black pixels. First we’ll type out a white pixel,
then a black one, then white again, then black again:

FF FF FF 00 00 00 FF FF FF 00 00 00

For the next row we’ll alternate between blue and white:

FF 00 00 FF FF FF FF 00 00 FF FF FF

And for the last row (which visually will be our first row),
 we’ll alternate between white and black again:

FF FF FF 00 00 00 FF FF FF 00 00 00

At this point we’ve typed out four rows, each four pixels wide.
 We can’t type any more pixels because we only set our image dimensions to 4×4 pixels.
 The last thing we need to finish off our file is a little padding.
 Type in four zeroes and you’re finished:

00 00

Now save your file as sketch.bmp and open it up in Preview. It should look like the image below:

Remember, the .bmp file you just created is only 4px wide by 4px high.
This means when you open it up in Preview you’ll have to zoom in a bit before you can see your pixels.
 If your image doesn’t look like the one above you likely mistyped some code.
 Take a close look at the image above and check your file line by line.

Creating Larger Compositions

It was easy to set up our file with a width and height of four pixels
 because the decimal “4” translates to the hexadecimal “4.”
 If we had set up a larger .bmp, say 13px by 13px, our header would have looked like this:

42 4D 7C 00 00 00 00 00 00 00 1A 00 00 00 0C 00 00 00 0D 00 0D 00 01 00 18 00

Notice that the section in our header which contains the width and height are
set to hexadecimal “0D” where it used to say “04”; this is because (as our chart demonstrates above)
13 translates to “D” in hex code. But what if we want to set up an image that’s much larger,
 say for example 268px by 268px? Rather than counting all the way to 268 in hex,
there’s a formula we can use to convert the decimal 268 into hexadecimal.
 This is going to involve some long division so we might want to take out a pencil and paper.
We start by dividing 268 by 16 (because hex is base 16):

(268/16 = 16 R12)

We get 16 with a remainder of 12. The remainder will be our first value,
we’ll convert it to hex (“C”) and save it for later.
Next we’ll take the answer without the remainder (which was 16) and now divide that by 16 like we did before:
 (16/16 = 1 R0). Just like before, the remainder becomes our next hex value (“0”),
which we’ll save for later. We’ll take the answer from this last problem and divide
that again by 16 (1/16 = 0 R1). Now that our answer reached zero we’ve got our last remainder (“1”).

Now we write our remainders from last to first: “1”, “0” and “C” or 10C which is hex code for 268.

Now that we’ve got our hex code, there’s a bit more reordering we need to do before we can stick it in our header.

First we need to split our hex value 10C into pairs starting from the right:
1 0C (we’ll change the “1” to a “01” in order to make it a pair): 01 0C Now that
we’ve organized our hex value into pairs the last thing we need to do before including it in our header is flip the pairs:

0C 01

And because we want both our width and height to be 268, we’ll type in this value twice
 into the dimensions portion of our header. Our new header should look like this:

42 4D 7C 00 00 00 00 00 00 00 1A 00 00 00 0C 00 00 00 0C 01 0C 01 01 00 18 00

That wasn’t so hard! You may have noticed that for both sketches we’ve chosen a
multiple of 4 for my dimensions. This is because any .bmp’s with dimensions
that aren’t a multiple of 4 need to have padding added after each row in the
image data. So say we set up a sketch that was 18px by 18px. We would need to
 divide 18 by 4, which is 4 with a remainder of 2. We then take our remainder (2)
 and add that many 0’s as padding at the end of each row. To avoid having to
type in extra padding, we’ll be sticking to multiples of 4 in this tutorial.

Now that we’ve created my header for a .bmp with a width of 268 and height of
268, it’s time to start typing out some image data. A .bmp with a dimension
 of 268px by 268px will have 71,824 pixels in it. Each pixel contains
6 characters (white = FF FF FF), which means our new sketch will have a
total of 430,944 characters following the header info. After you type out
 all 430, 944 hex characters, remember to close your sketch with a padding of four zeroes at the very end like before.

It’s very important that your image data contain all 430,944 characters as
 required by the dimension we’ve set. If your file is missing or has added even
one character your .bmp won’t work. Check out this sample 268px by 268px sketch below.
 We did a lot of copying and pasting in order to reach all 430,944 characters.
This is really only a taste of the intricate color patterns you can achieve with a hand-crafted bitmap!