Start Here

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.
}

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>

Continue Learning

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

Contribute Donate