cageehv

<h4>Embed your P5JS sketches in posts and pages in a responsive way</h4>
<p>
<strong>1. Create a new sub-directory in the /uploads/p5js/ directory (using FTP):<br />
</strong></p>
<p><strong>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.</strong></p>
<p><strong>3. Add a short code to your post or page</strong></p>
<p><strong>Attributes</strong><br />
<strong>sketchfolder</strong>: the name of your P5JS sketch (REQUIRED)<br />
<strong>canvaswidth</strong>: the width of the sketch, should be the same as in your creattecanvas() statement (REQUIRED)<br />
<strong>canvasheight</strong>: the height of the sketch, should be the same as in your creattecanvas() statement (REQUIRED)<br />
<strong>bordersize</strong>: size of the border in pix (OPTIONAL, default: 0px)<br />
<strong>bordercolor</strong>: color of the border around the sketch (OPTIONAL, default: no border, only works when you also define a bordersize)</p>
<h4>Author</h4>
<p>CAGE Web Design | Rolf van Gelder, Eindhoven, The Netherlands – http://cagewebdev.com – http://rvg.cage.nl</p>
<h4>Plugin URL</h4>
<p>http://cagewebdev.com/responsive-p5js-for-wp-wordpress-plugin/</p>
<h4>Download URL</h4>
<blockquote class="wp-embedded-content" data-secret="TGiLFLFwaY"><p><a href="https://wordpress.org/plugins/responsive-p5js-for-wp/" rel="ugc">Responsive P5JS for WP</a></p></blockquote>
<p><iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“Responsive P5JS for WP” — Plugin Directory" src="https://wordpress.org/plugins/responsive-p5js-for-wp/embed/#?secret=Qxr1A22Xqw#?secret=TGiLFLFwaY" data-secret="TGiLFLFwaY" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<h4>Disclaimer</h4>
<p>NO WARRANTY, USE IT AT YOUR OWN RISK!</p>
<h4>Plugins by CAGE Web Design | Rolf van Gelder</h4>
<p>WordPress plugins created by CAGE Web Design | Rolf van Gelder<br />
http://cagewebdev.com/category/news-tech-art/wordpress/</p>


Responsive P5JS for WP

Embed your P5JS sketches in posts and pages in a responsive way

<h4>Embed a ProcessingJS sketch (http://processingjs.org) in your post or page with this plugin</h4>
<p>You can use the shorttag (<strong>[pjs4wp]…[/pjs4wp]</strong>) in two different ways:</p>
<p><strong>1) Put the actual ProcessingJS code in a post or page, for instance:</strong></p>
<p>[pjs4wp]<br />
void setup()<br />
{<br />
  size(200, 200);<br />
  text(“Hello world!”, 50, 50);<br />
}<br />
[/pjs4wp]</p>
<p><strong>2) Use an existing ProcessingJS .pde sketch like this:</strong></p>
<p>[pjs4wp url=”/wp-content/uploads/my_sketch.js” bordercolor=”#000″][/pjs4wp]</p>
<p><strong>IMPORTANT:</strong><br />
RENAME YOUR <strong>.pde</strong> FILE TO <strong>.js</strong> BEFORE UPLOADING!<br />
So in the example: rename your original <strong>my_sketch.pde</strong> file to <strong>my_sketch.js</strong>!<br />
Some servers / browsers are not happy with the .pde extension, that’s why…</p>
<h4>Example</h4>
<p>See a live example here:<br />
http://rvg.cage.nl/rvglife-internet-2014/</p>
<h4>Author</h4>
<p>CAGE Web Design | Rolf van Gelder, Eindhoven, The Netherlands – http://cagewebdev.com – http://rvg.cage.nl</p>
<h4>Plugin URL</h4>
<p>http://cagewebdev.com/processingjs-for-wordpress</p>
<h4>Download URL</h4>
<p>https://wordpress.org/plugins/processingjs-for-wordpress</p>
<h4>Disclaimer</h4>
<p>NO WARRANTY, USE IT AT YOUR OWN RISK!</p>
<h4>Plugins by CAGE Web Design | Rolf van Gelder</h4>
<p>WordPress plugins created by CAGE Web Design | Rolf van Gelder<br />
http://cagewebdev.com/category/news-tech-art/wordpress/</p>


ProcessingJS for WordPress

Embed a ProcessingJS sketch (http://processingjs.org) in your post or page with this plugin

Responsive P5JS for WP vs ProcessingJS for WordPress