Blog: [Blog Home] [Archives] [Search] [Contact]

Archive for the ‘Creative Coding’ Category

Pierre-Auguste Renoir The Umbrellas Algorithmic Interpretation Video

Saturday, December 2nd, 2017

Pierre-Auguste Renoir The Umbrellas Algorithmic Interpretation Video
Pierre-Auguste Renoir The Umbrellas Algorithmic Interpretation Video

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.

Pierre Auguste Renoir The Umbrellas Algorithmic Interpretation Video Variation
Pierre Auguste Renoir The Umbrellas Algorithmic Interpretation Video Variation

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.

 

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


The Pursuit of Creative Coding Failures

Sunday, October 15th, 2017

Linear Moon Lunar Representation artwork on Redbubble
Linear Moon Lunar Representation artwork on Redbubble

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
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.

Beatles Abbey Road Album Cover Art Successful Algorithmic Interpretation
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
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 detail from Linear Moon Algorithmic Art
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

Linear Moon artwork on Redbubble

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


The Neophyte Pixel Pusher

Friday, September 29th, 2017

The Neophyte Pixel Pusher Auto Poem
The Neophyte Pixel Pusher Auto Poem

Earlier this week I added an automatic poem generator to my web site. This was basically a conversion of a Java program I wrote a long time ago into a Python program. In testing the program, one of the poems generated was The Neophyte Pixel Pusher:

The Neophyte Pixel Pusher
The neophyte pixel pusher is sleeping in harmony with the hyper IBM.
Boldly the pixel pusher debugs.
The IBM imaging beyond a variegated computer.

 

A few more of the poems created while I was testing out the code follow.

 

The Electric Paint
The electric paint eludes deep inside the cybernetic vinegarroon.
Impatiently the paint seeks.
The vinegarroon screams while sleeping a malicious Lucian Freud.

 

The Chaotic Internet
The chaotic Internet writes while designing the networked Pierre Bonnard.
Panting Endlessly the Internet struggles.
The Pierre Bonnard seeks beyond a computerized portrait painter.

 

The Parallel Landscape
The parallel landscape conceives far beyond the young cubist.
Carelessly the landscape attacks.
The cubist drawing within a wiry graphic designer.

 

The Solitary Artisan
The solitary artisan conceptualizing in competition with the multithreaded silicon chip.
Hesitantly the artisan computing.
The silicon chip laughs in harmony with a shadowy processor.

 

Generally the algorithm I used to create these poems generates nonsense doggerel but every once in a while it does manage to come up with a combination of words that paint a mental picture that sort of works. Frankly, the fun part of the process was in designing and coding the program and in building the word lists.

For more and to give the poem generator a try for yourself, visit the Automatic Poem Generator

Automatic Poem Generator

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It