如何将Processing.js函数公开到HTML页面？

Question

I've got a redraw() function that is designed to halt the current draw() loop, retrieve new initialization values from the DOM, and resume drawing as if the values were those in the first place.

But "redraw()" in onchange can't see the Processing.js redraw() function, so changing the value in the input field has no effect. If "redraw()" is changed to "alert('changed!')", a popup displays "changed!", so we know the problem isn't the onchange, but an inability to import the redraw() function from the Processing.js file.

wolfram-automata.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();
}

Answer 1

It could be a scoping issue. Try explicitly setting redraw on window.

Instead of:

function redraw() { ...

Try:

window.redraw = function() { ...

Answer 2

Maybe you should include processing-1.1.0.min.js first, since processing is not defined inside wolfram-automata.pjs at that point.

<script src="processing-1.1.0.min.js"></script>
<canvas data-processing-sources="wolfram-automata.pjs"></canvas>