1. NodeBox 1
    1. Homepage
    2. NodeBox 3Node-based app for generative design and data visualization
    3. NodeBox OpenGLHardware-accelerated cross-platform graphics library
    4. NodeBox 1Generate 2D visuals using Python code (Mac OS X only)
  2. Gallery
  3. Documentation
  4. Forum
  5. Blog

Introduction

It's hard to imagine a 21st century visual culture without computer graphics, think of Photoshop, Flash, the web, games: computer graphics have rapidly and steadily developed to a level at which people can express themselves creatively and share content with amazingly less and less prior expertise. The last decade has also seen the interesting emergence of generative art and computational design.

What is generative art?

Generative art refers to art that has been generated, composed, or constructed in an algorithmic manner through the use of systems defined by computer software algorithms, or similar mathematical or mechanical or randomized autonomous processes. Although the term is not necessarily limited to any kind of programming language of computer system, it has known a considerable rise in use since the development of Processing.

Processing is an open source project initiated in 2001 by Casey Reas and Benjamin Fry, former students of John Maeda at the MIT Media Lab. John Maeda pioneered in computer graphics by bringing animation and interaction to the web - eventually leading to the rise of popular tools such as Macromedia's Flash and Director. Processing uses the Java programming language to create visual output. Processing was the first to standardize the concept of an electronic sketchbook, as a tool to get non-programmers started with programming through the instant gratification of visual feedback.

What is computational design?

Computational design is the discipline of applying computational approaches to design problems. This term is more common in the architectural and scientific fields. It involves the development of algorithms for composition rules, shape arithmetic, symmetry, visual grammar, design methodology, etc. A tool like Processing can be used to create generative art, while the development of the tool itself is a computational design challenge.

 

Advantages to an algorithmic approach

There are many advantages in using code to generate graphics. Most notably:

Workflow automation

Any design process or workflow has a creative side and a production side. We want to focus on the creative side as much as possible. The production side (including tasks such as generating alternatives on a theme, applying style guides across different pages and media, certifying PDF documents for printing, executing corrections based on consumer-feedback) we would often rather leave up to someone else. Algorithms can be a formidable production partner here.

When Just Van Rossum and Erik Van Blokland of LettError developed DrawBot in 2002 they described production advantages in terms of volume, complexity and alternatives:

  • Volume: many assignments call for a volume that is unrealistic to create in a short time. When you have large volumes, automating the process is something that just comes naturally, or out of laziness. The computer can work a lot faster than we can when creating 1 500 pages.
  • Complexity: using templates, style sheets and automated layout engines, we can let the computer do complex layouts for us. By adjusting a single layout algorithm, we adjust the complete layout across pages, without having manually to reorder every element.
  • Alternatives: if we don't have to manually adjust every element to see if a different layout might work too, we can try out many alternatives. This is a form of digital sketching: since the production stage is automated, you can readjust the layout or your concept up to the last minute.

Creative leverage

Traditional graphics software has the advantage of robustness. It has been carefully developed and optimized by experts over the course of many years. It often has the disadvantage of lacking simplicity. User applications that focus on one specific problem (either pixels, vectors, page layout, web pages or animation) force us to think in segments. User interfaces composed of predefined menus, buttons and sliders limit our creativity to what others have preprogrammed for us.

The research on NodeBox initiated in 2005 defines creative advantages in terms of integration, language and recombination:

  • Integration: by relinquishing many user-friendly interfaces and focusing on one programming language we can freely address any of a computer's possibilities. We can combine many different techniques in the same environment.
  • Language: it is easier to express creative ideas and processes with language than with mouse gestures. We can store the language description as a recipe to reuse and manipulate - something we cannot easily do with a mouse gestures.
  • Recombination: once we have enough recipes we can bundle these in a package that solves a design problem (like finding good colors). We can continuously derive new functionality and recombine it with other recipes, like playing with Lego-blocks.

Community

Generative/computational graphics software is commonly developed in an open source context, meaning it is free and anyone can contribute to it. You can learn by getting help from the online community, benefit from the programming code of others, and in turn acquire more experience and confidence which you can pass on to newcomers. Acknowledgment is traded for tutoring. For example, technical experts will code new features on request. In return they can benefit from spreading their code and learning how artistic experts use it to create productive and aesthetically pleasing results. The more people join in, the better the software gets.

Marius Watz has been curating Generator.x since 2005, the related website is a tremendous effort in monitoring the evolution in different generative art communities.

 

Emergent in nature

Emergence refers to the way complex systems and patterns arise out of a multiplicity of relatively simple interactions. Emergent patterns occur throughout nature: cells forming organisms, organisms forming societies (an ant colony for example), the weather. The global behavior that arises is complex to analyze, but on the contrary the local intelligence of one agent (cell, ant) is fairly basic.

Emergence is an integrated part of generative art. You write short pieces of programming code and put them together to observe how they interact visually. You may not always know what is going to show up until you press "Run". This requires a different design approach to what you may be used to.

  • Control: we cannot control every single detail in a complex composition with 100 000 elements. Rather, we will have to think about the system as a whole.
  • Build from bottom-up: coming up with an idea and then working out the details is a top-down approach. Because it is difficult to control every single detail, it is difficult to adhere to a top-down approach. To keep things fun when learning how to program it is better to adopt a bottom-up strategy. Start out simple with a few commands you know, put them in a loop, add some randomness and see what happens. Keep it simple. Expand your ideas and slowly add new programming code as you learn more.

