Black Squares Mosaic

Black Squares Mosaic (preliminary) laser print on bond paper 7×3 feet circa 2006 – in the studio

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.

My boss Louis Bower before I got there.

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.

3 thoughts on “Black Squares Mosaic”

  1. Your Black Square Mosaic article was fascinating! I think the basic idea is rich with possibilities and could go in many different directions.

    It’s also interesting to hear the perspective of an artist learning to code. Nodebox was designed for generative artists and would be *perfect* for a project like this. MUCH easier than Postscript ! If you need any help (or just encouragement) please leave a note on the Nodebox forum.

    1. Thank you for your comment about the article. It’s still in progress. I’m about to explain why postscript was the first choice for me. I’m glad someone else appreciates the richness of the idea. I’m a little confused about how to present the many spin-offs on my website. Honestly, I have just revisited my website after it was sitting for years. I want to make it easier to write about my work.

      If you looked in my instagram you might see that a few months ago I achieved a black square mosaic in nodebox! It was a brutal slog because I had previously used loops so much in the BSM drawings. One of the things that I gained from the nodebox BSM is an appreciation for immediate feedback. I’m amazed how nodebox is always rendering and it’s so fast!

      There are two things I really want to do in nodebox, one is exactly what you are working on with combinations creating tetromino or trimino shapes with different sized squares (tumortetris? blobbetris?) I have started doing the paper sketches for this work. I was thinking it could become a game or just more wall art. In the past I have designed things that kids can construct with/play on/in and I think there is another round coming soon. The other one has to do with animations.

      I have “performed” some Nodebox drawings while screen capturing but the changes were jumpy, of course. Then I used the OSC input to get messages from Chataigne, which has a timeline to smoothly orchestrate changes, which was cool but I don’t like switching back and forth between programs. Next I designed a system that would take line with segments and use the “point on path” node to animate values smoothly. I have two pieces, the thing being animated, and a “timeline” graphic that shows where the animation is. You change values and the line on the timeline changes. It’s not like a DAW with a zoomable timeline graph. It’s very limited, just a proof of concept really, but having a way to smoothly sequence values in the program has been very useful. I want to create a spline version where the timeline can be longer and the keys can be anywhere on the timeline.

      Anyway, I have been meaning to put some work in on these projects but I haven’t had a lot of time recently. I work restoring an historic building here in Philadelphia and it has been busy. I’m currently in the process of dismantling my large scale painting studio and focusing on smaller and digital work so I may have more time coming up.

      I am super-fascinated by your starmaze project. We should keep in touch.

  2. Gabriel,

    I found your black square mosaic post on Instagram (Black Lavender Square – right?). I really like these patterns. They remind me of some reptile skin patterns I’ve seen. If you do post any more Nodebox creations on Instagram, please tag them #nodebox – that will allow me and other Nodeboxers to find them easier.

    The comment I left on your Instagram reply to my post, where I said there were over 4 million ways of partitioning a column, was, on further thought, misleading. The vast majority of those partitions are non-continuous blocks that could be divided into many colors – not at all what you are doing.

    What you REALLY want are INTEGER Partitions. There are only 77 of those for 12 squares and there is a nice connection between these and tetrominos. You might find this wikipedia article interesting:

    https://en.wikipedia.org/wiki/Partition_(number_theory)

    Now I am half tempted to make an int_part node to produce a list of integer partitions. If you would find that useful please let me know.

    I didn’t entirely follow what you wanted to do with animations. If you’ve perused my Instagram portfolio you know that I do almost nothing else but Nodebox gen art animations. You should never really have to use screen capturing to show animations in Nodebox. If you ever need any help with animation projects please post something on the forum.

    I have sometimes thought to doing something like a DAW in Nodebox to help with more complex animations. The idea would be use graphical elements (like beads or boxes positioned on a set of horizontal lines) to choreograph the animation. The actual animation subnetworks would actually read in those shapes instead of numerical parameters. I could then control the subnetworks indirectly by adjusting the box-lines (position of box, width of box, length of line, etc.) instead of entering numbers in different places throughout my Nodebox network. I might try it someday.

    Don’t get me started on the starmaze! I haven’t really touched it in many years, but as you can tell it was a major obsession of mine for a long time. I didn’t have Nodebox back in the 80s and 90s; now I could do lots of things much easier. I do intend to recreate my original starmap in vector form using Nodebox one of these days. And then I could animate the solution path. So many projects! So little time!

    (But if you do have any questions about it and are prepared for long-winded answers, please ask away!)

    Yes, it seems we have much in common. Please do keep in touch. If you want you can reach me through my email (which you have in your reply system).

    P.S. Thanks for posting on the forum. I will reply to your post there.

Leave a Reply

Your email address will not be published. Required fields are marked *