Black Squares Mosaic

The Black Squares Mosaic is a work in progress that I have been developing off and on since 2005.  I am going to start documenting my work in this blog post.

The drawings are made by a computer program that I have coded in various different programming languages, but it is really an idea, which is easiest to realize with a computer, but not impossible to make by hand.

The Concept 

The idea is that you make a grid or mosaic of black squares where you change the size of the square so different numbers of squares all fit into a column of the same height. Here I have drawn a column of 12 squares. We can stack columns of 6, 4, and 3 and they will all be 12 squares tall.

This is already very interesting! We could make a “mosaic” by just covering a rectangular area with these different size squares. But what if we stay with the idea that these are columns? We can flip two coins and get with each set of two flips, one of four options.

Heads:heads = 12 squares of size 1
tails:tails = 6 squares of size 2
heads:tails = 4 squares of size 3
tails:heads = 3 squares of size 4

Why would we want to go through all of this trouble to choose random numbers? For me there are several reasons, one aesthetic and one technical. Firstly there is a certain look to actually random numbers that is hard to simulate. There are certainly times when I just move things by hand to look better, but there are places I can’t surprise myself unless I am using real random numbers. I believe that actual random numbers are a type of nature. I don’t think that you can see clouds and trees in any random numbers, but there is always something surprising when I am not choosing but just trusting the roll of the dice.

Here I got some random numbers from the internet. I’m surprised by how rarely the 12 block column comes up! But look, the larger the squares are, the more space they take up (obviously) but this actually looks different than the numbers seem conceptually. Once I realize that 3 square columns look like they dominate I had the idea to use the 12 square columns alternating with the other sizes to make sure there is a rhythm.

To my eye this has a far more interesting rhythm than the simple alternating columns.

The technical reason for using random numbers is that when squares get more numerous, changing each square to be aesthetically pleasing is incredibly tedious. For the sketches above I used a hand-drawn sketch for the first one and then moved layers around in Photoshop to copy the columns I had already drawn. It certainly would have taken me longer to sketch each column by hand, but even so it was very tedious. I wanted to use something that looked hand drawn to emphasize that it is not about the computer, but rather the concepts that govern my process. In order to explain how I started creating hundreds of thousands of squares, We have to talk about programming

---

The Power of Programming

The power of programming to me is not that I can make fancy effects or simulate physics or apply math I don’t even understand. Those things are great, but I am more excited about being able to draw a hundred thousand squares with very specific sizes and spacing in a few seconds. Once I actually got my program to work, I started coming up with more and more ambitious experiments. To understand how these experiments work, let’s look at the simplest case and work up to the more complicated.

“Hello World!” of Black Square Mosaics
In programming, the first test in any programming language is to get the computer to print the words “Hello World!” to the screen. This is just to make sure that everything actually works before committing a lot of time and effort to creating something with tools that don’t even work. After you create the first program, then you can take user input, do logic like reversing the text or adding words and numbers, and at some point, create a file or connect to the internet or something actually useful. The specific things that you need to do just to make sure these functions work are mind numbingly boring to me, but the more time I have put in to understanding the different systems, the more exciting and un-boring my programs have become.

I won’t list every tool and language that I have used, but there are some basic functions that I have learned that have made my experiments possible. .

Let’s pretend we know how to tell the computer to draw a square. Our program has to have some way of telling the computer what size this square should be and how large it should be.

In this case, we want the computer to draw a square 5 units from the bottom and 2 units from the left. The square should be 2 units wide and high. This seems incredibly simple, but I think this is where a lot of people will just get discouraged and stop. First off, there are different conventions about the positive numbers and whether you count from the top of the drawing area or the bottom. While the graphing standard we learn in school is to draw up from the bottom, there are just as many situations where the drawing actually happens from the top down. The other two pitfalls are that the units are not always scaled to your liking, and sometimes you have to use specific functions to get the computer to actually SHOW anything. If the drawing tools are using pixels they may be very small or draw off the screen. If there are functions to actually show graphics that are not obvious, the graphics just get calculated as to where they should be and don’t get drawn. The trouble with these problems is that they are not technically errors! The computer and the tools are chugging along happily because they did exactly what you asked, but there is no way for the system to know what you expect. Let’s assume we have beaten these dragons and actually SEE A SQUARE! The next step is the “loop.”

Loopy loops and the loopers that loop them
When I first got a loop looping I saw exactly the same thing as when I had drawn a single square. The reason was that I was looping, but nothing was changing. There are many ways to make a change every time, but I’ll just talk about two of them. These examples aren’t in any language, but the concepts apply to almost every language.

