Week 2:

Animation & Repetition,
Interaction & Repetition

Introducing Movement

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


~ 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:

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);

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:


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

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.


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);

Have a read of the Reference Page for more information.


See if you can make your animation interactive using the keyboard or the mouse.