Michael McCullough
Semester 2, 2024
assignment 1 released
make sure you’ve checked you can access the course forum
nominate to be a class rep!
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
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
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 written by A. Michael Noll simulating a Mondrian on an IBM 7094, but which?
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
Jean Arp (1886-1966)
Enak’s Tears (Terrestrial Forms)
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
Marcel Duchamp (1887-1968)
Fountain
1917
readymade porcelain urinal
lost
Elsa von Freytag-Loringhoven
God
c. 1917
courtesy of the Philadelphia Museum of Art
Leonora Carrington
Evening Conference
c. 1917
49.5 x 72.5cm
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
read more here
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
what are the rules of “action painters” like Pollock?
Joan Mitchell
Rivière
1990
oil on canvas
© estate of Joan Mitchell
installation view of Stanley Whitney’s “In the Color”
Lisson Gallery
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.