knowledge hub 129

Start Here

This is how to start p5.js project.

Intro

p5.js is a JavaScript library which implements your own canvas for creating interactive projects - the web browser is your limit...

If you want to know more about this library, the official website is here. Have a look around and click on the examples on the left hand side to see what results you could end up with!

Starting Your Project

We will be showing you how to start a project which is hosted by this p5.js library.

1. Follow Setting Up

Firstly, follow the JavaScript 'Setting Up' page until you have a folder with a file named package.json.

2. Create a new JS file

In the terminal (cat > filename) or with the right-click of your mouse, create a new file named sketch.js. Inside this file, put this code:

function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
}

function draw() {
    background('grey'); // any RGB value can go in here!
    // Search up 'color picker' to find specific colours.
}

What is a function?

A function is like a set of instructions that tells your computer what to do.

The setup() function is the first to be called: it 'sets up' your environment, and in your case, it creates a canvas which is the size of your screen.
The draw() function is the second to be called and it loops forever (the instructions inside this function will always be running). For now, the background is set to grey.

3. Create new HTML file

Now, this code doesn't work quite yet, because we need a way to see the code! The way to do this is to create another file, called index.html > HTML stands for Hyper-Text Markup Language, and is a way for browsers like Google to show your code!

Inside this file, copy and paste this code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Canvas</title>
        <style>
            body {
            padding: 0;
            margin: 0;
            background-color: #1b1b1b;
            }
        </style>
        <script src="sketch.js"></script>
    </head>
</html>

What does this code mean?

Every HTML document must start with the html tag at the start.
The head section contains metadata and resource links used by the web page.
A script tag loads the p5.js library from online resources.
The meta tags specify the character encoding for the document and sets the viewport for the browser.
The title tag sets the web page's title that appears in the browser tab.
Inside the style section, CSS rules define the web page's appearance.
Another script tag links to your JavaScript file you just created.

Continue Learning

You're done with the basics of your project! I recommend moving onto the Paintbrush page.