Mark Uraine

p5.js + WordPress. Want to share some generative art on your own WordPress site? This is the plugin to make it happen. Add your custom p5.js code, and preview it in the Gutenberg editor before publishing it on your page or post.
<ul>
<li>Currently, this plugin does not work with <code>createCanvas(windowWidth, windowHeight)</code>. You’ll need to use actual integer values like, <code>createCanvas(700, 400)</code>.</li>
<li>Currently, this plugin does not include the <code>p5.dom.js</code> or the <code>p5.sound.js</code> libraries.</li>
</ul>
This project was bootstrapped with <a href="https://github.com/ahmadawais/create-guten-block" rel="nofollow ugc">Create Guten Block</a> under the <a href="https://github.com/ahmadawais/create-guten-block/blob/master/LICENSE" rel="nofollow ugc">MIT License</a>.
This project also uses the p5.js library which is free software under the <a href="http://p5js.org/copyright.html" rel="nofollow ugc">GPL License</a>.

p5.js Block

Makes it easy to add Processing to WordPress posts!

Run p5.js in your WordPress site with this Gutenberg block.

Florian Rieder

This p5.js Gutenberg block plugin is the perfect tool for showcasing your generative art or adding an extra level of visual interest to your website. With <a href="https://p5js.org/" rel="nofollow ugc">p5.js</a>, you can create interactive, dynamic, and customizable visuals that will keep your audience engaged and excited. Whether you’re an artist, designer, or developer, this plugin makes it easy to integrate your p5.js sketches into your WordPress website. Impress your visitors with your stunning generative art and take your website to the next level with this p5.js Gutenberg block plugin.
<a href="https://tastewp.org/plugins/easy-p5-js-block/" rel="nofollow ugc">Try it out on a free dummy site now !</a>
<h3>Acknowledgements</h3>
This plugin is similar to Mark Uraine’s <a href="https://wordpress.org/plugins/wp-p5js-block/" rel="ugc">p5.js block</a>, and is in fact reverse engineered from it, although very little of the actual code is reused (see <a href="https://github.com/mapk/p5js-block" rel="nofollow ugc">mapk/p5js-block</a>). I was prompted to develop this plugin due to encountering bugs, lack of display options, and mostly the lack of updates and support for this original plugin. I feel like it should be easier to insert p5.js artworks into WordPress websites and blogs, and this is my contribution to it (although it may be buggy, I try my best. Feel free to ask in the support forum, or open an issue or a pull request on <a href="https://github.com/florian-rieder/gutenbergp5" rel="nofollow ugc">Github</a>).
This project uses the p5.js library version 1.7.0, which is free software under the <a href="http://p5js.org/copyright.html" rel="nofollow ugc">GPL License</a>. Currently, this plugin does not include the <code>p5.sound.js</code> libraries.

Easy p5.js Block

Adds a Gutenberg block to easily add custom p5.js code in your pages and preview it as you edit.

p5.js Block vs Easy p5.js Block