Week 9: Abstract over photography

In this week’s workshop, we explore what happens when instructions are used to abstract forms and processes over another medium: photography.

We analyse the work of a few photographers and attempt to break down their work as abstractions expressed in instructions. Again, our primary endeavour is one of abstracting an idea. And this involves 2 things:

  1. Judging what it is that needs to be abstracted; which essential aspect of a photo or the process of taking a photo is responsible for its aesthetic life?
  2. Working out how to capture those essential characteristics into instructions.

For example: observe the below photograph by Bill Henson.

Artist : Bill Henson (Australia, b.1955) Title : Date : 1985-1986 Medium Description: type C photograph Dimensions : Credit Line : Hallmark Cards Australian Photography Collection Fund 1988 Image Credit Line : Accession Number : 70.1988

Artist : Bill Henson (Australia, b.1955)
Date : 1985-1986
Medium Description: type C photograph

Possible abstraction:

Take a photo of an urban context on a bright sunny day. Underexpose the photo so much that it looks like dusk.

‘The Creek’
The Edge, 2013
© Tamara Dean
‘The Edge’ is an exploration of the informal rites of passage created by young people in relationship with the natural world. The initiations, the pushing of physical, spiritual and emotional limits in order to discover one’s sense of self.

Possible abstraction:

In an empty landscape, take a photo of someone walking into a dark bush

Shaun Gladwell

Possible abstraction

Put a human mask on inanimate object. Take a photo of it lying down.  

Exercise 1: To abstract, distil!

Your tutor will provide you with an image by one of two Australian photographers: Jordan Madge and Marcus Andersen. Analyse the image and reduce it to its singular key visual idea. This idea might be:

  • compositional
  • textural
  • spatial
  • tonal
  • etc.

IMPORTANT: Do not try to replicate the photo. Identify the key visual idea, and translate *that* to a 1 sentence instruction.

Once you have written your 1 sentence instruction, swap with another student. Execute each others’ instructions then discuss.

Exercise 2: Choose your own image

Step 1: Explore the photography of these Australian photographers

  • Bill Henson
  • Justien Varga
  • Marcus Andersen
  • Tamara Dean
  • Tracey Moffatt
  • Matthew Abbott
  • Jordan Madge
  • Shaun Gladwell
  • Henri Mallard
  • Michael Riley

Step 2: Choose a single photograph that you think you can abstract into instructions. Write those instructions on a piece of paper.

Step 3: Share those instructions with another student.

Step 4: Document the photos that are the result of the instructions you wrote.

Exercise 3: Analysis

Analyse the below works (some were discussed early on in lectures).

  • Identify the key ‘rule’ that is used to generate each work
  • Research the artists’ intent, describe their thinking
  • How has the presentation of the work augmented the rules defined
  • How do these rules differ from Sol Lewitt’s style rules?
Image result for ed ruscha all blocks on sunset boulevard

Ed Rusha, Every Building on the Sunset Strip (1966)

Image result for Mario Merz Fibonacci 1202

Mario Merz, Fibonacci 1202

 

Image result for Gary Hill’s Conundrum

Gary Hill, Conundrum, 1995

Image result for Mel Bochner’s 36 Photographs and 12 Diagrams

Mel Bochner, 36 Photographs and 12 Diagrams, 1966

Exercise 4: Ad Lib Instructions

Now, invent your own instructions without taking any cues from existing photos. Again, swap with another student, execute and discuss the results.

Examples might be:

  • Take 16 photos that each has a strong horizontal line exactly in the middle of the image. Organise in a 4×4 grid.
  • Take 10 photos, each of a different red car
  • Take a photo of every part of your body that is not clothed
  • Take 10 photos, each separated by a count of minutes defined by the Fibonacci sequence (0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …)
  • Take a photo of the face of someone you don’t know
  • Turn your exposure up 3 or 5 stops. Take a photo of a shadow.

Coding (Using Images)

Processing actually makes it very simple to include and manipulate images into your sketch. You might try going through the following tutorial: https://processing.org/tutorials/pixels/

Or play with the following code. Note, you’ll need to put this image on your Desktop first:

https://processing.org/tutorials/pixels/imgs/tint1.jpg

Screen Shot 2015-09-16 at 2.51.56 pm

// this next line loads up the image.
// It is a complicated way of saying "get the image from my desktop".
PImage sunflower = loadImage(System.getProperty("user.home") + "/Desktop/tint1.jpg");
  
void setup(){
  size(500,500);
  noLoop();
}

void draw(){
   tint(255,100); // this makes the image transparent
   for (int i = 0; i < 100 ; i ++) {
     image(sunflower,(int)random(300),(int)random(300));
   }
}

