Derasterized Houndstooth

03.06.2016 § 2 Comments


I thought I understood Houndstooth pretty well, having created its 3D analog, as well as a fractal based on it, as well as an experimental musical work based on it.

However, something I could never quite get my head around was why anyone would ever refer to this as Houndstooth:


To me, this just looked like a bunch of tiny little pinwheels!

One day, though, it dawned on me. It was a form of Houndstooth after all. Once one finds the rows and columns of alternating striped and solid squares, which themselves alternate between having their solid squares be one color or the other (and have their solid squares offset), you realize that what is left are striped squares.

Of a sort.

What’s special about these striped squares is that they are pixelated. Instead of the smooth diagonals of the more obvious Houndstooth design:


The diagonals in this version are jaggedy, blocky, bound to a grid.

Also, it’s a tiny grid: 2×2 only.


Odd v Even

What’s more follows as a natural consequence of this constraint. In the more familiar, obvious Houndstooth, a boundary between colors in the striped squares runs right down the central diagonal of the square, connecting two of its corners. But when you are working with a grid, that diagonal cannot be such a border; instead, it runs right down the center of some of the grid squares!

diagonal midpoint

Therefore, in a grid-based Houndstooth, it would seem on first glance, the striped squares would always have an odd number of stripes.

In other words, since in familiar Houndstooth a line divides things in half, and there are an equal number of stripes on either side, the total number of stripes will always be two times something and thus always even.

But in grid-based Houndstooth, since one stripe is always centered on the main diagonal, and on either side of it there are an equal number of stripes, it will always be the same case as in familiar except with one extra stripe in the middle making it odd.

grid vs smooth


Checker Pass

But this first glance doesn’t quite nail things. As we can see, the assumption that stripes would always be one square wide seemed fine at very small resolutions (what else could one do for the case of 2×2, anyway, besides have a drastic lopsiding of color allotted to each striped square – 3:1 instead of 2:2?) but does not hold up as the resolution increases. One square wide stripes, in fact, cease to exist as stripes, and become a checkerboard; two or more pixel width is required to retain identity as stripes, and beyond that stripes can be any number of pixels wide.










Here is an example of a 4×4 striped square, with stripes 2 pixels wide. The total number of black and white pixels in a striped square is equal, though the corner stripes are much different in size from each other (one is 3, the other 1).

pixelated but with even



Now that I had learned this more about Houndstooth, I realized that while pixelation had introduced me to the notion of odd-striped squares, the two properties were completely independent. The above pixelated Houndstooth has four stripes, even, just like familiar Houndstooth. The below Houndstooth has smooth diagonals like familiar, but with five stripes per striped square, it is odd like the original inspirational pinwheel-style.

five stripe



Where to go from here? One direction was to reduce Houndstooth to the extreme minimum of stripes per striped square: 2. This is not possible in grid-style, but is possible in smooth-diagonal-style:


Observing that this led to a form of Herringbone was half of the inspiration for my other post on the Gingham-Herringbone Continuum (the other half being the observation that going the other direction leads through Shepherd’s Check into Gingham).


Derasterization Processes

But the main thing I want to talk about here is how one can take inspiration from the results of the constraints of grid-style approximations of ideal, familiar Houndstooth and convert back into its smooth-diagonal-style. Since this hinges on pixelating first and then de-pixelating, I call this Derasterized Houndstooth (rasterization just being a fancy term for taking vector based information and encoding into a grid).

I see several approaches for accomplishing this:

  1. by area. Counting the pixels in each stripe, and apportioning an identical amount of area to each stripe in the smooth diagonal version.
  2. by count. Counting the number of stripes; divide the smooth diagonal version up into that number of stripes of equal width.
  3. by edge. Along each jagged edge, draw the new smooth diagonal border halfway between the extreme points into each opposite territory.


The problem with strategy 2 is, while it is the simplest by far, it throws away all of the interesting elements that arise from the initial rasterization step, and is thereby not truly derasterization. I include it primarily as a foil to illustrate the concept of derasterization.

The issue I have with strategy 3 is that it results in some weird gains and losses in proportion. Small corner stripes net gain while the main center stripe net loses. Moreover, you end up with stripes mostly of the same width except for those edge ones, so it’s kind of like the worst of strategy 2 as well, just weirdly offset. While in general here we are thinking about embracing process-related idiosyncrasies and imperfections, I think in this case since strategy 3 amounts to a dumber version of strategy 1 (which is more like perfectly positioning the new smooth diagonal line proportionally between the extreme points relative to how much territory each section should gain or lose, best approximating how the rasterized version would look if blurred or seen from a distance), I prefer 1.


Derasterization Challenges

As one increases the number of pixels, the choice of width and placement of the stripes grows increasingly arbitrary, and the likelihood that anyone would appreciate the fact that it was inspired by gridded constraints would grow increasingly unlikely.

For example, consider a 3×3 with 2-width stripes. Already, even if you use rasterization technique 1, not so compelling.

So the challenge becomes: how to isolate interesting Houndsteeth to derasterize?


Smallest Capables

The first “fundamental” category of derasterizable Houndsteeth I’d suggest are the smallest grids which support a given stripe count (stripes width 2 or more, with single pixel corner stripes permitted). The 4-stripe 4×4 used earlier as an example of the by area technique is a great example, where you get four different areas and four different widths (exercise left to the reader).


Checkerboard Redemption

Perhaps surprisingly, the checkerboarded 1-width ones also become interesting again. Consider the 5-stripe, 3×3:

interesting effects of derasterization

You end up with some very interesting stripe widths. The corners are rather wide, of course, since they get squeezed into points in the corner. But I was surprised by how the center stripe is thicker again from the intermediate stripes. I believe this is because it gets squeezed (ever so slightly) into the two corners it connects, so it has to compensate by spreading outwards. In other words, note that its ends look like chevrons, while the intermediate stripes get extra little isosceles triangles worth of reach (the area on the other side of the dotted red line).



Penultimate Minimum Derasterized Houndstooth

Absolute minimum Houndstooth, with just two stripes, appears more like Herringbone or chevrons than true Houndstooth characteristics. Once you go up to three stripes, though, there’s more resemblance:


However, it also kind of just looks like fancy horizontal squiggles, as it is color-wise continuous horizontally but not vertically.


Switcheroo Mode

With only three stripes, it’s not really possible to not create alternating contiguous areas, but we can switch up the arrangement of the two different types of striped squares, so that instead of alternating by rows (or columns), they alternate by diagonal:


At first glance from a distance, this might even strike you as traditional Houndstooth! But nope, we treat the Houndstooth roots as both up and down, basically sticking opposite facing teeths’ roots into each other, so that our contiguous squiggles run diagonally and have much more each into each others parallel territory.


Pinwheel Switcheroo

As a final bonus, here is what happens when you apply the switcheroo mode to the original inspiration pinwheel Houndstooth:


The code behind some of these Derasterized Houndstooth concepts (as well as some Gingham-Herringbone Continuum) can be found here if you’d like to fiddle with it yourself.

See also:


§ 2 Responses to Derasterized Houndstooth

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Derasterized Houndstooth at cmloegcmluin.


%d bloggers like this: