JavaScript :: processing.js animasyon

Question

yüklenmemesi ben kullanıcı girişi için bir form var Aynı işlevdeki ses ve animasyon motorları, aşağıda. (. Ses çalma tamam tetiklediği)

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(); 
    }; 

Ama animasyon olduğu gibi html belgede sadece önceden yüklü ise bu işlev tarafından yükleniyor değil: yani neden

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

neyi Yanlış yapıyorum?

Answer 1

Işleme lib, <canvas> için otomatik olarak görünüyor ve bu durumda kaynak bulunamadı. Bu nedenle, <canvas> özniteliğini ayarlayan işlevin sonunda Processing.loadSketchFromSources yöntemini kullanmanız gerekir.

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