Archive for the ‘Algorithmic Art’ Category

Ambient Recursion Algorithmic Art cropped version.Click the image to see the uncropped version.The original artwork is 30 by 30 inches printed at 300ppi.

What could be the first in a series of algorithmic artworks, Ambient Recursion was created using a programming technique known as recursion. Note that the image above has been cropped to fit the screen. To see the complete artwork, click on the cropped image above. A new window will open revealing the complete artwork. Note that a full size excerpt from the center of the artwork is displayed at the bottom of this post. Once you’ve viewed the uncropped image, it will be clear that while the artwork is strongly symmetrical, it is not perfectly symmetrical. I find that by avoiding perfect symmetry, the image becomes more interesting and aesthetically pleasing.

The programming language I used for this work was the Processing programming language. The most challenging part of writing this Processing program was in getting the recursion to perform as I wanted it to – especially with respect to screen boundary conditions.

Because I used a random factor to determine which sub-functions would be called, which in turn influenced the depth of recursion, I found that much of the drawing was being done off-screen – or so I guessed when viewing the program’s output. To get a handle on just where the drawing was happening, I replaced the drawing commands with print commands that dumped out the x,y coordinates and other supporting parameters for every shape being drawn.

This problem solving tactic proved to be most useful as it led me to reevaluate the entire drawing process. If I could dump the coordinates and associated parameters of every shape to a print file, why not write them to a Java arrayList and then draw using the data stored in the list. While the principal benefit of this approach was in insuring that every rectangle would appear within the canvas, it also provided me with the opportunity and ability to manipulate the relationships between the shapes. This was a true case of serendipity.

The second most challenging aspect was in coming up with a title. Given the nature of the image and the fact that I was listening to a collection of ambient music by Brian Eno while developing and writing the program used to create this artwork, the title Ambient Recursion was a natural choice.

While I have not yet added Ambient Recursion to my gallery of artworks here on Artsnova, I have made it available on Redbubble.

The process in which a function calls itself directly or indirectly is called recursion and the corresponding function is called as recursive function. Using recursive algorithm, certain problems can be solved quite easily. Examples of such problems are Towers of Hanoi (TOH), Inorder/Preorder/Postorder Tree Traversals, DFS of Graph, etc.

Orbital Decay is a work of algorithmic art I created last night and is 25 by 25 inches when printed at 300ppi (pixels per inch). To create this art I used an interactive algorithmic art program I finished writing yesterday. Traditionally algorithmic art was defined as art created by a largely deterministic, algorithmic process using parameters to control the process. Complicating the matter of categorization has been the introduction of that category of digital art known as generative art – which has substantial overlap with the algorithmic art category with respect to how the art is created from a computational perspective. In fact it has been argued that algorithmic art is a subset of generative art – even though the former precedes the later. Wikipedia has this to say on the subject:

Algorithmic art, also known as computer-generated art, is a subset of generative art (generated by an autonomous system) and is related to systems art (influenced by systems theory). Fractal art is an example of algorithmic art. Source: Wikipedia entry for algorithmic art

Why Algorithmic and not Generative?

So why have I categorized Orbital Decay as a work of interactive algorithmic art and not as a work of generative art? That’s a good question because this work does qualify as a work of generative art. However as I am the artist I get to decide what I want to call it – although I could argue that to label this art as generative would be equally appropriate.

You will note I have added the qualifier interactive to the algorithmic label. I did this because the creation of this artwork did require direct interaction from me. Unlike traditional algorithmic art programs which can be driven entirely by parameters and parametric settings (an autonomous system), this program as written could not create anything without the artist’s direct input throughout the creation process.

Orbital Decay is available as wall art and as illustration on a variety of products offered by Redbubble. Clicking either the link button or the image below will take you to the Orbital Decay Redbubble product page.

I just created a video for the first time in quite a while for my YouTube account. It came about when I was experimenting with algorithmic representations of a source image using the Processing programming language. The image I happened to be working with was “The Umbrellas”, a painting by Pierre-Auguste Renoir.

As I worked with variations on the algorithm it struck me that an animation could be interesting. The basics of the algorithm were to first create a grid of equally spaced points and assign each a x,y location. The key variable at this point was the amount of spacing there would be between each x,y grid location. For this video I set the grid spacing to be 10 pixels.

