Generative Art with Processing

Generative Art

Using paints and brushes in not the only way to create something on canvas. When it comes to digital canvas the possibilities are endless, from copy-paste to sophisticated tools like krita, inkscape, photoshop etc. Whatever the medium, they let artists convey their ideas in form of shapes and color onto a 2D surface. The idea can vary from a realist portrait or nature scenery to an abstract artwork. Whatever the case they reflect the artistic thoughts of the individual artist. But in some cases ideas might become too abstract or convoluted to even convey them in the form of colors or strokes. They might need another approach like writing them in an algorithmic or formulaic fashion. Interpreting these ideas and rendering them for naked eye is the next challenge. That is where field of generative art comes into picture. It takes the thought of an artist in form of code and creates a simulation or representation that might even surprise the artist themselves.

Processing

Processing is one of the most user-friendly tools that let artists create generative art. IT supports various languages like python, java, javascript and also comes in various packages, like standalone desktop application, single board computers and online editor p5.js. With extensive documentation this platform is as useful to a kid learning programming as it to a veteran designer.

Processing

Python Mode

This post is about exploring processing as a simulation and generative art platform using Python mode. To get started download the desktop suite from processing website.

Once you open the processing editor, on the top right there should be a dropdown that shows current mode. Select Python as current mode, if it is not available in the list then click on add node and install Python mode for Processing3.

For starter you should understand the two most important in-built routine:

• setup: defines initial environment properties, like canvas dimension and framerate
• draw: invoked periodically as per framerate and redraws the canvas as per the algorithm.

A simplest program would look like this:

def setup():
    # setup the size of canvas
    size(displayWidth, displayHeight)
    # draw 30 times every second
    frameRate(30)

def draw():
    # draw a circle at the center of the canvas
    circle(width/2, height/2, 10)

You see a lot of in-built functions and global variables without any imports, unlike regular python. Refer to official documentation whenever necessary, there are categorised explanation of all in-built function with examples.

A more interactive example which creates an ellipse wherever the mouse goes.

Conway’s Game of Life

These two simple routines, setup and draw, give you control over the canvas to start painting. All you need is to define a set of rules that processing can use to fill up the canvas. Conway’s game of life is one of the best examples to code in such a system to get a feel of generative art. The rules are really basic, they apply to a grid of cells. Every cell in the grid has a state, alive or dead. The board is initialized with a pattern or at random. Every iteration the state of cells is calculated based on the states of its neighboring cells.

• An alive cell stays alive if it has two or three alive neighbors or dies otherwise
• A dead cell becomes alive if it has exactly three alive neighbors

This is how the compiled work looks on running the simulation in processing.

The code is here

References:

• Wikipedia
• PixiJS implementation

Next ?

These are just a few examples that showcase how processing can be used as a tool for generative art. In future I’ll add more generative art examples with code and demo.