P5.js and Meteor (meteor.com)

Asymmetrical

Hi

I have been trying to understand how to integrate P5.js into an Meteor app (https://www.meteor.com). Meteor is a "full stack" web app framework, which seems to mean that it has both a node.js server in the background as well as a front end. Awesome as soon as you understand how it works. Especially their packages with ready to use logins and Bootstrap css stuff. It speeds up things tremendously.

I have problems with P5.js classes. I do get P5.js to appear and I can do my scripting in the sketch.js file (if P5.js is instantiated) and it gets shown in my Meteor app. Great! But as soon as I work with a class (external from sketch.js) I cannot seem to get that class to work from the sketch.js. Even if all the paths and references are "technically" there. Am I missing something?

My current solution is to keep the class inside the sketch.js file. This works, but will become cumbersome as soon as it grows.

So the question is if someone has been looking at this and if there would be a solution for this?

PS. So great to see the P5.js project grow. I am an old Processing fan and user returning to "home" due to the P5.js :-). DS

---

     var s = function( p ) {

      var x = 100; 
      var y = 100;

      var w;

      p.setup = function() {
        p.createCanvas(400, 410);
        //createCanvas(windowWidth, windowHeight);
        w = new walker();
        p.background(255, 0, 0);
      };

      p.draw = function() {
        //p.background(0);
        p.fill(255);
        p.rect(x,y,50,50);
        w.step();
        w.display();
      };


///// CLASS 
    var walker = function() {

    this.x = 400/2; //p.windowWidth
    this.y = 410/2;

    this.update = function() {
    //something
    };

    this.step = function() {
        var choice = p.int(p.random(4));

        if(choice === 0){
            this.x ++;
        } else if(choice == 1){
            this.x --;
        } else if(choice == 2){
            this.y ++;
        } else {
            this.y --;
        }
    };

    this.display = function() {
        p.stroke(0);
        p.fill(0);
        p.point(this.x,this.y);
    };

    }; // WALKER END
}; // SKETCH END

var myp5 = new p5(s);

`

GoToLoop

Both p5*js & Meteor are frameworks. And joining frameworks together is hard! :-S
There are these 2 more or less related forum threads that perhaps you should take a read:

1. http://forum.processing.org/two/discussion/10322/splitting-a-project-into-separate-files
2. http://forum.processing.org/two/discussion/10601/using-p5-js-in-the-global-js-namespace

Asymmetrical

Thanks!

blindfish

I don't see anything on the Meteor site that would suggest you can't run p5 alongside, and you're not trying to join frameworks together so I disagree that this should be hard. It could be a scope issue; but if it occurs when you put class definitions in a separate file this sounds more like a dependency management issue. Modern frameworks often use asynchronous loading mechanisms, so you need to do extra work to define dependencies. How are you loading the script files?

PhiLho

I disagree with the statement that Processing is a framework, but since distinction between frameworks and libraries is subtle, I won't argue on the topic.

Even then, mixing frameworks might not be necessarily hard. For example, this guy wrote an article about mixing his frameowrk (Mithril) and Metor.

Asymmetrical

Thanks for all these answer. I just want to say, that I got it to work. It works fine. I load it using an external head.html file which makes it go into the header of the base html page.

The only problem I have is the P5.js classes. External ones from the sketch.js file. Having them to be loaded the same way as P5.js itself does not work if I load it via the head.html. I also have the files, inlcuding classes, located in the meteor-documented file location where you are supposed to put static files.

My workaround is to keep the external classes within sketch.js. That too works fine. It does become messy in the long run but since I only wanted to give it a go, it's basically fine.

I will probably have to look into how to make officially importable libraries and see if that does some special tricks. You load external libraries via the command-line. So perhaps that would give some hints as how meteor works. There is a processing.js library to load via command-line so I will see if that gives some hints too. https://atmospherejs.com/bgrayburn/processingjs

Or it might be something trivial I missed. :-)

blindfish

I had a deeper delve into the Meteor docs and see that it's actually far more complex a beast than their top level description suggests... I think my hunch above is correct though: you can view the source of meteor packages by following the github links on the atmosphere site: example. As you can see this defines both dependencies (e.g api.use('jquery', 'client')), which I imagine are themselves added as 'packages', and also additional resources via api.add_files(). Assuming add_files loads them in order you might be able to wrap your files into a simple package...

There's possibly a simpler alternative, which is to do exactly what you're doing already. In principle it's good practice to wrap your production js up into as few files as possible, particularly when it's all a single 'application', as would be the case with your p5js code. There are build tools that will automatically concatenate and minify a set of js files, so you could just bundle all your class files with sketch.js automatically that way...

Asymmetrical

Thanks for taking that deeper look blindfish! I appreciate it. I think I will venture further down this road during summer. Big thanks for your research on this :-)

JaNew

I assume after 7months you've found a solution but just in case. I believe the problem can come from : .01 > The way you structuring your app Even if Meteor is very flexible there is an inside hierarchy. I suggest you to follow what it's advice in the Doc. Folders: client + collection + server // inside client create a "lib" folder (when Meteor compile your app what inside lib come first)

.02 > Namespacing If your js code is divided into several files. The variables who are shared accross different files bind them to Package Scope (and not to the File Scope). You can do it by "not" writing the "var" key word. Hope it helps

andreasmacht

Hi all

I also like to use p5js in Meteor, but I am a newbie to it. Please, can you explain to me how to incorporate it into the Meteor framework. I've done the following, but without success: Put the p5.min.js into the client/compatibility folder. Create my sketch.js and save it into the client folder. I use my template's onRendered() function where I instantiate the P5 object.

Template.templateName.onRendered(function(){ new p5(sketch, "sketch"); })

I try to refer to it in the template with

But p5 doesn't get injected into the DOM. i don't know where to look and correct now. Please give me advice how you got it run.