Clone this wiki locally
- 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@example.com 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.
- JS Style guide:
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.
Add inline examples to the ref
Contribute in some other way -- Write to firstname.lastname@example.org 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.
- Download and install npm. The easiest way to do this is to just install node.
npm install -g grunt-cli
Fork and clone this library.
git clone email@example.com: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.
If you're continuously changing files in the library, you may want to run
grunt watch:quickto automatically rebuild the library for you whenever any of its source files change.
gruntone last time to make sure all the tests pass, and submit a pull request.
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.
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.
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
- Run the tests with
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
- 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.