Setting up VS Code for p5js

2-minute read
Bert Riffelmacher
p5js • dev • vscode

Setting up Visual Studio Code for p5js

I have always been a great fan of Processing, the Java-based language for creative coding. While I do like programming in Python or c++ much more than Java, it is just nice to open the IDE of processing and start getting creative without setting up complicated frameworks. p5js is like Processing but based on Javascript, and so the sketches can be easily shared without other external dependencies.

There is a powerful online editor for p5js on the homepage of the project, but I am a fan of coding in VS Code set up exactly the way I like it. Here I describe how to set up VS Code for p5js.

Remark I know that there exist some all-in-one extensions for p5js but for now, I stick to my slightly more complex way.

1. Setting up the framework

Create a new directory for the sketch. We then need three files as a minimal boilerplate. The minimal index.html page just loads the library and the actual sketch.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKETCH NAME</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

I like to link to a local copy of the library (Download), but you can also refer to the CDN hosted version.

Finally, sketch.js is where the magic happens ;). A minimal template may look like this:

1
2
3
4
5
6
7

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

function draw() {
  background(220);
}

2. Setting up VS Code

While VS Code is perfectly fine for programming in p5js (after all it is Javascript and you can open the index.html simply in your browser), I do recommend getting two extensions.

  1. LiveServer opens the sketch in your favorite browser (just press Go Live in the status bar).
  2. The p5js Snippets extension (by the fantastic Dan Shiffman) may save you time when coding in p5js.