Contributing P5js Sketches

Table of Contents

• Awesome
• Where to Add My Files?
• What Files?
• Markdown and Front Matter
• Code

Awesome

You want to contribute. Thank you. Take a look at these informations below to make it as smooth as possible.

Where to Add My Files?

If you want to contribute a sketch please sort it into one of the category folders. If you are contributing your sketch to a category where there are no sketches for P5.js, feel free to create that folder.

Then give your subfolder a meaningful, short and url save name (no whitspaces, hyphens are cool, lowercase no special characters, english please).

.
├── chance
│   ├── basiljs
│   ├── p5js
│   └── processing
├── color
│   ├── basiljs
│   ├── p5js
│   └── processing
├── data
│   ├── basiljs
│   ├── p5js
│   └── processing
├── form
│   ├── 2d
│   └── 3d
├── grid
│   ├── basiljs
│   ├── extendscript
│   ├── p5js
│   └── processing
├── interact
│   ├── basiljs
│   ├── p5js
│   └── processing
├── motion
│   ├── p5js
│   └── processing
├── repeat
│   ├── basiljs
│   ├── extendscript
│   ├── p5js
│   └── processing
└── typography
    ├── basiljs
    ├── extendscript
    ├── frameworks_logo
    ├── p5js
    └── processing

What Files?

A PR for P5.js has to have the following files:

• index.md (see example below)
• index.js (with your code)
• out.png (an image of the example in 500 × 500 px PNG)
• thumb.png (a thumbnail of the out.png in 128 × 128 px PNG)

Markdown and Front Matter

The index.md for P5.js should look like the example below.

• The P5.js Tag should stay as well so the system can sort it where it belongs.
• The permalink should reflect
  1. The folder where you added your sketch (some of the categories)
  2. The name of your sketch, lowercase no whitespaces

Please change everything to your liking except the layout.

---  
layout: p5js
author: Your Name
author-url: https://my-homepage.tld
title: My cool example
tags: 
  - P5.js
  - color
  - repeat
  - Law of Something
permalink: /color/my-cool-example/
summary: A short summary of my example used for the overview pages.
---  

Your additional explanation or even additional images come here!  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

![](path/to/another/image.png)  

Make sure that the yaml frontmatter ist valid. For example wrong would be:

---
layout:p5js
---

The right way is (just a single whitespace):

---
layout: p5js
---

Code

The content of the the index.js file will be shown in a div called sketch. So a simple index.js could look like this:

var x = 0;
function setup() {
  var canvas = createCanvas(500, 500); // !this is important
  canvas.parent('sketch'); // !this as well
}

function draw() {
  ellispe(x, height/2, 10, 10);
  x++;
  if(x === width){
    x = 0;
  }
}

See the raw source, the folder on github and the rendered page of the HSB example.