New Processing.js uncaught exception "called Processing constructor as if it were a function: missing 'new'."

Question

I just returned to a Processing.js project that had been on the shelf for a year. I decided to update to Processing-1.0.0.min.js. That caused a new exception to surface. I think something about my initialization script must now be illegal. Here's the script from the head of the page:

    <!--Canvas sketch initialization script-->

    <!--
    This script is generic in that it is controlled using the Django template language in specifying
    variable canvas id's and corresponding script id's. It must remain on the page (i.e., cannot be an
    external script) so that the Django template can supply its parameters. It follows the control script
    above so that global variables are ready for use by the Processing.js scripts when it is triggered,
    and it is in the document ready function so that the canvases and Processing.js scripts are themselves
    ready to be initialized at that time.
    -->
    <script type="text/javascript">
        $(document).ready(function() {

            canvas = document.getElementById("elevCanvas");
            script = document.getElementById("elevScript").text;
            Processing(canvas, script);

            canvas = document.getElementById("planCanvas");
            script = document.getElementById("planScript").text;
            Processing(canvas, script);

        });
    </script>

Further down in the body of the page, I had, for each of the canvases, code following this pattern:

<script id="elevScript" type="application/processing">
    .
    .
    .
    /* Script purpose-built by a server-side code 
    concatenator and put on the page */
    .
    .
    .
</script>

<canvas id="elevCanvas"></canvas>

I hadn't been using the standard initialization routine because, on these pages, the Processing.js main and library scripts are selected on the fly according to need and sent to the page by the Django template system. (The document ready function is from jQuery.)

In the latest Processing.js documentation I see:

<canvas data-processing-sources="hello-web.pde"></canvas>

I don't remember the data-processing-sources attribute from before. So, is the construct Processing(canvas, script); no longer valid? Is a New constructor required? Can someone bring me up to speed? F1LT3R?

Answer 1

fairly late at this point but: the error tells you what you did wrong and what you need to do to correct it. Instead of just "Processing(canvas, script)", use "new Processing(canvas, script)".

That said, Pjs has seen some changes to 1.0 and onward, so you may want to have a look at http://processingjs.org/reference/articles/PomaxGuide and http://processingjs.org/reference/articles/PomaxGuide#graphic in particular (although I would advocate the clean use over using pjs as js library, because it's much easier to write sketches that way)