p5.js Environment Setup

large colorful painting on a wall near a couch with flowers in the corner of it

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

p5.js is a powerful library that enables creative coding in the web environment. To harness its powers, you need to set up your environment and learn the basics of using p5.js. This article will guide you through that process.

Step 1: Downloading the p5.js Library

Head over to the p5.js download page and download the latest version of the library. You can choose between the complete, minified, or the CDN-hosted version. For beginners, the complete version is recommended, as it includes helpful error messages.

Step 2: Create Your Project Folder

Create a new folder for your project, and name it something descriptive, like "p5js-project". Inside the project folder, create two new files:

  • index.html
  • sketch.js

Step 3: Setting Up the HTML File

Open the index.html file in your text editor of choice, and add the following basic HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js Project</title>
    <script src="path/to/p5.js"></script> <!-- Replace with the actual path to your p5.js file -->
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

Make sure to replace the path/to/p5.js with the actual path to the p5.js file you downloaded earlier.

Step 4: Writing Your First p5.js Sketch

Open the sketch.js file, and add the following code:

function setup() {
    createCanvas(640, 480);
    background(200);
}

function draw() {
    if (mouseIsPressed) {
        fill(255);
    } else {
        fill(0);
    }
    ellipse(mouseX, mouseY, 80, 80);
}

This code creates a simple sketch with a 640x480 canvas and a background color of 200 (a light gray). The draw() function uses an if-else statement to change the color of the ellipse, depending on whether the mouse is pressed or not.

Step 5: Running Your p5.js Sketch

To run your sketch, simply open the index.html file in your web browser. You should see a gray canvas, and when you click and drag your mouse, an ellipse should follow your cursor.

Congratulations! You've successfully set up the p5.js environment and created your first sketch. Now you can dive deeper into the library and explore its functions and features.

Hey there! Want to learn more? Cratecode is an online learning platform that lets you forge your own path. Click here to check out a lesson: Drawing Basic Shapes (psst, it's free!).

FAQ

How do I download the p5.js library?

Visit the p5.js download page (https://p5js.org/download/) and choose between the complete, minified, or CDN-hosted version. For beginners, the complete version is recommended, as it includes helpful error messages.

What are the basic files I need for a p5.js project?

You need two files for a basic p5.js project: index.html and sketch.js. The index.html file contains the HTML structure and script references, while the sketch.js file contains your p5.js sketch code.

How do I run my p5.js sketch?

To run your p5.js sketch, simply open the index.html file in your web browser. Your sketch should run, and you should be able to interact with it using your mouse and keyboard.

Similar Articles