Getting Processing.js to Work with Github Pages
Here’s a super quick tutorial on setting up Processingjs with a Github Pages site!
I sunk an embarassing amount of time trying to get this to work myself, so hopefully someone out there on the internet will find this useful.
Grab a copy of Processing.js
Link on the Processing.js website here.
Link to their Gibhub repo here as well.
Include that file in your Github Pages repo
Mine lives in the root directory.
You can include it wherever you want, but just take note of the path to which you are saving.
Include Processing.js as a script
You want to have this line of code included in the header of any pages that have a Processing sketch:
I just threw it into my head.html file, in the /_includes/ folder. You can check that out the structure of that file here.
You should modify the text inside the quotes so that it points to wherever you decided to save the file.
Commit your sketches to your Pages repo
I have a sketches folder in my root directory. Again, it doesn’t really matter how structure your folders, just take note of the filepath.
Put a canvas where you want your sketch to show up
Put this line of code in your page wherever you want the sketch to appear:
If you need to include multiple files, just separate the names with spaces. Again, edit the filepath so that it actually points to your sketches.
Notes on troubleshooting
I found it difficult to debug Processing.js because I don’t really know enough about Javascipt, and there’s not much feedback available other than your sketch not working. I relied on this post, “Some notes on difficult to debug Processing.js errors” for help.
Two things that specifically gave me a lot of grief:
You can’t use Processing libraries with Processing.js
Here are some other resources that were super helpful to me: