admin

videos up on echo360 (pretty much the only thing we use wattle for!)

labs started last week

• for those of you attending the labs already, good job keep it up!
• if you missed your lab last week, don’t worry just start going from this week

assignment 1 released

make sure you’ve checked you can access the course forum

tools

code theory

today’s concepts:

flow

types and variables

what’s the flow through this code?

rect(300, 200, 200, 200);
ellipse(400, 300, 100, 100);
line(200, 200, 400, 400);

how about this one?

line(200, 200, 400, 400);
ellipse(400, 300, 100, 100);
rect(300, 200, 200, 200);

remember: the “painting” metaphor

each shape in p5 is “painted” on top of what was already on the canvas (so the order matters!)

to “clear” the canvas (to paint it all with one colour) use the background function (link to reference)

the background function has several different syntax options depending on how you want to set the colour

the setup-draw loop

function setup() {
    createCanvas(windowWidth, windowHeight);
    // any additional setup code goes here
}

function draw() {
    // your "draw loop" code goes here
}

note: if a line starts with // it’s called a “comment”; it’s ignored by p5, it’s just there for humans

flow

more loops

later in the course we’ll learn to create our own loops, so we can do more than just setup, draw, draw, draw…

for now, see the flow—it’ll keep going forever…

if it does the same thing each time (e.g. draws a static rectangle) then we’ll get a still image

but if starts to do different things…

functions and flow

p5 uses braces { and } (aka sqiggly brackets) to show where flow starts and stops

remember: a function is a re-usable chunk of code which takes parameters

the draw() function takes zero parameters (hence the ()) and then executes the code between the braces (called the body) of the function

look for the matching pairs

when you see a {, there will be a matching } further on

same for (, ), [, ]

more flow

as our programs get more complex, the flow will get more complex

but at the top level it’s still the same setup, draw, draw, draw, draw, …

as a programmer, you are the master of the flow

and if you’re ever wondering why your program isn’t doing things in the order you expect…

remember the flow

if your operations aren’t in the right order…

… then you might not be seeing what you expect, even if there aren’t any “errors”

like a series of photos (frames)

data types and variables

Some numbers…

• 7
• 654
• 5.77
• number of planets in the solar system
• your age
• 🥔

are these the same kind of number?

first steps towards animation

function setup(){
  createCanvas(800, 600);
}

function draw(){
  background(255);
  rect(100, 100, frameCount, 100);
}

what’s this frameCount thing?

let’s have a look…

the name (frameCount) stays the same, but the value is different each time through the draw loop

variables

some numbers are always the same (e.g. 100)

some numbers are always the same, but have “names” (e.g. pi)

some numbers change (or vary) over time (e.g. your age)

variables: definition

in programming, a variable is how we give a name to a value (e.g. a number) which (can) change

this is really handy, because in lots of cases you’re dealing with things which will change

a word of caution

this is great, but it can get you into trouble!

sometimes the value of the number may make sense, and sometimes it may not

this can result in strange or unintended effects that aren’t an “error” but because the value has gone out of what you expect

remember the flow, and it is up to you to control these values

time and change in p5

time represented with numbers (just like position & colour were)

there are a few different ways to represent time, but the main one we’ll use is the frameCount variable (although it’s just a number)

it’s relative (e.g. it can’t tell you if it’s 4pm, but it can tell you the time since your sketch started running)

using this variable in your sketch allows for change

more variables

function setup(){
  createCanvas(windowWidth, windowHeight);
}

function draw(){
  background(255);
  rect(mouseX, mouseY, 100, 100);
}

p5 has a bunch of useful variables built-in (as usual, the reference has the full list)

can you guess what this is going to look like?

let’s have a look

types

you may start to think of the type of something:

a pokemon
spoons 🥄
…

types

as well as a name, every variable has a type (sometimes called a data type)

in p5, values can have the following types:

• Number (e.g. 100, 4.5)
• String (e.g. "Hot Potato"—note the double quotes)
• Boolean (true or false)
• Undefined (p5 doesn’t know what it is)
• Object (wait until week 4)

the Parameters section of the reference for a function tells you what types the parameters should be

declaring your own variables

we can make our own variables—we’re not stuck with the built-in ones

there are three steps to this process:

1. declare: let age; means there’s a variable called “age”
2. initialise: age = 34 means set the age variable to the number 34
3. use: when you do refer to the variable in your code, e.g. 2*age

declaring your own variables

you can combine the declaration and initialisation steps in one line (this can appear anywhere in your code)

//  name  value
let max = 100;
let min = 10;

let’s have a look

declaring your own variables

a variable can be initialised using the value of another variable, or with the result of a calculation, or even the return value of a function

//  name    value
let range = max - min;
let randomValue = random(13);

modifying variables

the names doesn’t change

but we can change the value

