Intro to Computational Art Workshop

Started by Ben Fry and Casey Reas in 2001, Processing is an extraordinarily simple and powerful environment in which to take your first steps in creative coding. To some artists and designers, Processing has also grown into a platform which inspires decades of artistic exploration. It is a tool for learning which educator Papert Seymour refers to as “low floor and high ceiling”, meaning that learners with no prior knowledge can easily create simple and fun outcome; while seasoned learners can also take advantage of its modular and flexible structures to engage with deep and more personalized learning.

Daniel Shiffman, a professor at the Interactive Telecommunications Program(ITP) at Tisch School of Art created an excellent series of learning resources for understanding the core computational functions of Processing – Learning Processing. It contains simple and effective examples that demonstrates how to create shape-based drawing, mouse interaction, image and sound manipulation and much more. If it’s your first time using Processing, I strongly recommend spending 10 minutes, quickly clicking through all the examples from Chapter 1, 2 and 3. It will help you quickly familiarize with all the basic syntax of Processing. 

Similar to Learning Processing, this guide is also designed for audience with no prior computational background. However, it focuses slightly more on understanding the principles of Generative Art. Every example or exercise demonstrates how to uses a simple set of code to render an aesthetic principle. Gradually, we start to become comfortable with a new way of thinking about Art – Sharing Aesthetics Decision Making with Machine.

Have fun and let me know if you have any questions or suggestions.


Lesson 1 – Shape

Processing has seven 2D primitive shapes functions that are at our disposal. Each shape function takes in a set of parameters that allow us to control its size, position, color, transparency and more. Click through the following links and quickly look at how each function works.

arc()  ellipse()  line()  point()  quad()  rect()  triangle()

When these shapes are combined together based on certain rules, they can form very interesting patterns. Can you look at the examples below and try to guess what are the rules that governs each design pattern?

Image Credit: Diana Lange

Lesson 2 – Color

Computer is very good at performing a set of simple tasks over and over again based on certain conditions. Generative artists take advantage of the unique computational efficiency to create patterns composed of hundreds of simple shapes governed by computational principles. Because of the unique repetitive nature of generative art, color strategy should be kept relatively simple.

When there is a noticeable amount of static shapes, we can introduce a simple contrast or analogous color theme. It’s important to pick a simple color scheme and apply it consistently, so that the viewers won’t be overwhelmed by the multiple levels of complexity.

Image Credit: Diana Lange, Casey Reas

For studies focusing on more complex movements and repetitions, it’s not uncommon for color to be left entirely black and white, or on a grey scale.

Image Credit: Zhenzhen Qi, Diana Lange

Sometimes usage of multiple complimentary colors could create unique and energetic visual effect. However, make sure you start from somewhere simple and gradually introduce additional formal elements one by one.

Generative Art is very exciting. When first getting started,  it can be tempting to introduce multiple computational rules, shapes, color principles all inside a single sketch, and quickly find all the parts too fun to take out but too much to reside inside a single sketch. When this happens, try to decouple all the visual elements one by one, and regroup complimentary elements into multiple sketches, and work on one sketch at a time. Therefore, we can still keep track of good ideas, while at the same time manage to create space to further develop each sketch into a visually coherent, aesthetically strong piece that represents our unique personal style and identity.

Image Credit: Marius Watz, Casey Reas

Lesson 3: Random() and Noise()

Random() is a concept that is very unique with generative art. Based on Statistical Distribution principles, creative coding platforms like Processing developed a way to allow the computer to decide certain rules for composing an image in a way that looks as if it is completely decided by chance. Every time when the sketch cleans up and regenerate a new image, even though it’s based on the same code, some aspect of the image will always be different comparing to its previous generation. See if you can take a look at the following examples below and guess what aspects of these images are randomly decided by the computer.

Similar to Random(), there is another mathematical function in Processing that can simulate random numbers with more organic look and feel. It is called Noise(). Noise is preferred from Random when the artist we want to simulate more organic visual effects similar to what we would expect to see in the nature, such as Terrain, Ocean Wave, wind, fluid etc.

Can you guess between these two lines, which one is simulated with Random() or Noise()?

random and noise

Lesson 4: Interaction

Because Generative Art is code rather than material based, it is very easy to manipulate the outcome intuitively with immediacy.  Artists have experimented with user inputs such as gesture, music, and voice to interact with generative visuals they have created with Processing. Are there other characteristics or behaviors about your own body that you have been curious to learn more about?

Can you think of ideas to connect your own body to interesting visual feedback that might allow you to connect with yourself in a fun and slightly strange way?


Coding Exercise:

Now, let’s do a few simple generative art exercises to experiment with what we have just learned about Generative Art in action.

Exercise 1 – RandomRandom

In this exercise,  we will develop a simple sketch that puts random colored dots all over our screen to create a “completely” random painting – random color, random transparency, random size for each paint drop.


float diam; //variable controlling how big each paint drop is
float x; //variable controlling x position of each paint drop
float y; //variable controlling y position of each paint drop
float r; //variable controlling how red the color is
float g; //variable controlling how green the color is
float b; //variable controlling how blue the color is
float a; //variable controlling how trasparent the color is
void setup() {
  //set up canvas size
  size(480, 320);
  //set up a background that’s off-white
  background(255);
}
void draw() {
  //set all the variables to be a random number within it’s range
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
  a = random(0, 255);
  diam = random(0, 20);
  x = random(0, width);
  y = random(0, height);

  //do not put a stroke on the outer edge of the circle
  noStroke();
  //fill up the inside of the shape with the random color picked above
  fill(r, g, b, a);
  ellipse(x, y, diam, diam);
}