Week 8: Perlin Noise – an uncanny algorithm

Perlin Noise, an algorithm invented by movie special effects researcher Kevin Perlin, has an unparalelled capacity to create forms that are intrinsically organic. In this Workshop we explore its possibilities.

bec53823f8a325dedc6cf52ffd5e0aba

This below work, by early computer artist Manfred Mohr, was not generated using Perlin noise. Can you see how it was made?

stocking
“Zerreissprobe”, black nylon stocking on cardboard, 1960, 35cm x 50cm, Private Collection, Germany © 1960 by Manfred Mohr

Understand Perlin Noise

Perlin Noise is a fractal order. That is to say, it is an order in which self-similarity is exhibited at different scales. However, instead of the self-similarity being a line or a shape, it is in the amount of randomness.

So if you have the same amount of randomness at different scales like this:

 float x = random(1) + random(10) + random(100) + random(1000);

Here you have the basis for Perlin Noise. Another key characteristic of Perlin Noise is that neighbouring values have a relation to each other. This is a bit like a wave motion, where a wave is made up of values that have a relation to the neighbouring value.

In the image below, notice how each wave is randomised at different scales? Perlin Noise simply involves summing up each of these waves to achieve the wave shown at the bottom.

In the image below, a 3D wave is randomised. The image on the left shows a randomisation at only 1 scale. In the middle image, its randomness is applied at two different scales. In the third image, three different scales. Notice how the third image starts to exhibit characteristics that appear very similar to real-world landscapes?

Perlin Noise

Exercise

Find an example of Perlin Noise and see if you can understand exactly what might be being randomised at different scales.

You might try searching in:

  • graphic design
  • art
  • film special effects
  • computer game design

Can you find a use of Perlin Noise that doesn’t involve a visual element?

Processing Code Samples

In the below code a grid of random circles are drawn in a grid. Execute the code on your own computer and make sure that you understand everything by commenting each of the lines.

What do you notice about the randomness of the circles? They have no relation to each other!

void setup(){
 background(255); size(800,600); 
 strokeWeight(0.4); noFill(); 
 noLoop(); 
}

void draw() {
 
 float radius = 0;
 
 for (int i = 0 ; i < 800 ; i = i + 20){
  for (int j = 0 ; j < 600 ; j = j + 20){
   radius = random(20);
   ellipse(i,j, radius, radius);
  }
 } 
}

Processing has already ‘abstracted’ Perlin Noise for us. That is to say, Processing makes it very easy for us to use Perlin Noise simply by calling a function:

noise(float x, float y);

x and y can be simply as the coordinates of a map.

Be careful! … the above function will always return a value between 0 and 1. In other words, it is very likely that you will need to multiply the results of the noise function by some other value to bring it into a usable range.

Now, copy and paste the below code into your computer and see how the random circles have taken on a very different character. Now, the randomness of each circle is tied to the value of the circles next to it.

void setup(){
 size(800,600);
 background(255);
 noFill(); strokeWeight (0.4);
 noLoop(); 
}

float radius, resolution = 180;

void draw() {
 background(255);
 for (int i = 0 ; i < 800 ; i = i + 20){
  for (int j = 0 ; j < 600 ; j = j + 20){
   radius = noise(i / resolution, j / resolution) * 30;
   ellipse(i,j, radius, radius);
  }
 }
 
}

Comment the above lines of code until you understand what each line does.

What else might you drive using Perlin Noise? You could try:

  • line thickness
  • colour variations
  • opacity
  • different shapes sizes
  • circle location instead of circle size
  • etc.

What would happen if we were to try to draw polylines, where each point was varied using Perlin Noise? Try the below code:

void setup() {
 size(800, 600); background(255);
 noFill(); strokeWeight (0.1);
 noLoop();
}

float perlinResolution = 400;

void draw() {

for (int lineCount = 0; lineCount < 600; lineCount = lineCount + 4) {
  beginShape();
  for (int i = 0; i < 800; i = i + 4) { 
   vertex( i, noise( i / perlinResolution, lineCount / perlinResolution) * 600 );
  }
  endShape();
 }
}

Other resources to understand Perlin Noise

Noise, flows and generative art

Continue Iterating on your project

Remember that successful creative practice is driven by a pattern of iterative development. In other words, the best way to create engaging visual designs is to continually explore, changing small aspects of your design, always observing the produced result independently from your intentions!

 

Week 6: Sharing Functions

This week, we play with other people’s functions, and we write functions that other people will play with.

In so doing, you will become acquainted with one of the most powerful aspects of Computational Media: the ease with which instructions can be bundled up and sent elsewhere… or, the ease with which you can incorporate other people’s instructions into your own code.

