Processing.js and Sencha Touch

(just for documentation purpose, here an older experiment, result at http://mapresso.com/test/pjs_touch/AH1))

I made the following hacks:

1. In the app.js I added a function, which loads the processing-1.3.6.js only at the end of the launch function:

    loadProcessingJs: function (filename) {
   var fileref=document.createElement('script')
   fileref.setAttribute("src", filename)

    launch: function() {
        // Destroy the #appLoadingIndicator element

        // Initialize the main view


2. In the app/view/Main.js I added the canvas inside the html item:

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here.<br /><br />",
                    '<h3>HelloWorld of Processing.js:</h3>',
                    '<canvas data-processing-sources="circle.pde"></canvas>'

3. circle.pde contains the ProcessingJS code;

4. And the worst change: I added one line ("init();") totally at the bottom of (non minified version) processing-1.3.6.js (because otherwise the init()-function never executes in my hack):

  Processing.loadSketchFromSources = loadSketchFromSources;
  Processing.disableInit = function() {
    if (isDOMPresent) document.removeEventListener("DOMContentLoaded", init, false)
  if (isDOMPresent) {
    window["Processing"] = Processing;
    document.addEventListener("DOMContentLoaded", init, false)
  } else this.Processing = Processing;
})(window, window.document, Math);

For the minimized version (e.g. in processing-1.4.1.min.js the very end must be

instead of 


I don't know what I want to do with this experience. I like Processing and perhaps I'll someday make something with Sencha Touch and Processing.js ...