javascript/jquery/processing.js - comment créer et animer des éléments de canevas le plus efficacement possible

J'essaye de construire une application qui, basée sur diverses interactions utilisateur, permet d'ajouter divers visuels basés sur l'ellipse à la scène, puis animé très simplement. J'ai actuellement une configuration de base où javascript/jquery communique avec processing.js, mais cela semble juste un code vraiment inefficace, car le traitement repose sur l'exécution d'une boucle continue afin de dessiner à l'écran. Je me demande, premièrement, si la façon dont je le fais sera efficace à plus grande échelle, et deuxièmement, s'il y a une meilleure technologie ou méthode à utiliser. Je viens d'un arrière-plan flash où rien à l'écran n'est changé ou dessiné/animé à moins qu'une fonction ne soit déclenchée lui disant d'animer, ce qui semble raisonnable. Quoi qu'il en soit, voici mon code:javascript/jquery/processing.js - comment créer et animer des éléments de canevas le plus efficacement possible

HTML/JS:

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Processing</title> 
     <meta charset="utf-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
     <script src="js/processing-1.3.6.min.js"></script> 
     <script src="processing/Tween.lib"></script> 
    </head> 

    <body> 
     <canvas id="circles" data-processing-sources="js/drawCircles.js"></canvas> 
     <div id="clicker">Click</div> 
     <script> 

     window.Processing.data = {}; 

     var dataRef = window.Processing.data; 
     var animInterval; 
     dataRef.circleArray = new Array(); 


     $('#clicker').click(function(){ 
      var circle = {}; 
      circle.radius = 50; 
      dataRef.circleArray.push(circle) 
      var from = {property: 50}; 
      var to = {property: 75}; 

      jQuery(from).animate(to, { 
       duration: 300, 
       step: function() { 
        for (var i in dataRef.circleArray){ 
         circle.radius = this.property; 
        } 
       } 
      }); 
     }) 

     </script> 
    </body> 
</html>

Processing.js

// Global variables 
float radius = 1.0; 
int X, Y; 
int nX, nY; 
int delay = 16; 

// Setup the Processing Canvas 
void setup(){ 
    // Fill canvas grey 
    background(100); 
    size(200, 200); 
    strokeWeight(10); 
    frameRate(15); 
    X = width/2; 
    Y = width/2; 
    nX = X; 
    nY = Y; 
} 

// Main draw loop 
void draw(){ 
    var dataRef = window.Processing.data; 
    for (var i in window.Processing.data.circleArray){ 
     radius = dataRef.circleArray[i].radius; 
     // Set fill-color to blue 
     fill(0, 121, 184); 
     // Set stroke-color white 
     stroke(255); 
     // Draw circle 
     ellipse(X+(i*10), Y, radius, radius); 
    }   
}

Source

2011-10-31 mheavers

Avez-vous regardé les bibliothèques de toile plus simples, comme [fabric.js] (http://kangax.github.com/ fabric.js /)? Fabric vous donne un modèle d'objet pour travailler avec des objets sur le canevas (+ animation, analyse svg, et plus). Et tout est JS, donc pas besoin d'apprendre une nouvelle syntaxe. – kangax

Si vous voulez contrôler quand Processing.js dessine sur la toile, vous avez deux options. Dans les deux cas, la première chose que vous aurez envie de faire est d'obtenir l'accès à l'instance de traitement:

var p = Processing.instances[0];

Maintenant, vous pouvez faire toutes les API de traitement des appels que vous voulez à partir de JavaScript. Vous pouvez appeler noLoop() dans la fonction setup() de votre sketch, puis dans votre boucle d'animation jQuery vous pouvez appeler p.redraw(), qui animera une image.

Dans Processing.js, nous attachons toutes les fonctions à l'instance de traitement. Donc, une autre option est de créer votre propre fonction dans l'esquisse et l'appeler avec:

var p = Processing.instances[0]; 
p.drawEllipses(radius);

Vous pouvez même passer les données dans les paramètres de la fonction, en supprimant la nécessité d'windows.Processing.data.

Source

2011-11-01 02:53:55

Merci - cela est logique, mais je ne peux pas détecter les instances de traitement utilisant ce code. Y a-t-il quelque chose que je dois faire dans mon code de traitement pour que cela soit disponible? – mheavers

C'est ... bizarre. Si je cours une esquisse dans la page Web, je peux ouvrir ma console et Processing.instances retournera un tableau des esquisses de traitement actuellement actives. Si vous rencontrez toujours des problèmes, venez nous rendre visite sur IRC: irc.mozilla.org #processingjs. –

Merci - Je pense que le problème était que je mélange un nouveau code avec une ancienne instance de traitement, sinon votre solution est correcte. – mheavers

Pour ce que vous voulez faire, vous pouvez préférer utiliser une autre bibliothèque, comme paperjs http://paperjs.org/

Source

2011-11-01 20:44:13 Sycren

Ouais je pense que tu as raison. Je suis passé à raphael.js - mais paperjs est cool aussi. – mheavers

javascript/jquery/processing.js - comment créer et animer des éléments de canevas le plus efficacement possible

Répondre

Questions connexes