This characteristic has broad political, social and economic implications.

Exercise

Analysis

Think about the implications of

  1. Parts of your code being used in other people’s code
  2. Your code using other people’s code

Spend 15 minutes researching on the Internet, and establish what might be the political, social, economical implications of shared sets of instructions?

Step 1: Use someone else’s function

Start with a basic sketch such as the one below. In this sketch, a grid of 10 by 10 circles is drawn.

void setup(){
 background(255); 
 size(400,400);
 noFill();
 noLoop();
}

void draw(){
 for (int i = 20 ; i < 400 ; i = i + 40){
  for (int j = 20 ; j < 400 ; j = j + 40){
   ellipse(i,j, 30,30);
  } 
 }
}

Now, copy and paste the below ‘function’ and call it instead of calling the ‘ellipse’ command above.

/**
 * This function draws a target.
 * It takes 2 parameters (x and y) which define
 * the position of the target that is drawn.
 * x: the distance in pixels from the top left
 * y: the distance in pixels from the top right 
 **/
void drawTarget(float x, float y) {
  noStroke();
  for (int i = 0; i < 50; i = i + 5) {
    if (i%2 == 0) { // this line says "if i is an even number then..." 
      fill(255);    // fill in white
    } else {        // otherwise
      fill(0);      // fill in black
    }
    ellipse(x, y, 50 - i, 50 - i);
  }
}

At first try to make something interesting with that function without changing it. Then, allow yourself to change it.

What do you notice about using someone else’s function?

  • is it easier / more difficult than writing your own?
  • what are the advantages?
  • what are the limitations?
  • would it be acceptable to you change the function and call it your own?
  • do you think it would be right to reference the original author of this function?

Step 2: Now roll your own.

Now, spend some time playing exploring what kinds of patterns might make an interesting function for others to use. You might want to go back and have a little bit of an explore of the early computer artists work.

Invent / design a function that results in the drawing of graphic primitives on the screen. Make sure that your function encapsulates some kind of visual idea.

Make sure that:

  1. You offer some parameters to the end user. You might offer:
    1. x and y locations (or i and j in the above example),
    2. colour choices,
    3. size choices,
    4. size of random variation,
    5. etc.
  2. You document what the code does (in clearly written english) what the function does,
  3. Your function encompasses a clear visual idea.

Step 3: Upload your code to a code-sharing website

  1. Upload your code to https://gist.github.com/
    1. make sure that you choose the right syntax highlighting (by giving a filename that ends with .java)
  2. Copy the URL of your code
  3. Post the URL of your code as a comment on this webpage.

Step 4: Grab two other people’s code

  1. Go to the medadada function sharing blog post
  2. Grab 2 other people’s functions (copy paste into your own Processing sketch)

Step 5: Make an artwork (using other people’s functions), and post it to your blog.

Now that you have all the code in your sketch, you can explore the functions. Make an artwork that uses these functions in your own way. Try to avoid changing the function (just for the sake of this exercise).

Step 6: Modify downloaded code, then make another artwork, and post it to your blog.

Step 7: Analysis

Analyse how others have used your work, and comment on the following:

  1. Was your ‘visual idea’ used as you had anticipated?
  2. Do you think the user has improved or reduced your graphic vision?
  3. etc.

Week 5: Functions (as encapsulated abstractions)

This week we shift our thinking from instructions written for humans to instructions written for computers. But we retain our aesthetic focus!

P-103, "visual pythagoras", series of four plotter drawings, ink on paper, (4 x) 40cm x 40cm, 1972

Manfred Mohr, P-103, “visual pythagoras”, series of four plotter drawings, ink on paper, (4 x) 40cm x 40cm, 1972

Exercise 1: Observe ‘what works’

Research the following artists and make a list of forms, orders, patterns, techniques etc. that seems to suit computationally executed visual ideas:

  • Vera Molnar
  • Manfred Mohr
  • Georg Nees
  • any other ‘early computer artist’
  • any ‘American Minimalist’
  • etc.

For example, some abstractions that work well in computational media are:

  1. Many, millions, of fine lines creates lots of complexity which works well to engage the eye.
    Screen Shot 2017-07-13 at 4.16.55 pm
  2. Working with different line thicknesses creates a fine engineering drafting aesthetic (not unlike some of Lewitt’s work).
    IMG_9112s Lewitt’s ‘Quadrangle’ drawing (1974)
  3. Using overlapping shapes of different opacities
    Vera_Molnar_Quadrate_hauskonstruktiv_15_likeyouVera Molnar: 9 carrés rouges, 1991

Identify 3 aspects of the early computer artists works that are consistently visually engaging, and present to class.

