I’m a big fan of the visual programming language Processing, which began as a collaboration between visual artists and computer scientists. While I use it for data visualization, a lot of people use it for art.  Here are some examples.

There’s only one problem — Processing’s dependency on Java, and Java’s broken relationship with the Web. Here’s a screenshot of a project page on OpenProcessing, the great online repository of Processing sketches:

openprocessing-not-working
Click on any image to make it bigger

I don’t know about you, but the Web is where I want to see my work, so working in a language that won’t work with modern browsers just isn’t acceptable to me. I can get “legacy sketches” using Processing/Java alone to work in Firefox, kind of — but I want someone to be able to click on a link and see my work without needing to download anything or follow a complicated set of instructions to get it to work.

Processing.js to the rescue!

Enter Processing.js, a library that translates Processing code into Javascript, which works in browsers old and new the world over (with a few exceptions, of course). Here’s how you get Processing.js working.  Click on any image to see bigger versions of the screenshots.

  1. Go to processingjs.org and download Processing.js.    There are two versions of Processing.js:  the full source code, and Processing-[current version number]-min.js.  The one you’ll want to download is processing-[current version number]-min.js.  The min.js version “minifies” the code, taking out things like comments on the code, spaces, and extraneous characters to make your page load as fast as humanly possible.

    download-processingjs-min

  2. Processing.js is a “library,” that is, a set of prewritten features and functions that your script (Processing aficionados call their scripts “sketches,” and that’s what I’ll be calling them from here on out) can “call.”  What does that mean?  Well, it means that you’re going to add one line to your sketch that points to the processing.js library.  Once you make that pointer, all of the features and functions of processing.js are available to your sketch.
  3. Open up WordPress and use the Text Editor. I’m going to use a WordPress site as the target example here, but the instructions I give here can really work on any web page.  First, open up your WordPress site and add a new entry.  Click the “Text” button at the upper right of the editing window.  You’ll need to do this because the visual editor inserts characters in your script that will make it not work.

    wordpress-text-editor

  4. Cut and paste the code from your Processing sketch.
  5. Put
     <script></script>

    tags around your code.  This tells the browser that the code in between them is a program, not just text to be displayed in the browser.

  6. Hit publish.
  7. It won’t work!  That’s because we need to do one more step:  we have to make the Processing.js library “available” to your sketch.
  8. Upload Processing.js to your site.  In order to make the library available to your sketch, it has to be on the web in a place where your sketch can see it.
  9. Click Media >> Add New on the left navbar of your WordPress site.  Click Select New Files.  Choose the processing-[current version number].min.js file that you downloaded earlier.

    upload-processing-min-js

  10. When you’re finished uploading the file, click Media >> Library.  You should see a list of files you’ve uploaded to your site.  Click on the processing-[current version number].min.js file you just uploaded.
  11. You’ll be taken to a page for the file you’ve uploaded.  Right under the title, you’ll see a button that says View Attachment Page.

    view-attachment-page

  12. When you click that, you’ll be taken to a page on  your blog with a link to the processing JS file.  Click on that.

    attachment-id-page

  13. You’ll see a page with a lot of code.  Copy the URL for this page.

    processing-min-js-image
    (Remember to click these images to see them fullsize so that you can read the notes!)

  14. Open your original blog entry for editing again.  Be sure to click the “Text” tab on the upper right before adding or editing anything.
  15. Now that you’ve got processing-min.js up on your site, you have to let your Processing sketch know where that file is so your sketch can make use of it.  So we’re going to add some things to the top and bottom of your sketch.  We started out putting your code between <script> tags, but we’re going to be adding to that.  In case you don’t have some pre-existing code to paste in here, I’ve added a very short Processing sketch just so you can test it.
    <script type="text/javascript" src="ADD URL FROM STEP 11">
    </script>
     <script type="text/processing" data-processing-target="processing-canvas">
     void setup() {
     size(200, 200);
     background(100);
     stroke(255);
     ellipse(50, 50, 25, 25);
     }
     </script>
     <canvas id="processing-canvas"> </canvas>
  16. Publish your blog entry and look at it on the web.
  17. You should see your Processing sketch right on your blog now!

Here’s what it will look like:



Troubleshooting and Debugging

The editor for WordPress sometimes adds characters to scripts that makes them not function.  You’ll notice that if you look at your script in the Text mode, then flip to Visual, then back to Text, that WordPress might have added code that looks like this:

CDATA issue

While in the Text Editor mode, remove those bits of code that WordPress added, and Publish your entry.  It should be working again.

Exceptions: Tweeted this one and someone immediately pointed out that NONE of this will work on Tumblr *shakes fist in Tumblr’s general direction*

Category : Uncategorized

7 thoughts on “Getting Processing.js Working On WordPress (Or Any Other Site): A Tutorial

  1. kmbrlynn says:

    Aww, this would be awesome, except WordPress prohibits uploading javascripts. After you do Step 9, it brings you to the “Upload New Media” page – right underneath the title it says this:

    Allowed file types: jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx.

    🙁

    1. lisawilliams says:

      Hi! Say, are using WordPress.com? I’m using WordPress installed on a MediaTemple GridServer.

  2. pete says:

    I’m hosting WordPress on my own site, and your script works for me, Lisa. Thank you. My own script failed because it had line returns in. Once I replaced those with spaces, it worked.

Leave a Reply

Your email address will not be published. Required fields are marked *