INDEX - Coding Art in P5.js Processing

INDEX - Coding Art in P5.js Processing
p5.js Processing is an open source programming language and environment for creating static and interactive graphics with creative code. You can even code interactive games. But for this series of tutorials, we will be looking at how to create digital art with code.

Three Options for Coding p5.js Projects
The first option is to use the Processing Editor. If you are already coding in Java using the original Processing environment, you can now install the p5.js JavaScript library and use the same editor to code in p5.js. This is great for coders already comfortable with the Processing Editor. You can download the latest release for Linux, Windows and Mac OSX from

The second option is to use a code editor and a web browser. You can download the latest release of the complete p5.js JavaScript library file, a p5 sound file and a sample project from Of course, you can also link to the p5.js JavaScript library file hosted online.

The third, and the easiest, option is to use the online p5.js Editor. This editor is set up and ready to use. You can test the editor by going to If you want to save any of your sketches, you will need to create an account. Once you have an account, you can save your sketches, create collections of sketches and share your sketches. The only drawback is that you must be online to code your sketches. In these tutorials, we will be using the p5.js Editor.

The Artist Sketch
The first thing you will notice is that each p5.js project file is called a sketch. Why do we call the file a sketch? The Processing project was created to help people learn how to code using a visual and artistic form of learning. Most artists begin with a sketch and therefore they carried the concept over to coding art.

Although you can export your finished sketch as a finished game, animation or image, that isn't the only purpose for p5.js. You can get a lot of inspiration from coding art that can be carried over to your projects in creative software, such as Adobe Photoshop or Affinity Designer, or even traditional methods.

p5.js Resources
When just getting started, you might want to check out some of these resource links. The Processing Foundation has done a great job providing an extensive collection of information.

  • - p5.js main website
  • -download p5.js
  • - JavaScript that extends p5.js
  • - how to set up p5.js
  • - p5.js documentation
  • - sample tutorials
  • - example sketches
  • - Processing main website
  • - download Processing
  • Processing Foundation

INDEX - Coding Art in p5.js Processing

p5.js Basics

  • p5.js Processing Course - The p5.js Editor

Advanced p5.js

Screenshots used by permission. Processing (Java), p5.js (JavaScript) and (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2021 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.