Sites that have been used to integrate p5js on the page:

• Blue Squares - Happy Coding
• Simple p5 sketch by Benjamin Habert
  • p5 Portfolio

Then, I implemented a widget. Setting up p5js widgets: guide to the setup

In order to include a P5.js sketch in the post:

• Import the p5.js library as a dependency. You can complete the front-matter of the post like this:

---
dependencies:
    - p5
---

• create in div in the markdown document of your post and include the javascript file (relative path from the markdown document). Note that we gave the div a custom id.

<div id="simple-sketch-holder">
    <script type="text/javascript" src="simple_sketch.js"></script>
</div>

• in your javascript file, make sure to link the canvas to this specific div. See the documentation for more information.

function setup() {
  canvas = createCanvas(710, 400);
  canvas.parent('simple-sketch-holder'); 
  // this ensures that the sketch will be positioned properly
}

Note: using the method, you can only include a single sketch per file. See here if you want to have several sketches running simultaneously.