Michael McCullough
Semester 2, 2024
videos up on echo360 (pretty much the only thing we use wattle for!)
labs started last week
assignment 1 released
make sure you’ve checked you can access the course forum
Avery Rowe & Yichen Wang
today’s concepts:
flow
types and variables
rect(300, 200, 200, 200);
ellipse(400, 300, 100, 100);
line(200, 200, 400, 400);
line(200, 200, 400, 400);
ellipse(400, 300, 100, 100);
rect(300, 200, 200, 200);
does it matter?
let’s take a look
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
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
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…
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
when you see a {
, there will be a matching }
further on
same for (
, )
, [
, ]
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…
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”
Some numbers…
are these the same kind of number?
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
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)
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
the name stays the same
but the value can change
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 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
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
you may start to think of the type of something:
a pokemon
spoons 🥄
…
as well as a name, every variable has a type (sometimes called a data type)
in p5, values can have the following types:
100
, 4.5
)"Hot Potato"
—note the double quotes)true
or false
)the Parameters section of the reference for a function tells you what types the parameters should be
mostly numbers so far
but not always
we can make our own variables—we’re not stuck with the built-in ones
there are three steps to this process:
let age;
means there’s a variable called “age”
age = 34
means set the age variable to the number 34
2*age
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
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);
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
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?
What do we value in “art” anyway?
Can art be random?
How can we use randomness in p5
?
Jean Arp (1886-1966)
Constellations
1938
paper collage
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
Jean Arp (1886-1966)
Constellations
1938
paper collage
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
Jean Arp (1886-1966)
Terrestrial Forest Form
1917
wood
private collection
Marcel Duchamp (1887-1968)
Bicycle Wheel
1951 (third version, after lost original of 1913)
metal wheel mounted on painted wood stool
MOMA NY
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.
Marcel Duchamp (1887-1968)
Fountain
1917
readymade porcelain urinal
lost
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
Elsa von Freytag-Loringhoven
God
c. 1917
courtesy of the Philadelphia Museum of Art
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
we’ll try and follow what Jean Arp was doing with radomising shape placement
Leonora Carrington
Evening Conference
c. 1917
49.5 x 72.5cm
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
Jackson Pollock (1912-1956)
Blue poles [Number 11, 1952]
1952
enamel and aluminium paint with glass on canvas
212.1 (h) x 488.9 (w) cm
Nation Gallery of Australia
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
Jackson Pollock (1912-1956)
One: Number 31
1950
Oil and enamel paint on canvas
269.5 x 530.8 cm
Museum of Modern Art, NY
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
what are the rules of “action painters” like Pollock?
Joan Mitchell
Rivière
1990
oil on canvas
© estate of Joan Mitchell
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
installation view of Stanley Whitney’s “In the Color”
Lisson Gallery
this is moving from randomness, more towards variation. where this artist has investigated using different colours to create basically the same painting
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
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
broken down into steps, to show how you go from basic shapes, to a more complex image
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
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.