Art of CodeArt of Code

The Art of Code is a MA/MFA class that I am teaching at Multidisciplinary New Media department in Paris College of Art. The course provides an introduction to coding for artists and designers who are willing to learn and use it as a form of creative expression.

This website documents
the course materials. If you have any questions, you can contact me on Twitter.

Setup

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.

Glitch.com

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.

Local Setup

The most advanced and most flexible option, but it requires you to make some choices (editor) and some setup (server).

Editor

"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:

Setup Environment



npm -v
# Should output 6.13.4 or higher

node -v
# Should output 12.14.0 or higher

p5js boilerplate 



# Install the dependencies
npm install

# Start the server
npm start

Boilerplate running!