Adding Processing Sketches to WordPress Posts

Since people have a lot of problems getting their Processing sketches to work when they try to post their work online, here’s a guide I made.

First off, I don’t use the Processing plugins for WordPress.  I know that some people do but I couldn’t get it to work.  Plus, I think using embed code from OpenProcessing.org is more consistent.

Next thing you need to know is that there are two key modes when you edit a WordPress post, “Visual” and “HTML”, tabs attached to the upper-right corner of this edit window. (see the purple)  Visual is the simple mode where you just type in your text and it will be automagically formatted for you.  But if you need to insert HTML markup or paste in Arduino or Processing raw code, you need to use HTML mode.

So if you switch to HTML mode, you will see non-formatted text in HTML format.  Go to where you want to paste your code (to document your work!) and then type

<PRE CLASS=”brush: java;”>

And then paste your code, with

</PRE>

after the code ends.  See the image above for an example of how it looks.

This will actually format your code into a fixed-width format, and it will also highlight your code to a specific language’s syntax rules, IF you have the Easy Google Syntax Highlighter plugin installed (which you can install via this site: http://wordpress.org/extend/plugins/easy-google-syntax-highlighter/ )  It’ll be an automatic install if you search for it via the “Add New” menu under “Plugins” on the left side of your administration menu and install it that way, instead of trying to go to the site and download the code to your host and then etc. etc.

Having the CLASS=”brush: java;” or CLASS=”brush: php;” or whatever will give you prettified code (and line numbers!) if you have the Easy Google Syntax Highlighter installed:

By the way, you’ll see I have Blackbird Pie and Viper’s Video Quicktags installed.  These let me embed YouTube and Vimeo videos just by pasting in the URL to the box that pops up after I click on the icons:

Blackbird Pie lets me display tweets just by entering in a tweet’s unique URL:

You’re not done yet.  You’ll have to make sure in your code that any left- and right- arrows (< & >) are translated into HTML entities first.  So < translates to &lt; and > translates to &gt; Don’t ask why for now.  It just prevents everything from getting cut off — probably a parser error.

So it’ll look like this in your HTML-mode:

If you don’t do this, then your code may get cut off/truncated once you post it.

Next you probably want to post your sketch.  I have found that OpenProcessing.org embedded code almost always works unless there’s some included extra library that you decided to use for your sketch.

OpenProcessing.org has a pretty helpful interface to help you upload your applet.  So yes, you will have to export from Processing in “Standard” mode first, in order to get an “applet” folder.

Then go to http://www.openprocessing.org/visuals/uploadVisual.php to upload your code.

You’ll see instructions to compress your “applet” folder, which won’t exist until you export it in “Standard” mode from within Processing.

In OS X, you just right click the “applet” folder and “Compress “applet””, which will create an “applet.zip” file.  This is what OpenProcessing.org is looking for.

Once you upload (and name your project), you’re not done yet!  You will be taken to a verification screen to check if your Processing sketch actually works:

You must verify by clicking on the button in green in order for your upload to be complete and so people can find your sketch. Also, don’t link to the verification page — link to the resultant project page.

Then your project page will have a button where you can get the embed code for the sketch, which you can paste in HTML-mode into WordPress.  However, I would recommend if you want faster load time for your blog post that you only link to the OpenProcessing.org sketch instead of embedding it, because when people try to read your blog, their browser will have to load your Java applet as well — this can bog down a system, especially if your blog displays several sketches at a time.  One way to reduce this problem is to use the “More” button in your WordPress post editor (see the blue below):

This will, on the main blog page, only display the part of the post above the “More” tag.  Someone will have to click to go to the full post in order to see the rest.  But this is good for hiding lengthy code or videos or Java that will slow down someone’s load time.

Let me know if there’s anything I should add to this guide.

  • awesome!! ITP stackoverflow begins!

  • fabax

    That’s a great tutorial !

    Also i just came up with an alternative for wordpress users. It’s a plugin called processing for wordpress that allows you to manage your sketches like articles among your website. You can upload them once then just call them anywhere in your website using shotcodes. Don’t hesitate to take a look at it to tell me what you think of it : http://wordpress.org/plugins/processing4wp/