Exportando la función p5.js con Browserify

Aquí tengo un objeto p5 que estoy exportando para ser empaquetado por browserify:

var p5 = require('p5') var colorPicker = require('./color_picker.js') module.exports = new p5(function () { this.setup = function setup () { this.createCanvas(700, 400) this.background(205) this.loadImage('/uploads/uploaded_image', function (img) { image(img, 0, 0) }) this.updatePixels() } this.clearCanvas = function redraw () { this.background('black') } this.mouseDragged = function mouseDragged () { var rgb = colorPicker.getRGB() this.stroke(rgb.r, rgb.g, rgb.b) this.strokeWeight(10) this.line(this.pmouseX, this.pmouseY, this.mouseX, this.mouseY) } }) 

Todo esto funciona bien y puedo acceder a todas las funciones p5 integradas en otros scripts empaquetados, pero no a la función clearCanvas que he definido. También intenté adjuntarlo al objeto de ventana basado en otra publicación SO, como esta:

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

Todo lo que hasta ahora ha producido UnEught TipoError: No se puede establecer la propiedad ‘clearCanvas’ de undefined

¿Alguna idea de lo que estoy haciendo mal?

Los módulos creados por browserify tienen su propio scope, por lo que no se expone nada al objeto de la window por defecto. Necesitas explícitamente agregar tus cosas al objeto de la window para acceder a él desde un navegador.

 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); }); 

Primero, para la sección:

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

Para adjuntar algo al objeto de la ventana hazlo directamente, cambiándolo a esto:

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

Funcionó, sin embargo, quería adjuntar al objeto de la ventana con la menor frecuencia posible. Para p5.js esta sección en la documentación es importante:

 By default, all p5.js functions are in the global namespace (ie 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

La ejecución de p5.js en modo de instancia me permitió usar la función clearCanvas sin vincularla al objeto de la ventana.