Getting started

Welcome to this p5.js crash course, designed to help you get started with creative coding right away. Whether you’re an artist, designer, educator, or beginner, p5.js provides an intuitive way to create visuals and interactive experiences using JavaScript.

This guide will walk you through setting up your first p5.js project, understanding the p5.js Web Editor, and working with an HTML template for local development.

What is p5.js?

p5.js is a JavaScript library that simplifies creative coding. It was inspired by Processing, a popular tool for visual artists and designers, and brings the same ease of use to the JavaScript ecosystem.

With p5.js, you can easily:

Create 2D and 3D graphics.
Handle user interaction (mouse, keyboard, touch).
Work with sound, images, and video.
Generate animations and interactive sketches.

p5.js extends JavaScript’s capabilities by offering a high-level API for drawing and interaction. This means you don’t have to worry about low-level graphics programming—p5.js takes care of that for you!

p5.quadrille.js

p5.quadrille.js is a p5.js library that provides an easy way to create and manipulate quadrilles. It’s particularly useful for working with board games, cellular automata, creative coding and tile-based designs.

By including p5.quadrille.js in your project, you can easily define, modify, and render quadrilles.

Hello World

Every p5.js sketch starts with a canvas, the space where all visuals are drawn. The createCanvas(width, height) function initializes this canvas with the specified dimensions.

function setup() {  
  createCanvas(300, 300);  
}

This creates a 300 × 300 pixel canvas inside the browser window.

Drawing a Shape

Let’s build on this by drawing a red circle in the center of the canvas.

Code Explanation

function setup() {  
  // Create a canvas of 300x300 pixels  
  createCanvas(300, 300);  
  // Set fill color to red  
  fill(255, 0, 0);  
  // Draw a circle at the center (x: 150, y: 150) with a diameter of 100 pixels  
  circle(150, 150, 100);  
}

ℹ️

setup – A required function in every p5.js sketch. Runs once at the beginning to set up the canvas and variables.
createCanvas – Defines the canvas size.
fill – Sets the fill color for shapes.
circle – Draws a circle with the given x, y coordinates and diameter.

p5.js Web Editor

If you don’t want to set up a local development environment, you can use the p5.js Web Editor (editor.p5js.org). This online tool allows you to:

Write and test p5.js code directly in your browser.
Save and share sketches with others.
Avoid installation and setup hassles.

To get started:

Open editor.p5js.org.
Click “New Sketch”.
Start coding in the sketch.js file!

This is the fastest way to start coding with p5.js without any extra setup.

Hacking p5.js

Hack the previous p5-intro sketch in the p5.js Web Editor and start experimenting with the code. Modify shapes, colors, interactions, and see changes in real time!

When you open the link, you’ll see a sketch similar to the one below, which serves as the HelloWorld example from the previous section.

HTML Template for Local Development

If you prefer to work locally, you can set up an HTML file to run your p5.js sketches. This is the same structure as in the p5.js Web Editor, including index.html, sketch.js, and optional style.css.

Below is a simple HTML template that includes:

p5.js (for graphics and interaction)
p5.sound.js (for working with audio)
p5.quadrille.js (for quadrille logic and graphics)

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script src="sketch.js"></script>
  </body>
</html>

This setup mirrors the p5.js Web Editor, so transitioning between online and local development is seamless.

Opening `index.html` Directly in a Browser

For simple sketches, you can double-click index.html to open it in a browser. This works for most cases but may cause issues when loading assets like images, fonts, or sounds due to browser security restrictions.

Running a Local Server (VS Code)

If your sketch relies on external assets, you may need a local server. The easiest way to set one up is with VS Code’s Live Server extension:

Install Live Server from the VS Code marketplace.
Open your project folder in VS Code.
Right-click index.html and select “Open with Live Server”.
Your sketch will now run at http://127.0.0.1:5500/.

ℹ️

If you prefer other methods, you can start a local server using:

Python: python -m http.server 8000 (Python 3)
Node.js: http-server (install with npm install -g http-server)

Then, open http://localhost:8000/index.html in your browser.