Life, and Processingjs in WordPress

It’s been ages since I last posted, but that’s mostly because I’ve been incredibly busy on other projects, teaching, and etc.  I’ve been recently named Computational Designer in Residence at Ravensbourne, in London, thanks in no small part to Will Pearson and his vision (which I emphatically share) of injecting more coding skills and exposure into the excellent digital design process already churning through the college.

Seen here is my version of “Tron Blur” originally by the talented Dave Bollinger, whose website unfortunately doesn’t seem to exist anymore. I used it in this post for an upcoming workshop on SuperCollider by Simon Katan.

Towards that end, I’ve been experimenting a lot more with JavaScript and HTML5 in the hopes of shedding Flash forever, for good, but the amount of competitors in near-endless.  Competition and diversity are great things but too much of a good thing causes a stomach-ache (or headache).

The good news is that the newest Processing alphas (almost a full 2.0 release!) support building directly to JavaScript via the excellent ProcessingJS, which translates the Java-inflected Processing sketches into JavaScript code right inside the webpage, saving tons of time and work.

I figured this would be a nice way to share code and sketches here on my WordPress blog, because the old Java-based Processing applets either ran slow (or not at all) or had permissions issues on corporate or university computers. And plus, Dan Shiffman did it, so why not?

Ok, first off – this solution is hugely problematic. Read on if you’re brave, at the end I’ll tell you why:

To get it working, I first installed the Processing JS pluginfrom Keyvan Minoukadeh (you can do it directly from your WordPress admin control panel, just go to Add New Plugin and search for “Processing” but make sure to get the right one).  Then, I customized it to use the latest ProcessingJS by downloading it (or, run the new Processing 2.X versions and export as Javascript, then look in the sketch folder for the “processing.js” file) and copying over the new “processing.js” file to the /YOURBLOG/wp-content/plugins/processingjs/js/ . Then, edit the processing-js.php file in /YOURBLOG/wp-content/plugins/processingjs/ and change the top lines to:

add_action('init', 'pjs_init');
function pjs_init() {
 //wp_enqueue_script('processing-js', plugin_dir_url(__FILE__) . 'js/processing-1.0.0.min.js');
 wp_enqueue_script('processing-js', plugin_dir_url(__FILE__) . 'js/processing.js');
 wp_enqueue_script('processing-init', plugin_dir_url(__FILE__) .'js/init.js', array('jquery'));

Now, make sure it’s activated. BUT, there’s a final step.  By default, WordPress adds these incredibly annoying paragraph (“<p>”) tags all over the place when you hit Return.  These will break your code!  So you can properly edit, you’ll need to turn off this automatic feature by placing the following line of code in your theme’s header.php or functions.php file:

remove_filter( 'the_content', 'wpautop' );

Now, if all has gone well, you can create a new post, and in HTML mode you should see a “processing” button.  Click that and an area will appear for you to type Processing code into.  Just remember that images and data files should be referenced using URLs – so upload your images first, then copy the whole URL and paste it into your loadImage() calls, or upload your data to a folder on your website and do the same.

The problem with all this is that there should simply be a shortcode like [processingjs] that disables all the content filtering such as for greater-than and less-than and paragraph breaks when you hit return.  Without these, your code will break because bits of it will silently and magically be transformed into HTML codes instead of JavaScript code. Bleh.  If I get a chance I may take a crack at this, otherwise maybe someone else will come up with a better solution.


3 responses to “Life, and Processingjs in WordPress”

  1. Hey pixelpusher,
    Just read you’re article for embedding processing in wordpress.
    Well, about the editing part you mentioned, is it still the same, because the new version is 1.4(i thought maybe you’re post is not for updated version)
    Can you please help me out?
    Here’s the “processing-js.php “(active) which is already present in this version

    function rw_processing() {
    wp_deregister_script(‘processing’); // deregister
    wp_enqueue_script(‘processing’, plugins_url(‘/js/processing-1.4.0.min.js’, __FILE__), false, ‘1.4.0’);
    add_action(‘init’, ‘rw_processing’);

    /* Shortcode */
    function rw_processing_sc($attr, $content) {
    // open
    echo ”;
    // return content
    echo $content;
    // close
    echo ”;
    echo ”;
    add_shortcode(“processing”, “rw_processing_sc”);
    add_shortcode(“processingjs”, “rw_processing_sc”);

    /* Remove WordPress Auto P */
    remove_filter(‘the_content’, ‘wpautop’ );
    remove_filter(‘the_content’, ‘wptexturize’);
    // return after processing
    add_filter( ‘the_content’, ‘wpautop’ , 99);
    add_filter( ‘the_content’, ‘wptexturize’ , 99);

  2. 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 :

  3. Thanks fabax, that looks great but it breaks my 3.9 install. Looks like an error in your function, maybe a misplaced or unmatched curly brace? I’m on a dodgy connection right now so can’t troubleshoot it, but please take a look if you read this comment.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.