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!
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:
|
1 2 3 |
<object data="p5js/001_bouncing_points/index.html" width="500" height="275"> ERROR: failed to load html object! </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!
Pingback: P5js player widget in pure javascript | weegreenblobbie.com