Painting with Code

How generative art reveals new possibilities in visual expression and design

Published
June 4, 2014
Reading Time
4 minutes

By day, I code mobile apps and design digital experiences. In my free time, I create art. I recently began exploring both at once with generative art, a sublime combination of computer programming and graphic art. Generative art, or art derived from computer code, is a relatively new format, in which the artist-programmer realizes a vision or idea by defining parameters and commands. But making generative art is, in many ways, just like painting or any other classical fine art.

When you create a painting, you start with an inspiration and sketch it on paper. You then prepare your oils, brushes, and canvas, and you refine the painting until it’s just right. I follow a similar process with generative art. When something inspires me, whether it’s a contour map in a geographic magazine, a chart representing a mathematical formula, or the various mechE tools in my father’s workshop, I sketch it on paper and jot down the keywords that best describe it. Then, I sit down at my computer and compose the code (using the Python programming language) that will “paint” the right “brush strokes.” I run the code to generate images on my computer, and go through multiple iterations until the code outputs the shapes, colors, opacities, and shadows that perfectly express my original idea.

I leverage the power of my computer to generate the artwork. Where a classical fine artist would pull out his oils and brushes to express colors and shapes, I do the same with parameters. For example, I defined a palette of colors for painting waves like this:

code_1

As if the computer was a hand holding a brush, I tell it how to paint by defining command codes, like draw_wave:

code_2

Delightful Randomness

While most of the parameters in my code are set statically, I have also added an algorithm that allows certain parameters to be generated randomly, so the visual elements of the image change randomly within a defined range. This way, the final product is unpredictable; I’ll never know exactly what image will be generated.

This function returns a float number randomly ranging from 0.1 to 0.7:
code_3The random parameters are not only unpredictable, but also non-reiterative, so these images cannot be recreated—they are completely unique.

Algorithm as Art

Computer graphics are based on mathematics, so when I paint with code, I am exploring and visualizing the beauty of structure, abstraction, and complexity in mathematics that most of us don’t get to see in our daily lives. It often happens that when I play with a new algorithm and see the images it generates, I’m inspired to develop them into artwork, as was the case with Tsunami. The inspiration for this series came while playing with an algorithm named Cornu Curve, which generates a fantastic visual effect of crazy waves. From the same code, I made six different images using a combination of a hundred curves in varying opacities and shades of blue.

Tsunami_1 Tsunami_2Tsunami_3Tsunami_4Tsunami_5 Tsunami_6

Unlimited Complexity

Creating art with code allows me to make complex images that I could never have made by hand, such as All Seeing Eye. It is composed of millions of lines and hundreds of layers, and each line has its own shadow, blur, and opacity.

All-See-Eye-No_post

My goal was to use the complex texture to create the visual effect of catching or entrapping the audience in the “eye.” The computer is an exciting tool for creating art like this, which requires repetitive, intricate work. A piece of generative artwork composed of millions of shapes can be drawn in just a few minutes. Rendered by hand, the same piece might take a human ten years to accomplish.

All-Seeing-Eye-No_detail

Like a painter selecting the perfect tool, I used the following piece of code to define a “brush” with just the right characteristics to create the lines I wanted:

code_4Then, just as a painter would use a specific gesture to create a certain visual effect, I used the following code to tell my computer how to hold and draw with the brush I created:

code_5

Functional Designs

The exciting thing about generative art is that it is not only beautiful, but also usable. We can create new patterns and unique fabrics for the fashion industry, or we can move beyond two-dimensional creations and use generative art to make sculpture, furniture, and even architecture.

For this post, I created an algorithm that generates a unique IDEO LABS graphic:

IDEO_labs_image_1The code tells my computer to randomly place tiny circles of various colors, levels of transparency, and stroke weights on a path that composes characters in a certain typeface (in this case, Courier).

code_6

IDEO_labs_image_2

Creating art with code, I’m constantly making new discoveries of exciting visual possibilities. Computers have revolutionized countless aspects of human life, and now, generative art has the potential to revolutionize artistic expression, opening infinite space for innovation.


Hailei Wang (王海磊)is a design director in IDEO’s Shanghai office. He spends most of his time on designing and programming apps, and exploring the new possibilities of leveraging generative methods in art and design, especially by way of 3D printing. You can find more of his work, including his generative art series, at Behance.

Hailei Wang