Section: Scene 3. Functions | Creative programming in the wake of Modernism (OER)

Section outline

Composing shapes

https://editor.p5js.org/mace/sketches/ahSn0E5Yt

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill("red");
  noStroke();
  rect(100, 100, 50, 50);
  circle(100+25, 100, 50);
  circle(100, 100+25, 50);
}

Abstraction, ie. naming new actions from a collection of basic actions

// Without function
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill("red");
  noStroke();
  rect(100, 100, 50, 50);
  circle(100+25, 100, 50);
  circle(100, 100+25, 50);
}

// With function
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  drawHeart("red")
}

function drawHeart(color) {
  fill(color);
  noStroke();
  rect(100, 100, 50, 50);
  circle(100+25, 100, 50);
  circle(100, 100+25, 50);
}

Naming gives semantics and makes the code clearer what it does – drawing a rect and two circles vs. drawing a heart.

Defining and calling a function

Defining is “preparation”

function drawHeart(color) {
  fill(color);
  noStroke();
  rect(100, 100, 50, 50);
  circle(100+25, 100, 50);
  circle(100, 100+25, 50);
}

The definition alone draws nothing before being called; it’s just added to the available “language”… analogous to the everyday meaning of “definition”.

The above definition draws nothing before being called.

drawHeart("red")

The anatomy of a function definition

The keyword function
A descriptive name, often verb phrase
Body inside {...}
Optionally arguments (input)
Optionally a return value (output)

function drawHeart(color) {
  fill(color);
  noStroke();
  rect(100, 100, 50, 50);
  circle(100+25, 100, 50);
  circle(100, 100+25, 50);
}

Functions can take arguments (input)

console.log("Hello world")
            ╘═══════════╛ An argument

createCanvas(400, 300);
             ╘═╛       First argument
                  ╘═╛  Second argument

rect(50, 100, 100, 300);

    ╘═╛                First argument (integer)
         ╘══╛          Second argument (integer)
             ╘══╛      Third argument (integer)
                  ╘══╛ Fourth argument (integer)

text("Hello world", 100, 300);
  
     ╘═══════════╛              First argument (string)
                    ╘═╛         Second argument (integer)
                         ╘═╛    Third argument (integer)

Functions can return a value (output)

sentences = preface.split(".")

function whichSideIsMouseOn() {
    if (mouseX < width/2) {
        return "left";
    } else {
        return "right"
    }
}

Why functions?

To give collections of action better names
Blackboxing of concerns
To do the same thing many times
To do almost the same thing many times
Automatic library features e.g. setup(), draw(), mousePressed()

See Soon+Cox (2020) Æsthetic Programming Function in Chapter 3.

Functions for randomness

We already saw Math.random()

From https://p5js.org/reference/#/p5/random

random([min], [max])
random(choices)

A composition of lines with random displacement

https://editor.p5js.org/mace/sketches/qRNVBH1n1

function setup() {
  createCanvas(400, 200);
  points = [[10, 40],
            [50, 60],
            [30, 150],
            [340, 250],
            [180, 100]
           ];
  displacement = 0
}

function draw() {
  background("white"); 
  strokeWeight(6);
  points.forEach(point => {
                line(point[0] + point[0]*displacement, 0,
                     point[1] - point[1]*displacement, height)
  });
}

function mousePressed() {
  displacement = random()
  // displacement = random(-0.5, 0.5)
  console.log("New random displacement is " + displacement)

}

Randomness is perhaps surprisingly useful in computation, e.g. in Machine Learning (ML), music &c.

“The open work”

📄 Eco (1962) Programmed Art.
📄 Caplan (2018) From Collective Creation to Creating Collectives. Arte programmata and the Open Work.

Different phenomenology of same process.

Arte programmata Milan, 1962.

At an Olivetti store.

Monachesi. Arte programmata (1963)