Javascript :: processing.js animation not loading

Question

I have a form for user input:

  <form>
  <textarea onfocus="clearContents(this);" id="chat" cols="50" rows="5">  </textarea>
   <button type="button" onclick="animate_song();">talk</button>
 </form>

My ideia is to have input triggering audio and animation files dinamically:

<audio id="audio" src=" "></audio>

<canvas id="animaton" data-processing-sources=" "></canvas>

<script src="scripts/processing.min.js"></script>
<script src="scripts/soundEngine.js"></script>

I put both audio and animation engines within the same function, below. (Audio playback is being triggered alright.)

function animate_song(){

     var id = Song.prototype.lyricsIntersect(input);

     document.getElementById("animation").setAttribute(
         "data-processing-sources", 'sketches' + '/' + id + '.' + 'pde');

     var playback = 'http://127.0.0.1:8000/audio' + '/' + id + '.wav';

     var request = new XMLHttpRequest();
     request.open("GET", playback, true);
     request.responseType = "blob";   

     request.onload = function() {
       if (this.status == 200) {
          var audio = document.getElementById("audio");
          var src = URL.createObjectURL(this.response);
          audio.src = src;
          audio.load();
          audio.play();
       }
     }
     request.send();
     };

But animation is not being loaded by this function, only if preloaded in the html document, as in:

   <canvas data-processing-sources="sketches/song.pde"></canvas>

Why is that, what I am doing wrong?

It sounds like you have two different code sources, one javascript and the other a pde file. It seems the two can interoperate, but will probably need to be designed for that purpose. Maybe this link will get you going in the right direction. http://processingjs.org/articles/jsQuickStart.html#accessingprocessingfromjs — Nolo, Mar 26 '16 at 08:37
Ah, I see what the more likely problem is. It seems the processing lib is loading and does not find a source since you're adding it by clicking a button later. This might be the answer you're looking for. http://stackoverflow.com/questions/11178450/dynamically-unload-a-processing-js-sketch-from-canvas — Nolo, Mar 26 '16 at 08:47

score 0 · Accepted Answer · edited Apr 03 '16 at 10:02

Processing lib looks up automatically for <canvas>, and in this case it found no source. Therefore one must use the method Processing.loadSketchFromSources at the end of the function which sets <canvas> attribute.

   function animate_song(){

      var id = Song.prototype.lyricsIntersect(input);

      var sketch = 'http://127.0.0.1:8000/sketches' + '/' + id + '.pde';

      var request = new XMLHttpRequest();
      request.open("GET", sketch, true);
      request.responseType = "blob";   

      request.onload = function() {
          if (this.status == 200) {
              var animation = document.getElementById("animation");
              var src = URL.createObjectURL(this.response);
              animation.src = src;
              animation.setAttribute("data-processing-sources", 'sketches' + '/' + id + '.' + 'pde');
          }
       }
       request.send();

       Processing.loadSketchFromSources('animation', ['sketches' + '/' + id + '.' + 'pde']);
    }

Javascript :: processing.js animation not loading

1 Answers1