Iterators – The iterator is just a number that changes every time the loop occurs. You can always change this number so that the loop is going by 2’s or 0.0001’s or whatever, but the simplest is to start at zero and go up to whatever number of loops you want.

Start at 0, add 1, stop at 10 (this loops 11 times because it includes 0)
every time you loop draw a square sized (2 by 2) at (2 right, 5 up) 

Of course this is awful and doesn’t show anything cool because all eleven of those squares will be right on top of each other. BUT! you can actually use the iterator as a number in the loops to change something like the location each time it loops

Start 0, count 1, stop 10
        draw square size(2,2) at location(2 right, [loop number] up)   

The reason I chose these numbers is because this is the kind of thing you see that is not at all what you want when you are first starting out. Often you don’t want to start at zero because that is the edge of the drawing. You have to allow for a gap if you want your objects to be seen as separate objects. To me this was the most beautiful thing imaginable because it proved that I could get a computer to draw squares in a column. HELLO WORLD!

If you want, you could do some math with each iterator step but it gets a little tedious when you have more than one thing that you want to change like size and horizontal location and vertical location. .

Variables that change each loop

If you want to do something different in the loop every time you do it, you need something like the iterator that you can adjust each time. The iterator is only available inside the loop that creates it. This means that if you loop from 1 to 10 when you are done the iterator doesn’t exist! This is helpful to be able to do the same loop again, but can be very confusing.

In the sketch above you could create each square with one loop and the column with another loop. If you want to change the size of each square each time you finish a column, it gets pretty complicated to keep track of how many squares, what size they are, and where exactly they need to be drawn. You can create variables outside the loop that are available to every loop, called global variables.

Scope of Variables – I really resisted learning this! I don’t know why, but it seemed like some kind of voodoo thing that programmers understood and I didn’t want to get into it. If you CAN do everything with global variables why SHOULDN’T you? When programmers would tell me that my code won’t be as easy to modify, debug, or even understand, I just scoffed. Why would I need to modify? I was creating each program for one-time use, there is no modifying, just creating anew. To be honest, I was still stuck in “Hello World!” and didn’t want to come out. The truth is that the more complicated your experiments become, there is just no sense in making one-use programs. I don’t know who needs to hear this, but if you write 20 lines of code and you have to do a little logic puzzle next year to figure out what it even DOES, you should learn about scope of variables.

To be fair to myself, my first language, Adobe Postscript, is incredibly limiting and forces you to do a lot of mental gymnastics to get anything done. Every line of code is literally processed backwards as in:

 2 2 add  

You might think this is fine. I just spent a few minutes reminding myself how to use this language and I present the following screenshot:

I created a variable called “variable” using the / character and the keyword “def” (define). I thought I could just type the variable name and it would print to screen, instead the line GS<1> reminded me kindly that there is data on the “stack” == tells postscript to print everything on the stack. I then used “add” and “store” to update the variable and once again print it to the screen.

It’s a miracle I ever got my first BSM drawing completed!

Here is probably a good place to insert a little history on my graphics programming efforts. We’ll get back to variables in a little bit.

How I got into programming

I started out my making stuff career as an oil painting student. I learned in a very traditional way. While I was doing that I started working as home repair person, dreaming of being a furniture designer. I had access to a table saw and circular saw in high school and I began to read about crafts work and thought of it as perhaps better than oil painting. When I dropped out of the PA Academy of Fine Arts, which is a story for another article, I started doing home repair as my main way of making money. I tried to restore things to the way they were made in the Victorian era, and I had a little success. Finally I got a Job at John Grass Woodturning. This was my dream job of making wooden things in the old ways, all day, everyday. There were several problems though.

The pay was very low, I had health problems from all of the dust, and perhaps worst of all, a nagging feeling that I was squandering the potential I had as a visual artist. I believed that I had a knack for two-dimensional work, which I still think is true. I enrolled in a two-year vocational graphic design program.

Several things happened as studied graphic design. I realized my deep and abiding love of letter forms and I started to view the computer as a woodworking shop that would do all of my cuts perfectly if I gave accurate instructions. I have always been interested in the actual fabric of things and in design I could focus very heavily on elements, line, shape, light and dark, color, volume, space, and texture. These to me seemed like the building blocks of all art. And then as I studied how digital typography worked I learned about the idea of vector curves.

The idea of vector curves is just that you can create a mathematical function that determines how a curve will work.