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

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *