p5js with Jekyll - processing

Question

I am quite new to Jekyll and I am not sure how I can go about creating a website with p5.js sketches embedded into it for a project that I am working on.
I suspect it has something to do with dependencies and I would much appreciate any help/pointers I can get!

Answer 1

There is nothing special about the combination of Jekyll and P5.js.
The important thing to understand is that the output of Jekyll is "just" regular HTML. You can include a P5.js sketch inside any HTML page. So you can include P5.js in Jekyll just fine.
Here is an example page that embeds a P5.js sketch in a website created using Jekyll. Here is the source markdown of that page. Jekyll takes that markdown and outputs HTML.
It's going to be hard to be more specific than that, but the general answer to your question is to focus on the HTML and focus on any errors you're getting.
If you still can't get it figured out, please post new question that includes a link to an example Jekyll repo that shows the error, and include the full error in your post.

Answer 2

I wondered the same and #Kevin Workman's examples worked. Note that you don't need to add the entire javascript code in a script object, you can point to it (I for one didn't know any of this until an hour ago)
You can add something like this in your post's .md file to reference a file called "myjavascriptfile.js". Note you can also use a hosted version of the p5.js file
<div id="sketch-holder"></div>
<script src="https://cdn.jsdelivr.net/npm/p5#1.1.9/lib/p5.js"></script>
<script src="myjavascriptfile.js"></script>
The "sketch-holder" thing gives you a bit more control over the sketch and requires you to add this to the setup() function:
function setup() {
....
const canvas = createCanvas(something, something)
canvas.parent('sketch-holder')
....
}