Introduction to p5.js

Your First Digital Canvas

Welcome to p5.js, a JavaScript library that makes it fun for artists, designers, and beginners to create interactive art with code. Think of it as a sketchbook, but your pencils and brushes are lines of code.

To get started without any complicated setup, we'll use the p5.js Web Editor. It’s a website where you can write and run your code right in the browser. Every p5.js project is called a “sketch,” just like a drawing in a sketchbook.

When you open the editor, you'll see some starting code. This basic template is the foundation of every p5.js sketch.

The Two Core Functions

Every p5.js sketch is built around two essential functions: setup() and draw(). Understanding how they work together is the key to making things happen on your screen.

setup() runs just once when the sketch starts. It's used for preparation, like creating the canvas you'll draw on.

function setup() {
  // Create a drawing canvas 400 pixels wide and 400 pixels tall.
  createCanvas(400, 400);
}

draw() runs right after setup() finishes, but it doesn't stop. It repeats in a loop, over and over, about 60 times per second. This continuous loop is what makes animation and interaction possible.

function draw() {
  // Set the background color to a light grey.
  // This line runs 60 times every second!
  background(220);
}

Drawing Basic Shapes

To draw anything, you need to know where to put it. p5.js uses a simple coordinate system. The top-left corner of your canvas is position (0, 0). The x-value increases as you move to the right, and the y-value increases as you move down.

p5.js gives you simple functions to draw shapes. Let's try drawing a rectangle and an ellipse. We'll add the code inside the draw() function, right after background(220);.

rect(x, y, width, height) draws a rectangle, where (x, y) is the top-left corner. ellipse(x, y, width, height) draws an ellipse centered at (x, y).

function draw() {
  background(220);

  // A rectangle at (50, 100) that is 80 pixels wide and 40 pixels tall.
  rect(50, 100, 80, 40);

  // An ellipse centered at (250, 200) with a width and height of 60.
  // Since width and height are the same, it's a circle!
  ellipse(250, 200, 60, 60);
}

When you run this code, you'll see a static rectangle and circle. Because the draw() function is looping, it's actually redrawing these exact shapes in the exact same spot 60 times a second. To our eyes, it just looks like a still image.

Creating Simple Animation

Animation is the illusion of movement, created by showing slightly different images in rapid succession. Since draw() is already a loop, we can create animation by changing a shape's position in each frame.

To do this, we need a variable. A variable is just a named container for a value that can change. Let's create a variable called x to hold the horizontal position of a circle. We'll declare it at the very top of our sketch, so both setup() and draw() can use it.

// Declare a variable to hold the x-position.
let x;

function setup() {
  createCanvas(400, 400);
  // Give 'x' an initial value.
  x = 0;
}

function draw() {
  background(220);

  // Draw an ellipse at our variable x position.
  ellipse(x, 200, 50, 50);

  // Increase the value of x by 1 each frame.
  x = x + 1;
}

Now, when you run the sketch, the circle moves! In the first frame, x is 0. In the second, it's 1. In the third, it's 2, and so on. The circle is redrawn a little bit to the right each time, creating a smooth animation.

What happens when the circle goes off the right side of the screen? It just keeps going. A common trick is to check if it has passed the edge and reset its position.

let x = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(x, 200, 50, 50);
  x = x + 1;

  // If x is greater than the width of the canvas...
  if (x > 400) {
    // ...reset it to 0.
    x = 0;
  }
}

With this if statement, the circle will now loop, reappearing on the left side as soon as it disappears from the right. You've just created your first continuous animation.

Ready to test your knowledge?

Quiz Questions 1/5

What is the primary role of the draw() function in a p5.js sketch?

Quiz Questions 2/5

In the p5.js coordinate system, where is the point (0, 0) located on the canvas?

This is just the beginning. By combining shapes, colors, and variables, you can start building your own unique visual creations.