p5.js integration with Angular / not using global

问题:

In tutorials & youtube channel all examples use sketch.js & global functions & canvas / video tags are automatically created by library. Is there a way to manually create "p5.js context", pass it video & canvas tag and use API on some global object? I would like to write my p5.js code inside my components

回答1:

I don't really know anything about Angular, but it sounds like you're looking for instance mode in P5.js.

See here for more info, but it looks like this:

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

You might have to play around a little to pass it external objects, but those are the basics.