First: Please Forgive the typos. I never want to open this post in edit mode again now that it works.

Processing is a wrapper around Java and it used to be that sharing your sketches online required the creation of a Java Applet. Those have fallen out of favor and with all the amazing capabilities of JavaScript these days a JavaScript interpreter for Processing was born. Processing in JavaScript mode can’t do everything that Processing in Java mode can. There are some non-obvious things that will make a sketch fail in JavaScript mode, and the error messages are terrible. This is getting better, but what I learned yesterday was to develop in parallel or be prepared to cry when you try to port your Java mode sketch over to JavaScript mode, and then again when trying to embed the sketch in something other than the page Processing makes for you.

Why do I know this all now? In preparation for Learn To Code with Us in Pasadena I wanted to be able to show an example of a Processing sketch, and this blog seemed like a convenient place to put it.  I didn’t want to use a plug-in if there was something that would mean less site overhead and initially it looked like the whole process would be super easy. Lisa Williams of dataforradicals.com wrote a tutorial on how to emded processing in wordpress by uploading the processing.js file using the “Add Media” button.  The example code she uses, which appears to be copied from processingjs.org Quick Start Guide (towards the bottom), worked fine for me in Safari but not in Chrome. That magically went away.  I’m still not clear why.

Then I made all the mistakes:

• My sketch which ran beautifully in Java-mode-Processing did not immediately work. I hadn’t realized I would need to check the code in JavaScript mode via Processing.
• Switched to JavaScript-mode, which I had never enabled before. (Requires a restart of Processing) and the browser gave me nothing, just whiteness, and there were completely abstruse errors in the console window.
• Tried known-working-code from the JavaScript examples included with Processing 2.1, they worked fine so it wasn’t something wrong with some package on my computer. This was just to confirm that the problem was in fact in my code.
• Since it was such a simple program, I rewrote it from scratch. Just a stage, just a static line… It finally stopped working when I tried to put variables in for the height and width i.e.

  final int w = 480;
  final int h = 360;
  
  void setup() {
    size(w, h);
  }

  This doesn’t work in JavaScript mode, but it does when you post it into a service called  HasCanvas. I suspect that they are stripping out all reference to size().

• I happily pasted the new JavaScript mode working code into the blog entry. Nothin’ doin’. No error messages in the console. Just a white space in the preview where the canvas should be Opening View > Developer > JavaScript Console in Chrome showed me that there had been an error, but not what line.
• So I rebuilt the sketch AGAIN from scratch. This time it didn’t want me to call random() outside the loop. Why does it work as an export but not here?
• It works! Yay! But never never never open the Visual view of your post again.

So this all works now, but I will say, if you aren’t stubbornly trying to have the code live on your own site, consider posting it to Open Processing. The sketch will then be shareable on both your site via an embed code and that community as well.

If you would like to see the code, it is all in the source for this page. In Chrome: View > Developer > View Source

Next week is better code posting on self-hosted wordpress. Sigh. I miss Posterous.