Add a resizable p5.js sketch to the blog

4 minute read

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

{% assign p5_version = '0.5.8' %}
{% if page.p5 %}
  {% for lib in page.p5 %}
    <script src="{{ p5_version }}/{{ lib }}.min.js"></script>
  {% endfor %}
{% endif %}

{% if page.sketches %}
  {% for sketch in page.sketches %}
    <script src='/assets/sketches/{{ sketch }}.js' type="text/javascript"></script>
  {% endfor %}
{% endif %}

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

  - p5
  - addons/p5.sound
  - addons/p5.dom
  - 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

<div id="setup_p5_sketch" style="height: 300px; position:relative;" ></div>

We will use the id later on so put something meaningful there.

Time for the sketch! We have to put the code somewhere, right?

Create assets/sketches/setup_p5.js file. Open the file and copy this code there

var x = 100,
  y = 100,
  angle1 = 0.0,
  segLength = 50;

function setup() {
  // find the size of the underlying div
  var divWidth = $("#setup_p5_sketch").width();
  var divHeight = $("#setup_p5_sketch").height();
  var myCanvas = createCanvas(divWidth, divHeight);
  stroke(0, 100);

function draw() {
  var dx = mouseX - x;
  var dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - (cos(angle1) * segLength);
  y = mouseY - (sin(angle1) * segLength);
  segment(x, y, angle1);
  ellipse(x, y, 20, 20);

function segment(x, y, a) {
  translate(x, y);
  line(0, 0, segLength, 0);

// when the window is resized the canvas is resized accordingly
function windowResized(){
  var divWidth = $("#setup_p5_sketch").width();
  var divHeight = $("#setup_p5_sketch").height();
  resizeCanvas(divWidth, divHeight);

Important tricks are hidden in the first lines of the setup() function. 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 id="setup_p5_sketch").

The windowResized() function will trigger when the window size is changed adjusting the size of the sketch to the underlying div.

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.

Enjoy hacking!

Useful links:


Leave a Comment