Display Processing Sketches In Gatsby

Recently I have really gotten into using Processing (otherwise known as P3), an open-source graphical library, which uses the Java language to make Generative art.

Generative art refers to art that in whole or in part has been created with the use of an autonomous system. An autonomous system in this context is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist.

-Pulled straight from wikipedia is this fine, fine description.

Because I wanted to be able to easily share my art to a wider audience, creating a standalone file that people would have to download would be an issue for sharing it.

Luckily, the team that made Processing have also developed a javascript library based on the core principles of the java based library.

So today, I am going to walk you through the process I found for taking some generative art made in P3 and display it on a website using Gatsby.js

1. Setup

So to begin with you will want to have a processing sketch that you wish to display and a Gatsby website to display it on. If you need help with either of these there are plenty of other resources out there on the web.

Once you have these good to go you will need to convert your P3 (Processing in Java) sketch into a P5 (processing in JavaScript) sketch. They have a very similar syntax and a great tutorial to help with the transition can be found here

2. Install packages

We now need to go ahead and install two different packages into our project. I'm using npm but if your using yarn that is cool too. The first one is p5 and second is called react-p5-wrapper. Open your terminal and run the following:


npm install react-p5-wrapper --save 

npm install p5 --save

3. Creating the appropriate files

Now we want a place to store all of the sketches you decide to display on your website.
Lets create a folder in the components folder called sketches - we will store all our different P5 sketches in here.

Create a javasript file in here named something to do with your sketch to reference later e.g. blueWave.js
We want to make a function with an argument of p. I've mapped mine to a variable called blueWave and am exporting it.

  
    const blueBlobs = (p) => {

    //main sketch code goes in here

    }
    
    export default blueBlobs

3. Inserting your sketch

Now insert your code into the function. Sadly the conversion isn't completely over but is realitively simple. Basically any p5 function we want to add a p. to the start of it. An example of this is shown below.

  
    const blueBlobs = (p) => {

        p.setup = () => {
            p.createCanvas(500, 500, p.WEBGL)
            p.smooth()
            p.colorMode(p.HSB, 300)
        }
        
        p.draw = () => {
            p.background(0, 218.79, 269.4)
            p.stroke(0, 100)
            p.ortho(-500, 500, -500, 500, 0, 1000)
            p.directionalLight(255, 255, 255, 0, 50, -100)
            p.directionalLight(220, 220, 220, 50, 0, 0)
            p.ambientLight(100, 100, 150)
            //more cool code down here... but you probably get the point...

Once all that is done we just have to import it to where we want to display it. In the file where you wish to have it import P5Wrapper & import the sketch from the appropriate file.

    
    import P5Wrapper from "react-p5-wrapper"
    import blueBlobs from '../sketches/blueBlobs.js'

Then we want to call on our sketch from the JSX section where we want to display it.

    
    //other jsx code 
    <P5Wrapper sketch={blueBlobs} />
    //potentially even more jsx code this side

So if you type gatsby develop in your terminal you should be able to see the result of your hardwork. However we run into problems when trying to use gatsby build as the P5 package has a problem running because it needs access to the clientside 'window' property.

4. Fixing Gatsby build errors

First up add a conditional (ternary) operator to check if window is defined around the jsx where you are loading the sketches.

    
    {typeof window !== 'undefined' ? 
      <P5Wrapper sketch={blueBlobs} />
      : null}

Last step we need to go into the gatsby-node.js file and add the following lines of code.

  
  exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
        if (stage === 'build-html' || stage === 'develop-html') {
            actions.setWebpackConfig({
                module: {
                    rules: [
                        {
                            test: /p5/,
                            use: loaders.null(),
                        },
                    ],
                },
            })
        }
    }