Is there a way to manipulate code generated by Processing.js via Javascript?

Question

I would like to call some functions or alter some variables after the Processing.js code has been parsed. Right now the only way to do this is to manipulate the source code, and then reload the source into Processing.

Answer 1

I am beginning to suspect that there is no straight answer to that question at present. For the time being, I am doing as you do. I am using the Django web framework. I have Django write every line of Processing.js code to the page through its template handler. Django is first writing the HTML script element, then Processing.js assignment statements defining the sketch parameters, then the body code for the sketch, then Processing.js library functions and classes as a particular sketch requires, then the closing script tag. I’m looping through multiple sketches and finish up with a looping initialization routine.

With this scheme I have fine control over the HTML as Django’s template handler lets me control id’s and classes for the div elements that contain the sketches as well as the canvas elements. This amounts to crude dynamic behavior; every time the user POSTs a form the sketches are updated. Python is reading a lot of files, each containing a lot of bits, and those bits pass through several hands on their way to the browser, which must slow thing up as compared with a simple update of the data.

I'm intrigued at the possibility of genuine client-side dynamic behavior using forms mediated by, perhaps, jQuery. See this fascinating post at Design Intellection by David Yeiser. So, jQuery can talk to Processing.js, which is amazing, but not too surprising, as they are both JavaScript. I'm no expert, but I think some global namespace abuse occurs with this technique. Speaking of global namespace abuse, check out these two posts at Irrational Exuberance, "Updating Processing.js Graphics via Ajax," and "Using Javascript to Control Processing." If you can do it with PHP, you can do it with the flavor of your choice.

Apparently, Processing.js has an "internal" AJAX function that might be of use to you. See this cached post, courtesy Google. Compare with the current radically edited version, changed just a few days ago. So, the Processing.js collaborators have got the task of loading a sketch and associating it with a canvas down to two lines of code, but the more general task of loading assorted bits and pieces, including variable data, is getting no air time. Perhaps they're rewriting the whole AJAX thing. I would like to know if the p.ajax function could be used to load and concatenate a number of Processing.js assets, like data assignments, setup(), draw() and functions and classes in a flexible way forming a complete sketch.

My CS son says I could re-write my Processing.js code using the JavaScript native API and then it would be pure JavaScript, and could be loaded using a normal script tag and not with type="application/processing". He thinks I would have more flexibility plus the option to use minimization/obfuscation. Here is an example using JSON at ProDevTips. JSON is pretty convenient to use with Django. I've seen the API here and there on the web. It looks straightforward, but I don't know if it's documented anywhere. You could just pick through source at Github. Otherwise, I like this approach.

So, I don't have a succinct answer, but I suspect the situation is evolving quickly. One last possibility is the use of XHR. See this StackOverflow post and the link to the downloadable file at the Hyper-Metrix website. A notable Processing.js whiz by the name of Alistair MacDonald (F1LT3R) has published an number of approaches to initializing Processing.js sketches. He would probably know as well as anyone how to do what we want done.

I would be overjoyed if a well-informed person (i.e. a Processing.js insider) would address this issue.