Problems with namespacing.....

kennyrosenyc

So I created this massive page with 5 sketches and 5 canvases it works fine on my computer but when I uploaded it I got this error "SCRIPT5009: 'p5' is undefined". I don't get it.

Here is the code (no cracks about the complete mess that it is thank you) :

var myp5_1 = new p5(function(a1) {

var time = 0;
var bx = 0;
var tx = 65;
var ty = 295;
var eRa = 255;

a1.preload = function() {
    img1 = a1.loadImage('images/Stuff/banners/Sea/clouds1.png');
    img2 = a1.loadImage('images/Stuff/banners/Sea/clouds2.png');
    img3 = a1.loadImage('images/Stuff/banners/Sea/KRD.png');
    img4 = a1.loadImage('images/Stuff/banners/Sea/skills.png');
}

a1.setup = function() {

    a1.canvas = a1.createCanvas(900, 300);
    a1.canvas.parent("#banner1");
    a1.background(0);
    a1.smooth();

}

a1.mousePressed = function() {

    if (a1.mouseY < a1.height && a1.mouseY > 5 && a1.mouseX < a1.width && a1.mouseX > 5) {

        a1.draw = function() {

            a1.background(75, 100, 127);

            a1.image(img3, tx, 50);

            a1.noStroke();
            a1.fill(75, 100, 127);
            a1.rect(0, 0, a1.width / 2, a1.height)

            var t1 = 0;
            var ty2 = ty;

            while (t1 <= 10) {
                a1.image(img4, 10, ty2);
                t1 = t1 + 1;
                ty2 = ty + 280 * t1;

            }

            var i1 = 0;
            var ix1 = bx;

            while (i1 <= 5) {
                a1.image(img1, ix1, 0);
                i1 = i1 + 1;
                ix1 = bx + 900 * i1;
            }

            var i2 = 0;
            var ix2 = bx;

            while (i2 <= 25) {
                a1.image(img2, ix2, 0);
                i2 = i2 + 1;
                ix2 = bx + 900 * i2;
            }

            a1.noFill();
            var x = 0;
            a1.stroke(0);

            while (x < a1.width) {
                a1.line(x, 200 + 50 * a1.noise(x / 300, time), x, a1.height);
                x = x + 1;
            }

            time = time + 0.02;
            bx = bx - 1;
            tx = tx + 4;

            if (tx >= 450) {
                tx = 450;
                ty = ty - 4;
            }

            if (ty <= -1000) {
                a1.fill(0, eRa);
                a1.rect(0, 0, 900, 300);
                a1.noLoop();
            }

        }

    }

}

});

var myp5_2 = new p5(function(a2) {

var m = 0;
var cs = 0;
ty = 325;
ty2 = -25;

a2.setup = function() {

    a2.canvas = a2.createCanvas(900, 300);
    a2.canvas.parent("#banner2");
    a2.background(255);
    a2.smooth();

}

a2.mousePressed = function() {
    if (a2.mouseY < a2.height && a2.mouseY > 5 && a2.mouseX < a2.width && a2.mouseX > 5) {

        a2.draw = function() {

            if (m < 200) {
                a2.stroke(cs);
                a2.strokeWeight(1);
                a2.noFill();
                a2.ellipse(150 + m * 2, 150, 300 - m * 5, 300 - m * 3.3);
                m = m + 1;
            }

            cs = cs + 1;

            if (m == 200) {
                a2.stroke(100, 0, 0);
                a2.strokeWeight(4);
                a2.fill(255);
                a2.textSize(40);
                a2.textFont('Verdana');
                a2.text("Kenny", 360, ty);
                a2.text("Rose", 495, ty2);
                a2.text("Design", 600, ty);

                if (ty > 150) {
                    ty = ty - 3;
                } else if (ty <= 150) {
                    ty = 150;
                }

                if (ty2 < 150) {
                    ty2 = ty2 + 3;
                } else if (ty >= 150) {
                    ty2 = 150;
                }

            }



        }
    }

}

});

var myp5_3 = new p5(function(a3) {

var r = 0;
var lx = 0;
var ta = 0;

a3.setup = function() {

    a3.canvas = a3.createCanvas(900, 300);
    a3.canvas.parent("#banner3");
    a3.background(127);
    a3.noStroke();
    a3.fill(10, 100);
    a3.rect(675, 50, 225, 300);
    a3.rect(520, 10, 150, 300);
    a3.rect(165, 100, 350, 300);
    a3.rect(0, 25, 160, 300);
    a3.smooth();

}

a3.mousePressed = function() {
    if (a3.mouseY < a3.height && a3.mouseY > 5 && a3.mouseX < a3.width && a3.mouseX > 5) {

        a3.draw = function() {

            var es = a3.random(10, 30);
            a3.fill(255, 0, 0, 25);
            a3.stroke(255, 200, 0, 25);
            a3.strokeWeight(es / 5);
            a3.rotate(r);
            a3.ellipse(40 + r, 0, es, es);
            r = r + 0.2;

            a3.resetMatrix();

            a3.noStroke();
            a3.fill(0, ta);
            a3.textSize(40);
            a3.text("Kenny Rose Design", 450, 100)

            var ly = a3.random(200, 285);
            a3.stroke(12, 50, 12, 75);
            a3.strokeWeight(es / 5);
            a3.line(lx, 300, lx, ly);
            lx = a3.random(0, 900);

            if (r > 675) {
                ta = ta + 1;
            }

            if (r > 910) {
                r = 910;
                a3.fill(127);
                a3.rect(0, 0, 900, 300);
                a3.noLoop();
            }

        }

    }

}

});

