Inspiration for and Development of “Space Birds” on ArtBlocks.io

When I released my first project on Art Blocks (Gizmobotz) in July 2021, I was already formulating an idea for a second release. Gizmobotz was such a playful design, with a lot of fast movement and comical character faces, that I wanted to do something more traditional; more artistic.

Forks in the Road

Each person who undertakes any type of creative endeavor has their own method of working. This is true whether they are creating physical artworks or digital art that springs from lines of computer code. When I was younger, my creative output was physical, mostly in the form of paintings, mixed media and the occasional sculpture. Most of the time I started working without much focus, typically having very little idea of what I wanted the finished product to look like. Sometimes I would start with a method or a material I wanted to work with and let the art sort of happen by itself. As it progressed, the results I saw would lead me into decisions about how to proceed. So, I had the perception that the work was actually creating itself while I was following along and trying to steer the process.

I still work that way to a certain extent whether I’m putting together ambient/experimental music tracks (as Another Neglected Hobby) or creating digital art using computer code. Experimentation, trial and error, combining unrelated themes and acting impulsively have led to some of my favorite results. Just like an algorithm that follows a step-by-step process, my creative flow follows the same type of decision tree:

Try this.

Hmmm, that doesn’t quite work.

So, try this instead.

Okay, I kind of like that.

Let’s go that direction then.

That’s how I work when I’m developing a project.

Sometimes, a simple thing can be the spark that leads to the beginning of an idea for a project. There are a couple of functions I took notice of within p5js, the Javascript library used to create Space Birds. The example of the functions on the p5js.org reference section just grabbed my imagination.

The two functions beginShape()/endShape() (“Shape”) and beginContour()/endContour() (“Contour”) work together. Shape creates an outside perimeter of an object and Contour creates an opening inside that shape. The example given on the p5js.org website shows a rectangle Shape drawn in red with a rectangle Contour inside, also drawn in red. The space between the two has been filled with white. The background is gray:

The code to create Shape and Contour specifies how to draw the lines (“vertexes”) from one corner to the next. As I looked at this, I began to imagine what it would look like if you moved each corner of the Shape and each corner of the Contour in random directions and for random distances. If you start by moving the corner points of the Shape…

And then move the corner points of the Contour…

You start to see some interesting shapes. And, I found that if you move one of the inside Contour corners beyond the outside perimeter created by the Shape function it makes that corner appear “folded”, as if the picture frame has now been twisted in two points.

Add a few more moves and the shapes really begin to get interesting. The shape below is the same Shape and Contour we started with, but the corner points have now been pushed to extremes:

I took this premise and assigned some randomness to the location of all eight corners (four Shape and four Contour) and experimented with the amount I allowed them to stray from what might be considered normal in creating a traditional Shape/Contour relationship.

I also began experimenting with triangles and pentagons using the same shape and contour functions, then tried layering one set of Shape/Contour on top of another. While experimenting with filling the Shape/Contour sets with color I learned that I preferred adjusting the alpha channel of the colors used so that there was a level of transparency that permitted the Shape/Contour set that was behind to show through the top set.

I developed several semi-transparent color palettes that I could assign to fill the Shape/Contour sets, as well as to fill the background of the images. I worked until I had a script that produced very nice static images with solid backgrounds that I was happy with. I considered stopping at that point, but decided to take another fork in the creative road.

I decided I wanted to create a gradient shift in color from the top of the background to the bottom, so I put that into place using the lerpColor() command, assigning a random color from a palette to the top and the bottom, and fading from one to the other, sometimes passing through several other colors in the transition.

This produced static images I liked even more, but I wondered what would happen if you added movement, changing the locations of the eight Shape/Contour corners randomly. I realized that if the morphing of the Shape/Contour sets were to take place in real time through animation it could create a beautiful geometric ballet of shapes.

With this in place, I added rotation to the shapes, and made it so the colors in the background gradient shifted over time. At this point, I had the “base” Space Birds algorithm, which could produce a large number of uniquely beautiful variations. From there, I created some additional features that would result in more variety of outputs.

Orientation — Space Birds are arranged on the image surface in several different orientations. Singular — refers to a single grouping of layered polygons. Two Across — Two groupings side-by-side. Two Up — Two groupings in a column. Three Across — Three groupings in a horizontal line. Three Up — Three groupings in a vertical line. Four Pack — An evenly-spaced arrangement of four. Six Across — Six groupings in two horizontal lines. Six Up — Six groupings in two vertical lines. Nine Pack — An evenly spaced arrangement of nine groupings.

Line Strength — There are three different strokeWeights used in Space Birds. The thinnest stroke is called Mucha, after the Czech artist Alphonse Mucha. The medium stroke is called Picasso, after Spanish artist Pablo Picasso. The thickest stroke is named after the German-American artist Peter Max.

X-Ray Mode — With this option, a dark background palette is assigned and the stroke color forming the shapes is changed from dark gray to a shade of white.

Border — Some outputs are referred to as “framed”, which means they have a dark gray frame with an inner frame in a color selected from the assigned palette. “Unframed” outputs have the appearance of being printed on paper.

Inertials — A group of irregularly shaped objects that floats around the Space Birds. The inertials spin at changing rates of speed as their shapes flex and morph.

Magneto Rings — These orbiting groupings of rings rotate around each other in a pattern that gives the appearance that their movements may be influenced by some kind of magnetic force. Over time, the speed of the rings rotation changes, as does the diameter of the rings.

One More Thing… Why “Space Birds” ?

As I was developing this project I struggled with what to call the resulting forms. Early on, I went through “Twisted Polygons” and “Qlusters” before finally arriving at “Space Birds”.

One reason I decided on “Space Birds” is the way the shapes of the moving polygons sometimes remind me of the Bird-of-Paradise flower.

And, once I made that connection, I recalled an image that I saw in a book about modern art when I was younger. It was a picture from a sequence of sculptures created by Constantin Brancusi from 1932 to 1940 called “Bird in Space”. That sculpture made an impression on me and influenced the development of my ideas about shape and form in art.

To my eye, the twisted polygons produced by my script echo the shapes of both the Bird-of-Paradise flower and Brancusi’s “Bird in Space” series, so I settled on the name “Space Birds”.