!!! Caution, some of this code may be deprecated or no longer working. Proceed at your own caution and good luck !!!

Processing is such an excellent tool for realizing art inside of a computer.

However, the original project is over 10 years old and through this time there has been much advancement in the topic.

Enter P5.js

This project, a derivative of the original Processing by the same foundation, aims to bring this computer art workflow to the web.

Once realizing this possibility I wondered if it was possible to get a “Hello World” sketch from this code base onto my Squarespace website?

Turns out after some sincere tinkering it is indeed possible!

PLay right now!

If you are looking to do this on your own site here is what you need to do.

1) Make sure you have a Squarespace site. Personal plans work. Of course this works on other web CMS platforms but the steps may be slightly different.

2) Download the “P5.js” file from the official website.

3) Load this file onto your site. Easiest way it to make a blank page with a word. Highlight that word, make a link, choose file, upload the “P5.js” file, and then ensure it is selected. Grab the URL from this text link to the file. This whole step ensures the code lives on your site and is accessible.

4) Make another page to host your sketch on.

5) On this page drop in an “Embed” or “Code” block from Squarespace editor. For some reason the “Embed” works nearly the same as the “Code” block which isn’t available on Personal plans…

6) Past in the following code with the sketch you made in the P5 editor going in the middle. Note that some code uses another .js file as your code. I found this to be too troublesome when it comes to uploading files on Squarespace so I just opted to edit it in the code block.

<script src="https://www.yoursitename.com/s/p5.js"></script>

<script>

var cnv;

var subtract = 80;

function centerCanvas() {

  var x = (windowWidth - width) / 2;

  var y = (windowHeight - height) / 2;

  cnv.position(x, 20);

function setup() {

  cnv = createCanvas(windowWidth-subtract, windowHeight-170);

  centerCanvas();

  noStroke();

function draw() {

  background(int(map(mouseX,0,windowWidth,0,255)), 0, 255, 10);

  ellipse(mouseX, mouseY, int(map(mouseY, 0, windowHeight, 15, 70)), int(map(mouseY, 0, windowHeight, 15, 70)));

function windowResized() {

  centerCanvas();

  resizeCanvas(int(windowWidth-subtract), windowHeight-170);

</script>

7) Save and run! Everything should work though it might not and that is part of the fun!

8) For more resources make sure to check out all the details including the helpful post about embedding and positioning sketches here.

9) Worth noting is that the above code is something that *should* be responsive to page width and height. You can also code its absolute position. I found that if you didn’t it was hard to make something full width and also tough to make it stay in one place. If you really want to make it mobile ready put this code in your CSS with a page ID link so that interacting doesn’t also drag the page around:

    height: 100%;

    overflow: hidden;

    width: 100%;

    position: fixed;