cannot get processing script to run

Question

I'm doing a Processing.js tutorial found here:http://processingjs.org/articles/jsQuickStart.html

When I load my document into the browser I get two errors:

uncaught exception: called Processing constructor without passing canvas element reference or id.

And

Access to restricted URI denied

xhr.send(null)

In regard to the first error, I pass the canvas element id like so:

var canvas = document.getElementById('canvas1');

I also checked and made sure that the canvas element in the HTML had the canvas1 id.

I'm not sure what went wrong with the second error.

Please help me see what I'm doing wrong.

This is my code:

function sketchProc(processing) {
        processing.draw = function() {
            var centerX = processing.width / 2; 
            var centerY = processing.height / 2;
            var maxArmLength = Math.min(centerX, centerY);

            function drawArm(position, lengthScale, weight) {
                processing.strokeWeight(weight);
                processing.line(centerX, centerY, 
                    centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
                    centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
            }

            processing.background(224);

            var now = new Date();

            var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
            drawArm(hoursPosition, 0.5, 5);
        }
    }

    var canvas = document.getElementById('canvas1');

    var processingInstance = new Processing(canvas, sketchProc);

Where is that code that initializes the Processing object? Is it in a ` — Pointy, Jan 21 '12 at 18:57
@Pointy--placing the code at the bottom of the page helped. But I don't like structuring my code this way. Is there a way to call the processing.js code externally? or place it at the top? — dopatraman, Jan 21 '12 at 19:11
Yes, it would help to put it in an "onload" handler or, alternatively, at the *end* of the ``. If you're getting a syntax error, that means, well, that there's a syntax error :-) — Pointy, Jan 21 '12 at 19:14
@Pointy--How can i keep all of the script tags at the top of the page and still execute the processing.js code? the `onload` handler does not seem to work. Placing the code at the bottom of the document does work, but this is a last resort. — dopatraman, Jan 21 '12 at 19:30
Putting it in an "onload" handler will work if it's done properly. Putting scripts at the end of the `` is not a bad thing and is in fact a practice recommended by many knowledgeable people in the JavaScript world. — Pointy, Jan 21 '12 at 19:33
@Pointy--any special reason why this is the recommended practice? — dopatraman, Jan 21 '12 at 19:35

score 1 · Answer 1 · answered Mar 08 '13 at 15:02

"Access to restricted URI denied" suggests you were loading it from file:///, which means you can't do XHR file loading in any modern browser. You'll have to either run it from a localhost server (be that using Apache or a simple Python or PHP one-liner), or you'll have to put your files online in order to run your sketch.

Also, remember to verify that your "canvas" variable actually has any content. Running a script in the <head> before DOMContentLoaded means any document.getElementById will fail: your code will trigger before <body> has been built up. Either run your script at the end of the body, or (better) stick all your code inside a function and call that function as

document.addEventListener("DOMContentLoaded",myfunction,false):

making sure to add an extra line as first line in your function:

function myfunction() {
  document.removeEventListener("DOMContentLoaded",myfunction,false);
  [...]

Or, if you use frameworks like prototype, dojo, jquery, whatever, you can use their construct for executing JS only after the page has been built up.

cannot get processing script to run

1 Answers1