How to create a sketch app in JavaScript using P5.JS

I have been learning p5.js for a while now and thought it would be nice to share the process and progress in the form of a tutorial. This will motivate me to continue learning and give others access to it as well.

We will learn how to create a sketch app. I have kept it as basic as possible, which makes it easy to understand and quick to build.

To follow this tutorial, you just need to know the basics of HTML] and JavaScript.

Let’s start with: What is p5.js?

p5.js is a JavaScript] library based on Processing, which was originally written in Java for creating interactive applications. The goal of this framework was to make coding accessible to artists, educators, and beginners. Over the years, there have been many ports of Processing in different languages, and p5.js is one of them.

First, we need to download p5.js (the minified version). We are going with the minified version because it contains the complete library in the smallest footprint possible.

Let's create the bare-bones structure of the project:

index.html 
lib/p5.min.js

We will then create a run.js file. This file will contain all the code we write.

Our project folder should look something like this:

index.html 
lib/p5.min.js 
run.js

Time to write some HTML in the index.html file.

<meta charset="UTF-8">
<title>Sketch App</title>
<style>
    body { padding: 0; margin: 0; } 
    canvas { vertical-align: top; border: 2px solid #000; }
</style>
<script type="text/javascript" src="lib/p5.min.js"></script>
<script type="text/javascript" src="run.js"></script>

As you can see above, we included the p5.js library before run.js. Since web browsers read code line by line, it is important that the library loads before run.js. Otherwise, our code will throw errors because the web browser won't know what we are trying to do.

In p5.js, the naming conventions are based on what each function does and contains, which makes it very easy for a beginner to understand.

It’s time to edit the run.js file.

The first function will be setup(). This contains all the code that initializes the program, acting like a set of rules and instructions for the app to follow.

function setup() { }

Next, we will create the draw() function below setup(). The draw() function contains all the drawing tasks that run continuously inside the canvas element (which we will create in the next step).

function draw() { }

The code should look something like this:

function setup() { }

function draw() { }

Now, let's create the canvas inside setup() using the createCanvas() function.

The createCanvas() function takes two parameters: width and height.

function setup() { 
    createCanvas(800, 800); // width, height 
}

If you open the web page now, you will see a white box 800x800 pixels in size, surrounded by a 2px border.

You can change the background color using the background() function, which takes one parameter.

function setup() { 
    createCanvas(800, 800); 
    background(85); // You can choose between 0 and 255. 
}

Let’s add some functionality to draw() to make the magic happen.

function draw() { 
    if (mouseIsPressed) { 
        rect(mouseX, mouseY, 2, 2); // X location, Y location, width, height 
    } 
}

As you can see in the code above, we added an if statement that checks the mouseIsPressed variable. This checks if the user is clicking their mouse. If they are, we tell the app to draw a rectangle at the mouse's X and Y coordinates, with a width and height of 2px.

Next, we will use the fill() function to color the inside of our rectangle white.

function draw() { 
    if (mouseIsPressed) { 
        fill(255); // Choose between 0 to 255 
        rect(mouseX, mouseY, 5, 5); // X location, Y location, width, height 
    } 
}

We can also remove the border around the rectangle by adding the noStroke() function.

function draw() { 
    if (mouseIsPressed) { 
        fill(255); // Choose between 0 to 255 
        noStroke(); 
        rect(mouseX, mouseY, 5, 5); // X location, Y location, width, height 
    } 
}

The project is done. Excellent job!

The complete code in run.js should look like the snippet below:

function setup() { 
    createCanvas(800, 800); 
    background(85); 
} 

function draw() { 
    if (mouseIsPressed) { 
        fill(255); 
        noStroke(); 
        rect(mouseX, mouseY, 5, 5); 
    } 
}

This is how the final version should look.

You can download the completed source code of this project from GitHub.

Happy Coding and Happy New Year!