Exercise 2: Coding (Program logic and Forks)

Perecflowchartsmall

Have a look at this flowchart closely. This is the well-known flowchart The Art of Asking your Boss for a Raise created by French writer Georges Perec. The flowchart also exists as a book and a chapter in  Life. A User Manual (it may be interested to look at how the instructions exist in words).  See http://www.theartofaskingyourbossforaraise.com/ for an interactive version of the flowchart.

See whether you can identify the following in the instructions:

  1. 3 objects
  2. 3 methods (or functions)
  3. 3 loops
  4. a start point
  5. 3 end points
  6. 3 forks

How to write a Fork

Familiarise yourself with the syntax for “if” conditions. as it is documented in the below two links.

https://processing.org/examples/conditionals1.html

https://processing.org/examples/conditionals2.html

if ( /* this is true */) 
{
  // do what is coded here
} else {
  // do what is coded here
}

Exercise 3: Coding (Functions, called by Loops)

This week, your aim is to re-create Vera Molnar’s work below, and to incorporate a function call into that implementation.

To do this, you will need:

  • a grid (a loop within a loop, or nested loop)… see last week’s code.
  • a function that draws a shape and handles the variation on that shape.

Vera Molnar 144 Trapèzes (144 Trapeziums) 1974 computer graphic, open series, 16

What is a Function?

A function is a bunch of code, that has a name. When that name is called, all the instructions defined in that bunch are called. For example: the function goShopping() might look like this:

void goShopping() {
  // drive to shops
  // chose things to buy
  // pay for them
  // drive home
}

To use the goShopping() function you can call it from anywhere in your code … like this:

void goAboutMyDay() {
  haveBreakfast();
  goShopping();
  haveLunch();
  doSomeStudy();
  sleep();
}

Functions can do 2 special things:

  1. they can have parameters
  2. they can ‘return’ values.

For example, lets say I would like to limit how much money I want to spend, then I can pass-in a budget parameter as such:

void goShopping(int budget) {
  // drive to shops
  // chose things to buy under total budget
  // pay for them
  // drive home
}

Now lets say that I don’t find anything that I want to buy … then we can define a ‘return’ parameter

int goShopping(int budget) {
  // drive to shops
  // chose things to buy under total budget
  // pay for them
  // drive home
  return thingsIBought; // might be 5, 6, 12
}

The aim of returning this parameter is that I can then use it in my program logic:

if ( goShopping() < 1) {
  // I didn't buy anything!
}

Step 1: Switch to dynamic mode.

To write and make use of functions we have to switch to what is called the dynamic mode. In this mode we ned to define 2 functions: setup() and draw(). These two functions separate the code that is called once and only once (at the beginning of execution), and the code that will be called over and over again.

Here is basic code in static mode, that is to say, without the setup() and draw() functions:

 background(255);
 size(400,400);

 line(10,10,390,390);

And now here is the *same* code wrapped up in the two basic necessary functions:

void setup(){
 background(255);
 size(400,400);
 noLoop();   // this just makes sure that 
             // <draw> is called only once
}

void draw(){
 line(10,10,390,390);
}

Now lets go through the exercise (repeating the Vera Molnar work above) blow by blow.

Step 1: Make a loop

Using previous workshop’s code, or your own saved code, make a loop (a single loop, that repeats any one instruction 1000 times).

Step 2: Draw a random line with the loop

Within your loop, create a random line. Remember that the syntax is:

line(x1, y1, x2, y2);

For a random number, the syntax looks like this (this line produces a random number between 10 and 70).

random(10, 70);

Step 3: Place the random line drawing code into a function

Make sure that this function is called within your main loop.

void drawRandomLine() {
     // draw random line here
}

Now change the function in some way to test that it is being properly used. You might choose just to change the colour of the line.

Step 4: Include a parameter into the function

Choose a parameter to include into your function. You might choose one of the following:

  • a different colour
  • a different line thickness
  • one of the lines’ x or y points

In the below example, I define the starting x and y position of the line

void drawRandomLine(int x, int y) { 
  line(x, y, random(400), random(400));
}

Step 5: Make a grid (loop within loop)

Now lets place our code within a grid (a nested loop). Here’s the basic syntax of a grid:

for (int i = 0 ; i < 400; i = i + 20) {
  for (int j = 0 ; j < 400; j = j + 20) {
    // draw something here
    line(i, j, 200,200);
  }
}

Replace the ‘line’ command above with your special function.

At this point you should be able to create 144 Trapeziums in its entirety. Hint: use a PShape to create the trapeziums.

Step 6: Special challenge: Change the colours by calling an ‘if’ condition.