var myp5_4 = new p5(function(a4) {

var ex1 = -15;
var ey1 = 200;
var er1 = 0;
var ex2 = 915;
var ey2 = 25;
var ex3 = 900;
var ey3 = 320;
var ex4 = 20;
var ey4 = -10;
var rx1 = 905;
var ry1 = 90;
var ts = 0;


a4.setup = function() {

    a4.canvas = a4.createCanvas(900, 300);
    a4.canvas.parent("#banner4");
    a4.background(50, 25, 0);
    a4.noStroke();
    a4.fill(75, 50, 0);
    a4.rect(20, 20, 860, 260, 10);
    a4.smooth();

}

a4.mousePressed = function() {
    if (a4.mouseY < a4.height && a4.mouseY > 5 && a4.mouseX < a4.width && a4.mouseX > 5) {

        a4.draw = function() {

            a4.stroke(255, 128, 128, ts);
            a4.strokeWeight(1);
            a4.fill(255, 128, 128);
            a4.textSize(53);
            a4.text("Kenny Rose Design", 130, 150)

            a4.noStroke();
            a4.fill(128, 255, 128);
            a4.ellipse(ex4, ey4, 20, 20);
            a4.ellipse(ex4 + 30, ey4, 20, 20);
            a4.ellipse(ex4 + 60, ey4, 20, 20);
            a4.ellipse(ex4 + 90, ey4, 20, 20);

            a4.noStroke();
            a4.fill(255, 255, 128);
            a4.rect(rx1, ry1, 2, 105);

            a4.noStroke();
            a4.noFill();
            a4.ellipse(ex3, ey3, 200, 200);
            a4.noStroke();
            a4.fill(255, 128, 128);
            a4.ellipse(ex3 - 100, ey3, 20, 20);
            a4.fill(255, 255, 128);
            a4.ellipse(ex3 - 120, ey3, 20, 20);
            a4.fill(128, 255, 128);
            a4.ellipse(ex3 - 140, ey3, 20, 20);

            a4.noStroke();
            a4.noFill();
            a4.ellipse(ex2, ey2, 200, 200);
            a4.noStroke();
            a4.fill(255, 128, 128);
            a4.ellipse(ex2, ey2 + 10, 20, 20);
            a4.fill(255, 255, 128);
            a4.ellipse(ex2, ey2 + 30, 20, 20);
            a4.fill(128, 255, 128);
            a4.ellipse(ex2, ey2 + 50, 20, 20);

            a4.translate(ex1, ey1);
            a4.rotate(a4.radians(er1));
            a4.noStroke();
            a4.noFill();
            a4.ellipse(0, 0, 200, 200);
            a4.noStroke();
            a4.fill(255, 128, 128);
            a4.ellipse(0, 10, 20, 20);
            a4.fill(255, 255, 128);
            a4.ellipse(0, 30, 20, 20);
            a4.fill(128, 255, 128);
            a4.ellipse(0, 50, 20, 20);

            a4.resetMatrix();

            if (ex1 > 600) {
                ex1 = 600;
                er1 = er1 - 5;
            }

            if (er1 < -90) {
                er1 = -90;
                ey1 = ey1 - 5;
            }

            ex1 = ex1 + 5;

            if (ex2 < -10) {
                ex2 = -10;
                ey3 = ey3 - 5;
            }

            ex2 = ex2 - 5;

            if (ey3 < -20) {
                ey3 = -20;
                ey4 = ey4 + 30;
            }

            if (ey4 > 310) {
                ey4 = 310;
                rx1 = rx1 - 4;
                ts = ts + 1;
            }

            if (rx1 < 635) {
                rx1 = 635;
            }

        }
    }
}

});

GoToLoop

From this recent forum thread below:
https://forum.Processing.org/two/discussion/17306/multiple-canvases-on-one-page#Item_17

I've got this online multiple canvas under instance mode sample: O:-)
http://CodePen.io/anon/pen/zBZMre?editors=1010

kennyrosenyc

I get how it's supposed to work, and again, this one works fine locally but when I upload it I get an error. Specifically "SCRIPT5009: 'p5' is undefined". I know I'm probably doing something wrong I just can't figure out what. I mean isn't p5 defined in the p5 library?

GoToLoop

