Introduction to p5.js

Basics

p5.js is a JavaScript library that makes it really easy to program interactive graphical programs.

In this tutorial, we’ll learn about a few of the things that you can do with p5.js and write our first p5.js program.

Making Shapes

The first thing to learn is how to draw shapes with p5.js.

Ellipses and Circles

You can create an ellipse with the following code, passing 4 parameters: x, y, width, height

ellipse(70, 70, 100, 100)

That wil draw a circle at (70, 70) with width and height 100. That means the radius is 50.

Try out the example program and see if you can draw some more ellipses of different sizes in different places.

Looking ahead

Now that you know circles, you can envision the possibilities. Here’s a sneak preview of what you could make if you continued learning p5.js.

You only need to learn lines and colors to make some basic balloons just like the demo below.

Even more advanced will be putting them in random places once you learn about lists and randomizing.

Take a look and enjoy!

The draw function

The draw function is the starting point of your code, so all drawings you make need to be inside there or inside functions that are called from inside draw.

Like this

function draw() {
    // your code here
}

Try making your own p5.js program in the Sandbox by clicking here.