Try to change the colours of a small group of the trapeziums. Maybe make 5 or 6 trapeziums print in red. How would you do that? You might use an if condition such as the below:

if ( random(100) < 2) {
  // make colour red
} else {
  // make color black
}

Step 7: Rotating elements (for the game)

Rotating elements is quite difficult in Processing: it is one of the few command syntaxes that doesn’t seem intuitive or well thought out. Have a look at the below code … feel free to play around incorporating this into your work.

pushMatrix();
translate(100, 100);
rotate(radians(random(360)));
rect(0, 0, 80, 20);
popMatrix();

 

If you are feeling *super* game

If you are feeling very game you might attempt to replicate the below work by Vera Molnar. It contains rotations… but the tricky question is does she manage to create *areas* of missing lines? Can you uncover the logic required to produce those?

Vera Molnar, 'Interruptions,' 1968

Vera Molnar, ‘Interruptions,’ 1968

 

 

Week 4: Assignment Work

A turn towards materials

Sol Lewitt: Wall Drawing #47

As discussed in the lecture, Lewitt argues that “Conceptual Art” is first and foremost an act of intuition. Just as Lewitt intuited that areas of differing pencil intensity, achieved through cross-hatched lines, would make a visually engaging work, we ask:

What is the best way to use the materials we have specified by our instructions?

Last week we discovered that certain visual patterns may be interesting, but perhaps more importantly, we discovered that the way the drawing is executed has a significant impact on how those patterns come to life.

Pencil lines drawn too softly, work poorly centred on the page, border margins too small, sheet of paper too crumpled. These kinds of executions can inhibit the successful reception of a work. This week, we focus on specifying qualities of execution.

Assignment work

Exercise 1: Analysis.

Review 6 different sets of instructions written by Lewitt. Examine which portion of the instructions define materials and how to use them as opposed to defining visual patterns or orders.

Note your research and present to class.

Exercise 2

Make a list of all the possible materials you might use in your assignment. For example:

  • ink?
  • pencil?
  • paint?
  • torn paper?

Then make a list of all the ways in which these materials might be poorly executed. For example:

  • drawing insufficiently centred
  • folds evident when they should not be there
  • ink pen too light
  • ink pen too heavy
  • pencil lines hairy (sketchy)
  • pencil lines too straight (drawn with ruler when shouldn’t have been)
  • pencil lines too wobbly (should have been drawn with pencil).

These ideas should then be included in your definition of instructions.

Instruction Iteration

Review the instructions you wrote last week, and re-iterate at least twice.

Coding (if time)

Examine the below plotter drawings by Vera Molnar from the series: (Dés)Ordres, 1974.

  • Identify why you think they are visually rewarding piece.
  • what are the representations that they make, what do they remind you of, what do they look like?

Identify how the work was produced:

  • how many shapes are there in each unit?
  • how are they varied?
  • are there many different line thicknesses?

Then … choose one and reproduce it in Processing!

You might start by simply copying the below code,

// draw a window that is 600 x 600 px
// make sure it has a white background
background(255);
size(600,600);

// This is known as a 'nested loop'
// It involves creating a loop within a loop
// The outer loop copies items across to make a row
// the inner loop copies the row down to make a grid
for(int i = 0; i < 600 ; i = i +20){
  for(int j = 0; j < 600 ; j = j +20){
    
    // Here is a rectangle ...try changeing this line!
    rect(i , j , 18, 18);
    
  }
}

 

Week 3: Art as Instructions

 

Making of Sol LeWitt’s Wall Drawing #797 at the Blanton Museum of Art

The idea becomes a machine that makes the art.”

Sol LeWitt

In Week 3’s workshop, we explore the practice of rule-based-art. We research known artists working in this modality, we execute some works, and we have a go at producing our own rules.

Research & Analysis

Find 3 artists who were creating ‘Rule Based Work’ or who belong to the movement known as American Minimalism’ in the 1960’s, 1970’s and 1980’s . Identify one of each of their works, and note down the rule / rules used to generate the work.

Then note:

  • Most importantly: Why you think the work is successful … the visual idea, the pattern, the combination of colours etc.
  • The name of the artist, the name of the work, the year
  • Write down the rule that they have created (if it is a rule based work)
  • Find photographic documentation (if it exists)
  • Aesthetic value: Write down the possible realms of meaning that the work delves into. You may have to do a little bit of research to identify these.

I you are stuck trying to identify what the meaning us about, you might try following these simple guidelines:

  1. Write a list of all the representations that are made in the work
  2. Write down a list of all the questions that the work poses (i.e. the questions that enter your head when you are trying to work it out).

As a start, you might have a look at Lewitt’s work documented here: http://archive.fo/OAesu

