p5.js: A better (web based) IDE

Since writing my article about getting started with p5.js:

p5.js: Getting Started

I have since found a better Integrated Development Environment (IDE) for p5.js which also happens to be web based. This IDE is flexible, updated, and fast enough such that it is fun to experiment and save multiple project iterations easily. The web IDE can be found here:
http://alpha.editor.p5js.org/

As can be seen in the following graphic, this IDE allows you to code and preview on the same page. It also has a console for error messages at the bottom and a place at the top for typing in the name of the project you want to save.

Once the project is saved, you can use the File menu to Download the project in zip format. The downloaded zip can then be copied to your p5 project files folder and extracted to its own folder. This folder contains all the necessary project files. For example:

Then all you have to do is FTP the entire folder to your web host and point your browser at it. For example:
http://www.bluegalaxy.info/processing/p5/box_rotateXYZ/

A couple of other nice things about this web based IDE:

  • You can sign up/log in via your github account!
  • It has options that allow you to change the appearance to a darker background.