P5JS and an editor

Using an editor

Setup with a text editor, I recommend the atom text editor. There are some details of how to set up here http://p5js.org/get-started/ under the environment section.

  • You can set up atom with a server package by going to the Atom menu Packages > Settings View and search for atom live server.
  • Using this package “cmd option L” (starts server). In the browser go to http://localhost:3000/ and you will see it.
  • To see Atom shortcuts go to “cmd shift P” and you will see the server options when you press s. Choose the port number you want to use.

Overview P5 file structure:

If you are not using libraries or external content like fonts, images or sound files, you can probably launch your p5 sketch by double clicking the html file. If you are using these things and you want to preview your sketch, you will need to launch the server in the folder where your sketch is located.

Note that if you open a folder, run the atom server in that folder and then the paths to your p5js files are located outside of that folder, your server will not be able to access them. To solve this you have two options, either open the parent folder and run the server there. Or update your paths to an online version of p5. There are links to online versions of p5js here:

https://cdnjs.com/libraries/p5.js/

Eg. by replacing your path to the file with this path to a url:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>

Terminal

To run a server, you are first going to want to become familiar using the terminal. The terminal provides “shell” access to your computer. You can browse directories and execute applications via text-based commands. See the tutorial on getting this set up here under install.

Terminal

Setting up a server on Mac and Windows

Mac has an inbuilt server so do not need to install anything new. Windows will require you to install Python to get a server set up. Follow the download and installation instructions here for Python 2.7.X.

  • You will also need to make sure that Git Bash recognizes python. You can do this temporarily with this command in Git Bash: PATH=$PATH:/c/Python36/ (or whatever version of python you are running). However if you want this to be permanent you’ll need to add c:\python36 to your system environment variable path. Here is how you access that..

Running Python Simple Server

Your job is to get terminal to point to the directory on your computer where you are storing your p5.js work. On my computer I’ve got a ton of examples in a directory at nyu/creativecoding/week11/final-1 . So I’m going to browse to it by doing the following.

$ cd /Users/tegabrain/Documents/nyu/creativecoding/week11/

(You don’t need to type the ‘$’ I’m just using it to represent a prompt.)

Once I’m there, I can start up a web server with the following command.

For python 2 run:

$ python -m SimpleHTTPServer 8000

For python 3:

python3 -m http.server 8000

You should then see:

Serving HTTP on 0.0.0.0 port 8000 ...

This means the server is up and running at localhost on port 8000. And this means I can type http://localhost:8000/ into the address of a web browser and I’ll see:

localhost

Checking the for errors when working with an editor

  • Don’t forget to check errors and print statements in the javascript console log.

*Open the console from the view menu*

*View console for errors*

  • In Safari you have to go into preferences >> Advanced>> and turn on the developer menu to find there.