Let’s make interactive artwork with P5.JS!!
In this workshop introduces you to the fundamentals of interaction
If you are an absolute beginner, I would recommend completing this workshop first.
What is an interactive artwork??
It's in the name! An interactive artwork is an artwork that changes with audience engagement. It might use mouse movement or mouse clicks or key presses or even a web cam. Interactive artworks can be really fun to make. One of my favourite things is seeing people interacting with my work, it can be really rewarding.
Mess Around
Have a go interacting with the piece below! Feel free to experiment by changing some of the code too. To make it Rainbow Mode press shift (FLASH WARNING)
note: this code is based on this code
Functions, functions, functions
Mouse Clicks
Do you remember from our build an artwork page that function setup
and function draw
?? function setup
runs once and function draw
runs 60 times a second. Some exciting news is we are going to get to know some new functions!! Woo hoo!
What’s happening??
We are using the mouseClicked()
function which runs everytime we click. Inside the mouseClicked()
we have line of code.
circle(mouseX, mouseY, 30)
We are asking the computer to draw a circle with the x position as the mouseX position and y position as the mouseY every time we click. If the position part doesn’t make sense, review this placement section.
Let's look at another example...
Inside function mouseClicked()
is this line of code.
background(random(255), random(255),random(255))
We are drawing a new background every time we click. Inside the background function is three random numbers. Every time we click we get a new random number. If randomness doesn’t make sense review the randomness section.
Let's try a different function!
Dragging the mouse
What's happening??
Very similar to what happened with mouseClicked()
the circle code runs only when we drag the mouse.
Coolio let's look at our last mouse-related function.
Moving the Mouse
Check out an example here.
Hopefully, by this point, mouse-related functions should be a little less mysterious. Here is the mouseMoved()
function.
mouseMoved()
function, make a circle follow your mouse. Ask an instructor if you need help.Make your own functions
You can make your own function. There are two main reasons to do this. So our code can be nice and neat and so we easily run/not run certain parts of our code.
Instead of having everything in function draw()
like this:
function draw(){
background(0,220,220);
// roof
stroke(0);
fill(250,0,0);
triangle(75, 150, 327, 152, 200, 40);
// house
fill(0,0,200);
rect(75,150,250,250);
// door
fill(0,180,0);
rect(150,250, 75,150);
// door knob
fill(255,255,0);
noStroke();
ellipse(160, 330, 10,10);
// sun
noStroke();
fill(255,255,0);
ellipse(60,60,30,30);
}
Try separating the elements into functions
function draw(){
background(0,220,220);
roof()
house()
door()
sun()
}
function roof(){
stroke(0);
fill(250,0,0);
triangle(75, 150, 327, 152, 200, 40);
}
function house(){
fill(0,0,200);
rect(75,150,250,250);
}
function door(){
fill(0,180,0);
rect(150,250, 75,150);
}
function sun(){
noStroke();
fill(255,255,0);
ellipse(60,60,30,30);
}
See? It's neat (especially when your code gets more complicated) and easier to read.
Making your function is simple. Write:
function
the-name-of-your-function
()
a pair of round brackets{}
a set of curly brackets
Cool you've made a function but now you need to run it. This is named 'calling'. If you want your function to always run you can call it in the draw function. This is done like so:
function draw(){
my-cool-function()
}
You write "the-name-of-your-function" and then ()
a pair of round brackets.
You can of course "call" your function whenever you want. You can do the same thing but call it in function mouseClicked()
so it only runs when you click.
Variables, variables, variables
A variable is a symbolic name or a label for something. Last time you may have used the handy frameCount variable but this time you will make your own variable.
To make your own variable you must name it. We create and name variables using let
let my_awesome_variable
You can name your variable anything you like. Ideally, it should be something that you can easily remember and recognise.
Next, we can define the variable. We have to tell the computer what it is. This can be a number value. We define variable this using the =
let my_awesome_variable = 6
Cool. Now when I write my_awesome_variable
my computer will check what my_awesome_variable
is and return 6.
So why are we making a variable??
What is handy about making our own variables is that we can change them. Check the example below.
That’s right. When we click we run whatever is in mouseClicked()
; which is my_awesome_variable = 200
. We redefined the variable.
What if we want it to smoothly increase??
Then we can use this trick.
my_awesome_variable = my_awesome_variable + 1
Here we are redefining the variable by adding 1 to the previous value of the variable. See it in action.
Pretty cool right? This is actually so common that we have a shortcut for it. Instead of writing out my_awesome_variable = my_awesome_variable + 1
you can write my_awesome_variable++
it means the same thing.
The Truth about Variables.......
We know that you can define your variable as a number. You can also define it as true or false. This is called a Boolean variable.
Here is how it's done:
my_awesome_variable = true
Cool. Now my_awesome_variable
will return true. For this to be useful to use we have to use something called an if statement. It is pretty much how we use "if" in our regular talking.
For example: "if it's raining I wear a raincoat".
We have two parts to the sentence: a condition and an outcome. "If it's raining" is the condition and "wearing a raincoat" is the outcome.
To code this we use the following syntax:
if ( condition ) { outcome }
if(my_awesome_variable === true) {background(0)}
That's right.
The condition is whether my_awesome_variable
is true.
The outcome is a black background.
What's with all those ==='s ???
Ah! You are right there is something going on with the =
To define a variable we use one =
To check if a variable is equal or the same type we use ===
This can be a little confusing and missing a ='s is an easy mistake.
Using Booleans
Boolean Variables (true/false variables) are really useful at acting like an on/off switch. When the variable is false nothing will happen but when it becomes true BLAM something happens!
It's easier to understand in action.
Okay but how is that any better than using functions??
Boolean's are pretty useful when you have a series of things you want to happen and when your code gets more complicated.
You can stack your if statements. Check it
if(my_awesome_boolean === true && mouseX < width/2){ my_awesome_variable++ }
To add an extra condition to your if statement we use &&
for AND or we can use ||
for OR
These are called logical operators
hmmmm.... but there's more going on here. What's the > <
's about???
Greater or Less than...
> <
's are very simple. We use them to test if something is greater(bigger)or less (smaller) than something else. Here's an example.
1 < 5
One is less than five.
26 > 3
Twenty-six is greater than three.
<
is used for less than
>
is used for greater than
An easy way to remember is the open end will always face the bigger number. You can imagine the symbol as a crocodile. The crocodile will always want to eat the largest number.
Phewww... that was a lot of content!! Don't worry if you don't get everything or some stuff doesn't work right away. This stuff is tricky!!