Development

Getting started

Interested in contributing? Awesome! First, figure out what you'd like to do (a good place to start is the issues list and development checklist):

Fix a bug -- If it's not on the issues list, add it. If it's already on this issues list, assign it to yourself or comment on the issue indicating you're working on it. Go ahead and fix it and submit a PR (see below for instructions for getting set up for development). We are also in the process of adding unit tests and more inline documentation, so if the function you are fixing doesn't have these, please consider adding these as well. Submit the change to the master branch. Need help finding an issue to fix? Check out this list of bite size issues suitable for new contributors (or peruse other issue labels for topics that catch your interest).
Implement a new feature(s) -- First, write to [email protected] to let us know you're interested! If it's not on the issues list, add it. If it's already on this issues list, assign it to yourself or comment on the issue indicating you're working on it. Note: new features will require tests and inline documentation!
- JS Style guide:
  - We recommend looking at idiomatic.js for a JS style guide
- Inline documentation:
  - Style guide for p5.js inline docs -- by formatting your documentation correctly, it will automatically show up in the p5.js reference.
- Unit tests:
  - See the testing section for how to do this.
  - This helps ensure that the code you write keeps working far into the future when further updates and changes are made.
Add unit tests or documentation for existing code -- Let us know which areas you're working on so we don't duplicate efforts! Submit the change to the master branch.
- See the guide for p5.js inline docs -- by formatting your documentation correctly, it will automatically show up in the p5.js reference (coming soon).
- See the testing section for how to add unit tests.
Add examples to the examples page -- Add to the examples on the p5js.org learning page. See this guide for details.
Add inline examples to the ref
- List of examples needed
- Guide for p5.js inline docs
Contribute in some other way -- Write to [email protected] and let us know what you're thinking! It is our intention that there should be many ways to contribute to p5.js, from writing code, to creating examples, tutorials and documentation, to thinking about workshops and education, to working on branding and design, and anything else you can dream up. Get in touch and we can talk about ways you might participate.

Setup

Download and install npm. The easiest way to do this is to just install node.
Install Grunt.
```
npm install -g grunt-cli
```

Fork and clone this library.

git clone [email protected]:YOUR_USERNAME/p5.js.git

Navigate into the project folder and install dependencies via npm.
```
cd p5.js
npm install
```
To create the library from src, run Grunt.
```
grunt
```
If you're continuously changing files in the library, you may want to run grunt watch:quick to automatically rebuild the library for you whenever any of its source files change.
Run grunt one last time to make sure all the tests pass, and submit a pull request.

Overview

lib/ Contains the concatenated p5.js and p5.min.js libraries, generated by Grunt.

src/ Contains all the source code for the library. The code is broken up into folders and files corresponding with the Processing reference page. Additionally, there is a core folder that holds constants, and internal helper functions and variables.

tests/ Contains unit testing files.

examples/ Contains code examples including a port of all of Dan Shiffman's Learning Processing, as well as an empty-empty example that demonstrates setting up a sketch, and examples related to specific tutorials.

Testing

With all new functions implemented, please include unit tests and inline documentation. A good example for how to format and write inline documentation can be seen in PImage. Examples of unit tests can be found in the test/unit directory. Directions for adding your own tests and including them are below.

The testing is done with grunt-mocha which uses mocha test framework with phantomjs. To get started:

Install dependencies.
```
cd p5.js/
npm install
```
Add test files corresponding to files in src (more info about Chai assert style TDD phrasing here).
Link to the src and test files in test.html.
Run the tests with grunt test.

Running tests in the browser

Sometimes it is useful to run tests in browser especially when trying to debug test failures. To run the tests in the browser:

Run the connect server. grunt connect -keepalive
Open test/test.html in your favourite web browser.

Master branch development

Fork p5.js
Make local changes
Commit and push changes
Submit a PR against the p5.js/master branch

Repositories

https://github.com/processing/p5.js - this repo contains the source code for the p5.js library, and the p5.dom.js addon library. The reference is also generated from this code, as the documentation and examples are located in the source code itself, maintained by Lauren McCarthy.
https://github.com/processing/p5.js-website - contains the code for http://p5js.org website, maintained by Lauren McCarthy.
https://github.com/processing/p5.js-sound - contains the source code for the p5.sound.js library, maintained by Jason Sigal.
https://github.com/processing/p5.js-editor - contains the source code for the p5 editor, maintained by Sam Lavigne.
https://github.com/scottgarner/p5.js-video - contains the code for Hello p5.js!, maintained by Scott Garner.

Alternative Setup - Docker

An alternative to setting up node, grunt, php, apache, and the p5.js & p5.js-website codebases is to use toolness/p5.js-docker. While this does require the installation of a tool called Docker, it potentially makes viewing and editing the p5 website with the latest documentation and libraries a lot easier.

http://p5js.org

processing/p5.js