Make Digital Art with JavaScript

Learn the basics of p5.js

Sandesh Chapagain
Level Up Coding

--

Created with p5.js

Full disclosure — you won’t be an expert at creating digital art by the end of this article. However, you will learn the basics of it, and have a starting point to venture onto much bigger projects.

We will be working on creating a canvas filled with random geometric shapes. Is it possible to make something much more exciting with p5? Absolutely. Check out the example projects in the docs.

In this article, however, we’ll be sticking to simple geometries. This is to ensure that the complexity of the project does not deter us from learning the essentials. Let’s save the exciting pieces for the future, and dive into this one for now.

Set up the HTML

We’ll setup a backbone for the web page, and then never touch the HTML again. Our HTML needs to do two things. First it needs to link all the files necessary for our project — the p5.js library, our JS script, and the style-sheet. Then, it also needs to set up a division onto which we’ll later mount the canvas (remember the id of “shapes” for later).

Note : I’ve decided to import p5.js using the CDN, but please feel free to download it to your machine, and use it locally.

Style the Web page (optional)

If you want to make your page look a little nicer, and don’t want your final canvas to be located at the top-left corner of the screen, you need to add some styling to it. I am embedding my styling here, but of course, you’re free to fit it to your tastes.

Create the Canvas

Now we’re ready to mount a canvas to the HTML division we created earlier. To do this, we need to setup a new sketch object, and pass that object to the p5 constructor to create a new p5 instance.

Note : There is a much easier way to create a canvas using the “global mode”, but doing that will not allow you to create multiple sketches on the same web page — if you decide to do so later. It is not within the scope of this article to talk about the differences in detail, but if you want to know more, please refer to the documentation.

I know that sounds a bit complicated, but let’s see some code, and then break down what’s happening.

First we get the height of the div where we want to mount the canvas. Then, we create a function that accepts a p5 instance (called p here) as a parameter, and attaches a setup method to it. In this setup, we will write all the code that we want to run as soon as the web page loads. For now, all we’re doing is creating a canvas with the exact same dimensions as our HTML div.

Note : Here we’re assuming that the div is a square. If we wanted to allow for rectangular pieces, we need to get both the height and the width of the division, and pass those into the createCanvas() method accordingly.

Finally, we create a new p5 instance, and pass in the sketch function as a callback, and the id of the div as a mounting point. Nothing shows up yet on our page because we haven’t added anything to our canvas. Let’s work on that now.

Add a Shape to the Canvas

We will start simple, and add a boring little ellipse to the center of our canvas before we move on to making crazier shapes.

Notice how fill is used before creating the ellipse to specify the color of the ellipse. I’ve used an integer that maps on to 0–255 color scheme in the example above, but fill also accepts RGB or hexademical color strings as we’ll be seeing later.

To position the ellipse at the center, we passed along half the canvas size as both the x and the y coordinates of the ellipse center. The coordinate axis for the canvas is centered at the very top-left, with x increasing towards the right and y increasing towards the bottom.

Randomize Location and Size

If all the shapes we want to display are the same size and are at the same location, the final image would not be too exciting. So let’s work on randomizing these parameters.

Instead of passing in preset values to the ellipse() method, we now generate random x,y coordinates for the location, and random width, and height for the size. This will make the shapes look more interesting on the canvas.

Refactor Shape Creations

Currently we’re creating our shape right in the setup method, and that is perfectly acceptable if all we want to do is to display an ellipse. However, we’re working our way up to rendering many different shapes of many different sizes, so let’s do some refactoring that’ll make our life easier when the time comes to add more shapes to our canvas.

Note that p.ellipse is now called from the drawEllipse function instead of from p.setup. drawEllipse also takes care of randomizing the size of the ellipse. In the setup, we created an array of functions that draw our shapes, and for each of these functions, we generated a random color to fill the shape with. We also picked a random location within the canvas, and then called the helper function to actually render the shape.

Add More Shapes

Nothing is now restricting us from creating some more helper functions to add different types of objects to our drawing. There are many different shapes, and they all work with their own set of parameters. Going over the nuances of these parameters would make for a really long article, so I ask you to refer to the documentation if you want to fully understand what’s going on in the code below.

We added three new helper functions to draw a triangle, a line, and a rectangle, and called all of them during our setup. We also nested our forEach loop so that we have five of each type of shape in the final canvas. This is what the result looks like:

It’s completely up to you to decide how many of the shapes you want the piece to have. I would suggest playing around with all the parameters, like roughSize and numRepeats, so that the canvas looks optimal to you.

An alternative way to draw these shapes would be to use p.random (info in the docs) to choose a random drawing function in each iteration. Then, we’d have different number of each shape in the canvas. I leave that as an exercise for the reader. Please do share what you end up with!

You’ve Made It!

Congratulations, you now have a fantastic tool at your disposal to create beautiful graphics using JavaScript. I hope this article gave you a basic understanding of the p5 library. Thank you for following along so far.

I have a collection of pieces I made while I was learning this very topic, and of course the code for all of that is available in my github. Please let me know if you’d like to see me go through any of them, or any other new topics that you might be trying to get into.

Again, thanks for reading!

--

--