dinamicamente "scaricare" un abbozzo di elaborazione JS dalla tela

Question

sto usando un po 'di javascript per consentire agli utenti di caricare dinamicamente uno schizzo su click per un elemento canvas utilizzando:

Processing.loadSketchFromSources ('canvas_id', [ 'sketch.pde']);

se chiamo Processing.loadSketchFromSources (...) una seconda (o terza ...) Ora, si carica un secondo (o terzo ...) File .pde sulla tela, che è quello che ho mi aspetterei.

Mi piacerebbe che l'utente fosse in grado di fare clic su un altro collegamento per caricare uno schizzo diverso, scaricando efficacemente quello precedente. Esiste un metodo che posso chiamare (o una tecnica che posso usare) per verificare se Processing ha un altro schizzo in esecuzione e, in tal caso, dirgli di scaricarlo prima?

C'è qualche tipo di metodo Processing.unloadSketch() che sto trascurando? Potrei semplicemente rilasciare l'oggetto DOM canvas e ricrearlo, ma questo (1) sembra usare un martello quando ho bisogno di un ago, e (2) risulta in uno sfarfallio dello schermo che vorrei evitare.

Non sono un esperto di JS, ma ho fatto del mio meglio per guardare attraverso il sorgente processing.js per vedere quali altre funzioni possono esistere, ma sto colpendo un muro. Ho pensato che forse potrei guardare Processing.Sketches.length per vedere se qualcosa è già caricato, ma semplicemente farlo fuori dall'array non sembra funzionare (non pensavo che sarebbe successo).

Sto usando ProcessingJS 1.3.6.

Answer 1

A partire dal Processing.js 1.4.8, risposta accettato di Andrew (e le altre risposte che ho trovato qui) non sembrano funzionare più.

Questo è ciò che ha funzionato per me:

var pjs = Processing.getInstanceById('pjs'); 
    if (typeof pjs !== "undefined") { 
     pjs.exit(); 
    } 

    var canvas = document.getElementById('pjs') 
    new Processing(canvas, scriptText); 

dove pjs è l'id dell'elemento tele dove i scrips è in esecuzione.

Answer 2

io non sono a conoscenza Processing.js, ma il codice di esempio dal sito ha questo:

var canvas = document.getElementById("canvas1"); 
// attaching the sketchProc function to the canvas 
var p = new Processing(canvas, sketchProc); 
// p.exit(); to detach it 

Quindi nel tuo caso, si vorrà mantenere una maniglia alla prima istanza quando si crearlo:

var p1 = Processing.loadSketchFromSources('canvas_id', ['sketch.pde']); 

Quando si è pronti a "scaricare" e caricare un nuovo schizzo, sto cercando di indovinare (ma non si sa) che avrete bisogno di cancellare la tela da soli:

p1.exit(); 
var canvas = document.getElementById('canvas_id'); 
var context = canvas.getContext('2d'); 
context.clearRect(0, 0, canvas.width, canvas.height); 
// Or context.fillRect(...) with white, or whatever clearing it means to you 

Poi, dal suono delle cose, sei libero di collegare un altro schizzo:

var p2 = Processing.loadSketchFromSources('canvas_id', ['sketch2.pde']); 

Anche in questo caso, io non sono in realtà familiarità con quella libreria, ma questo sembra semplice dalla documentazione.

Answer 3

Nel caso in cui qualcun altro venga a cercare la soluzione, ecco cosa ho fatto. Si noti che questo è stato inserito all'interno di una chiusura (non inclusa qui per brevità) - da qui il this.launch = function(), blah blah blah ... YMMV.

/** 
* Launches a specific sketch. Assumes files are stored in 
* the ./sketches subdirectory, and your canvas is named g_sketch_canvas 
* @param {String} item The name of the file (no extension) 
* @param {Array} sketchlist Array of sketches to choose from 
* @returns true 
* @type Boolean 
*/ 
this.launch = function (item, sketchlist) { 
    var cvs = document.getElementById('g_sketch_canvas'), 
     ctx = cvs.getContext('2d'); 
    if ($.inArray(item, sketchlist) !== -1) { 
     // Unload the Processing script 
     if (Processing.instances.length > 0) { 
      // There should only be one, so no need to loop 
      Processing.instances[0].exit(); 
      // If you may have more than one, then use this loop: 
      for (i=0; i < Processing.instances.length; (i++)) { 
      // Processing.instances[i].exit(); 
      //} 
     } 
     // Clear the context 
     ctx.setTransform(1, 0, 0, 1, 0, 0); 
     ctx.clearRect(0, 0, cvs.width, cvs.height); 
     // Now, load the new Processing script 
     Processing.loadSketchFromSources(cvs, ['sketches/' + item + '.pde']); 
    } 
    return true; 
};