{"id":105,"date":"2016-07-29T15:46:16","date_gmt":"2016-07-29T15:46:16","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?page_id=105"},"modified":"2020-09-07T20:58:24","modified_gmt":"2020-09-08T00:58:24","slug":"embedding-p5-js","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/embedding-p5-js\/","title":{"rendered":"Embedding p5.js"},"content":{"rendered":"\n

We are using Lauren McCarthy’s p5.js-embedder<\/em>, a plugin which embeds an interactive p5.js sketch into a WordPress blog. Here is an example:<\/p>\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n createCanvas(640,160);\n}\n\nfunction draw() {\n background(255,200,200);\n \n line (0,0, mouseX, mouseY);\n line (width,0, mouseX, mouseY);\n line (0,height, mouseX, mouseY);\n line (width,height, mouseX, mouseY);\n \n fill (255); \n ellipse(mouseX, mouseY, 30,30);\n \n noFill(); \n rect (0,0, width-1, height-1);\n}<\/code><\/pre><\/p>\n<hr>Instructions for embedding:<\/p>\n<ol><li>Create and test your sketch using <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/developing-p5js-programs\/\" target=\"_blank\" rel=\"noopener noreferrer\">p5.js<\/a>.<\/li>\n<li>Don’t forget <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/dos-and-donts-of-style\/\">style guidelines<\/a>. In particular you must put spaces around comparison operators. <\/em>Even though <code>b<a<\/code> is valid javascript, <code><a<\/code> also looks like HTML, and WordPress will get very <\/em>confused (you will too).\n<ul><li>Even though your sketch is named sketch.js<\/em>, it is helpful to copy it into a new name that is something identifiable, such as julie-landscape.js. <\/em>(When you upload it to WordPress, you don’t want all of your files with the same name, sketch.js.)<\/li>\n<\/ul><\/li>\n<li>Create a WordPress post to contain your sketch. Start editing using the “+New : Post” menu item you should see near the top of every page when you use WordPress.<\/li>\n<li>While editing, at the point you want to insert your sketch, click the + (plus) symbol<\/strong> to add a new block, and select File<\/strong>, then Media Library<\/strong>. (Don’t click Upload after File since this doesn’t seem to like .js files.)<\/li>\n<li>Now, click Upload<\/strong> and drag your sketch code to the upload area, or select something already in your Media Library. (Do not upload your index.html file.) Then click Select<\/strong> at the lower right to insert the code into your post.<\/li>\n<li>Switch into HTML editing mode for this block. On the right side menu, make sure “Show Download Button” is turned off.<\/li>\n<li>Carefully, add <code>class='p5-embed'<\/code> to the link to specify it should be parsed as a p5 sketch, after the “a” tag but before the “href” option: <img loading=\"lazy\" class=\"alignnone size-full wp-image-39682\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2019\/08\/p5embed.png\" alt=\"\" width=\"680\" height=\"114\">Also, use the <code>data-width<\/code> and <code>data-height<\/code> options (you can specify one or both of these) to indicate the size of your canvas. Your embed code may look something like the following (note that we have broken this up onto several lines to make it more readable):<img loading=\"lazy\" class=\"alignnone size-full wp-image-39684\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2019\/08\/widthheight.png\" alt=\"\" width=\"649\" height=\"123\">The attributes <code>href<\/code>, <code>class<\/code>, <code>data-width<\/code>, and <code>data-height<\/code> can appear in any order between <code><a<\/code> and <code>><\/code>, and you can use single- or double-quotes around <code>p5-embed<\/code> and other values, or even skip the quotes around numbers). Optional: You can also change the code font size with the option <code>data-fontsize='9'. <\/code><code><\/code><\/li>\n<li>Click “Update” then “View Page” to test your embedded sketch in WordPress. Click “Edit Post” to return to editing.<\/li>\n<\/ol><h2>Important Restrictions and Workarounds<\/h2>\n<code>p5-embed<\/code> is not perfect and has some serious defects, but you can easily work around them:<\/p>\n<ul><li style=\"list-style-type: none;\">\n<ul><li>Width limitation: WordPress will clip your canvas to a width of 600, so <code>data-width<\/code> should be 600 or less.<\/li>\n<li>Some operators, in particular <code><<\/code>, can fool WordPress into thinking you are embedding HTML, so put spaces around operators<\/em> — this is the style we recommend anyway. Example: do not<\/em> write <code>head <body<\/code> in your code (those who know HTML will see why). Instead, write <code>head < body<\/code>(with spaces around <code><<\/code>).<\/li>\n<li>The <code>&<\/code> symbol in code comments is also known to create problems, even with spaces. Do not use the <code>&<\/code> character in any comments.<\/em><\/li>\n<li>To include external files (for example, an image via loadImage<\/em> command) you will need to upload the files individually to WordPress and use the full blog URL for the upload in the JS code. This means the version that runs on WordPress may not match the version that is loaded locally from your laptop.<\/li>\n<\/ul><\/li>\n<\/ul><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"We are using Lauren McCarthy’s p5.js-embedder, a plugin which embeds an interactive p5.js sketch into a WordPress blog. Here is an example: sketchfunction setup() { createCanvas(640,160); } function draw() { background(255,200,200); line (0,0, mouseX, mouseY); line (width,0, mouseX, mouseY); line (0,height, mouseX, mouseY); line (width,height, mouseX, mouseY); fill (255); ellipse(mouseX, mouseY, 30,30); noFill(); rect (0,0, … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/embedding-p5-js\/\" class=\"more-link\">Continue reading “Embedding p5.js”<\/span><\/a><\/p>\n","protected":false},"author":535,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/105"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":23,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":55346,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/105\/revisions\/55346"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}