Embedding P5.JS

We are using Lauren McCarthy’s p5.js-embedder, a plugin which embeds an interactive p5.js sketch into a WordPress blog. Here is an example:

sketch.js code

function setup() {
  createCanvas(640,160);
}

function draw() {
  background(255,200,200);
  line (0,0,          mouseX, mouseY);
  line (width,0,      mouseX, mouseY);
  line (0,height,     mouseX, mouseY);
  line (width,height, mouseX, mouseY);
  ellipse(mouseX, mouseY, 30,30);
}


Instructions for embedding:

0. Create your sketch using P5.JS.

1. Upload the sketch.js file (or whatever you’ve named it) to the WordPress Media Library. For the present time (V. 0.1, September 2014) the plugin only permits you to upload a single .js file.

2. While editing post, choose ‘Add Media’ and choose the uploaded JS file; it will
add a link in your post.

3. Add class=’p5-embed’ to the link to specify it should be parsed as a p5 sketch.
`<a href=’#’ class=’p5-embed’>your_filename</a>`

4. If you would like to specify the height and width of the frame of your sketch, use
the data-height and data-width tags (you can specify one or both of these).
`<a href=’#’ data-height=’400′ data-width=’600′ class=’p5-embed’>your_filename</a>`

5. By default the sketch and code are displayed. If you would like to hide the code,
use the tag data-nocode=’true’. You can also change the code font size with the tag data-fontsize=’9′ etc.:
`<a href=’#’ data-nocode=’true’ class=’p5-embed’>your_filename</a>`

Including media

To include external files (for example, an image via loadImage command) you will need to upload the files individually to WordPress and use the full blog URL or the upload in the JS code.