tutorials / p5js / editors

Editors

tutorial p5.js javascript

There are a number of ways to write P5.js code. Which one you choose depends on your personal preferences, but I’ll outline a few options here:

JavaScript Console

All of the options we’re about to talk about involve running code in a web browser. Before you start coding, make sure you’re familiar with the JavaScript console! This will be your best friend when debugging your code.

If you’re not familiar with the JavaScript console, check out the developer tools tutorial before you continue. But basically, in your browser, press the F12 key or ctrl shift i to open the developer tools, and then go to the JavaScript Console tab.

This shows you any errors that your code encounters. By default JavaScript hides these (because you don’t want your end users knowing how buggy your code is), but when you’re coding you want this open pretty much all the time.

I guarantee that you’ll encounter a situation where your code is acting funny and you don’t know why, and the answer will be to check the JavaScript console for errors.

Basic Text Editor

One of the simplest ways to write P5.js code is to use a basic text editor. You can use whatever basic text editor came with your computer (Notepad on Windows, TextEdit on Mac), or you can download something like jEdit or NotePad++. I personally use jEdit, but you should try a few out and see which one you like best.

You don’t want to use a rich text editor like Word though. You just want a basic text editor!

This allows you to create .html files, which at its core is what a P5.js program is. Type this into your basic text editor:

<!DOCTYPE html>
<html>
	<head>
		<title>P5.js Example</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
		<script>
			function setup(){
				createCanvas(500, 500);
				background(64);
			}
			
			function draw(){
				fill(255);
				ellipse(mouseX, mouseY, 20, 20);
			}
		</script>
	</head>
	<body>
	</body>
</html>

Then save this to a file that ends with .html. I’m doing to call mine index.html and save it to my desktop.

To run your code, open the file with your web browser. You can right-click the file and then go to Open With... and choose your web browser, or you can type the file’s location directly in the URL bar. For example, my file is named index.html and it’s saved on my desktop, so my file’s URL is:

file:///C:/Users/kevin/Desktop/index.html

Anyway, open your file in your browser and you should see something like this:

P5.js Example

Try changing the fill(255); line to be fill(255, 0, 0); instead, then save the file and refresh the page. You should see red circles instead of white.

Note that you can also save your P5.js code to a separate file, for example sketch.js. Then in your index.html file, you’d load that file using <script src="sketch.js"></sketch>.

Using a basic text editor is great if you want full control over everything. It also allows you to work on P5.js sketches without an internet connection (you just have to download a local copy of p5.js instead of using the cloudflare link).

P5.js Online Editor

P5.js also has an online editor you can use. Go here: https://alpha.editor.p5js.org/

You should see something like this:

P5.js Online Editor

The P5.js online editor allows you to write HMTL and JavaScript directly in your browser. Try typing this into the editor:

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

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

Then press the play button and move your mouse inside the preview panel, and you should see this:

P5.js Online Editor

You can also edit the underlying .html file. Click the > symbol to the left of the code panel to see a list of the files in your sketch. Then click on index.html. You should see this:

P5.js Online Editor

You can edit the .html to change what’s displayed around your sketch. Try adding <h1>Hello World</h1> to the <body> of your HTML, and click the run button again.

The P5.js online editor is good if you want a self-contained editor and don’t mind relying on an internet connection. You can also login to save your sketches. And it even works from mobile devices!

Processing Editor

You can also create P5.js sketches from the Processing editor. Go to the mode dropdown in the upper-right corner (by default it says Java), and then click Add Mode.... In the Contribution Manager dialog that pops up, click p5.js Mode and then click the Install button in the lower-right corner.

Install P5.js mode

When the download and install finishes, just close the Contribution Manager dialog.

Then click the mode dropdown again (it probably still says Java) and then click p5.js. You should see this:

Processing editor P5.js mode

Try typing this into the editor:

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

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

Then click the play button, and the Processing editor should automatically open your web browser to a local server that Processing is running for you. You should see something like this:

P5.js local server

You can edit the index.html tab to change what’s displayed around your sketch. Try adding <h1>Hello World</h1> to the <body> of your HTML, and click the run button again.

You can save you sketch to see the files you’re working with. I saved my sketch to my desktop and named it MySketch, which created a directory named MySketch on my desktop. In that directory, I see an index.html file and a MySketch.js file, as well as a libraries directory that contains a p5.js file. Note that these are just regular text files that will work with a basic text editor.

The Processing editor is a good choice if you’re already used to it or if you need a dead simple way to launch your own server (some features don’t work with file:// URLs, so you need a server).

CodePen

CodePen is another online editor that allows you to create HTML and JavaScript directly in your browser.

Go to https://codepen.io/ and then click the Create button, and then the New Pen button. That takes you to the CodePen editor.

From there, go to the Settings button and click the JavaScript tab. In the Add External JavaScript section, you want to add P5.js. Go to the P5.js CDN page to find the latest version of P5.js, and paste that URL in the Add External JavaScript section of the CodePen settings dialog. It should look like this:

CodePen settings

Then click the Close button, and type this into the JavaScript section of the editor:

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

function draw() {
  fill(255);
  ellipse(mouseX, mouseY, 20, 20);
}

You should see something like this:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

(Click the Run Pen button to see the embedded CodePen editor.)

I use CodePen because it allows me to embed a code editor directly in these tutorials. But I’ll try to format the code so it’s easy to copy and paste into any of the other editors as well.

Summary

These are a few of the most popular P5.js editors, but there are a bunch of other options. For example, OpenProcessing is an online editor and community built around Processing and P5.js, and Sublime Text is another basic text editor. The best advice I can give you is to try a bunch of different options out and see which one you like the best.

No matter what you choose, the basic steps are the same: you edit P5.js (which is just JavaScript) and HTML, optionally add files (like images or other libraries), and then run your code in a web browser. And don’t forget to check the JavaScript console for errors!