{"id":212,"date":"2017-01-07T20:09:40","date_gmt":"2017-01-07T20:09:40","guid":{"rendered":"http:\/\/weegreenblobbie.com\/?p=212"},"modified":"2017-01-08T04:20:33","modified_gmt":"2017-01-08T04:20:33","slug":"welcome-2017","status":"publish","type":"post","link":"http:\/\/weegreenblobbie.com\/?p=212","title":{"rendered":"Embedding p5.js processing sketches in WordPress posts"},"content":{"rendered":"<p>Yesterday I discovered the\u00a0<a href=\"http:\/\/hello.p5js.org\/\">p5.js<\/a>\u00a0project by watching this <a href=\"https:\/\/www.youtube.com\/watch?v=BjoM9oKOAKY\">video series<\/a>. \u00a0I got excited and wrote my first sketch\u00a0&#8220;bouncing points,&#8221; a classic that I once wrote as a java applet back in the 1990&#8217;s. \u00a0Very simple to do with p5.js. \u00a0I look forward to writing more experiments!<\/p>\n<p><object data=\"p5js\/001_bouncing_points\/index.html\" width=\"425\" height=\"259\">ERROR: Your browser doesn&#8217;t support the object tag!<\/object><\/p>\n<p>javascript works fine in WordPress, one just switches to text mode while editing the post and paste in &lt;script&gt; tags and it works fine. \u00a0p5.js will even render the canvas correctly. \u00a0I did run into a problem though, the p5.js canvas element gets inserted\u00a0at the bottom left of the page, below all the WordPress content:<\/p>\n<p><a href=\"http:\/\/weegreenblobbie.com\/wp-content\/uploads\/2017\/01\/p5js_canvas_bottom_of_page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-234\" src=\"http:\/\/weegreenblobbie.com\/wp-content\/uploads\/2017\/01\/p5js_canvas_bottom_of_page-300x161.png\" alt=\"\" width=\"300\" height=\"161\" srcset=\"http:\/\/weegreenblobbie.com\/wp-content\/uploads\/2017\/01\/p5js_canvas_bottom_of_page-300x161.png 300w, http:\/\/weegreenblobbie.com\/wp-content\/uploads\/2017\/01\/p5js_canvas_bottom_of_page.png 699w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>As you can see, you might not notice that it&#8217;s working unless you scroll all the way down the page!<\/p>\n<h2>The solution: object tag<\/h2>\n<p>I found a workaround, I uploaded the p5.js\u00a0code\u00a0to my website, then in the WordPress post, I use an object tag to embed it into the post:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;object data=\"p5js\/001_bouncing_points\/index.html\" width=\"500\" height=\"275\"&gt;\r\n    ERROR: failed to load html object!\r\n&lt;\/object&gt;<\/pre>\n<p>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.<\/p>\n<p>Look, I can even insert a 2nd canvas!<br \/>\n<object data=\"p5js\/001_bouncing_points\/index.html\" width=\"425\" height=\"259\">ERROR: Your browser doesn&#8217;t support the object tag!<\/object><\/p>\n<p>It also looks to be running fine on my Android phone! <span style=\"color: #008000;\"><strong>Success!<\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday I discovered the\u00a0p5.js\u00a0project by watching this video series. \u00a0I got excited and wrote my first sketch\u00a0&#8220;bouncing points,&#8221; a classic that I once wrote as a java applet back in the 1990&#8217;s. \u00a0Very simple to do with p5.js. \u00a0I look &hellip; <a href=\"http:\/\/weegreenblobbie.com\/?p=212\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-212","post","type-post","status-publish","format-standard","hentry","category-computing"],"_links":{"self":[{"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=\/wp\/v2\/posts\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=212"}],"version-history":[{"count":15,"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":239,"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=\/wp\/v2\/posts\/212\/revisions\/239"}],"wp:attachment":[{"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/weegreenblobbie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}