08: Let's move things

To animate something, we have to continuously change a value, for example a position. To make it a little bit easier for us p5.js offers us the draw function. The name can not be changed in p5.js. This function will be called continuously, 30 times a second. You can change this parameter called framerate. That sound like a lot, but it is necessary to trick our eyes into believing to see a smooth animation.

To make use of the draw function we can just define it like other functions. It will override the original draw function.

function draw() {
  // Put your code to update the drawing here
}

If you put a console.log command inside the draw function, you can see that it is called continuously.

function draw() {
  console.log("Hello 😀");
}

This code will output the following in your console:

Hello 😀
Hello 😀
Hello 😀
Hello 😀
Hello 😀
Hello 😀

It will continue to output this, until you stop the script.

Animate our emoji

Like in a flip book we want to change the position of our emoji every time the draw function is called.

You can put the command to draw your emoji inside of the draw function to draw it continuously. You need to have the function where you define your emoji in the same file.

function emoji(x, y) {
  strokeWeight(2);

  // The background of the emoji
  fill(255, 255, 0);
  ellipse(x, y, 200);

  // The eyes of the emoji
  fill(255, 255, 255);
  ellipse(x - 30, y - 20, 40);
  ellipse(x + 20, y - 30, 60);

  // The pupils of the emoji
  fill(0, 0, 0);
  ellipse(x - 20, y - 20, 10);
  ellipse(x, y - 40, 10);

  // The mouth and the teeth of the emoji
  fill(255, 255, 255);
  rect(x - 60, y + 20, 120, 40, 20);
  line(x - 60, y + 40, x + 60, y + 40);
  line(x - 40, y + 20, x - 40, y + 60);
  line(x - 20, y + 20, x - 20, y + 60);
  line(x, y + 20, x, y + 60);
  line(x + 20, y + 20, x + 20, y + 60);
  line(x + 40, y + 20, x + 40, y + 60);
}

function draw() {
  emoji(150, 150);
}

You can see the emoji on the canvas

If you change the position of your emoji between the draw calls, you get an animation. To do that we have to use variables.

let x = 100;

function emoji(x, y) {
  // code to draw our emoji
}

function draw() {
  emoji(x, 150);
  x = x + 2;
}

The emoji on the canvas with a trail

Now your emoji is moving over the screen from left to right 👏.

As you can see your emoji is leaving a trail, to avoid that we can call clear() at the beginning of the draw function, to clear the canvas from all the previous drawings.

Instead of clearing the canvas you can also use the background(r, g, b) command to fill the canvas completely with a background color.

let x = 100;

function emoji(x, y) {
  // code to draw our emoji
}

function draw() {
  background(255, 255, 255);
  emoji(x, 150);
  x = x + 2;
}

You can see the emoji moving on the canvas