Processing Sketch in Squarespace Blog / by Ryan Morrison

I recently discovered Processing and was immediately inspired to see a simple example sketch rendered in my blog. Following an extensive search, I discovered many people have asked how to accomplish this in Squarespace, yet very few have provided a solution. I did find a couple of promising answers with Nathan Melehan and Tom Alexander. Unfortunately, neither solution produced results for me, but they did provide enough information to figure it out rather quickly.

This tutorial assumes you are working with or are familiar with Processing — if not, check out the simple IDE & programming language used for creating visual graphics and art.

First, processing.js or processing.min.js must be uploaded to your Squarespace account. This is achieved either through having a Squarespace developer account or by using this method.

In a blog page, use a code block to link to the uploaded processing.js file: 

code_block_injection.png

While still in the code block, the actual Processing code must be included inside a script tag, and the canvas where the code is rendered must also be defined. Your code block should look like this with processing code of your choice (remember to change the site-link to your own): 

<script src="https://link-to-your-site-snj9.squarespace.com/s/processingmin.js"></script>
<script type="text/processing" data-processing-target="processing-canvas">

    // actual processing code here
    
</script>
<canvas id="processing-canvas" tabindex="0" width="600" height="300" style="image-rendering: optimizequality !important;"> </canvas>

Which produces this result:

Here is the processing code I'll use:

void setup(){
  size(300, 250);
  smooth();
  noStroke();
}

void draw(){
  fill(random(0, 255));
  ellipse(mouseX, mouseY, 30, 30);
}

The above example is interactive and will not work well in a mobile browser. Here is another render that should work universally:

It should be noted that for more complicated graphics, this method of including processing code inline is inefficient. I will experiment with linking to a separate processing.pde file and post the results soon.