dinámica de "descarga" un boceto de procesamiento de JS lienzo

Question

estoy usando algo de JavaScript para permitir a los usuarios cargar dinámicamente un boceto al hacer clic en un elemento de tela usando:

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

si llamo Processing.loadSketchFromSources (...) una segunda vez (o tercera ...), se carga una segunda (o tercera ...) Archivo .pde sobre el lienzo, que es lo que yo Esperaría.

Me gustaría que el usuario pueda hacer clic en otro enlace para cargar un boceto diferente, descargando efectivamente el anterior. ¿Hay algún método al que pueda llamar (o una técnica que pueda usar) para verificar si Processing tiene otro boceto en ejecución y, de ser así, decirle que lo descargue primero?

¿Hay algún tipo de método Processing.unloadSketch() que tenga en cuenta? Simplemente podría soltar el objeto DOM de lienzo y volver a crearlo, pero (1) parece usar un martillo cuando necesito una aguja, y (2) da como resultado un parpadeo de pantalla que me gustaría evitar.

No soy experto en JS, pero he hecho todo lo posible para consultar la fuente de processing.js y ver qué otras funciones pueden existir, pero estoy chocando contra una pared. Pensé que tal vez podría mirar Processing.Sketches.length para ver si algo ya está cargado, pero simplemente apagarlo no parece funcionar (no pensé que lo haría).

Estoy usando ProcessingJS 1.3.6.

Answer 1

A partir de Processing.js 1.4.8, no parecen respuesta aceptada de Andrew (y las otras respuestas que he encontrado aquí) trabajar más.

Esto es lo que funcionó para mí:

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

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

donde pjs es el id del elemento lienzo donde los vales se está ejecutando.

Answer 2

no estoy familiarizado con Processing.js, pero el código de ejemplo desde el sitio tiene esto:

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

Así, en su caso, usted querrá mantener un identificador de la primera instancia cuando se crearlo:

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

Cuando esté listo para "descargar" y cargar un nuevo dibujo, supongo (pero no sé) que tendrá que limpiar el lienzo mismo:

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 

Entonces, desde el sonido de las cosas, usted es libre para fijar otro boceto:

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

Una vez más, no estoy realmente familiarizado con esa biblioteca, pero esto parece sencillo de la documentación.

Answer 3

En caso de que alguien más busque la solución, esto es lo que hice que funcionó. Tenga en cuenta que esto se colocó dentro de un cierre (no se incluye aquí por brevedad) - de ahí el 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; 
};