eine Funktion aus p5.js mit Browserify exportieren

Question

Zuerst habe ich einen p5.js Skript:

//canvas.js 
var p5 = require('p5') 

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

Alles in einem neuen p5-Objekt ist, so dass es mit browserify bündeln würde, weil p5, wie ich läuft verstehen im globalen Namespace. Das funktionierte gut, aber ich brauchte einen Knopf, der die gesamte Leinwand schwarz machte, also fügte ich eine neue Funktion clearCanvas hinzu, die die Leinwand komplett in Schwarz neu zeichnete. Ich habe den Teil module.exports hinzugefügt, so dass ich im p5-Objekt fordern und diese neue Funktion in einem anderen Skript verwenden könnte. Dann habe ich eine Schaltfläche in meiner Jade-Datei:

button(type='button', id='clear'). 
      Click to clear 

Und dann habe ich einen Handler, der in der p5 exportierte Objekt und verwenden Sie die clearCanvas Funktion onClick erfordern würde:

var canvas = require('./canvas.js') 

document.getElementById('clear').onclick = function() { 
    canvas.clearCanvas() 
} 

Das Ergebnis sind zwei Fehler in der Konsole:

bundle.js: 34633 Uncaught Typeerror: nicht Eigenschaft Can 'Onclick' von null

bundle.js: 14197 p5 hatte Probleme, die globale functi Schaffung auf "clear", möglicherweise, weil Ihr Code diesen Namen bereits als Variable verwendet. Vielleicht möchten Sie Ihre Variable in etwas anderes umbenennen.

Answer 1

Diese Frage wird hier beantwortet:

Exporting p5.js function with Browserify

p5.js im globalen Objekt läuft und eine Funktion zu exportieren, die nicht eingebaut in ist zu p5 Sie p5 in Instanz-Modus ausgeführt werden müssen. Auf diese Weise können Sie auch mehrere Instanzen von p5 ausführen.