Developing p5.js Programs

By Michelle Ma (TA, Fall 2015, updates by Tom Cortina, Fall 2020)

Text Editor

Pick an editor to enter your program code. Sublime is popular but will gently bug you to send money. Atom is free. Komodo Edit 9 is free. Bluefish is also free, open-source, fast and simple on the Mac, but the windows install process seems to be a little more difficult than that of others.

All three editors have built-in support for adding colors to JavaScript programs (called “syntax highlighting”).

• Sublime (This is the editor we will be using in class for teaching.)
• Komodo Edit
• Bluefish (Follow installation instructions carefully for Windows - you may need to download some support libraries)

Project templates

For projects early in the semester (no sound, no attempts to access HTML content), you can use the template2023-p5only.zip file. Otherwise, use template2023-all.zip. The “-min” templates are for your personal website or other use outside of class where you want the fastest downloads. Read more about them below.

• template2023-p5only – p5.js only, no dom or sound addons.
• template2023-all - p5.js library and addons. [COMING SOON]
• template2023-p5only-min – the minimized “p5only” template. Lacks debugging and error checking support. [COMING SOON]

After downloading the template, expand it (probably you can double-click on it in your file browser/finder/explorer) and name the expanded directory to your project name. We’ll call this your project directory.

Reference Lab 1 for details on how to edit a program, save it and run it in a browswer.

Configuring Sublime

If you use Sublime, it will, by default, insert TAB characters into your code when you type the TAB key. Tabs are a problem because different editors and text displays interpret TABs differently, which means your carefully indented code may look like garbage in another editor, on Piazza, or on Autolab.

Please change your Sublime settings as follows:

• Open Settings using “Command-COMMA”: hold the Command key and type the comma key (“,”)
• In the “Preferences.sublime-settings — User” window, paste this code:

        
  // Settings in here override those in "Default/Preferences.sublime-settings",
  // and are overridden in turn by syntax-specific settings.
  {
  "tab_size": 4,
  // Set to true to insert spaces when tab is pressed
  "translate_tabs_to_spaces": true
  }
  

• Save your change using “Command-S”: hold the Command key and type the S key.
• Now, when you type the TAB key, it will indent to the next 4-space boundary by inserting spaces, not a TAB character.

The Chrome Developer Tools

Use the View / Developer / Developer Tools menu in Chrome to open the developer tools window.

Things you can do in Developer Tools:

• Set a “breakpoint” – by clicking on line “9”, I stopped the running program when it began to execute line 9. Notice the moving rectangle stopped in mid-flight.
• Examine variables – by clicking on the “+” near “Watch” I can “watch” a variable.
• Just type the name (here, I’m watching x and y) and the current values of the variables will be displayed.
• Error messages will be displayed in the console (at the bottom) – If your program is not well-formed, or if something goes wrong during execution (for example, you misspelled a command), you should see a red message in the console at the bottom.
• Printed messages appear in the console window – look up “print” function in the p5js reference materials.
• You can even execute JavaScript commands. Look for the “>” prompt at the bottom of the page. Type x = 1; and then restart the program by clicking on the breakpoint (line 9) to remove it, and clicking on the blue “continue” icon. You should see the red square jump back to the left because x was set to 1!