CODEWITHSUNDEEP
javascripthtmlmeteor
Arash Saidi
Arash Saidi

Reputation: 2238

Integrating p5js in a Meteor project

I have a little p5js script that I want to incorporate in a Meteor project. I put p5js itself in client/compatibility/p5.min.js and I put my p5js script in client/p5js/sketch1.js.

This is my script:

var sketch1 = function (s) {
    s.setup = function () {
        s.createCanvas(100, 100);
        s.background(100);
    };

    s.draw = function () {

    }
};

new p5(sketch1, "sketch1");

It does get injected in the html, but not under the div with id="sketch1". This is the html when I open the console:

<body>
    <canvas id="defaultCanvas0" class="" width="300" height="300" style="width: 100px; height: 100px;"></canvas>
    <div id="sketch1"></div>
</body>

Any ideas why this happens, and how I can solve this? The usual behavior is that the canvas is injected inside the div with id="sketch1".

Upvotes: 0

Views: 501

Answers (2)

Andreas Macht
Andreas Macht

Reputation: 11

I also tried to integrate my p5 sketch in Meteor. But I think it's important to add that the sketch will only work in the template if - in this case - var sketch1 is being declared as a global variable. It's a scope question in Meteor. Hence, I declared var sketch1; and all other sketches that I need var sketch2, sketch3; etc. in a global.js file that I saved in the Meteor lib folder. Then the template works fine.

Upvotes: 0

Arash Saidi
Arash Saidi

Reputation: 2238

I found a solution to my problem. Very simple solution. In order for p5js to inject itself, the DOM has to be rendered. In my case the DOM is not rendered, hence the canvas is not injected into the div with id "sketch1".

The solution is to use the onRendered method of Meteor:

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

This ensures the DOM is rendered before the sketch is created, and it will then be injected into the DOM element with the id "sketch1".

Upvotes: 1

Related Questions