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.

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:

1. function

2. the-name-of-your-function

3. () a pair of round brackets

4. {} 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!!