admin

assignment 1 released

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

labs started this week

nominate to be a class rep!

recap

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

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

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 written by A. Michael Noll simulating a Mondrian on an IBM 7094, but which?

random chance

What do we value in “art” anyway?

Can art be random?

How can we use randomness in p5?

Dada

readymades

let’s have a go at dada in p5

randomness and the unconscious

can art ever be truly random?

read more here

video: demo of Pollock’s process

are these totally random?

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

rules, randomness and variation

Tim Hawkinson

Where's the randomness?

TV Art: breaking art into steps

Allan McCollum on Art21

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 Assignment 1!)

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

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