Michael McCullough
Semester 2, 2024
assignment 1 due this coming Monday 9pm (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.
These fine folks are here to listen to your concerns or issues confidentially, you can contact them over email or on the forum.
Yichen’s Example Assignment 1: Bluebot
Your submission must include a short (max 200 words) artist statement. This is a short document, written in the first person, which explains:
Tell us what is interesting and artistic about your submission—don’t assume that we can guess. Explain how and why your work is interesting, coherent, and has personality.
don’t explain your code line-by-line—instead, think about the overall goals and effect you’re trying to achieve
use references to support your statement.
Having references in your references.md is good!. (You must have at least two!)
If I include an image from the internet—should it be in my references? (YES!)
If I include code from p5js.org—should it be in my references? (YES!)
If I am inspired from a book—should it be in my references? (YES!)
If my friend suggested a nice colour—should it be in my references? (YES!)
p5 uses a setup, draw, draw, draw… “draw loop”
variables are a way to give names to values (e.g. numbers, strings, etc.) which might change
the “path” the running program takes through the code
jump around, then jump back (but it’s predictable)
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)
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;
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)
