Three ways to work with p5.js

When the first alpha release of p5.js appeared in July 2014, it kicked off a hugely important development for the idea of Processing. A brief recap: Processing is now over 20 years old and was written in the Java programming language, which was very hot at the time. At the time, Java even allowed Processing apps to be embedded in web pages, but browser vendors eventually capped this feature for various reasons. In order to close the gap that this opened up and make the great ideas of Processing usable on the World Wide Web again, p5.js was developed.

Since the technologies of the World Wide Web are very complex, powerful and versatile, p5.js brings many more possibilities into play compared to Processing, but also a bit more complexity, especially when it comes to getting started with Creative Coding.

The question that arises at the very beginning is which code editor you should work with best. From my point of view there are three different possibilities, which I would like to explain here.

Option 1: The web-editor

The easiest and fastest way to work with p5.js is the official p5.js web editor. Provided you have an Internet connection, you can access it directly at https://editor.p5js.org/ and do not need to install anything to write code in p5.js. For smaller sketches and experiments this tool is absolutely sufficient. The editor basically has everything you need to get started quickly. However, if you are working on a larger project for a longer time, I would recommend you to go a step further, because with the web editor you will reach the limits at some point.

By the way, I would like to express here my greatest appreciation to the developers of the p5.js editor. Without people like Cassie Tarakajian, and the many contributors who put a lot of love and effort into the project, something like this would not be possible.

• Pros
  • easy to use
  • no installation needed
  • works smoothly
• Cons
  • all in one browser window. Can feel quite tight
  • all sketches are saved in the cloud
  • not that scalable

Option 2: The Processing application with p5.js mode

For those who have already worked with Processing and would like to work offline, the, the p5.js mode is interesting. It allows you to write p5.js code directly in the Processing app, which works super well according to my research. I myself would prefer the solution over the p5.js web editor, because it makes it much easier to store all my sketches on my own hard drive and not have to store everything in the editor cloud.

• Pros
  • keep everything on your hard drive
  • Great for people coming from Processing
• Cons
  • not sure if it works as stable as it should

Option 3: An advanced Code editor like Visual Studio Code

If you are working on more complex projects in p5.js, it is definitely time for you to take a look at Visual Studio Code. Microsoft’s code editor is free, open source and extremely versatile. It is the high-end professional solution for your web projects. However, the complexity of VSCode can be quite overwhelming and if you are a beginner, I would advise you against it for now, as you should be very mindful of your motivation.

For working with p5.js there are some utilities I would like to recommend to you. First, I use the Live-Server Extrension, which adds a button that runs your sketch on a web server. Clicking on “Go Live” opens a browser window where your sketch is running. Changes are injected directly into the browser window when you save the code, which is quite helpful.

For creating and managing p5.js sketches, there’s the p5.vscode extension by American media artist Sam Lavigne, who I really admire. Beyond that, there are many other extensions that I haven’t tried.

VSCode even has a built-in terminal, Git integration, and all sorts of other bells and whistles.

• Pros
  • extremely scalable
• Cons
  • most complicated
  • a bit overwhelming for beginners

Conclusion

In short, for complete beginners, p5.js Web Editor is probably the best choice. The simplicity and completeness of the tool will help you not to lose the overview. While processing for using p5.js is not really popular, it is definitely an alternative with a few advantages. To really break out of the confines of the web editor, VSCode is the best choice. It’s probably the last code editor you need to learn.

What is your favorite way to use p5.js? Or is there even another, better way to do so? Please post your idea on our Discord-server to spark a discussion!