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.

10 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

  7. nexusbug says:

    Hello, I have a newbie question related this topic.

    I am trying to show my sketches embedded in my blog posts using .

    WordPress is installed in the root directory and I don’t want to move it to a subdirectory. However, wordpress sees the other non-wordpress directories which has my sketches uploaded and therefore I can not access the html file of the sketch when I type the URL as in your example. Here is the URL example im talking about: http://weegreenblobbie.com/p5js/001_bouncing_points/

    I am very new to these but with some search, I tried modifying .htaccess file. Tried RewriteEngine Off, Rewritecond, RewriteBase methods. Nothing worked. Only it went from a wordpress page showing ‘content not found’ to a page that gives 404 error without wordpress template. Somehow the URL doesn’t see the index.html file in that directory.

    I also tried uploading the html and sketch file to Github and get the reference from there, I could not make it work neither.

    Can you help me please??

    • nexusbug says:

      Sorry, here is the part that got deleted by mistake: “I am trying to show my sketches embedded in my blog posts using iframe or object data as your example here.”

      • Nick says:

        Make sure your directory has the correct permissions. For example, you should be able to view your sketch independent of WordPress, like my 001_bouncing_points, it’s viewable outside of WordPress. Once you have that working, then embedding it should be easy. Hope that’s helpful.

Leave a Reply