p5.js is a Javascript library that starts with the original goal of Processing - to make coding accessible for artists, designers, educators, and beginners - and reinterprets this for today's web.

Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas. You can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML and HTML5 objects, inclluding text, input, video, webcam, and sound.

p5.js is a new interpretation, not an emulation or port, and it is in active development. You can also read how this differs from processing.js, or about how this relates to Processing.

This tutorial requires the use of the p5.js library and its online editor.

You can do this on either the p5.js online editor or your own IDE .

  Hint: I strongly recommend using Visual Studio for this tutorial project.

To use p5.js in your project, include the following scripts in your HTML page:

Once you have done that, you are ready to start the p5.js tutorial!

This is where the tutorial content starts and is entered.

Create a New Project

1. Create New Project from the Start page in Visual Studio.

2. Select Visual C# Installed Template called Web.

3. Select ASP.NET Core Web Application on the right of the window.

4. Name your project to any name you would like and click on OK.

5. Select the Empty template in the New ASP.NET Project dialog and click OK.

Congratulations! You have created your first project and finished the first stage of the tutorial.

Setup your Solution

1. Right click p5Sample in the Solution Explorer on the right pane and create a folder called wwwroot.

  Hint: If you already have wwwroot in your solution, you do not need to create it.

2. Right click the recently created wwwroot folder and add an HTML file called index.html.

3. In wwwroot, create an assets folder and add the following folders in assets: img, js, and css

  Hint: It is very good practice to keep your solution organized and know where everything is.

As of right now, your solution should look like this:

4. In assets, create a CSS file called style.css file in the CSS folder.

We will be using this css file at the end to make things look pretty.

Import p5.js To Your Project

Open your index.html file and include the following scripts:

Your index.html file should look something like this:

Next, we will be placing the canvas onto the web page.

Insert the following code into your index.html file:

Your index.html file should include it and look like this:

You have now included your first sketch but there is no visible canvas. We have to create a new Javascript file and include some code to set it up.

1. Right click the js folder in the Solution Explorer and add a new Javascript file called sketch.js in that folder.

2. Open that file and type in the following :

Read more: setup() & draw()

You have setup the first steps in creating your canvas!

Create Canvas

createCanvas() creates a canvas element in the document allowing to set certain dimensions of it in pixels.

You need to first create a canvas or a 'space to draw on' to take advantage of p5.js.

From here, we can add code into the Javascript function setup in sketch.js to create our canvas:

Note: Width and Height are the dimensions of your canvas. Each variable stores a value that declares the pixel value for the canvas.

Note: We create a variable called cnv to pass through another function we will create to build the canvas.

We will add the following code below to create our canvas:

In addition to this, we will also add position to our canvas.

We need to the Canvas object method, position() to determine the position for the canvas on the page.

For this example, we created a function called centerCanvas to take in x and y values and use the method to position the canvas onto the page:

Your code for the function should look like this in sketch.js:

Note: The x value represents the "x-axis" and the y value represents the "y-axis" in relation to a 2D-plane.

And we then apply the centerCanvas() function to the setup() function by calling it like this:

Now, you will be able to see a canvas that has been created on your page.

You have finally created a visible canvas! We will later add some more functionality to it so that you can draw on it.

Apply Draw Functionality

We are going to create some global variables in our sketch.js file.

We use global variables so that they are accessible anywhere throughout the file.

You also need to add the following code into the draw() function in sketch.js:

In this code segment, we first make sure if the mouse pointer is within the canvas. We then track to see where the mouse cursur is and if the mouse is "pressed". If statements help us create conditions to determine which code segments to execute.

In this case, when the mouse is pressed, strokeWeight() takes in our global variable, strk to determine the thickness of the line to be drawn on the canvas.

line() draws the line by using points on a 2D-plane to determine where the line is to be drawn.

More info: mouseX, mouseY

We can now add some more code into sketch.js in the setup() function with the following:

From here, you can now should now have created a visible canvas that you can draw on.

Creating a Options Menu

We are going to create a menu to help users apply additional colors and shapes onto their p5.js experience.

These options include different colors, sizes, and shapes.

First, we will write code for each individual option of the menu.

Hint: We will be using functions to dynamically create HTML elements using JavaScript for colors, sizes, and shapes for the menu.

Read More: JavaScript DOM, onClick Events, Adding Style To Elements Using JavaScript, Append Child Nodes, Remove Child Nodes

Code for users opening the "Colors" option:

This creates HTML buttons that attach a click event to change the color of writing.

Code for users opening the "Sizes" option:

A slider is created with a range (1-100) to fix the value of the stroke size depending on the user's preference.

The lower the value, the stroke is smaller and vice versa.

Code for users opening the "Shapes" option:

We are declaring styles to the dynamically created buttons and attach onClick events to them.

Additionally, we had to falsify doingLines and declare doingShapes as true for the current operation we want to do.

We also assign the global variable currentShape to the selected shape.

We also need to include code for functions to close the menu options:

Once we finish with the operation, we need to remove the dynamically created elements.

We also need to add function code to handle conditions when the menu is opened and closed:

This is a handler for the menus that will be opening and closing by users.

We also include a menu button for users to save their drawings.

For the finishing touch, we need to create a function to attach our handy click events to the buttons!

Touching Up index.html

To make use of the newly-created JavaScript code, we need to apply some things to index.html.

You will need to include the following code to look like this:

Apply The CSS

Finally, we need to add some CSS code to make things look pretty!

The Finished Project

Your project should look like this:

Congratulations! You have completed the tutorial for this application and ready to draw to your heat's content!

Learn More About What We Used!

You can find more information regarding the functions, classes, methods, or p5.js itself in the following links: