Introduction

P5JS is a Javascript Framework based on the Processing language.

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.
Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology.
There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

With this plugin you can embed your P5JS sketches in your WordPress site.
The sketch will be responsive: it scales automatically when the window is being resized.
 

Plugin download page

https://wordpress.org/plugins/responsive-p5js-for-wp

(generative art by Rolf van Gelder)

Instructions

1. Create a new sub-directory in the /uploads/p5js/ directory (using FTP):
   /uploads/p5js/[sketch_folder]
   (replace [sketch_folder] with the name of the P5JS sketch you want to embed, for instance /uploads/p5js/myfirstsketch)
   If you don’t like to use FTP, you can use a file manager plugin like:
   https://wordpress.org/plugins/wp-file-manager/

2. Upload all files and directories (index.html, scetch.js, libraries, etc.) of your P5JS sketch to the new WordPress /uploads/p5js/[sketch_folder] directory.
   NOTE: your sketch needs to have an index.html file!
3. Add a short code to your post or page:
   
   [p5js sketchfolder=myfirstsketch canvaswidth=566 canvasheight=378 bordersize=1 bordercolor=#aaa][/p5js]
   
   Attributes
   sketchfolder: the name of your P5JS sketch (REQUIRED)
   canvaswidth: the width of the sketch, should be the same as in your creattecanvas() statement (REQUIRED)
   canvasheight: the height of the sketch, should be the same as in your creattecanvas() statement (REQUIRED)
   bordersize: size of the border in pix (OPTIONAL, default: 0px)
   bordercolor: color of the border around the sketch (OPTIONAL, default: no border, only works when you also define a bordersize)

4. Questions?
   Don’t hesitate to send me an email.

5. You like this plugin?
   Please support the development of it with a donation. Thank you!
   
   
   
   
   

(click on the animation to change it)