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.