Setting Up Your Environment

To begin writing code using p5.js, you need to set up the coding environment to write and save your programs. Processing Foundation provides the p5.js Editor, a website where programmers can write, test, share, and remix p5.js programs without needing to download or install a code editor on a computer.

What you will need

  • Access to the internet and the latest version of a desktop browser such as:
    • Chrome (recommended)
    • Firefox (recommended)
    • Safari
    • Edge
  • A desktop computer, laptop, or Chromebook

A. Opening the p5.js Editor

  1. Open the latest version of Chrome or Firefox browser on your computer and visit the p5.js Editor website.
  2. Click the “Sign up” link on the top right of the web page.

p5.js Editor sign-up link

B. Creating an Account

Create an account on the p5.js Editor using one of the following options:

  • Manual sign-up
    • Create a username.
    • Enter your email address.
    • Create and confirm a password.
    • Click the “Sign Up” button.

p5.js Editor sign-up page

  • Using a Google account

    • Click the button at the bottom of the page labeled “Login with Google.”
    • Follow the prompts to enter your email and password for your Google account.

  • Using a GitHub account

    • Click the button at the bottom of the page labeled “Login with GitHub.”
    • Follow the prompts to enter your username and password for GitHub.
    • Authorize the p5.js Editor to access your GitHub details by clicking the “Authorize processing” button.

C. Exploring the p5.js Editor and running your first “sketch”

p5.js Editor interface breakdown

  1. Now that you’ve created an account, which allows you to save and share your work, we’re ready to take a deeper look at p5.js Editor’s interface.
  2. You have the option of switching to another language by clicking on “English” in the navigation menu.
  3. You also have the option to make the interface more accessible by clicking on Settings in the toolbar and updating Theme, Text Size, and Accessibility for screen readers.
  4. To view the output of the default code inside the text editor, click the Play button in the top left corner. p5.js Editor interface breakdown
  5. After clicking the Play button, you can expect to see a light gray canvas, measuring 400 x 400 pixels, appear in the preview area. We invite you to update one of the “400” numbers inside the text editor to a smaller number, click on the Play button again, and see what happens! 😃
  6. Last but not least, the p5.js Editor defaults to using p5.js version 1.11.5. However, we will be covering some exciting and new p5.js features in this lesson plan, so please change your settings to switch over to the latest version of p5.js. p5.js Editor version switcher p5.js Editor version switcher p5.js Editor version switcher

D. Renaming, saving, and sharing sketches

  1. By default, the p5.js Editor will generate a playful name for your first sketch. You can rename your sketch by clicking on the pencil icon above the text editor and typing in a name for your project. Renaming a sketch
  2. Save projects by clicking on File in the top toolbar and selecting Save. Alternatively, you can use the shortcut keys Control+S (PC) or Command+S (Mac). Saving a sketch Saved notification

Tip: Make sure you are logged in to your account, or you will not be able to save the sketch. Saving projects frequently helps ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you’re coding.

E. Sharing, downloading, and deleting your sketches

  1. Once your project is saved, you can share it! Click on File in the navigation menu, select Share, and copy one of the links provided to share your project in Embed, Fullscreen, and Edit modes.
  2. If you share your project link with a teacher or classmate, you are giving them the permission to view all of your sketches stored on the p5.js Editor. This is because all sketches stored in the p5.js Editor are publicly viewable. Additionally, it’s also possible for your sketches to show up in search engine results.
  3. There are numerous benefits to projects being shared publicly on the Internet – p5.js programmers can draw inspiration from each other’s creativity and exchange valuable knowledge.
  4. However, there are also risks associated with publicly available projects. You should always be cautious about the kinds of personal information you include in your projects, and avoid saving sensitive data, including but not limited to:
    1. Your name
    2. Location
    3. Phone number
    4. Email address
    5. ID number
    6. Biometric data - this is data that could identify you, like a picture of your face, a sound clip of your voice, etc. Sharing sensitive data like this could put you at risk for dangers like identity theft.
  5. If you’d like to remove a sketch from the public’s view, you can download the sketch to your local computer and delete it from your p5.js Editor account. Click on File, select Open, find the sketch you hope to remove, then click on the downward triangle arrow on the right-hand side and select Download. p5.js Editor download sketch p5.js Editor download sketch p5.js Editor download sketch
  6. Once the sketch is downloaded to your computer, select “Delete” from the same menu. And voila! You’re now saving your sketches more securely by creating a physical backup of your files on your computer.
  7. Interested in learning more about using p5.js with a desktop code editor? Check out Processing Foundation’s Setting Up Your Environment tutorial.