{"id":3434,"date":"2024-04-18T10:56:14","date_gmt":"2024-04-18T14:56:14","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/?p=3434"},"modified":"2024-04-18T10:58:04","modified_gmt":"2024-04-18T14:58:04","slug":"p5js-in-11ty","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/p5js-in-11ty\/","title":{"rendered":"Showing p5js in Eleventy"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Some off you may have <a href=\"https:\/\/p5js.org\/\">p5js<\/a> work that you want to show on a page in 11ty. With a few setup tricks this is very possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Walkthrough<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This video walks through how to set up the HTML and p5js JavaScript file and then where to put the code in 11ty.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/g1kkz6jr3cqatc34vcc1h\/p5js-in-eleventy.mp4?rlkey=lqz30p2zp9pinl6ikfm320x3k&amp;st=071ht1al&amp;raw=1\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Written Instructions<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Show your canvas in a specific div. This step is optional but will give you more flexibility.\n<ul class=\"wp-block-list\">\n<li>Create a div with an ID attribute on your web page where you want your p5js canvas to show. <\/li>\n\n\n\n<li><code>&lt;div id=\"sketch\">&lt;\/div><\/code><\/li>\n\n\n\n<li>In the p5js code have your canvas assigned to a variable and then make the name of the ID you just made the parent of that variable:<\/li>\n\n\n\n<li><code>var canvas = createCanvas(640, 640);<\/code><\/li>\n\n\n\n<li><code>canvas.parent('sketch');<\/code><\/li>\n\n\n\n<li>It is important that the ID matches exactly what you put in the parentheses: id=&#8221;<span class=\"highlight\"><mark style=\"background-color:var(--nv-primary-accent)\" class=\"has-inline-color has-nv-text-dark-bg-color\">sketch<\/mark><\/span>&#8221; and parent(&#8216;<mark style=\"background-color:var(--nv-primary-accent)\" class=\"has-inline-color has-nv-site-bg-color\">sketch<\/mark>&#8216;)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Create a markdown file for you page in 11ty. Remember to add proper Front Matter for your site<\/li>\n\n\n\n<li>Add in the HTML for the page including links to p5js library and<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Show your canvas in a specific div. This step is optional but will give you more flexibility.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a div with an ID attribute on your web page where you want your p5js canvas to show: <code>&lt;div id=\"sketch\">&lt;\/div><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the p5js code have your canvas assigned to a variable and then make the name of the ID you just made the parent of that variable: <code>var canvas = createCanvas(640, 640);<\/code> <code>canvas.parent('sketch');<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is important that the ID matches exactly what you put in the parentheses: id=&#8221;<span class=\"highlight\"><mark style=\"background-color:var(--nv-primary-accent)\" class=\"has-inline-color has-nv-text-dark-bg-color\">sketch<\/mark><\/span>&#8221; and parent(&#8216;<mark style=\"background-color:var(--nv-primary-accent)\" class=\"has-inline-color has-nv-site-bg-color\">sketch<\/mark>&#8216;).<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;HTML&quot;,&quot;hasCustomCSS&quot;:false,&quot;customCSS&quot;:&quot;&quot;,&quot;otterConditions&quot;:[],&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\"> &lt;div id=&quot;sketch&quot;&gt;&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;application\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;hasCustomCSS&quot;:false,&quot;customCSS&quot;:&quot;&quot;,&quot;otterConditions&quot;:[],&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">    var canvas = createCanvas(640, 640);\n    canvas.parent('sketch');<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add your p5js JavaScript file to the main js folder for the project<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The p5js library can also be placed in this folder or included through a CDN (content delivery network). Look at the HTML in the next step for an example.<\/li>\n\n\n\n<li>It is important that the p5js code file is inside of the <strong>js<\/strong> folder where all JavaScript is. That is important because it is a passthrough folder so 11ty won&#8217;t change it. If you put the JavaScript file somewhere else that is not a passthrough folder it will not work.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an image of the file in the JavaScript <strong>js<\/strong> folder (in this example it is spongebob.js).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"332\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2024\/04\/p5js-in-js-folder.png\" alt=\"screenshot of the files area of VS Code 11ty project with an input folder named src and inside of that a folder named js and inside the js folder a spongebob.js file next to the other JavaScript files for the project.\" class=\"wp-image-3435\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2024\/04\/p5js-in-js-folder.png 266w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2024\/04\/p5js-in-js-folder-240x300.png 240w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create a markdown file for you page in 11ty.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Remember to add proper Front Matter for your site. Add in the HTML for the page including links to p5js library and your p5js code.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;HTML&quot;,&quot;hasCustomCSS&quot;:false,&quot;customCSS&quot;:&quot;&quot;,&quot;otterConditions&quot;:[],&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">---\ntitle: Spongebob\nlayout: base\npageClass: projects\ntags:\n  - work\n---\n&lt;section id=&quot;container&quot;&gt;\n    &lt;h1&gt;Spongebob&lt;\/h1&gt;\n    &lt;div id=&quot;sketch&quot;&gt;&lt;\/div&gt;\n    &lt;p&gt;&lt;b&gt;Description:&lt;\/b&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum reprehenderit aperiam tempore vitae iste et nisi neque quia sed. Delectus, neque dolore? Eveniet harum numquam mollitia, id magni laudantium ab.&lt;\/p&gt;\n&lt;\/section&gt;\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/p5@1.9.2\/lib\/p5.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;\/js\/spongebob.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">NOTE: in the script tags above:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The p5js library is included through a CDN (content delivery network)<\/li>\n\n\n\n<li>The p5js code is in a file named spongebob.js and this is inside of the <strong>js<\/strong> folder where all JavaScript is. <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That is it, you should be able to see the page with the p5js canvas!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial on how to show p5js project in an 11ty site.<\/p>\n","protected":false},"author":16,"featured_media":3433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[50,43],"tags":[51],"class_list":["post-3434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-eleventy","category-resource","tag-p5js"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/comments?post=3434"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3434\/revisions"}],"predecessor-version":[{"id":3438,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3434\/revisions\/3438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media\/3433"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media?parent=3434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/categories?post=3434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/tags?post=3434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}