Assignment 2: Alanna’s Class

Please submit a link to your Assignment 2 blog entry in the comments below.

Check that your blog entry contains the following:

  1. Your code (which should be formatted in ‘Preformatted’ paragraph font, or similar).
    1. Ensure that your code has adequate comments.
    2. Include all code so that we can test executing it.
  2. A screenshot of the work.
  3. A 150 word statement explaining your aesthetic exploration.

Assignment 2: Mat’s Thur Aft Class

Please submit a link to your Assignment 2 blog entry in the comments below.

Check that your blog entry contains the following:

  1. Your code (which should be formatted in ‘Preformatted’ paragraph font, or similar).
    1. Ensure that your code has adequate comments.
    2. Include all code so that we can test executing it.
  2. A screenshot of the work.
  3. A 150 word statement explaining your aesthetic exploration.

Assignment 2: Mat’s Thur Morn Class

Please submit a link to your Assignment 2 blog entry in the comments below.

Check that your blog entry contains the following:

  1. Your code (which should be formatted in ‘Preformatted’ paragraph font, or similar).
    1. Ensure that your code has adequate comments.
    2. Include all code so that we can test executing it.
  2. A screenshot of the work.
  3. A 150 word statement explaining your aesthetic exploration.

Assignment 2: Etienne’s Thur Class

Please submit a link to your Assignment 2 blog entry in the comments below.

Check that your blog entry contains the following:

  1. Your code (which should be formatted in ‘Preformatted’ paragraph font, or similar).
    1. Ensure that your code has adequate comments.
    2. Include all code so that we can test executing it.
  2. A screenshot of the work.
  3. A 150 word statement explaining your aesthetic exploration.

Assignment 2: Etienne’s Wed Class

Please submit a link to your Assignment 2 blog entry in the comments below.

Check that your blog entry contains the following:

  1. Your code (which should be formatted in ‘Preformatted’ paragraph font, or similar).
    1. Ensure that your code has adequate comments.
    2. Include all code so that we can test executing it.
  2. A screenshot of the work.
  3. A 150 word statement explaining your aesthetic exploration.

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

 

 

Assignment 1: Alanna’s Thur Afternoon Class

Please submit a link to your Assignment 1 blog entry in the comments below.

Check that your blog entry contains the following (in about 400 words):

  1. One or more original works / designs that you used as your starting point
  2. The instructions (not included in the 400 words)
  3. Quality photographic documentation of 3 ‘executions’ of your instructions by 3 different people (in class or outside of class)
  4. An analysis of your process, including:
    1. articulating the form/idea that you were abstracting,
    2. how you think that form might be changed / affected by being translated into instructions,
    3. how you think that the form might be changed / affected by the physical medium (paper / glue / pen etc.) the executions are targeted towards,
    4. the identification of what worked and why, and what failed and why.