// name    value
   range = range + 1;

note: there’s no let declaration the second time (it’s already declared)

also note: sometimes you will see var instead of let (older way of doing more-or-less the same thing)

in general, we’ll learn about these things by using them

a note about maths

most of the mathematical operators we’ll use in this course you learned in primary school maths (+, -, *, / etc.)

so we won’t dwell on them here, but we’ll cover them extensively in the labs

you can also check out the arithmetic operators docs on MDN

one of these is a Mondrian, the other is a program simulating a Mondrian on an IBM 7094, but which?

this is linking in to what we were talking about last week, with Piet Mondrian. this time one of the images is created using a very old IBM mainframe computer

the left one has a more uniform, but still random, layout and composition. which is more aesthetically pleasing

how do you think the size and location of these particular squares were chosen?

random chance

What do we value in “art” anyway?

Can art be random?

How can we use randomness in p5?

Dada

Formed by randomly dropping paper shapes!

part of a movement called dada-ism, a post ww1 movement of artist that, to oversimplify it, thought that all previous art was associated with the world order that lead to ww1

the war was so shocking to people that they wanted to create new art with all new methods

Dada

one of the things they investigated was taking the artist out of the work, so for this one they simply dropped the shapes and let “chance” take over

another famous dada artist for using random materials! rather than taking the traditional tools (paint etc.), they would use things they found around the house

is it really a bicycle wheel at all anymore? we’re certainly not going to be rolling around on it. the je ne sais quoi quotient definitely high here.

probably one of their most famous works, fountain, which is a toilet turned on its side and then signed it with a pseudonym and placed it on a pedestal in an art exhibition

readymades

Duchamp wasn’t the only one doing this, this piece is created from a piece of pipe and wood. given the name ‘God’ which is kind of provocative to do something with religion and tie it in with random items around the house

randomising culture!

that’s what dada’s were doing, trying to change things to hopefully change the world

let’s have a go at dada in p5

we’ll try and follow what Jean Arp was doing with radomising shape placement

randomness and the unconscious

can randomness less us tap into the subconcious mind?

can rolling a dice help us tap into our subconcious or dream worlds that exist inside our mind but we can’t access any other way

can art ever be random?

a very famous piece of art called blue poles by Jackson Pollock, (its in the national gallery of Australia (i think))

when this was purchased it cause a great outcry over the value of art as it was purchased for a lot of money at the time

people saw the price and saw the art and thought what is this, it’s just random paint splashed on something

video: demo of Pollock’s process

they had a very specific process for creating things that were random in “just the right way”

even though it is messy, there was a complexity and thought behind how things were done, which is why it is an artwork and not just random splashes

are these totally random?

what are the rules of “action painters” like Pollock?

they would stand in front of the canvas and make brush strokes with different colours

you can kind of see the range of motion for a person, as the top strokes feel more like a reaching horizontal stroke compared to further down

with these random artworks, they have used constraints to give them style, like this one with constraints of the human body affecting the strokes

they’re not completely random, they have structure and rules

rules, randomness and variation

this is moving from randomness, more towards variation. where this artist has investigated using different colours to create basically the same painting

Tim Hawkinson

this is a mechanical electric artwork, it’s quite related to what we do in p5, and indeed in the first assignment

the artist has cut up bits of their face and attached them to mechanisms so that they can be moved about to give different expressions

Where's the randomness?

there is an old tv (crv) which is tuned into basically static, which is when you’re effectively listening to noise in the environment. and they have used sensors attached to the screen to pick up what is being displayed

think about how this could work for your monster… different parts of your monster that are controlled by variables which can move in different ways based on changing random numbers

TV Art: breaking art into steps

broken down into steps, to show how you go from basic shapes, to a more complex image

Allan McCollum on Art21

another step based artwork where there has been a process created for breaking down shapes into sub shapes and then another process for putting them together

the process and sub shapes are predefined, but the selection is random, this gives us variation

Allan McCollum on Art21

Allan McCollum on Art21

a toolkit for randomness

Think about introducing variation rather than noise.

something that is flashing is not very nice to look at

What random variations can you do in p5 already?

random() is your friend…

use frameCount in your artworks

input from a person with mouseX and mouseY (more on this later, banned in ass1!)

random()

• random() gives you a number from 0 up to 1.

• random(10) gives you a number from 0 up to 10.

• random(25,50) gives you a number from 25 up to 50.

Have a look at the reference - there’s some other details about random that we will look at later.

let's make some random art

further reading/watching

variables on MDN

control flow on MDN

Shiffman video: variables

Katharina Grosse in “Fiction”

further reading/watching

Katharina Grosse in “Fiction”

Tim Hawkinson

The process of Jackson Pollock

“Random Chords” Example

Ch.8 “Random” - Getting Started with p5.js

questions?