There are multiple ways to code with p5.js. Some are quicker and easier than others. The Official p5.js Web Editor is the fastest way to start without worrying about things beyond p5.js. The official web editor is mostly individual, and collaboration beyond copy/paste is not possible (for now). Glitch is both flexible and easy to use. It is highly collaborative. Third option is to have a local setup: It is the most flexible one that enables you to establish your standards and libraries so you can easily re-use your code.
p5.js Web Editor
Very simple. Just head out to https://editor.p5js.org/ and start using it. Remember to create an account and save not to lose any work.
File uploading interactions are not crystal clear and require some getting used to, but overall, the editor is straightforward to use.
Tidy code is a convenient feature: Tap
Shift + Tab or click the menu item whenever you get lost with parenthesis and curly braces within your code.
It requires an account and a little bit of setup. Glitch is a tool for creating web apps, and it's not specific to p5.js. So you need to setup a basic node.js server, include p5.js scripts, and then you can start coding.
I've made a simple starter for Glitch. You can create a new project by cloning from git repo in Glitch.
You can clone the starter project from GitHub.
The most advanced and most flexible option, but it requires you to make some choices (editor) and some setup (server).
"Which editor is the best" is an everlasting debate. I think the most important is to choose one that you feel comfortable with. Over time you'll master it; you'll start using shortcuts, plugins to speed up your process.
Below are some of the popular editors:
- Atom is an open-source editor by GitHub.
- Visual Studio Code is also open-source and developed by Microsoft.
- Sublime Text is loved by many. You can test it for free, but you have to buy a license for continued use.
- Install npm (Node Package Manager) and Node.js. The easiest way to do it is to download from Node.js website.
- Check if they are both installed.
npm -v # Should output 6.13.4 or higher node -v # Should output 12.14.0 or higher
- Clone your forked repository in GitHub Desktop app
- Go to the local folder that you cloned the repository
- Install the dependencies
- Start the server
# Install the dependencies npm install # Start the server npm start
- Test in the browser: http://localhost:3004