3 Exercises (executing instructions)

1. Rule-based paper sculpture

(Idea taken from here: https://chloedraper.wordpress.com/2011/10/13/rule-based-art-2/)

  1. Draw a square, 6cm x 6cm
  2. Add a triangle (of any shape/size) to the side of a square
  3. Add a square to that triangle
  4. repeat steps 2 and 3 six times
  5. Cut the shape out
  6. Fold along every second line
  7. fix together (into 3D shape) using tape

 

2. Knots in 3’s

(from https://www.conditionaldesign.org/workshops/knots/)

In a group of 3, with 3 different coloured textas: do the following (see the video above)

  1. Elongate your line on both sides by looping it over and under a line of another colour.
  2. You may not loop your own line or the line you looped in your last turn.
  3. If you have no options left on one of the sides, that side is dead.
  4. When both sides are dead, you may place a new line.

(explore the other works at https://www.conditionaldesign.org/archive/)

Kaleidoscope: this is another interesting work from this site (https://www.conditionaldesign.org/workshops/kaleidoscope/)

3. Algorithmic drawing

  1. Draw 9 cubes (your best cubes, doesn’t matter how messy) in a grid of 3 by 3 on a sheet
  2. Shade in a different side on each cube. (only 3 cubes will be shaded … you can only see 3 sides of a cube!)
  3. Draw many parallel diagonal lines from the edge of the sheet … start at the top left corner (more or less) and progress towards the bottom right hand corner. Do not cross a cube. If you hit a cube, stop the line.
  4. Continue until a large part of the page is covered in diagonal lines

Writing instructions

Create 3 of your own instruction based works that are informed by the research and analysis exercise you completed earlier.

Ask yourself:

  • which visual forms seem to be the most engaging,
  • which visual forms manage to make a broad range of representations
  • why?

Create your own set of instructions, pass them onto 2 other people who will then execute them.

Repeat twice.

Programming

Examine the below plotter drawings by Vera Molnar from the series: (Dés)Ordres, 1974.

 

  • Identify why you think they are visually rewarding piece.
  • what are the representations that they make, what do they remind you of, what do they look like?

Identify how the work was produced:

  • how many shapes are there in each unit?
  • how are they varied?
  • are there many different line thicknesses?

Then … choose one and reproduce it in Processing!

 

Week 2: Abstraction of visual forms over instructions for brushstrokes

chinese-painting-bamboo-B5703

In this workshop we continue our exploration of abstraction as instructions. In this instance it is the technique of painting bamboo trees: poles (trunks?), sticks (branches?) and leaves that is abstracted into instructions.

Please note: these instructions describe a technique, not a completed visual work (as does Lewitt’s instructions). In other words, by following the instructions, we each re-produce the technique which does not necessarily result in a visually engaging work. By abstracting a form (bamboo) into a set of instructions (here documented by video), we are engaging in computational media.

We ask questions such as:

  • what is the relationship between the form of bamboo and the form of the brush? Does the brush inherently serve the shape of bamboo? And if so, does that mean that an aspect of the instructions are contained within the brush?
  • what would the original instructions have looked like? Were they drawings, written instructions or otherwise?
  • how would other forms be abstracted as instructions on how to use a brush?

Exercise 1

In the below set of videos an Dr. Ning Yeh (from Coastline College in Southern California) takes us through the steps, the instructions, for creating bamboo brush and ink drawings.

A masterpiece as easy as 1, 2, 3
(2:40 in the 3rd video below: Bamboo Lesson 3)

Follow the below video instructions for how to draw Bamboo using Chinese brush and ink.

” if brush painting is language, then the bamboo provides the alphabet ”  (0:25 in above video)

What do you think is meant by the above quote, and how might it relate to the concept of Computational Media understood as abstraction as instructions ?

Notice (at 3:18) the document and illustrations shown that provides documentation of instructions.

Perhaps the below video is also useful

Some photos from the wed morning class.

IMGP5874
IMGP5875

IMGP5889 IMGP5878

It was found that Eucalypt leaves could be mimicked by altering the instructions in 3 ways (see image below):

  1. the downward hanging leaves should be slightly curved (unlike the straight leaves of bamboo)
  2. the branches hang down (rather than point up like bamboo)
  3. the leaves should be of differing darkness

IMGP5879

Analysis

In the above exercise, the instructions were conveyed to us using a demonstrator demonstrating the techniques on a video.

How do you think the instructions would have varied if:

  1. they had been conveyed using paintings done in brush and ink?
  2. they had been conveyed using diagrams (not done in brush and ink)?
  3. they had been conveyed using text-written instructions?
  4. they had been conveyed by word of mouth?

Research what original form the instructions on how to draw Bamboo using brush and ink would have taken, and highlight any insights you may have discovered.

Exercise 2:

Step 1 (explore)

Research any Australian native plant, and attempt to reproduce that plant using Chinese brush and ink. You might try exploring:

  1. Eucalyptus trees (many forms of which have vertical hanging leaves)eucalyptus-leaves-250x250
  2. Banksia pods and flowers banksiapod65c556d42ccddcf75ae1a9f69ae2a1cb--the-angel-tropical-plants
  3. Wattle trees
  4. .. any number of other Australian native plants

Step 2 (abstract as instructions):

Turn your exploration into a set of instructions (which you might document as text + ink drawings).

Step 3 (execute instructions):

Exchange your instructions with another student, and implement their instructions.

Step 4 (discuss):

Together as a class, place each original drawing (the exploration) with its execution (another student who has followed the instructions), identify:

  1. those works which seemed to be particularly successful at capturing a plant
  2. those works where the executed instructions is very similar to the original (the drawing itself may or may not have a good likeness to the plant chosen)

Students then to discuss each set of instructions with the other student who executed them.

Coding (Loops and Randomness)

http://processing.org/examples/iteration.html
http://processing.org/examples/recursion.html

Open Processing. Copy and paste the following code into the Processing window.

void setup() {
 size(480, 200);
 background(255, 255, 255);
 noLoop();
}

void draw() {
 
 // In this loop,
 // X starts at 50, and keeps going up by 20 
 // as long as it is still less than 500 
 for (int x = 50; x < 500; x = x + 20){
    ellipse( x,50,80,80);
 }
 
}

NOTE:

  1. The syntax of the loop command!

Make a loop within a loop (grid)

Open Processing. Copy and paste the following code into the Processing window.

void setup() {
 size(480, 220);
 background(255, 255, 255);
 noLoop();
}

void draw() {
  // noFill();
  for (int x = 50; x < 500; x = x + 20) {
    for (int y = 50; y < 200; y = y + 20) { 
      ellipse( x,y,80,80);
    }
  }
}

Randomly vary one aspect of the copied shape

Open Processing. Copy and paste the following code into the Processing window.

void setup() {
 size(480, 220);
 background(255, 255, 255);
 noLoop();
}

void draw() {
  // noFill();
  for (int x = 50; x < 500; x = x + 20) {
    for (int y = 50; y < 200; y = y + 20) { 
      int diameter = (int)random(100);
      ellipse( x,y,diameter,diameter);
    }
  }
}

NOTE:

Configuring the random method will change things significantly. Control the randomness!

Reproduce one of the following

  1. Choose one of the artworks below and create it in Processing.
    1. Bridget Riley’s Encircling Discs with Black.
    2. Vera Molnar, Interruptions, 1968/69.
    3. Kazimer Malevich’s Self-portrait in Two Dimensions
    4. Georg Nees Mikadospielhaufen, 1969
    5. Frieder Nake. Walk-Through-Raster, series 7.1, 1966
    6. Frieder Nake – 105/130 (1965)

A.
riley_discs1970

B.
interruptions

C.
Nees_Mikadospielhaufen

D.
Controlled Substances Key Painting (Spot 4a) 1994 by Damien Hirst born 1965

 

E.GCA_ill56

F
nake1505

Export it

Export your work and post it to social media saying “I coded this up!”

Week 1: Computational Media means Abstraction as Instructions

manfredmohr-uhf81-1Manfred Mohr, P-48, “UHF81”, plotter drawing ink. From 1960’s series

How would you describe this early computational media work?

  • A 6 x 8 grid of circles, each showing a worm stylised into a jagged line?
  • An illustration from a biology book concerned with showing the different permutations of DNA strands?
  • 48 paths of how to move through a house?
  • Rasterised versions of shooting stars seen in a telescope?

The way in which you might ‘abstract’ this drawing into a single or multiple executable instructions is what MEDA102 is fundamentally concerned with. The key concept being developed in this subject is that:

computational media is best understood as abstraction into instructions

In other words, computational media involves taking things and translating them into a set of instructions. Visual artists engage with computational media by, for example, translating visual ideas into instructions.

Sol LeWitt, L: Wall Drawing 901, 1999 and R: Wall Drawing 1081, 2003

Sol LeWitt, L: Wall Drawing 901, 1999 and R: Wall Drawing 1081, 2003

Software programmers engage with computational media by translating real-world forms (social or otherwise), such as ‘responding to a message’, into lines of software code, and emoticon iconography.

Facebook 'reactions'

Facebook ‘reactions’

Knit-wear fashion designers engage with computational media by translating real-world forms (the human body) into instructions that take the form of knitting patterns.

059de325a6c05a8b50251c44d301c394--kimono-crochet-crochet-kimono-pattern-free21-14diag

In other words, we are suggesting that computational media is more concerned with HOW a form is abstracted into instructions than with the instructions themselves. What is fascinating about computational media is that the abstraction has one leg in its origins: the real-world form that is being abstracted, and one leg in its eventual form: the artefact produced by the instructions. So a master of computational media (such as Sol Lewitt, for example) has a capacity for both

Computational media thus involves working in an intermediary medium. The instructions that are written are there to facilitate the translation of a form from one material existence, to another.

This concept has a strong relation to a line of critical enquiry by Mitchel Whitelaw where he develops the notion of transmateriality. Here, however, we are concerned with the middle of the transmaterial process. Here, we argue that how a form is translated from one form to another is a function of the author’s skill and approach to abstraction. Abstraction is thus the intermediary form in Whitelaw’s transmateriality.

In this exercise we ask you to translate visual ideas into instructions that will be executed by your fellow students.

Exercise 1

Identify an example of a real-world form that has been abstracted as instructions and re-executed into a new materiality.

Hints: think knitting, cooking, Ikea furniture, kolam designs, and any thing that exists as instructions.

Identify:

  1. The original material existence of the form
  2. The form’s key characteristics
  3. What is captured by the instructions
  4. The characteristics of the form as it re-births into a new materiality

Exercise 2

Step 1: Analyse

Each student will be provided one Manfred Mohr print. The student must analyse what makes the key visual ideas present in the print.

Step 2: Translate into simple instructions

Write down one, two maybe five or six sentences of instructions that describe how to reproduce the key visual idea.

Step 3: Swap your instructions

The class, together, swaps instructions with other students.

Step 4: Execute your fellow student’s instructions

The class, together, swaps instructions with other students.

Step 5: Analyse what worked, and why.

Analysis

  • Did you capture the visual idea of the original idea?
  • Is the visual idea that you captured better than the original idea?
  • Are the multiple implementations of your idea better?

Coding (Lines, shapes, colours)

processing handbook

Processing … 

  • What it’s for?
  • Who uses it?
  • How to use it? The environment, tutorials, examples, reference etc.

Processing tutorials

Go through Getting Started tutorial: http://processing.org/tutorials/gettingstarted/

Exercise 1: ‘Hello World’

Open Processing. Copy and paste the following code into the Processing window.

Write a comment (after each line) describing what that line does. Use “//” to make a comment. Notice how the text goes grey.

  size(480, 200);
  background(0, 0, 0);

  fill(255, 255, 255);
  text("Hello World!", 200, 60);

NOTE that:

  1. There are 2 methods… one sets the drawing up, the other does the actual drawing

Exercise 2: Draw something

Now try the following code:

  size(480, 200);
  background(255, 255, 255);

  //fill(255, 0, 255);
  ellipse(50,50,80,80);
  line(300,10,100,150);
  • Uncomment the “fill” line
  • Change the colour of the ellipse: Use different values in side the fill() command
  • Change the colour of the line: eg. stroke(204, 102, 0);
  • Change the thickness of the line: strokeWeight(2);

NOTE that:

  1. How to change colours, (with numbers represented as RGB)
  2. 0,0 (which is X, Y) is at the top left of the screen.
  3. Methods take ‘arguments’ … this is all the information that is required to draw that shape.

Exercise 3: Primitives

Line

stroke(153);
line(1,1 10, 10);

Triangle

fill(204);
triangle(18, 18, 18, 360, 81, 360);

Square (or rectangle)

fill(102);
rect(81, 81, 63, 63);

Circle (or ellipse)

fill(255);
ellipse(252, 144, 72, 72);

 Arc

fill(255);
arc(479, 300, 280, 280, PI, TWO_PI);

Exercise 4: Recreate a Donald Judd work.

Screen Shot 2017-07-21 at 11.42.00 am

Donald Judd was one of the most significant American Minimalist who created important work in 1960’s. Search his images, choose that one appeals to you.

Ask yourself: what is the key visual idea present in this work, and how might I translate it into instructions? Then implement it in Processing.

Alternatively, execute one of these:

Donal Judd, Untitled, 1990

Donal Judd, Untitled, 1990

Ellsworth Kelly, Nine Colors, 1951

Ellsworth Kelly, Nine Colors, 1951

 

Fran Stella, Chocorua IV, 1966

Fran Stella, Chocorua IV, 1966

 

Ellsworth KELLY, Red, Yellow, Blue, 1963

Ellsworth KELLY, Red, Yellow, Blue, 1963