Interactive p5.js Sketches in WordPress via CodePen

Today I have been doing some experiments in embedding interactive content into this blog:

It is a basic example; useful as a template to get started with. In the remainder of this post, I detail how I got here.

Codepen GIF - Find & Share on GIPHY

A quick search on the internet shows that various people have attempted to embed p5.js content in the past. All of the ones I’ve seen so far either embed an iframe manually, slip in php code, or some use some plugin. If you are under wordpress.com, the first 2 options is not possible and the last option requires a business plan.

The approach I use here needs none of that.

Prologue

For the past few weeks, I have been researching on creating interactive “sketches” that could provide a more engaging pedagogical tool for me to intuitively understand technical ideas. I figured that it would be great if it were also convenient to share it to everyone – no other platform achieves this better than the ubiquitous nature of the web. And, is it not even more convenient if I could just embed it to my blog?

Hence begins my search into web rendering engines like pixijs, web game engines like phaser, playcanvas, ctjs and Unity’s Project Tiny (I recommend gamefromscratch’s YouTube channel for more).

While these are great tools, they don’t exactly fit the definition of a “sketch”. These are more of a base to build complex systems, not something you can get up and running with a bit of code.

And so I found myself in p5.js, which takes after the core principles of Processing:

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

As I browsed p5.js examples, I noted it comes bundled with math libraries, 3D capabilities, audio + image + video processing, simulation systems – the whole enchilada. The best part about p5.js is that no install is required to get started. You could go to https://editor.p5js.org/ and an editor is up, with examples ready to be loaded with a few clicks

That blew my mind. How have I in all my years of meandering the internet have I not known this existed?

Fun fact: Processing also has a Python mode https://py.processing.org/

CodePen-Wordpress Integration

So that was p5.js. How did I integrate it to this blog? Well, as you can probably already see, I use CodePen and the magic of iframes. Most frontend developers would recognise CodePen (or its competitor JsFiddle) as a CSS, HTML, javascript playground.

While CodePen does give you a few options to embed into WordPress in their blog, the only one that will work under wordpress.com is when you copy-paste any CodePen Pen link on a paragraph on its own:

WordPress will then auto-magically convert it to some widget where your visitors can interact with. This behaviour is also documented in WordPress.com CodePen support page, which has this adorable gif:

OMG Wapuu is so cute!

CodePen & p5.js

While you can find p5.js CodePens, those are woefully outdated. It uses v0.2.13, which does not have touch support – the latest version is v1.0.0. Though you could add/change the js dependencies from the HTML block, I prefer to set these imports under Settings > JS > Add External Scripts:

As of this writing, v1.0.0 is the latest version – you should use whatever the latest version is at the time you are developing. Setting to always use the latest version can potentially break your pen in the future if there are breaking changes.

For some reason, web browsers add some margin space of 8px to the body element. This will appear as white space in your sketch. You can disable this by adding the following in the CSS block:

body {
  margin: 0;
}

Aside from this, there is practically no difference from the example sketches you see in p5.js except for these additional lines in the setup function that is tailored for touch devices:

// Fit canvas to available space factoring codepen's margin
let body = document.documentElement;
createCanvas(body.clientWidth, body.scrollHeight - 5);

// Prevent page pan when you drag about the canvas
body.getElementsByTagName("canvas")[0].addEventListener(
  "touchstart",
  (e) => { e.preventDefault(); },
  false
);

That little bit of code just stretches the canvas to whatever space CodePen has available, which varies when you use a phone or tablet or fridge. It also ensures that while you are interacting with the pen you do not also accidentally pan the web page.

Of course, instead of doing all of this, you could simply start off on your own by forking my pen.

The Learning Curve

Wow! That looks exciting – but do you need to know javascript, CSS and HTML?

IMHO, just javascript would be enough. And they do teach you javascript via the examples in p5.js – covering all the bare basics as if you never wrote a single line of code before. That bit of CSS you saw earlier is probably all you will ever need (until you decide to style DOM elements or whatnot).

There is also a nice beginner-friendly introductory video by Cassie Tarakajian, who is also the lead maintainer of the p5.js editor (source code on Github):

Closing Thoughts

So that is a brief tour of adding interactive sketches to WordPress – I hope you find it useful, or at least entertaining. In future posts I hope to create and embed more of these interactive widgets, so stay tuned!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.