È ragionevole utilizzare Processing.js di John Resig?

Question

Sto pensando di creare un sito Web con un uso piuttosto intenso di JavaScript / canvas e ho esaminato Elaborazione .js e mi sembra che renderebbe la manipolazione della tela significativamente più semplice. Qualcuno sa qualche motivo per cui non dovrei utilizzare Processing.js? Capisco che i browser più vecchi non saranno in grado di usarlo, ma per ora va bene.

Answer 1

Come accennato, IE non è supportato da Processing.js (incluso IE8 beta). Ho anche riscontrato che processing.js è un po 'lento in termini di prestazioni, rispetto al solo utilizzo di canvas (specialmente se stai analizzando una stringa con il linguaggio Processing, invece di usare l'API javascript).

Preferisco personalmente l'API canvas rispetto al wrapper di elaborazione, perché mi dà più controllo. Ad esempio:

La funzione linea di elaborazione () è implementata in questo modo (approssimativamente):

function line (x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.closePath();
  context.stroke();
};

E lo useresti in questo modo (supponendo che tu stia utilizzando l'API esposta a JavaScript):

var p = Processing("canvas")
p.stroke(255)

////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////

Nota che ogni chiamata a line () deve aprire e chiudere un nuovo percorso, mentre con l'API canvas puoi disegnare tutte le linee all'interno di un singolo blocco beginPath / endPath, migliorando significativamente le prestazioni:

context.strokeStyle = "#fff";
context.beginPath();

////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///

context.closePath();
context.stroke();

Answer 2

Se stai bene, non funziona in IE7, allora prova. Ho funzionato su Firefox 3. È un modo semplice per portare effetti Silverlight / Flash sulla tua pagina.

Il mio sospetto è che le biblioteche come Processing.js cambieranno o verranno aggiornate su un percorso rapido, quindi preparati a correre quando lo fanno e tieniti aggiornato con le nuove funzionalità.

Answer 3

Non semplifica il disegno sulla tela. Ciò che fa è semplificare il compito dell'animazione se si utilizza la tela. Se stai realizzando animazioni e non ti interessa il supporto completo del browser, usa Processing.js. Se non stai realizzando animazioni (ad esempio se stai creando grafici o angoli arrotondati), non aggiungere il sovraccarico di Processing.js.

Ad ogni modo, ti consiglio di imparare come usare direttamente l'API canvas. Comprendere l'API della tela, in particolare le trasformazioni, ti sarà di grande aiuto anche se stai utilizzando Processing.js.

Answer 4

Direi invece usare Flash. Più browser hanno Flash installato, rispetto al numero di browser che funzionano con processing.js. Inoltre, otterrai prestazioni molto migliori da Flash rispetto all'uso di JavaScript (almeno per ora, anche se ci sono progetti in corso per accelerare molto JS, ma è ancora un po 'lontano)

Answer 5

Prova la nuova implementazione javascript p5js p5js.org

Oh e in risposta alla risposta di Leo, in realtà non devi usare la funzione linea nell'elaborazione o in p5js, ci sono beingShape separati e beingPath funzioni simili all'api della tela.