processing.js change script source

Question

I need to find a way where I can dynamically change the source of a processing script inside an HTML document.

This is the embedded script which works fine:

  <script type='application/processing' src='sketch.txt' id="applet">
  </script>

Now I try to change the source:

  $('#applet').attr('src', 'sketch2.txt');
  alert($('#applet').attr('src'));

The alert shows that the source was changed to 'sketch2.txt' but the applet still remains the same. I think I need to refresh the script in some way.

Thank you in advance for any help!

Answer 1

I believe you have to manually attach each proc to the canvas, instead of just changing the the source file. This worked here:

function first_call(processing) {
  processing.size(300,300);
  processing.background(100);
  var called = false;
  processing.draw = function() { 
    if (!called) { processing.println("called #1"); called = true; }
  }
}

function second_call(processing) {
  processing.size(400,400);
  processing.background(200);
  var called = false;
  processing.draw = function() {
    if (!called) { processing.println("called #2"); called = true; }
  }
}

var canvas = document.getElementById('canvas1');
var processingInstance = new Processing(canvas, first_call);
var processingInstance = new Processing(canvas, second_call);