# WELCOME TO RATIO CLUB

## Week 2:

### Key Concepts:

• Basics of Animation
• If Statements & For Loops
• Basics of Interaction

## Introducing Movement

How do we make things move?
By changing something incrementally from one frame to the next.

x++;

~ aka ~

x += 1;

~ aka ~

x = x + 1;

But what does this mean and what does it do?

All three of these lines do the same thing:

• They take the value of variable x
• add 1 to whatever it was
• then save this new value back into in variable x.

if you do this every frame,
you have animation.

for example:

var x;

function setup() {
createCanvas(960, 720);
x = 0;
}

function draw() {
background(0, 0, 255);
fill(255, 0, 0);
ellipse(x, 360, 300, 300);
x++;
}

This is the exact same code as last week,
except now the circle moves horizontally to the right.

By increasing or decreasing the size that we increment x by,
we can speed up or slow down the circle:

x = x + 5;

~ or ~

x += 0.2;

or, better yet:

var x;
var velocity;

function setup() {
x = 0;
velocity = 3;
}

function draw() {
x += velocity;
}

However, if you try this code you will see there is a problem...

## if / else if / else

Under what conditions do we want the circle to move right,
and when do we want it to move left instead?

To make the circle bounce off the edge of the screen,
we must reverse the direction when the ball is at the edge of the screen.

We can do this with an 'if / else' statement:

if ( x > width ) {
velocity *= -1;
}
else if ( x < 0 ) {
velocity *= -1;
}

This allows us to give the circle logical rules to follow.
These are called Conditional Statements.

Conditional Statements operate in order: Like so.

## For Loops

What if we want to draw 6 circles?

We could call 6 ellipses:

fill(0, 255, 0);
ellipse(0, 0, 50, 50);
ellipse(100, 100, 50, 50);
ellipse(200, 200, 50, 50);
ellipse(300, 300, 50, 50);
ellipse(400, 400, 50, 50);
ellipse(500, 500, 50, 50);

but this is laborious and we are lazy.

Instead, we use a for loop:

fill(0, 255, 0);

for (var i = 0; i < 6; i++) {
ellipse(100 * i, 100 * i, 50, 50);
}

But what is actually happening here?
Let's break it down:

### using the keyword for

• first we make a new variable called i and make it equal to 0
var i = 0;
• then we create a condition for when the end the loop
i < 6;
• then we say what should happen at the end of every time we run through the loop
i++;
• the code in { } is the code that is executed during the loop.

## Exercise:

In this weeks exercise, we've got a red circle that's bouncing all over the place.

• First, see if you can change the behaviour of the circle as it moves around.
• Try to copy your drawing from last week into this weeks exercise,
then make it bounce, wiggle, change colour or change size.
• Try repeating shapes using some for loops.
But remember, if you don't make any variation between each run of the loop,
all the shapes will be drawn on top of each other.

You can make anything happen.
Just work out how to do it step by step.

## Events: Introducing Interaction

In JavaScript, ways of interacting with your programme are called Events.

p5.js has a lot of great built-in variables and functions to monitor events and make interaction easy.

On the Reference Page you find details about all of them.

## The Keyboard

If you just want something to happen anytime any old key is pressed,
use keyIsPressed.

keyIsPressed is a p5.js Boolean variable that is true if a key is being pressed,
and false if there isn't.

keyIsPressed

if (keyIsPressed === true) {
fill(0, 0, 0);
} else {
fill(255, 0, 0);
}

rect(25, 25, 50, 50);

But if you want to be more specific, you can tell p5.js which key (or keys) to listen for:

key === "value"

if (key === "s") {
x += 0;
} else {
x += velocity;
}

rect(x, 25, 50 50);

## The Mouse

p5.js also allows you to monitor the position of the mouse cursor and the mouse buttons.

These are seperated up by the X and Y position (the horiontal and vertical position).

mouseX & mouseY

ellipse(mouseX, mouseY, 50, 50);

These are the X and Y position of the cursor relative to the Canvas.

What's more, there's pmouseX and pmouseY, that give the position of the mouse from the previous frame.

With these, you can work out if there's been a big, quick, movement of the mouse:

if (mouseX - pmouseX > 50) {
background(255, 255, 0);
} else {
background(0, 0, 255);
}