Michael McCullough
Semester 2, 2024
assignment 1 due soon! (any questions?)
Remember that the git process you follow for the labs is exactly the same as the process you’ll follow to submit assignment 1!
remember the Git help videos
Your course reps are now listed on the Getting Help page.
The course reps are here to listen to your concerns or issues confidentially, you can contact them over email or on the forum.
variables are a way to give names to values (e.g. numbers, strings, etc.) which might change
mostly numbers so far: numeric literals (e.g. 42
) and number variables (e.g.
height
, mouseY
, frameCount
)
but there are other types (as we’ll see)
the “path” the running program takes through the code
jump around, then jump back (but it’s predictable)
p5 uses a setup
, draw
, draw
, draw
… “draw loop”
two new concepts:
conditionals
iteration
“if I run, I can make it to the tram stop in time”
“if I have a spare month I’ll read War and Peace”
“I’ll start assignment 1 when I’ve finished watching Netflix”
there’s a special data type for representing truth values called Boolean. How is it different?
true
or false
(no other possibilities!)// here are some boolean variables
let the_sky_is_blue = true;
let the_sea_is_red = false;
you can also get a Boolean from the result of a logical expression (MDN docs)
<
(less than)<=
(less than or equal to)>
(greater than)>=
(greater than or equal to)==
(equal to, note the double equals sign)!=
not equal toall these variables are also Boolean
let x_is_small = mouseX < 100;
let y_is_big = mouseY >= 500;
let jan_is_happy = !true;
quick tip: print to the console with console.log()
example: console.log("Hello world!")
this can be useful when debugging!
we can use logic to check multiple things at once:
&&
(and)||
(or)or inverse them:
!
(not)this allows us to do things like
(the_sky_is_blue && the_sea_is_red)
(the_sky_is_blue || the_sea_is_red)
(!the_sky_is_blue)
note: each whole line above evaluates to true
or false
depending on whether
the parts are true or false
what if you want your sketch to do one thing some of the time, and another thing the rest of the time?
javascript has an if
statement:
if (condition) {
// do something
} else {
// do something else
}
if (the_sky_is_blue) {
ellipse(50,50,100,100);
} else {
rect(50,50,100,100);
}
let’s have a look at a basic example.
monitoring some aspect of a program which is either true
or false
:
isFinished
, sceneStarted
, etc.)This is a bit tricky for new coders, the documentation is in two places.
language features like if
statements (and while
/for
loops later) are part
of the javascript programming language (which is what p5 is written in)
the best javascript docs are on the Mozilla Developer Network (MDN) (p5 reference is no good here)
I’ll point you to the reference material which is most appropriate
i.e. loops
you’ve already seen a loop—the draw loop
but sometimes you want to do multiple things in a loop within
a frame (i.e. a single flow through the draw
function)
while
loopthe first type of loop we’ll look at is the while loop:
while(condition){
// do some things while "condition" evaluates to true
}
does this look familiar?
while
loop intuitiona human-language intuition:
while(agatha_is_sitting){
draw_circles_on_slide();
}
while(triangles_have_three_sides){
draw_circles_on_slide();
}
let’s have a look at an example
let count = 0;
// count < 5 is a logical comparison
// (with a true/false answer)
while(count < 5){
ellipse(
random(width), random(height), // x and y
10*count, 10*count // width and height
);
count = count + 1;
}
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
frameRate(5);
}
function draw() {
background(30);
let x = 0;
while (x < width) {
fill(x/2, random(255), 255);
rect(x, 0, random(10), random(height));
x += random(10);
}
}
make sure the Boolean expression will evaluate to false
at some
stage—otherwise you’ll loop forever!
you probably want to have some variable which you modify in the loop, and then
when the modifications are “done” the expression in the while
loop should be
false
when writing a loop, look at your code: be the computer (think about types & flow)
for
loopthe other type of loop in javascript is the for
loop
it’s like a while
loop, but it has the “modify the loop variable” (e.g. count
= count + 1;
) part built-in
for (let i = 0; i < 10; i=i+1) {
// loop code goes here
}
in this example we called the loop variable i
(although you can give it whatever name you like)
for
and while
loopslet i = 0;
while (i < 10) {
// loop code goes here
i=i+1;
}
for (let i = 0; i < 10; i=i+1) {
// loop code goes here
}
Boolean expressions (e.g. mouseX < 500
) and if
statements let us control the
flow: do this or that
loops (for
, while
) allow us to control the flow: do this over and over again
you’ll get lots of practice in the labs
How do we keep track of colours?
How do we find colours?
How do we make art with colours in p5?
What is a primary colour?
there are two basic ways to mix colours together
adding (good for shining light out of a screen)
subtracting (good for working with materials that absorb light)
p5
to know about:How do we keep track of these colours?
Newton deduced that white light must be composed of all these colours
Goethe
symmetric colour wheel with associated symbolic qualitites
1809
Tate Collection, UK
Primary, secondary and tertiary
good if you’re a painter!
but for scientific notation etc, we need a different approach
Color spaces for computer graphics
SIGGRAPH Comput. Graph.
Joblove, George H. and Greenberg, Donald
Attempts to define what colour is made of.
Newton, Goethe, Itten: Made of combinations of Red, Blue and Yellow (primary colours for subtractive mixing)
Munsell: Made of three independent properties: hue, chroma, and lightness - (perceptually uniform)
Joblove/Greenberg: Defined hue/saturation/brightness as a good standard for computer graphics (see Wikipedia).
Suppose you have a green colour in RGB, but you want to make it more intense or brighter.
What R, G, and B values should you change to achieve this?
What if we made art where “colour” is the material?
Olafur Eliasson (b. 1967)
Feelings are Facts
2010
Ullens Center for Contemporary Art, Beijing
📷 Studio Olafur Eliasson
created using smoke and lights
interested in the intersection of colour and sound
Roy de Maistre
Rhythmic composition in yellow green minor
1919
contrast is what happens when you put two or more colours together and it gives off a sort of feeling
Online colour palette generators:
http://paletton.com/ (shows complementary colours, triads/tetrads etc)
https://coolors.co/app (generate random palettes which look decent)
http://colormind.io/ (uses AI because… reasons)
Let’s explore colour spaces in RGB and HSB!
Shiffman videos:
MDN javascript docs (have a look at the Tutorials & References menus in the sidebar)