workshop_helsinki4

workshop_helsinki5

Two compositions by Veronika Schmidt that illustrate the concept of emergence and the power of generative art. Although the resulting compositions are complex and intricate, the actual process is elementary. Three or four images that Veronika created are imported in NodeBox. Then, thousands of copies of them are placed on top of each other in decreasing angles and scales.

 

Research, reuse, refer

In a bottom-up approach, what do we define as "the bottom"? Behind the facade of a simple programming command, thousands of lines of code may hide. A newcomer's base may be someone else's top. In this process we create standards instead of personal opinions, ideas and concepts.

Suppose you want to visualize something dynamic. You can easily use and adapt a flocking algorithm instead of struggling with your own experiments from scratch. Flocking algorithms have been around for a long time, have been published, discussed, standardized. They are dynamic in their own nature. They look great. People will be intrigued into why and how you used them, look at your work with new eyes, grow a scientific interest in bird flocks. The alternative may be a lengthy, subjective or even pointless discussion on your personal notions of the word dynamic.

  • Methodology: a methodology is a set of procedures and assumptions that underlie a particular study. In the above example the methodology is "to examine and apply bird flocking as a visualization of the concept dynamic". A methodology may explain a researcher's ontology.
  • Ontology: an ontology is an objective model or scheme representing the concepts in a domain and the relationships between them, bottom-up. It is used to reason about the objects in that domain.

The objective approach of having a method and a model has useful advantages. Instead of defining what you want as a result, you define what you need to get started. It enables you to start out small, subdividing the problem into workable portions. Your results have an objective basis so others can tune in, expand or reuse them. You can reuse the knowledge attained in other domains.

On a final note, don't be a purist. There is nothing wrong with finalizing your generated artwork by hand. To improve the aesthetical quality you can use the features in traditional graphics software to chip away unwanted portions, adjust colors, add typography, ... It needs to look good.

 

Getting started using NodeBox

The first thing you want to do once you've downloaded the application is run some example scrips. There's a folder with tons of examples. Open them in NodeBox and press APPLE-R to run them. Then try changing some numbers in the script and run it again to see what happens.

Reference

Then you will want to have a look at the reference to see what scripting commands are available. When you use a command you plug in parameters that define its behavior. For example, the reference may mention something like:

rect(x, y, width, height)

This means that rect is a command with x, y, width and height parameters. The name of the command tells something about what it is going to do (rect will probably draw a rectangle on the screen). The parameters you replace with values of your own. For example:

rect(40, 80, 100, 50)

This will draw a rectangle located 40 from the left edge of the canvas, 80 from the top of the canvas, with a width of 100 and a height of 50. Go through the reference and try out each command to get a general idea of what is possible. NodeBox has commands to draw primitive shapes (rectangles, ovals), create your own shapes with Bézier paths, transform shapes (translate, rotate, scale, etc.), and work with image files and text.

Random loops

To create a lot of rectangles at random positions, we use a for-loop and the random() command. Both of these are essential concepts in NodeBox. With a loop you can repeat actions several times (up to hundreds of thousands of times). With randomness you can add subtle variation to your script.

Commands "inside" the loop are indented with the TAB-key. In this case we draw five rectangles at a random position: 

for i in range(5):
    rect(random(50), random(200), 20, 20)

 

Tutorial

The tutorial contains essential tips on how commands work and how to write scripts.
We recommend starting out as follows:

  • Environment: the basics about the NodeBox application.
  • Primitives: more information about command parameters.
  • Repetition: more information about loops.
  • Variables: instead of plugging numbers directly into a command, you can also store them in a variable and then use the variable throughout your script.
  • Lists: lists are variables that contain more than a single number. They can contain all sorts of things. If you really want to get your hands dirty a good comprehension of lists is essential.
  • Graphics state: how primitives are rotated and transformed. This tutorial may be a little bit hard to grasp at first, but very useful nonetheless.

At one point you'll also discover how to work with Bézier paths. This is where NodeBox truly shines. All of the things you can do with paths are unlocked in the tutorial on paths.

 

Clean, commented code

The programming language that drives NodeBox is Python, written by Guido Van Rossum. Python emphasizes on productivity and code readability. We think it's excellent to learn programming. You can find all the documentation and tutorials on http://python.org/doc/.

We usually keep these under our pillow:

Python code in itself is very readable. It is part of your responsibility to keep it that way. You may want to share your scripts, and you may want to modify or expand it in a few months. A well-written script can last a lifetime - it's not something you generate output from and then throw away.

Steps to keep your code clean and readable:

  • Comment your code: add comments that describe (in English) the purpose of the code below.
  • Blocks of code that peform a single action are kept together.
  • Reuse code: if a block of code is needed multiple times in a script, make a command out of it.
  • Good variable names are essential. A variable may appear throughout a script so pick a good name for it, something that explains what value is contained in the variable.