Improved event () redrawing of Processing.js handler when using noLoop ()

Question

I use Processing.js, with jQuery 1.3.2 at my disposal and targeting Firefox 3.5, Safari 4 and IE 8 (via ExplorerCanvas). The Processing.js website says: "Using Explorer's canvas with Processing.js usually renders frames unusable for moderately complex renderings." Well, in this case, animation is not required, just a few simple sketches, so the frame rate is not a problem. I only need to redraw () each time the input in the form changes. I am 99% and need only one inspiration to control IE!

keyPressed () responds well to changes in input fields, but redraws the changes in the checkbox and apparently discards the fields until the actual key is pressed. mousePressed () only causes an update when clicked inside the canvas. The user interface is a bit sluggish and confusing. How to get a sketch to immediately redraw on any keyboard / mouse event?

THE CODE

In the JavaScript block of the main page, I set up an object for sending JSON data, which depends on the selection fields between the form and Processing.js, and also as a place to place the IE flag:

window.common = {};

I put a boolean value in a "common" object when the IE browser using a "conditional comment" script:

<!--[if IE]>
    <script type="text/javascript">
        window.common.IE = true;
    </script>
<![endif]-->

For completeness, the "generic" object receives JSON data this way using the jQuery getJSON wonderful function:

$.getJSON(xhr_url, function(json, status){
    /*  
        This is the equivalent of writing either 
        "window.common.global_d_b = json[d];" or
        "window.common.global_d_c = json[d];" for 
        each property, such as "d," in the json object,
        and subscripts "_b" or "_c".  
    */
    for (var property in json) {
        window.common['global_' + property + subscript] = json[property];
    }
});

Processing.js setup is as follows:

flag_for_IE = window.common.IE;

void setup()
{
    size(int(W), int(H));       // Canvas size as set above
    frameRate(4);               // Refresh rate in fps for FF & Safari
    stroke(darkSteelGrey);      // Set default linework color
    fill(medSteelGrey);         // Set default fill color
    background(lightBlue);      // Set background color
    if (flag_for_IE) {
        noLoop();               // Stop looping for IE.
    }
}

, :

void draw() {

/*  *****  ORDINARY DYNAMIC DATA FROM INPUT AND SELECT ELEMENTS  *****  */
/*
Some jQuery JavaScript is used here to get data provided by the user. Where 
necessary, invalid form entries are set equal to zero so the interactive 
sketching will be smoother.
*/
    var tp = float($('#id_tp').val());       // End plate thickness
    tp = isNaN(tp) ? 0.0 : tp;
    var bp = float($('#id_bp').val());       // End plate width
    bp = isNaN(bp) ? 0.0 : bp;
    var db = float($('#id_db').val());       // Bolt diameter

AJAX, draw() :

d_b = window.common.global_d_b;
tf_b = window.common.global_tf_b;

draw() :

/*  Redraw control for IE.  */
if (flag_for_IE) {
    redraw();

    void keyPressed() {
      redraw();
    }

    void mousePressed() {
      redraw();
    }
}

Answer 1

, change jQuery.

$('#formid').find(':input').change(redraw);