动态加载 p5.js 脚本

Question

I am trying to dynamically load a p5.js script (Processing for the browser), but, no matter what I seem to do, I can't get the script to display its visuals in a webpage. Under normal circumstances, I'd load the p5 script in the index.html, using the standard <script src="sketch.js" type="text/javascript"></script> . When I attempt using a jquery script to dynamically append the script, however, Chrome throws "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience". I've also tried using

$('body').load("aSeparateFileWithTheScriptInIt.html", function() {
    console.log("load html was performed");
    $.getScript("sketch.js", function(data, textStatus, jqxhr) {
      console.log("load sketch was performed");
    });
  });

which displays/prints absolutely nothing.

---

Strangely, this code returns that the script ran successfully.

$.getScript( "sketch.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

I could use help figuring out how I should properly use jquery to dynamically load the sketch.js file.

Answer 1

not exactly what you wanted but i guess reason is the same. I was load p5js in runtime by adding new script with async="true" to the header.

and in my case i didn't see any global functions which supposed to be there with p5.js (in particular loadImage , createCanvas ).

though i was able to see p5 object.

so in my case i had to manually call new p5(); to solve problem.

and that is it, everything is there!

hope it's going to save someone couple hours :)

EDIT 14/05/2019

I end up getting rid of p5 library completely, and rewriting methods i need by myself.

Mostly because p5 allows only one canvas on the page, and because it is very slow comparing to working directly with canvas and canvas context .

Answer 2

If you have to load your sketch asynchronously (to be started long after P5.js has loaded and looked for an existing sketch itself), you will have to add the following lines in order to start the sketch in "global mode"

window.setup = setup;
window.draw  = draw;
new p5();

window is the global variable which P5 fills with all its functions in order to provide the "global mode" environment.

setup and draw are those user-defined functions, P5 will invoke in order to run your sketch. They must be globally available before new p5() is run - either because they have been defined as such or because you made them global explicitly (as shown in my example).

The latter allows you to define these two functions in a local environment (eg an IIFE) together with any other methods you need (and which you do not want to pollute the global namespace with) and still get rid of the nasty target object prefix (eg p5.xxx ) in front of all P5 methods and properties.

This "solution" is more of a "hack" rather than a real "answer" (as it is undocumented and exploits behavior which might change in the future) but it helped me loading external scripts into an already loaded web page running P5 without having to tell those sketches that they will be executed in "local mode" (as a sketch should never need to know the mode it will be run in)