Fail to load any sketch on webpage in instance mode

AmundsenJunior · April 2015

I am developing a webpage that shows several sketches that are simpler exercises of a larger project still in development. I've started the migration to p5, and quickly encountered the global namespace issue, so I've refactored my sketches into instance mode. With that set up, I receive a message in the sketch div space that simply says "loading...". Below are the relevant pieces of my html page (I've commented out the other sketches from loading onto the page to just debug 'fibonacci-static.js'.)

index.html

<head>
    ...
    <script src="js/p5.min.js" type="text/javascript"></script>
    <script src="js/p5.dom.js" type="text/javascript"></script>

    <script src="processing/fibonacci-static.js" type="text/javascript"></script>
    <!-- 
    <script src="processing/draw-curve.js" type="text/javascript"></script>
    <script src="processing/spiral-looper.js" type="text/javascript"></script>
    <script src="processing/fibonacci-square.js" type="text/javascript"></script>
    -->
</head>

<body>
    <div class="container">
        <div class="canvas">
            <h3>fibonacci-static</h3>
            <small>Click and drag mouse to draw.</small>
            <div id="fibonacci-static"></div>
        </div>
        <div class="canvas">
            <h3>draw-curve</h3>
            <small>Click to start curve. Click again to stop current curve and start new one.</small>
            <div id="draw-curve"></div>
        </div>
    </div>
</body>

The 'loading...' text displays in the "div id='fibonacci-static'" space. This is a screenshot of the relevant piece of the webpage: Capture

Here is the code for the p5js sketch file that gets loaded onto the page:

fibonacci-static.js

var fibStatSketch = function( fibStat ) {
    fibStat.setup = function() {
        fibStat.canvas = createCanvas(500, 500);
        fibStat.background(0);
    };
    fibStat.draw = function() {
        if (mouseIsPressed) {
            var x_pos = mouseX;
            var y_pos = mouseY;
            fibStat.fibonacci(x_pos, y_pos);
        }
    };
    fibStat.fibonacci = function(x, y) {
        fibStat.stroke(255);
        fibStat.noFill();
        fibStat.arc(x, y, 10, 10, PI, TWO_PI);
        fibStat.arc(x-5, y, 20, 20, 0, HALF_PI);
        fibStat.arc(x-5, y-5, 30, 30, HALF_PI, PI);
        fibStat.arc(x+5, y-5, 50, 50, PI, PI+HALF_PI);
        fibStat.arc(x+5, y+10, 80, 80, PI+HALF_PI, TWO_PI);
        fibStat.arc(x-20, y+10, 130, 130, 0, HALF_PI);
    };
};
var fibonacciStatic = new p5(fibStatSketch, 'fibonacci-static');

I'm not sure what's missing in the code for either file at this point. Any help would be appreciated.

KevinWorkman · April 2015

What does your JavaScript console say?

AmundsenJunior · April 2015

Oy, I always forget to check console first:

ReferenceError: createCanvas is not defined

AmundsenJunior · April 2015

Okay - I missed a few "instances" for createCanvas, mouseIsPressed, PI, etc. The sketch now works! Changed fibonacci-static.js line 3 to:

fibStat.createCanvas(500,500);

Thanks for looking anyhow!

blindfish · April 2015

I think you may be over-complicating things for yourself: the parameter you use to pass the reference to P5 into each individual sketch doesn't need to be unique. You should be able to make it 'p' for all sketches:

var fibStatSketch = function (p) {
    p.setup = function () {
        // not sure why you were setting this as what would now be p.canvas
        canvas = p.createCanvas(500, 500);
        p.background(0);
    };
    // snip...
};

var fibonacciStatic = new p5(fibStatSketch, 'fibonacci-static');

That's a lot less to write each time you want to hook into p5 and if it's consistent across all your sketches it's going to be easier for you to read and code...

Also see my comment re: p.canvas = p.createCanvas(). I'm new to P5 so there may be good reasons for doing that; but I can't find a reference to an existing 'canvas' property in the reference; so it looks to me like a very bad idea: you're essentially adding an arbitrary property directly to the p5 object. That could come back and bite you: e.g. if someone decides to add this property in the library later on.

GoToLoop · April 2015

Just an addendum to @blindfish: :-\"

In canvas = p.createCanvas(500, 500);, variable canvas needs 1st to be declared somewhere, lest ends up "polluting" the global naming space! :-B

blindfish · April 2015

Yep: good point (GoToLoop and I have been discussing this elsewhere). Where and how you define the variable depends on what you're hoping to do with this later on... Possibly nothing; in which case you don't need to assign it to a variable at all and can just do:

p.createCanvas(500,500);

AmundsenJunior · May 2015

Thank you, @GoToLoop and @blindfish! I was able to clean up my code and getting instances running properly.

Cheers!

Howdy, Stranger!

Categories

In this Discussion

Fail to load any sketch on webpage in instance mode

Best Answers

Answers