How To Insert Processing Sketches Into WordPress Posts

Processing is an awesome tool to create visually impressive animations, demos and such like using simple coding.

I wanted to insert some Processing sketches into my posts to allow me to create interactive demonstrations – pretty cool right! Unfortunately, getting them to work in WordPress was a bit tricky so I thought it would be good to share how I managed it.

To prove this all actually works, here is one of the example sketches that comes with processing. Move your mouse over it for fractal fun. It’s mesmerising!

Step 1: Write Out Your Code

Create your code/demo/animation in Processing on your computer as you would normally and save it as a processing file which will have the extension .pde by default.

Step 2: Install MIME Types

Okay so to upload a file, you would normally go to Add Media >> Upload Files >> Select File and then navigate to your Processing sketch in the file browser and upload it, just like you would with a photo. Unfortunately, if you try this, you’ll get a big rejection because for security, WordPress does not like more unusual file types like the Processing .pde file type.

The way around this is to install a WordPress plugin which allows extra file types. It’s called ‘WP Add Mime Types’ and you can get it by going to Plugins >> Add New and then searching for WP Add Mime Types in the search bar. It should look like this:

Or you can google it, download the zip file and then install it manually, whichever suits you. Once you’ve got it working, press activate

Step 3: Add .pde File Extension To Accepted Types

The .pde file extension isn’t allowed by default by the WP Add Mime Type plugin so we will add it in ourselves. Under Settings, a new option should have appeared called ‘Mime Type Settings’. Click on that.

You’ll see a big list of supported file types and at the bottom there will be a white box called ‘Add Values’. Into this box, type “pde = text/plain” and press the save button at the bottom.

You should be able to scroll through the list of all the extensions and see this new entry in red:

This should now mean that WordPress will accept .pde file extensions and we can now upload our Processing sketch, hurray! That’s the worst bit over with.

Step 4: Uploading Your Sketch

Go to Add Media >> Upload File and then browse and select your desired processing sketch. It should upload quite happily and appear as follows:

The processing sketch is now uploaded in your files.

Step 5: Adding Processing.min.js

As processing sketches are written in Java which is largely incompatible with web browsers, it requires a clever piece of software to convert from Java to Javascript which does work in browsers. Luckily, this has been done for you. It’s called Processing.js and you can download it from this link here.

Click ‘Clone or download’ and you’ll get a .zip file containing everything you need. Extract the zip file onto your computer and navigate around until you find a file called ‘Processing.min.js’. It should look like this:

Okay, now you need to go back to Add Media >> Upload File and then this time select processing.min.js for upload.

It should appear in your files, as in the photo under step 4.

Great, now we’ve uploaded everything we need. It’s plain sailing from here.

Step 6: Add Code Into Your Post Or Page

Navigate to your desired post or page which you want to insert the sketch into. In the top right corner of the post or page, you’ll have to switch from ‘Visual’ to ‘Text’ in order to enter code.

Now you can scroll down to where you want to enter the animation and paste the following:

<script src="processing-1.0.0.min.js"></script>

<canvas data-processing-sources="hello-web.pde"></canvas>

This is all the code you’ll need – very compact. As you’ll see there are two parts in quotations, one for processing.min.js and one for a processing sketch ending with the .pde extension. All we need to do now is replace these two with the location of the two files you’ve uploaded.

Step 7: Enter The Correct File Locations

To get the right file location for the processing sketch, navigate to Add Media and then click on the processing sketch (.pde) which you uploaded earlier. On the menu on the right, at the bottom, there should be a url for the file. Mine looks like this: http://hartleyhacks.com/wp-content/uploads/2017/06/Pressure_Example_v3.pde

Navigate back to your post and in the ‘text’ view where you put the code, you can delete the default hello-web.pde between the quotations on the bottom tag and paste in the link you copied to your processing sketch.

Repeat exactly the same method for getting the file location for processing.min.js and paste the location of that into the quotation marks in the top tag. It should look like this once you’re done:

Step 8: Profit!

Now if you publish this post/page and logout of WordPress so that you’re just viewing it like a normal visitor, you should see your processing sketch working absolutely perfectly.

I say do the whole logout thing – it does work whilst you’re still logged in and previewing your post, but it tends to be a bit buggy. Don’t worry though, if your sketch worked in Processing, then once it’s published, it will work perfectly well for your readers.

Thanks for reading, I hope it helped 🙂

Happy hacking,

Robin

Leave a Reply