Exercise 2 – Drawing App

STEP 1 – CREATE A SIMPLE LINE-DRAWING APP BY DRAWING A THIN LINE TO CONNECT THE PREVIOUS AND CURRENT MOUSE POSITION INSIDE OUR CANVAS.

void setup() {
size(800, 600);
background(255); //white background
}
void draw() {
if (mousePressed) {
//draw a line to connect previous and current position of the mouse
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

STEP 2 – DEFINE SIZE AND OPACITY OF THE LINE TO REFLECT THE SPEED OF TRAVEL OF THE MOUSE, SO THAT WHEN THE MOUSE TRAVELS FASTER, STROKE SIZE BECOMES BIGGER AND COLOR OF STROKE BECOMES MORE TRANSPARENT.
float r; //raidus of circle
float a; //opacity of cirlce

void setup() {
size(800, 600);
background(255); //white background
}
void draw() {
if (mousePressed) {
//draw a line to connect previous and current position of the mouse
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

Exercise 3 – Generate unique patterns with Arcs and Squares

STEP1 – DRAW AN ARC THAT GETS REDRAWN WITH A DIFFERENT OPENING ANGEL EVERY TIME WHEN MOUSE IS CLICKED
int r; //radius of arc
float angel_begin; //starting angel
float angel_rotate; //rotating angel
float angel_end; //rotating angel

void setup() {
size(800, 600);
noStroke();
background(255);

r = 150;
}

void draw() {
}

//this function will get called whenever mouse is pressed
void mousePressed() {
drawPie();
}

void drawPie() {
background(255);

angel_begin = random(0, PI*2);
angel_rotate = random(0, PI*2);
angel_end = angel_begin + angel_rotate;

fill(255, 0, 0);
arc(width/2, height/2, r, r, angel_begin, angel_end, PIE);
}

STEP2 – DRAW A SQUARE BEHIND THE ARC

float r_arc; //radius of arc
float r_sq; //radius of square

float angel_begin; //starting angel
float angel_rotate; //rotating angel
float angel_end; //rotating angel

void setup() {
size(800, 600);
noStroke();
background(255);
rectMode(CENTER);
r_arc = 150;
r_sq = r_arc*1.5; //square is always a little bigger than the arc
}

void draw() {
}

//this function will get called whenever mouse is pressed
void mousePressed() {
drawPie();
}

void drawPie() {
background(255);

angel_begin = random(0, PI*2);
angel_rotate = random(0, PI*2);
angel_end = angel_begin + angel_rotate;

fill(0, 0, 255);
rect(width/2, height/2, r_sq, r_sq);

fill(255, 0, 0);
arc(width/2, height/2, r_arc, r_arc, angel_begin, angel_end, PIE);
}

STEP3 – LAY OUT RANDOMLY GENERATED ARCS IN A GRID PATTERN, AND USE MOUSEPRESSED() TO RENEW THE ARC DESIGN.
float r_arc; //radius of arc
float r_sq; //radius of square

float angel_begin; //starting angel
float angel_rotate; //rotating angel
float angel_end; //rotating angel
void setup() {
size(800, 650);
noStroke();
background(255);
rectMode(CENTER);
r_arc = 80;
r_sq = 100; //square is always a little bigger than the arc

for (int i=0; i<800; i+= 150){
for (int j=0; j<600; j+= 150){
drawPie(i+r_sq, j+r_sq);
}
}

}

void draw() {
}

//this function will get called whenever mouse is pressed
void mousePressed() {
for (int i=0; i<width; i+= 150){
for (int j=0; j<height; j+= 150){
drawPie(i+r_sq, j+r_sq);
}
}
}

void drawPie(float center_x, float center_y) {
angel_begin = random(0, PI*2);
angel_rotate = random(0, PI*2);
angel_end = angel_begin + angel_rotate;

fill(0, 0, 255);
rect(center_x, center_y, r_sq, r_sq);

fill(255, 0, 0);
arc(center_x, center_y, r_arc, r_arc, angel_begin, angel_end, PIE);
}

Now, try to swap the square and arc design into other shape functions, and enjoy your first generative art project : )


Inspirations:

Many of the examples below are not created with Processing. To replicate the exact same result in Processing can be very challenging. However, each example has great formal element that could inspire exciting new explorations in Processing.

Line-Based Repetition

so1

so3

so2

[no title] 1971 Sol LeWitt 1928-2007 Purchased 1971 http://www.tate.org.uk/art/work/P07061

so4

so11

so10

so12

CREDIT: SOL LEWITT

Study Of Arches

so8

so9

CREDIT: SOL LEWITT

Study of 3D Segmentation

cube

cube6

cube5

cube2

cube4

Study of Fragmentation

fractal

fuzzy_by_tatasz-dazuqif

fractle3

fractal2

CREDIT: TSZ DIGITAL ART MADE WITH APOPHYSIS, A FREEWARE FRACTAL FLAME EDITOR FOR WINDOWS