Perhaps the bug lies in your ".html" file?
When in instance mode, p5.js gotta be loaded and run before any other script relying on it!

kennyrosenyc

Yeah I literally load p5, p5dom, p5sound and then my sketch last.

GoToLoop

... but when I upload it I get an error.

Perhaps it lies on: "What exactly do you mean by upload it?"
My own example was hosted here: http://CodePen.io/anon/pen/zBZMre?editors=1010

kennyrosenyc

This code is supposed to fill 4 boxes on my site (my other post is the same). That page and this page pop up empty. There's something there because the space is right but it'empty. This sketch spits out the error I mentioned earlier, the other one has no errors, it's just empty space.

GoToLoop

This code is supposed to fill 4 boxes on my site...

And where is that? Your actual code is hard to study. Most I can do is check the ".html" file. #:-S

kennyrosenyc

I noticed it has to do with the image files. All the code without images work. The code that loads an image does not. The site is kennyrosedesogn.com.

kennyrosenyc

kennyrosedesign.com that is...

GoToLoop

• How am I supposed to find your specific sketch on that big site?! :|
• If the problem is the images, make sure path 'images/Stuff/banners/Sea/' exists.
• Remember that path's names are case sensitive too.
• Also make sure subfolder 'images/' exists in the same root folder where your ".html" file is.

kennyrosenyc

It is the banner page. My links are all good.

blindfish

If by banner page you mean your homepage then you don't load p5.js onto that page.

Post the URL of the problem page if it is not your homepage...

blindfish

Oh and you might find my post on instance mode useful - for example the reference to p5 you pass into your instances can use the same identifier in all instances without risk of conflict. I personally find it easier to always type p; rather than having to remember 'a1', 'a2' etc...

kennyrosenyc

This is the actual page for this one:

http://www.kennyrosedesign.com/banners.html

This is the actual page for the other broken one (this one throws no errors up):

http://www.kennyrosedesign.com/buttonClick.html

The problem is somehow linked to the images I think. All my other sketches work fine but this one and another one I posted about both load images up top. The other sketch doesn't run (although it does take up the space it's allotted on the page ... ie big empty gap where the sketch should be). And this one stops at the first line ( var myp5_1 = new p5(function(a1) { ) where 4 browsers (Chrome, Firefox, IE, Edge) all say:

TypeError: p5 is undefined p5.dom.js:70:3 TypeError: p5 is undefined p5.sound.js:216:3 ReferenceError: p5 is not defined headers.js:1:5

blindfish

Learn to interpret the browser inspector properly when debugging. When I load: http://www.kennyrosedesign.com/banners.html the console says:

Uncaught SyntaxError: Unexpected token < in p5.min.js line 1

All other errors are the result of the first failure... And that immediately smells like a corrupted JS file or similar error; so next port of call is to request the p5 URL to see if it's what you expect: http://www.kennyrosedesign.com/js/p5/p5.min.js

Oops... You don't have the minified version of p5 on your server at that location :-\"

The second one looks like a more complex issue - if it works locally then I'd hazard a guess that it's a latency issue: you're loading in a large number of large assets (12MB on a single page is heavy!). It looks like some of these are loaded in and consumed by a separate script. I'd personally try testing the p5 sketch on an isolated page with no other JS code running. If that works then it's a conflict between the two scripts: possibly the slider script is blocking things in a way that p5 doesn't expect which then leads it to choke. If that is the case you'll have to find a way to defer execution of one or the other so they don't collide...

kennyrosenyc

There's no link to p5.min on any of my pages. Or at least there shouldn't be. I used the vanilla p5 version. But i'll give it a look. Maybe the combination of the pictures in the slider at the top with the others? The whole thing will be rebuilt with PHP soon enough so Having the top banner in a separate file that loads dynamically might help.

blindfish

@kennyrosenyc says:

There's no link to p5.min on any of my pages.

The source says:

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

Re. problem 2: I don't see how using PHP will help unless you defer loading of one or other scripted asset somehow. That doesn't sound like something you'd do with PHP; though it's a long time since I played with that language. If you're using instance mode I believe you can defer the running of the p5 sketch relatively easily so could do it on the client-side: you just need to find the right moment to launch it... But I'd still test the p5 sketch in isolation to establish if it runs before exploring that ;)

GoToLoop

... you can defer the running of the p5 sketch relatively easily so could do it on the client-side: ...

That's 1 of the 1st things I've said in this forum thread: L-)

When in instance mode, p5.js gotta be loaded and run before any other script relying on it!

@kennyrosenyc took a lotta posts to merely post the direct link to his sketch.

W/o testing the sketch for ourselves under its target environment there was no way we coulda found out some file path was missing or typed in incorrectly. [-(

kennyrosenyc

I'm sorry. I'm liking at the code now and will severely punish myself if it's that stupid p5.min reference.

kennyrosenyc

Yep, the instancing page is fixed. I feel like a chump. LOL Now I need to figure out the button click page. Thank you for your time and assistance.