Next was to get the color value from Renoir’s “The Umbrellas” image for each of the x,y locations in the grid. To draw I had decided to use the line() function. The variables for each line would be color, starting angle, and length. For the line’s color, I simply used the color value taken from the image for that location. For the starting angle of rotation, I opted to use the hue taken from the corresponding pixel. To get the hue required converting the RGB color value into its HSB (hue, saturation, brightness) equivalent. The length of the each line being drawn was determined by the brightness of the pixel at that location. This resulted in another variable: establishing what the maximum line length would be. So brightness values of 0 to 255 had to be translated into a range of lengths from some minimum value to some maximum value. The standard way of doing this in Processing is to use the map() function. I never use map() because it is an inefficient way to translate numbers from one scale into another scale. For the video, I simply divided the pixel brightness by 12 – meaning the longest a line could be was 21 pixels.

To add some variability, I added a variable for the Z axis and used a Perlin noise field to control each location’s Z coordinate. The result is that the distance of each line from the camera varies somewhat, which enhances the perception of depth in the image.

To animate the image required changing one or more of the variables associated with each grid point over time. Keeping things simple, I added a global variable that would equally increment each line’s rotation angle between frames. This created a uniform rotation for all the lines.

I then added a time variable to alter the Perlin noise field values over time and updated each line’s Z coordinate between frames. The main issue here was with respect to how much I wanted the range of Z values to vary. For comparison, below is an illustration of what you would see if a substantially greater range of Z coordinate values was allowed.

To create the output, I used the Processing saveFrame() feature to write each frame of the movie to a tiff file. Separately I had used Audacity to create a narration soundtrack for the video. Once I knew how long my audio track was, I simply dropped a variable into my Processing program which indicated the frameCount at which to stop generating image frames.

While I have previously used tools like FFMPEG to create videos, this time I decided to use Processing’s Movie Maker tool. Confirming that my tiff and mp3 files were fine, I started up Movie Maker. I specified the input sources for my files, went with the default compression of animation and clicked the “Create Movie” button. I then monitored the dialog window as the program progressed through the 3000 images used to create the video. The program ended without error.

But when I went to view the video using VLC, all I got was a black screen and horribly garbled and spotty audio. I had no idea what had gone wrong. Rather than resorting to one of my other tools, I opted to give Movie Maker another try. The only difference was that this time I selected the JPEG option for compression. The dialog proceeded as before and again ended without error. This time the video and audio were fine, except for a narrow strip of color along the video’s edge. For purposes of this video, that is something I can live with.

Unfortunately the image quality of the video has suffered due to YouTube’s overly enthusiastic image compression. Whereas my original video upload was a 3.1 gigabyte file, YouTube compressed it down to a mere 29 megabytes (you can’t throw away that much information without losing quality). While I do understand the need to economize on bandwidth, such economies can be achieved in part by viewing the video at one of the lower resolution settings.

You can view the video on YouTube at: https://youtu.be/CNE0j1LXIJ0. Give the video a watch, let me know what you think, and share it if you like it.

I write this as a creative coder dismayed by my own lack of foresight in keeping a record of some recent coding failures. It was only a week ago that I wrote an article about glitch art – Glitch Art or Not Glitch Art. You would think that with having just written about deliberately capitalizing on failure that I would be more attentive to my own coding failures. But alas no.

I’ve used the artwork titled Linear Moon shown above to illustrate this story. I created this art using a brand new program I had just finished writing. I knew that I’d written a similar program in the past but did not have the patience to go looking for it (yes, my hard drives are just that cluttered – even with files being organized by directory). Instead I decided that starting fresh would be the best way to go.

My early versions of this new program featured some mathematical logic mistakes with respect to what I wanted to accomplish. If I had been wiser I would have kept these mistakes for later evaluation with respect to their artistic merit. But no, I was in hot pursuit of the right program – the program that would generate a picture that matched the one in my head. It was only when my internal visualization of what I wanted to achieve matched what I saw on the screen that I ceased twiddling with my code and began experimenting with different parameter values to create Linear Moon.

Abstract From Line Segments Algorithmic Art Fail

