How to overwrite print and println in processing.js?

Question

I'm using processing.js 1.4.1 and have code like this:

new Processing($('canvas')[0], $('texarea').val());

How can I overwrite print function (without modifing the code of the library) so it display output in $('pre')?

I can overwrite Processing.logger (which is used by println in line 4404) but then print don't work until I run println and there is no Processing.println function.

Answer 1

I found that I can compile and run the processing code by myself, and instance of processing object have print and println method (as well as all processing functions):

var sketch = Processing.compile(texarea.val());
var processing = new Processing(canvas[0]);

processing.print = function(str) { output.append('<span>' + str + '</span>'); };
processing.println = function(str) { processing.print(str + '\n'); };

sketch.attach(processing, Processing.prototype); // defaultScope is set to the Processing.prototype
sketch.onLoad(processing);
if (processing.setup) {
    processing.setup();
    processing.resetMatrix();
    sketch.onSetup();
}
if (processing.draw) {
    processing.redraw();
}

the code don't handle loops it was based on line 8514

var executeSketch = function(processing) {

Answer 2

There's an explanation here how to do it here: http://processingjs.org/articles/PomaxGuide.html#interface. It requires you to bind javascript to Processing sketch in order to call its functions.

This fiddle probably explains better than describing it would: http://jsfiddle.net/98AsE/

My solution required the javascript method to be a property of 'javascript' object (this in global namespace) in order to work, otherwise Processing wouldn't see it:

this.displayMsg = function(msg){
    document.querySelector('#output').innerHTML += msg;
}

After that, overwriting print and println should be easy.