Wie stelle ich Processing.js-Funktionen auf der HTML-Seite dar?

Question

Ich habe eine redraw()-Funktion, die entworfen ist, um die aktuelle draw()-Schleife zu stoppen, neue Initialisierungswerte aus dem DOM abzurufen und wieder zu zeichnen, als ob die Werte die an erster Stelle waren.

Aber "redraw()" in onchange kann die Funktion Processing.js redraw() nicht sehen, so dass die Änderung des Wertes im Eingabefeld keine Wirkung hat. Wenn "redraw()" in "alert('changed!')" geändert wird, zeigt ein Popup "changed!" an. Wir wissen also, dass das Problem nicht onchange ist, sondern die Unfähigkeit, die redraw()-Funktion aus der Datei Processing.js zu importieren.

wolfram-automaten.html

<p>Rule: <input onchange="redraw()" id="rule" value="110" size="4" /></p>
<canvas id="sketch" data-processing-sources="wolfram-automata.pjs"></canvas>
<script src="processing-1.1.0.min.js"></script>

wolfram-automata.pjs

processing.setup = function () {
    size(bounds, steps);
    background(white);

    rule = parseInt(document.getElementById("rule").value, 10);

    currentState = initState(bounds);
    rule = bits(rule);
}

processing.draw = function () {
    drawState(currentState, currentStep);
    currentState = step(currentState, rule);
    currentStep++;

    if (currentStep >= steps) { noLoop(); }
}

function redraw() {
    println("Redrawing");

    noLoop();

    currentState = [];
    currentStep;

    processing.setup();

    loop();
}