I was using Tumblr to host my blog for quite a while but at some point I tried Processing, processing.js and finally p5.js. Embedding sketches was painful.
You have to adjust the blog settings and look for a hack to make the code work. Then you realize that the code is working on a desktop but totally fails on a mobile device. And you spend the whole day setting things up to get the web page loading in more than 5 seconds. Lame!
That’s why I decided to switch to static Jekyll website hosted on Github.
In this post I’ll show you how to add resizable p5.js sketches to your blog in a clean way.
I use p5-files that are stored remotely. Choose the version you prefer (I am using 0.5.8). Depending on how fancy you want to go with your sketches you either need only main p5.js file or all files:
Find the header file of your blog. Most probably that is
_includes/header.html file. Copy this code there
Here is the explanation of the code above:
- line 1: define the version of p5.js;
- line 2: load p5.js library only on the pages where the sketches are shown;
- line 3-5: load specified p5-libraries: p5.js, p5.dom.js or p5.sound.js
- line 8-12: load page-specific sketches.
Now your website can host p5.js sketches.
Let’s check that everything is working properly.
As I mentioned sketches will be page-specific. Therefore, we have to modify the YAML front matter of the page where we want to see the sketch. Add the following code at the top of the page
1 2 3 4 5 6 p5: - p5 - addons/p5.sound - addons/p5.dom sketches: - setup_p5
- Lines 1-2 and lines 5-6 are the necessary minimum to see the sketch on the page.
- Addons in the lines 3-4 are necessary if you plan to have sounds and DOM interactions.
Almost there! Decide where you want to see the sketch and copy this piece of code there
We will use the
id later on so put something meaningful there.
Time for the sketch! We have to put the code somewhere, right?
assets/sketches/setup_p5.js file. Open the file and copy this code there
Important tricks are hidden in the first lines of the
We set the size of the sketch canvas to the size of the underlying
div. After that we set where we want to show the sketch (in the
div with the
windowResized() function will trigger when the window size is changed adjusting the size of the sketch to the underlying
And here is the sketch that you should see!
Overall, I find this approach more elegant than any from the p5.js wiki since it makes your portfolio/website look more professional and mobile-friendly.