Skip to content

Showing p5js in Eleventy

Some off you may have p5js work that you want to show on a page in 11ty. With a few setup tricks this is very possible.

Video Walkthrough

This video walks through how to set up the HTML and p5js JavaScript file and then where to put the code in 11ty.

Written Instructions

  1. Show your canvas in a specific div. This step is optional but will give you more flexibility.
    • Create a div with an ID attribute on your web page where you want your p5js canvas to show.
    • <div id="sketch"></div>
    • 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:
    • var canvas = createCanvas(640, 640);
    • canvas.parent('sketch');
    • It is important that the ID matches exactly what you put in the parentheses: id=”sketch” and parent(‘sketch‘)
  2. Create a markdown file for you page in 11ty. Remember to add proper Front Matter for your site
  3. Add in the HTML for the page including links to p5js library and

Step 1: Show your canvas in a specific div. This step is optional but will give you more flexibility.

Create a div with an ID attribute on your web page where you want your p5js canvas to show: <div id="sketch"></div>

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: var canvas = createCanvas(640, 640); canvas.parent('sketch');

It is important that the ID matches exactly what you put in the parentheses: id=”sketch” and parent(‘sketch‘).

 <div id="sketch"></div>
    var canvas = createCanvas(640, 640);
    canvas.parent('sketch');

Step 2: Add your p5js JavaScript file to the main js folder for the project

  • 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.
  • It is important that the p5js code file is inside of the js folder where all JavaScript is. That is important because it is a passthrough folder so 11ty won’t change it. If you put the JavaScript file somewhere else that is not a passthrough folder it will not work.

Here is an image of the file in the JavaScript js folder (in this example it is spongebob.js).

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.

Step 3: Create a markdown file for you page in 11ty.

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.

---
title: Spongebob
layout: base
pageClass: projects
tags:
  - work
---
<section id="container">
    <h1>Spongebob</h1>
    <div id="sketch"></div>
    <p><b>Description:</b>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.</p>
</section>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.2/lib/p5.min.js"></script>
<script src="/js/spongebob.js"></script>

NOTE: in the script tags above:

  • The p5js library is included through a CDN (content delivery network)
  • The p5js code is in a file named spongebob.js and this is inside of the js folder where all JavaScript is.

That is it, you should be able to see the page with the p5js canvas!

Tags:

Leave a Reply