Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hcaptcha-for-forms-and-more domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/cassenet/domains/cass-e.net/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hcaptcha-for-forms-and-more domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/cassenet/domains/cass-e.net/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wordpress-seo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/cassenet/domains/cass-e.net/public_html/wp-includes/functions.php on line 6114
p5.js Wordpress Plugin - Cass-E Design

Cass-E Design

Design, Experiments, Games, Resources

p5.js WordPress Plugin

Posted in

Update March 2021: I polished and published the plugin. Find out more here: p5.js WordPress Legacy Update or head straight to the GitHub.

This custom plugin allows me to embed p5.js projects in my WordPress posts/pages using a shortcode!

I use it in posts like AnAbstractHug, Pixel Summer Storm, and more!

As always if you're interested in one of my plugins, please contact me! I haven't released this officially yet because the code is unpolished, but if you're interested I can give it another pass!

The Grand Story

I started trying with a plugin called ProcessingJS for WordPress by Rolf van Gelder - Which was for ProcessingJS and not p5js! p5js scripts seem to require a blank document, with p5js and the script placed in the header.

My answer was an iframe, which lets you embed a mini-webpage into another page - this way, multiple p5js scripts can be added to posts!

I couldn't find a way to specify the contents of an iframe in-line in php, because iframes embed pre-existing content. I created a php template file for all p5js scripts called p5js-iframe.php for this.

Because the iframe was an independent document, I couldn't tell it directly what scripts to include, so I passed the script file locations via GET request / query string in the source url:

<!-- the iframe source url with file locations passed -->
iframe src="p5js-iframe.php?p5js=/wp-content/plugins/p5js-wp/js/p5.min.js&src=/media/AnAbstractHug.js"
<!-- the php document translating those into script embeds -->
<script type="text/javascript" src="<?php echo $_GET['p5js']; ?>"></script>
	<?php if (isset($_GET['src'])) { ?>
		<script type="text/javascript" src=<?php echo $_GET['src']; ?>></script>

This means I can't embed the script contents directly in the post. I can't pass the script to the iframe directly because urls have a max length on some platforms, so it might work inconsistently. This means I need to pass the link to an external file into the iframe for it to reference. I upload these like you would an image, and it seems to work fine. It's much cleaner than trying to edit the code inside the post anyhow.

Thanks for reading and I hope you found it interesting!

Previous Post

Next Post