Language Settings

Processing fun times JavaScript quirkiness

Processing simplicity times JavaScript flexibility

Processing intuition times JavaScript power

Processing creativity times JavaScript dynamism

Processing community times JavaScript community

the power of Processing times the reach of JavaScript

Get Started

This page walks you through setting up a p5.js project and making your first sketch. If you'd like to start with the new p5.js Web Editor, you can jump down to Your First Sketch.

Download and File Setup

The easiest way to start is by using the empty example that comes with the p5.js complete download.

If you look in index.html, you'll notice that it links to the file p5.js. If you would like to use the minified version (compressed for faster page loading), change the link to p5.min.js.

<script src="../p5.min.js"></script>

Alternatively, you can link to a p5.js file hosted online. All versions of p5.js are stored in a CDN (Content Delivery Network). You can see a history of these versions here: p5.js CDN. In this case you can change the link to:

<script src="[p5_version]/p5.js"></script>

A sample HTML page might look like this:

    <script src="[p5_version]/p5.js"></script>
    <script src="sketch.js"></script>

You can also start with this template from codepen.


You can use the code editor of your choice. Instructions for getting set up with Sublime Text 2 are included below, other good editor options include Brackets, Atom and OpenProcessing. If you are a screen reader user and not using the p5 web editor, you may want to use Notepad++ or Eclipse.

Open Sublime. Go to the File menu and choose Open... and choose the folder that your html and js files are located in. On the left sidebar, you should now see the folder name at the top, with a list of the files contained in the folder directly below.

Click on your sketch.js file and it will open on the right where you can edit it. p5 starter code opened up in sublime editor.

Open the index.html file in your browser by double clicking on it in your file manager or type: file:///the/file/path/to/your/html in the address bar to view your sketch.

Your First Sketch

Processing users may want to check out the Processing transition tutorial.

In your editor, type the following:

function setup() {


function draw() {
  ellipse(50, 50, 80, 80);

This line of code means "draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels".

Save your sketch and refresh your page view in your browser. If you've typed everything correctly, you'll see this appear in the display window:

Note: If you are using a screen reader, you must either turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn about using p5 with a screen reader click here and to learn more about the accessibility library here.

canvas has a circle of width and height 50 at position 80 x and 80 y

If you didn't type it correctly, you might not see anything. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, and the line should end with a semicolon.

One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. The browser isn't always smart enough to know what you mean, and can be quite fussy about the placement of punctuation. You'll get used to it with a little practice. Depending on the browser you are using, you can also see errors by looking at the JavaScript "console". In Chrome, for example, this is under View > Developer > JavaScript Console.

Next, we'll skip ahead to a sketch that's a little more exciting. Delete the text from the last example, and try this:

function setup() {
  createCanvas(640, 480);

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

This program creates a canvas that is 640 pixels wide and 480 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black. We'll explain more about the elements of this program in detail later. For now, run the code, move the mouse, and click to experience it.

canvas has multiple circles drawn on it following the path of the mouse

What Next?

Parts of this tutorial were adapted from the book, Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly / Make 2015. Copyright © 2015 Lauren McCarthy, Casey Reas, and Ben Fry. All rights reserved.



Processing p5.js Processing for Android Processing for Pi

Processing Foundation