Exporting P5.js Function With Browserify

Here I have a p5 object that I am exporting to be bundled by browserify: var p5 = require('p5') var colorPicker = require('./color_picker.js') module.exports = new p5(function ()

Solution 1:

The modules build by browserify have their own scope, so nothing is exposed to the window object per default. You explicitly need to append your stuff to the window object to access it from a browser.

var p5 = require('p5')
var colorPicker = require('./color_picker.js')

module.exports = new p5(function () {
  // ...
  this.clearCanvas = function redraw () {
    this.background('black')
  }
  // ...
  window.clearCanvas = this.clearCanvas.bind(this);
});

Solution 2:

First, for the section:

window.this.clearCanvas =  function redraw(){
//code
}

To attach something to the window object do it directly,changing it to this:

window.clearCanvas = function redraw(){
//code
}

Worked, however I wanted to attach to the window object as infrequently as possible. For p5.js this section in the documentation is important:

By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries or writing long programs of your own. To solve this problem, there is something we call "instance mode", where all p5 functions are bound up in a single variable instead of polluting your global namespace.

https://github.com/processing/p5.js/wiki/p5.js-overview

Running p5.js in instance mode allowed me to use the clearCanvas function without binding it to the window object.