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!
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:
<object data="p5js/001_bouncing_points/index.html" width="500" height="275">
ERROR: failed to load html object!
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!
It also looks to be running fine on my Android phone! Success!
10 Responses to Embedding p5.js processing sketches in WordPress posts