Adding examples

Lauren McCarthy edited this page Jan 19, 2016 · 27 revisions
Clone this wiki locally

Examples help demonstrate different programming concepts and functionality of the library. They can be found on the p5.js examples page, and run on the page, allowing people to edit and play with them. We are in the process of porting examples from the Processing site, as well as creating new ones, and would love your help.

Below are the steps below to add your own. If you do not want to attempt command line building of your examples, you can stop after the first two sections, and send an email to hello@p5js.org with your examples attached, clearly indicating their title/topic. Otherwise, follow through to the end and submit a pull request!

Make an issue

  1. Create a new issue on the p5js.org github repository listing the examples you are creating with your name, so efforts aren't duplicated.

Create your example

  1. First, build and test the example code using your own HTML file, linking to the most recent version of p5.js. You can find examples to port here.
  2. Please use two spaces tabs and see this style guide for more specifics about styling your code. Examples should typically be 710px wide, and a recommended height is 400px. Feel free to modify these dimensions, especially the height as appropriate.

  3. At the top of the JS file you create, add a heading using the template below. *The frame displaying your running example will default to the size you set with createCanvas() but if you'd like to specify an alternate size (maybe because you have elements outside the canvas, for example), add the @frame line.

/*
 * @name Your Example Name Here (This shows up on the examples page as well.)
 * @frame 710,400 (optional)
 * @description Write a description of your example here. This gets displayed
 * on the page underneath your example. You can use <br><br> to add a line
 * break. Please limit lines to 80 columns (total characters) long.
 */

Add your example to p5js.org

  1. When your example is created, place your single JS file with your code and heading (do not include the HTML or p5.js) in the examples/examples_src folder of the p5js.org repository.

    • Note that the subfolder determines the topic heading it displays under on the index. Add your file into the appropriate folder, or create a new one if necessary. The XX_ prefix determines the order the topics display in on the index page.
    • Your file can be named anything, but include an XX_ prefix before the name. This number (starting with 00) indicates the order that the files will show up on the page. The name of the link on the examples page is taken from the @name field in the JS file.
  2. If you have any extra files that need to be included (images, JSON, etc), place them in the examples/examples/assets/ folder. Try to keep these files small.

  3. Make sure you have nodejs installed. (Node is the tool we use to automatically build the examples page and individual pages for each example.) Using the command line, navigate to the examples/build_examples/ folder. First run the Node Package Manager to automatically install the packages we have listed as dependencies:

    npm install
    

    Then, To build everything, just type:

    node .
    
  4. View examples/index.php in your browser to confirm that your example got linked in, and follow the link to your example to see it running. Note that you will need to use a server to see the php page rendered. See the apache section in this tutorial for more info.

  5. Submit a pull request!

Questions?

Email hello@p5js.org for help!