Embedding p5.js processing sketches in WordPress posts

Spread the love

Yesterday I discovered the p5.js project by watching this video series.  I got excited and wrote my first sketch “bouncing points,” a classic that I once wrote as a java applet back in the 1990’s.  Very simple to do with p5.js.  I look forward to writing more experiments!

ERROR: Your browser doesn’t support the object tag!

javascript works fine in WordPress, one just switches to text mode while editing the post and paste in <script> tags and it works fine.  p5.js will even render the canvas correctly.  I did run into a problem though, the p5.js canvas element gets inserted at the bottom left of the page, below all the WordPress content:

As you can see, you might not notice that it’s working unless you scroll all the way down the page!

The solution: object tag

I found a workaround, I uploaded the p5.js code to my website, then in the WordPress post, I use an object tag to embed it into the post:

You have to size the object tag large enough for the created canvas to show up without scrollbars but it looks good on my PC.

Look, I can even insert a 2nd canvas!
ERROR: Your browser doesn’t support the object tag!

It also looks to be running fine on my Android phone! Success!

This entry was posted in computing. Bookmark the permalink.

7 Responses to Embedding p5.js processing sketches in WordPress posts

  1. Nick says:

    Did I just login with google to post a comment?

  2. Nick says:

    Looks like it’s working! I’m using the Super Socializer plugin.

  3. Nick says:

    Did I just comment from Facebook?

  4. Nick says:

    Works from my phone too!

  5. Terri says:

    This is a comment from my PC.

  6. Pingback: P5js player widget in pure javascript | weegreenblobbie.com

Leave a Reply