The good and the bad about every run of the program was that the final step always wrote its results to a file so I had a visual record of every failed image. The good was in being able to go back and look over these image fails. The bad was in seeing that a number of them had artistic value and knowing that I had failed to keep a copy of the version of the program that produced that image. One example of an early failure is Abstract From Line Segments shown above and created from a painted version of The Beatles Abbey Road album cover art.

In contrast, the correct version of that same input image is shown below and accurately reflects the look I was going for. Between the two images were a number of program variations where I experimented with my program’s math and logic. These variations produced a range of visual results.

A successful interpretation of a painting of The Beatles Abbey Road album cover art

After the challenge of successfully creating the linear/line segment effect that I wanted, adding a coloring option was fairly straight forward. The only challenges associated with adding color were those of sampling and manipulation. An example of an initial color experiment is shown below using a portrait of SpaceX CEO Elon Musk.

Elon Musk Algorithmic Portrait, color version

There is one big difference between a program that works correctly and a program that leads to erroneous results: it is quite easy to recreate a program that works correctly but exceedingly difficult to recreate a specific set of errors.

My advice to all creative coders out there is this: slow down a little bit, take a look at your failures, and ask yourself “is this an error worth keeping?”

About Linear Moon Algorithmic Art

Linear Moon is the first work of art I’ve formally created using my new program. The original is 30 by 30 inches printed at 300 ppi (pixels per inch). To provide a better idea of what the image looks like at actual size, below is an excerpt that features Tycho Crater. Note that its size on your device screen will vary due to the different pixel densities of different screens.

Tycho Crater actual size detail from Linear Moon Algorithmic Art

While I have not yet added Linear Moon to my web site, I have made it available as merchandise on Redbubble

A few days ago I added an Art Title Generator to my web site. I did so as a consequence of having writer’s block on coming up with a title for a generative artwork I had created at the beginning of the week. I wrote the Python program for the generator using word dictionaries I had created for a Haiku generator I had written using Java. I added it to my web site and promoted it via some of my social media accounts.

I was surprised when I heard from a couple of people who said that it was not working. Surprised because this is a Python program running on the server and delivering to the user a complete web page with the generated artwork title clearly visible. I couldn’t imagine why these folks were not seeing the title – but were seeing the rest of the generated page.

Impossible.

I went to my son’s computer and used his browser (Chrome) to view the page. And what I saw was no title. It just wasn’t there – which was impossible. I did a view source to take a look at the code that was received by his browser – and the title was there – right where it was supposed to be. So why wasn’t it visible?

And why did the art title display in my Chrome browser but not my son’s? Then it occurred to me. I asked my son if he was using an ad blocker. He said yes. Looking at my CSS, I had used a CSS class that I had named "contentad" and used it to display quotations about art at the bottom of quite a few of my web pages. The only explanation for the invisibility of the generated art titles was that an ad blocker was looking at the name of the CSS class and saying to itself "oh, this is an advertisement so I’ll hide it from the viewer."

To test my theory, I renamed the CSS class and then updated the 102 html files on my site that used it – as well as the Python program. I went back to my son’s browser and voila – there was the art title in full view – no longer hidden by the ad blocker plugin.

To read more about my art title generator and generate a title for yourself, you can proceed to the introductory page Automatic Art Title Generator. Or if you are the impatient sort and want to see an art title right now, load the Art Title Generator.

Here’s hoping that you enjoy the algorithmically generated artwork titles.

One of the projects I undertook over the Thanksgiving holidays was to create a new series of abstract algorithmic artworks. The first of these artworks that I’ve made available on Redbubble and Crated is the piece Euclidean Chaos.

The Euclidean in the title is a reference to Euclidean geometry. Euclidean geometry is a mathematical system described by the Greek mathematician Euclid in his textbook on geometry titled simply Elements, written sometime around 300 B.C. The fundamental "space" in Euclidean geometry is the plane. The chaotic aspect of Euclidean Chaos is, what is visually, a countless number of intersecting planes which constitute the artwork.

My analogy for this artwork is the cosmological concept of the multiverse or parallel universes – a system wherein there exists an infinity of non-interacting universes, each unaware of the other’s existence.

I hope you like Euclidean Chaos and will visit its pages on Redbubble and Crated (by clicking the buttons above) to see the variety of art product offerings available for this artwork.