Lanzamiento de dibujo web: Paper.js vs. Procesamiento.js vs. Rafael

 

 

 

  • ¡Registro!
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Lecturas adicionales sobre SmashingMag:
    2. Descripción general
    3. Empezando
      1. Configurando Paper.js
      2. Configurando Processing.js
      3. Preparando a Rafael
    4. Dibujo orientado a objetos
    5. Hagamos que se mueva
      1. Animación en Processing.js
      2. Animación en Paper.js
      3. Animación en Raphaël
    6. Interacción
      1. Interacciones con Rafael
      2. Interacciones con Paper.js
      3. Interacciones con Processing.js
    7. No hay un ganador claro
      1. Mostrando Paper.js
      2. Mostrando Processing.js
      3. Mostrando a Rafael
    8. Las herramientas
    9. Construyamos algo real
    10. Interacción
      1. Interacciones con Rafael
      2. Interacciones con Paper.js
      3. Interacciones con Processing.js
    11. No hay un ganador claro
      1. Mostrando Paper.js
      2. Mostrando Processing.js
      3. Mostrando a Rafael
    12. Las herramientas
    13. Construyamos algo real
    14. El futuro del dibujo web

    Paper.js, Processing.js y Raphaël son las bibliotecas líderes para dibujar en la Web en este momento. Un par más están en camino y siempre puedes usar Flash, pero estos tres funcionan bien con HTML5 y tienen el soporte más amplio entre los proveedores de navegadores.

     

    Antes de dibujar algo en un navegador, hazte tres preguntas:

    1. ¿Necesita compatibilidad con navegadores más antiguos? Si la respuesta es sí, entonces tu única opción es Raphaël. Maneja navegadores desde IE 7 y Firefox 3. Raphaël incluso tiene algo de soporte para IE 6, aunque parte de su tecnología subyacente no se puede implementar allí.
    2. ¿Necesitas ser compatible con Android? Android no es compatible con SVG, por lo que tendrás que usar Paper.js o Processing.js . Algunos rumores dicen que Android 4 soportará SVG, pero la mayoría de los dispositivos Android no lo admitirán durante años.
    3. ¿Tu dibujo es interactivo? Raphaël y Paper.js se centran en la interacción con elementos dibujados haciendo clic, arrastrando y tocando. Processing.js no admite ningún evento a nivel de objeto, por lo que responder a los gestos del usuario es muy difícil. Processing.js puede dibujar una animación interesante en su página de inicio, pero las otras herramientas son mejores para aplicaciones interactivas.

    Paper.js, Processing.js y Raphaël son las bibliotecas líderes para dibujar en la Web en este momento. Un par más están en camino y siempre puedes usar Flash, pero estos tres funcionan bien con HTML5 y tienen el soporte más amplio entre los proveedores de navegadores.

    Lecturas adicionales sobre SmashingMag:

    • Lo mejor de ambos mundos: combinación de HTML5 y código nativo
    • Lanzamiento de dibujo web: Paper.js vs. Procesamiento.js vs. Rafael
    • Cómo crear animaciones web con Paper.js
    • ¿Te encanta generar SVG con JavaScript? ¡Muévelo al servidor!

    La elección del marco adecuado determinará el éxito de su proyecto. Este artículo cubre las ventajas y desventajas de cada uno y la información que necesita para tomar la mejor decisión.

    Todo el código de este artículo es de código abierto y se puede ejecutar en la página de demostración que acompaña a este artículo.

    .toc { ancho: 100%; margen: 1em 0; borde: 1px rgba sólido (0,0,0,0.1); } .toc td, .toc th { relleno: 4px 10px; borde inferior: 1px sólido #eee; borde derecho: 1px sólido #eee; colapso fronterizo: colapso; alineación de texto: izquierda; } .toc th { color de fondo: #ECECEC; }

    Descripción general

    papel.js Procesamiento.js Rafael
    Tecnología canvasetiqueta canvasetiqueta SVG
    Idioma escritura en papel Guión de procesamiento javascript
    Navegadores Es decir 9 Es decir 9 Es decir, 7
    Móvil solo iOS
    Modelo Vector y trama Ráster Vector
    Tamaño 56 KB 64KB 20 KB

    Todo es JavaScript una vez que se ejecuta la página, pero los marcos toman caminos diferentes para llegar allí. Raphaël está escrito directamente en JavaScript, pero Paper.js usa PaperScript y Processing.js usa su propio script. Todos son compatibles con Firefox, Chrome y Safari, pero Internet Explorer es un problema: Paper.js y Processing.js usan la canvasetiqueta y, por lo tanto, requieren IE 9.

    PaperScript es una extensión de JavaScript que permite escribir scripts que no contaminen el espacio de nombres global. Esto reduce los conflictos de JavaScript. PaperScript también admite matemáticas directas en objetos como Pointy Size: puedes sumar dos puntos como si fueran números.

    Processing.js se basa en un marco llamado Processing , que se ejecuta en la máquina virtual Java. Usted define inty floaten lugar de vary puede usar clases con herencia de estilo Java. Si bien el script Processing.js se parece un poco a Java, se parece más a JavaScript y no requiere muchas de las características más complejas de Java.

    Usar las tres bibliotecas es fácil si está familiarizado con JavaScript.

    Empezando

    Comience importando cada biblioteca. El proceso para configurar cada uno es un poco diferente.

    Configurando Paper.js

    headscript src="paper.js" type="text/javascript" charset="utf-8"/scriptscript type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs"/script/headbodycanvas/canvas

    Paper.js especifica un tipo de script text/paperscripty el ID de la canvasetiqueta en la que dibujarás. Utiliza esa identificación para saber dónde dibujar.

     

    Configurando Processing.js

    headscript src="processing.js" type="text/javascript" charset="utf-8"/script/headbodycanvas data-processing-sources="processing_circle.java"/canvas

    Processing.js usa el data-processing-sourcesatributo de la canvasetiqueta para importar su dibujo. Utilizo una .javaextensión para el archivo fuente de Processing para que mi editor lo codifique con colores correctamente. Algunos autores utilizan una extensión .pdeo .pjs. Tu decides.

    Preparando a Rafael

    headscript src="raphael-min.js" type="text/javascript" charset="utf-8"/scriptscript src="raphael_circle.js" type="text/javascript" charset="utf-8"/script/head

    Raphaël se importa como cualquier otro archivo JavaScript. Funciona bien con readyla función de jQuery o cualquier otro marco de JavaScript.

    Ahora podemos empezar a dibujar.

    Dibujo orientado a objetos

    Tanto Paper.js como Raphaël utilizan el dibujo orientado a objetos: dibujas un círculo y obtienes un objeto circular. Processing.js dibuja el círculo y no te devuelve nada. El siguiente ejemplo sencillo lo deja claro. Comencemos con un círculo en el medio de la pantalla en el punto 100,100.

    Papel.js:

    var circle = new Path.Circle(new Point(100, 100), 10);circle.fillColor = '#ee2a33';

    Rafael:

    var paper = Raphael('raphaelCircle', 200, 200);var c = paper.ellipse(100, 100, 10, 10);c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

    Procesamiento.js:

    void setup() { size(200, 200);}void draw() { background(#ffffff); translate(100, 100); fill(#52b755); noStroke(); ellipse(0, 0, 20, 20);}

    Cada fragmento de código dibuja el mismo círculo. La diferencia está en lo que puedes hacer con él.

    Paper.js crea el círculo como un objeto de ruta . Podemos conservar el objeto y cambiarlo más tarde. En Paper.js, circle.fillColor = ‘red’;llena nuestro círculo con rojo y circle.scale(2)lo hace dos veces más grande.

    Raphaël sigue el modelo orientado a objetos de Paper.js. En Raphaël, podemos cambiar el color de nuestro círculo con circle.attr(‘fill’, ‘red’);y ampliarlo con circle.scale(2, 2);. La cuestión es que el círculo es un objeto con el que podemos trabajar más adelante.

    Processing.js no utiliza objetos; la ellipsefunción no devuelve nada. Una vez que hayamos dibujado nuestro círculo en Processing.js, será parte de la imagen renderizada, como tinta en una página; no es un objeto separado que se pueda cambiar modificando una propiedad. Para cambiar el color, tenemos que dibujar un círculo nuevo directamente encima del anterior.

    Cuando llamamos fill, cambia el color de relleno de cada objeto que dibujamos a partir de entonces. Después de llamar translatey fill, cada forma se llenará de verde.

    Debido a que las funciones lo cambian todo, podemos terminar fácilmente con efectos secundarios no deseados. Llame a una función inofensiva y, de repente, ¡todo se vuelve verde! Processing.js proporciona las funciones pushMatrixy popMatrixpara aislar cambios, pero debe recordar llamarlos.

     

    La filosofía sin objetos de Processing.js significa que los dibujos complejos se ejecutan más rápido. Paper.js y Raphaël contienen referencias a todo lo que dibujas, por lo que la sobrecarga de memoria creada por animaciones complejas ralentizará tu aplicación. Processing.js no contiene referencias a elementos dibujados, por lo que cada forma ocupa una pequeña cantidad de memoria. La sobrecarga de memoria vale la pena si necesita acceder a un objeto más adelante, pero es excesiva si no lo hace. Paper.js le ofrece una salida a esto con el Symbolobjeto y rasterizando objetos, pero debe planificar con anticipación para que la aplicación siga funcionando rápidamente.

    La filosofía orientada a objetos versus sin objetos tiene implicaciones para todo lo que haga con estas bibliotecas. Da forma a la forma en que cada biblioteca maneja las animaciones.

    Hagamos que se mueva

    Los círculos giratorios no son muy interesantes, así que haremos que un cuadrado gire alrededor de un círculo.

    Animación en Processing.js

    setupProcessing.js admite animación con funciones y predefinidas draw, como esta:

    float angle = 0.0;void setup() { size(200, 200); frameRate(30);}void draw() { background(#ffffff); translate(100, 100); fill(#52b755); noStroke(); ellipse(0, 0, 20, 20); rotate(angle); angle += 0.1; noFill(); stroke(#52b755); strokeWeight(2); rect(-40, -40, 80, 80);}

    La setupfunción se llama una vez cuando se inicia la aplicación. Le decimos a Processing.js que anime con una velocidad de cuadros de 30 cuadros por segundo, por lo que nuestra drawfunción será llamada 30 veces por segundo. Esa tasa puede parecer alta, pero es normal para que una animación se vea fluida.

    La drawfunción comienza completando el fondo del canvas; pinta sobre cualquier resto de invocaciones anteriores de la drawfunción. Esta es una diferencia importante con Processing.js: no manipulamos objetos, por lo que siempre tenemos que limpiar las formas dibujadas previamente.

    A continuación, trasladamos el sistema de coordenadas al 100,100punto. Esto posiciona el dibujo a 100 píxeles desde la izquierda y 100 píxeles desde la parte superior del lienzo para cada dibujo hasta que restablezcamos las coordenadas. Luego, giramos en el ángulo especificado. El ángulo aumenta con cada draw, lo que hace que el cuadrado gire. El último paso es dibujar un cuadrado usando las funciones filly rect.

    La rotatefunción en Processing.js normalmente toma radianes en lugar de grados . Es por eso que aumentamos el ángulo de cada cuadro en 0,2, en lugar de un número mayor como 3. Esta es una de las muchas ocasiones en las que la trigonometría aparece en este método de dibujo.

    Animación en Paper.js

    Paper.js hace que esta animación simple sea más fácil que en Processing.js, con un objeto rectangular persistente:

    var r;function init() { var c = new Path.Circle(new Point(100, 100), 10); c.fillColor = '#ee2a33'; var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.strokeColor = '#ee2a33'; r.strokeWidth = 2;}function onFrame(event) { r.rotate(3);}init();

    Mantenemos el estado de nuestro cuadrado como objeto y Paper.js se encarga de dibujarlo en la pantalla. Lo giramos un poco para cada fotograma. Paper.js gestiona la ruta, por lo que no tenemos que volver a dibujar todo para cada cuadro ni realizar un seguimiento del ángulo de rotación ni preocuparnos por afectar a otros objetos.

     

    Animación en Raphaël

    Las animaciones en Raphaël están escritas en JavaScript estándar, por lo que Raphaël no tiene funciones específicas para manejar fotogramas de animación. En cambio, confiamos en setIntervalla función de JavaScript. Foro ciclismo

    var paper = Raphael('raphaelAnimation', 200, 200);var c = paper.ellipse(100, 100, 10, 10);c.attr({ 'fill': '#00aeef', 'stroke': '#00aeef'});var r = paper.rect(60, 60, 80, 80);r.attr({ 'stroke-width': 2, 'stroke': '#00aeef'});setInterval(function() { r.rotate(6);}, 33);

    Raphaël es similar a Paper.js en su enfoque orientado a objetos. Tenemos un cuadrado y rotatele llamamos una función. Por lo tanto, podemos girar fácilmente el cuadrado con una pequeña cantidad de código.

    Interacción

    Raphaël brilla cuando necesitas habilitar la interactividad en un dibujo. Proporciona un modelo de eventos similar al de JavaScript, lo que facilita la detección de clics, arrastres y toques. Hagamos que se pueda hacer clic en nuestro cuadrado.

    Interacciones con Rafael

    var paper = Raphael('raphaelInteraction', 200, 200);var r = paper.rect(60, 60, 80, 80);r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});var clicked = false;r.click(function() { if (clicked) { r.attr({'fill': '#00aeef', 'stroke': '#00aeef'}); } else { r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'}); } clicked = !clicked;});

    La clickfunción en Raphaël funciona como jQuery y puedes agregarla a cualquier objeto. Una vez que obtenemos el evento de clic, cambiar el color del cuadrado es fácil. Raphaël tiene más funciones para admitir arrastrar, desplazarse y todas las demás interacciones de usuario que espera de JavaScript.

    Interacciones con Paper.js

    Paper.js tiene una forma diferente de gestionar las interacciones, pero sigue siendo bastante fácil:

    var hitOptions = { fill: true, tolerance: 5};function init() { var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.fillColor = '#ee2a33';}function onMouseUp(event) { var hitResult = project.hitTest(event.point, hitOptions); if (hitResult hitResult.item) { if (hitResult.item.clicked) { hitResult.item.fillColor = '#ee2a33'; } else { hitResult.item.fillColor = '#f00ff0'; } hitResult.item.clicked = !hitResult.item.clicked; }}init();

    Paper.js se ocupa de los gestos del mouse a través de un concepto llamado " prueba de impacto ". Un golpe encuentra el punto debajo del cursor del mouse y descubre sobre qué objeto se encuentra. Las opciones de golpe le permiten definir cómo funciona el golpe: puede establecer opciones para cosas como qué tan cerca debe estar el mouse y si cuenta el centro del objeto o solo el borde. Podemos extender esta prueba de impacto a cualquier objeto o grupo de objetos en Paper.js.

     

    El equipo de Paper.js agregó eventos a nivel de objeto similares al de Raphaël hace unas semanas. Los eventos deberían aparecer en la próxima versión.

    Interacciones con Processing.js

    Processing.js dificulta la detección de clics del mouse. No admite eventos a nivel de objeto ni pruebas de acierto, por lo que estamos prácticamente solos.

    float bx;float by;int bs = 20;boolean bover = false;boolean clicked = false;void setup() { size(200, 200); bx = width/2.0; by = height/2.0; noStroke(); fill(#52b755); frameRate(10);}void draw() { background(#ffffff); // Test if the cursor is over the box if (mouseX bx-bs mouseX bx+bs mouseY by-bs mouseY by+bs) { bover = true; } else { bover = false; } translate(100, 100); rect(-40, -40, 80, 80);}void mousePressed() { if (bover) { if (clicked) { fill(#52b755); } else { fill(#f00ff0); } clicked = !clicked; }}

    Una vez que Processing.js dibuja el cuadrado, se olvida de él. Queremos que el color del cuadrado cambie cuando hacemos clic en él, pero el script no lo sabe, por lo que tenemos que hacer todos los cálculos nosotros mismos. La drawfunción detecta la posición del cursor del mouse y hace los cálculos para determinar si se encuentra dentro del cuadrado.

    El código no es tan malo para el cuadrado, pero nuestro círculo necesitaría . Y las formas más complejas, como óvalos, curvas y formas compuestas, requerirían aún más matemáticas.pr2

    No hay un ganador claro

    Cada marco tiene sus ventajas. Entre ellas, las funciones crean demostraciones interesantes y aplicaciones aún más interesantes.

    Mostrando Paper.js

    Paper.js destaca en la manipulación de formas complejas. Puede girar, torcer y transformar cualquier objeto de cientos de maneras. Estas transformaciones facilitan la conversión de objetos basándose en gestos interactivos. El nuevo Google Music Tour, que hace que las líneas de colores latan al ritmo de la música, muestra cómo se pueden realizar cambios complejos en formas simples.

    El otro factor sorprendente de Paper.js es su compatibilidad con gráficos rasterizados . Paper.js puede cambiar completamente la forma en que se dibujan las imágenes, incluso convirtiéndolas en espirales y tableros Q*bert .

    Mostrando Processing.js

    La característica más importante de Processing.js es la velocidad, lo que permite dibujar animaciones complejas en máquinas más lentas. Hay muchos ejemplos disponibles, pero la fluidez de las animaciones de Processing.js se muestra mejor en el estanque de koi de Ricardo Sánchez .

    El movimiento de las colas y el movimiento de los cuerpos hacen que el koi parezca muy natural. Processing.js lo hace fácil, con soporte para curvas y animaciones personalizadas.

    Processing.js también admite elementos de dibujo complejos como sombreado, iluminación y transformaciones 3D. Si desea crear animaciones complejas canvasmuy rápidamente, Processing.js es el claro ganador.

    Mostrando a Rafael

    La mejor característica de Raphaël es su compatibilidad con Internet Explorer 7 y 8. Si su aplicación debe ejecutarse en navegadores más antiguos, Raphaël es la única opción.

     

    La otra gran característica de Raphaël es su comunidad. Raphaël es más antiguo que Paper.js y Processing.js y, por lo tanto, ha tenido más tiempo para crear ejemplos, tutoriales y soporte al usuario. Tiene soporte incorporado para aceleración, transformaciones de animación y controladores de eventos que vimos en el ejemplo de interacción; también tiene una biblioteca de gráficos completa.

    Raphaël también cuenta con el mejor soporte de herramientas.

    Las herramientas

    Si ha trabajado con Flash, la falta de herramientas para estos marcos le decepcionará. Muchos de los marcos editarán imágenes SVG, pero ninguno ofrece un método de arrastrar y soltar para crear aplicaciones.

    Existen algunas herramientas simples, pero son más pruebas de concepto que productos reales. Adobe está trabajando en una herramienta llamada Edge , pero le queda un largo camino por recorrer.

    Si desea arrastrar y soltar, las animaciones web aún no son para usted. En este momento, este método de dibujo se parece más a la programación de videojuegos. Escribir código para dibujar un círculo es más difícil que hacer clic y arrastrar, pero se adapta a aplicaciones más complejas y algunas cosas divertidas.

    Construyamos algo real

    Hasta ahora, hemos visto algunos ejemplos simples, hemos visto las mejores características de cada plataforma y hemos visto cómo elegir la correcta. Cada marco tiene ventajas y desventajas, pero juzgarlos es difícil hasta que creas una aplicación real.

    Para comparar cada marco, he dibujado algunos engranajes. Cada engranaje se compone de dos círculos, con un juego de dientes alrededor del círculo exterior.

    Cuando a todas las formas se les da el mismo color, parecen un engranaje.

    var paper = Raphael('raphaelAnimation', 200, 200);var c = paper.ellipse(100, 100, 10, 10);c.attr({ 'fill': '#00aeef', 'stroke': '#00aeef'});var r = paper.rect(60, 60, 80, 80);r.attr({ 'stroke-width': 2, 'stroke': '#00aeef'});setInterval(function() { r.rotate(6);}, 33);

    Raphaël es similar a Paper.js en su enfoque orientado a objetos. Tenemos un cuadrado y rotatele llamamos una función. Por lo tanto, podemos girar fácilmente el cuadrado con una pequeña cantidad de código.

    Interacción

    Raphaël brilla cuando necesitas habilitar la interactividad en un dibujo. Proporciona un modelo de eventos similar al de JavaScript, lo que facilita la detección de clics, arrastres y toques. Hagamos que se pueda hacer clic en nuestro cuadrado.

    Interacciones con Rafael

    var paper = Raphael('raphaelInteraction', 200, 200);var r = paper.rect(60, 60, 80, 80);r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});var clicked = false;r.click(function() { if (clicked) { r.attr({'fill': '#00aeef', 'stroke': '#00aeef'}); } else { r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'}); } clicked = !clicked;});

    La clickfunción en Raphaël funciona como jQuery y puedes agregarla a cualquier objeto. Una vez que obtenemos el evento de clic, cambiar el color del cuadrado es fácil. Raphaël tiene más funciones para admitir arrastrar, desplazarse y todas las demás interacciones de usuario que espera de JavaScript.

     

    Interacciones con Paper.js

    Paper.js tiene una forma diferente de gestionar las interacciones, pero sigue siendo bastante fácil:

    var hitOptions = { fill: true, tolerance: 5};function init() { var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.fillColor = '#ee2a33';}function onMouseUp(event) { var hitResult = project.hitTest(event.point, hitOptions); if (hitResult hitResult.item) { if (hitResult.item.clicked) { hitResult.item.fillColor = '#ee2a33'; } else { hitResult.item.fillColor = '#f00ff0'; } hitResult.item.clicked = !hitResult.item.clicked; }}init();

    Paper.js se ocupa de los gestos del mouse a través de un concepto llamado " prueba de impacto ". Un golpe encuentra el punto debajo del cursor del mouse y descubre sobre qué objeto se encuentra. Las opciones de golpe le permiten definir cómo funciona el golpe: puede establecer opciones para cosas como qué tan cerca debe estar el mouse y si cuenta el centro del objeto o solo el borde. Podemos extender esta prueba de impacto a cualquier objeto o grupo de objetos en Paper.js.

    El equipo de Paper.js agregó eventos a nivel de objeto similares al de Raphaël hace unas semanas. Los eventos deberían aparecer en la próxima versión.

    Interacciones con Processing.js

    Processing.js dificulta la detección de clics del mouse. No admite eventos a nivel de objeto ni pruebas de acierto, por lo que estamos prácticamente solos.

    float bx;float by;int bs = 20;boolean bover = false;boolean clicked = false;void setup() { size(200, 200); bx = width/2.0; by = height/2.0; noStroke(); fill(#52b755); frameRate(10);}void draw() { background(#ffffff); // Test if the cursor is over the box if (mouseX bx-bs mouseX bx+bs mouseY by-bs mouseY by+bs) { bover = true; } else { bover = false; } translate(100, 100); rect(-40, -40, 80, 80);}void mousePressed() { if (bover) { if (clicked) { fill(#52b755); } else { fill(#f00ff0); } clicked = !clicked; }}

    Una vez que Processing.js dibuja el cuadrado, se olvida de él. Queremos que el color del cuadrado cambie cuando hacemos clic en él, pero el script no lo sabe, por lo que tenemos que hacer todos los cálculos nosotros mismos. La drawfunción detecta la posición del cursor del mouse y hace los cálculos para determinar si se encuentra dentro del cuadrado.

    El código no es tan malo para el cuadrado, pero nuestro círculo necesitaría . Y las formas más complejas, como óvalos, curvas y formas compuestas, requerirían aún más matemáticas.pr2

    No hay un ganador claro

    Cada marco tiene sus ventajas. Entre ellas, las funciones crean demostraciones interesantes y aplicaciones aún más interesantes.

    Mostrando Paper.js

    Paper.js destaca en la manipulación de formas complejas. Puede girar, torcer y transformar cualquier objeto de cientos de maneras. Estas transformaciones facilitan la conversión de objetos basándose en gestos interactivos. El nuevo Google Music Tour, que hace que las líneas de colores latan al ritmo de la música, muestra cómo se pueden realizar cambios complejos en formas simples.

     

    El otro factor sorprendente de Paper.js es su compatibilidad con gráficos rasterizados . Paper.js puede cambiar completamente la forma en que se dibujan las imágenes, incluso convirtiéndolas en espirales y tableros Q*bert .

    Mostrando Processing.js

    La característica más importante de Processing.js es la velocidad, lo que permite dibujar animaciones complejas en máquinas más lentas. Hay muchos ejemplos disponibles, pero la fluidez de las animaciones de Processing.js se muestra mejor en el estanque de koi de Ricardo Sánchez .

    El movimiento de las colas y el movimiento de los cuerpos hacen que el koi parezca muy natural. Processing.js lo hace fácil, con soporte para curvas y animaciones personalizadas.

    Processing.js también admite elementos de dibujo complejos como sombreado, iluminación y transformaciones 3D. Si desea crear animaciones complejas canvasmuy rápidamente, Processing.js es el claro ganador.

    Mostrando a Rafael

    La mejor característica de Raphaël es su compatibilidad con Internet Explorer 7 y 8. Si su aplicación debe ejecutarse en navegadores más antiguos, Raphaël es la única opción.

    La otra gran característica de Raphaël es su comunidad. Raphaël es más antiguo que Paper.js y Processing.js y, por lo tanto, ha tenido más tiempo para crear ejemplos, tutoriales y soporte al usuario. Tiene soporte incorporado para aceleración, transformaciones de animación y controladores de eventos que vimos en el ejemplo de interacción; también tiene una biblioteca de gráficos completa.

    Raphaël también cuenta con el mejor soporte de herramientas.

    Las herramientas

    Si ha trabajado con Flash, la falta de herramientas para estos marcos le decepcionará. Muchos de los marcos editarán imágenes SVG, pero ninguno ofrece un método de arrastrar y soltar para crear aplicaciones.

    Existen algunas herramientas simples, pero son más pruebas de concepto que productos reales. Adobe está trabajando en una herramienta llamada Edge , pero le queda un largo camino por recorrer.

    Si desea arrastrar y soltar, las animaciones web aún no son para usted. En este momento, este método de dibujo se parece más a la programación de videojuegos. Escribir código para dibujar un círculo es más difícil que hacer clic y arrastrar, pero se adapta a aplicaciones más complejas y algunas cosas divertidas.

    Construyamos algo real

    Hasta ahora, hemos visto algunos ejemplos simples, hemos visto las mejores características de cada plataforma y hemos visto cómo elegir la correcta. Cada marco tiene ventajas y desventajas, pero juzgarlos es difícil hasta que creas una aplicación real.

    Para comparar cada marco, he dibujado algunos engranajes. Cada engranaje se compone de dos círculos, con un juego de dientes alrededor del círculo exterior.

    Cuando a todas las formas se les da el mismo color, parecen un engranaje.

    Cada engranaje girará un poco con cada cuadro de la animación. A la primera marcha se le dará una velocidad y el resto se moverá en relación con ella. Los engranajes se organizarán, engranarán y girarán juntos con una increíble cantidad de trigonometría. Júntelos y obtendrá un sistema de engranajes complejo.

    Papel.js:

    Procesamiento.js:

    Rafael:

    Bueno, ese no era exactamente Raphaël. La rotatefunción funciona de manera diferente en Raphaël que en Paper.js y Processing.js. Raphaël no admite la rotación alrededor de un punto fijo. En cambio, los dientes de los engranajes se dibujan y vuelven a dibujar de forma independiente, y vuelan por el aire en lugar de girar alrededor del centro. La única forma de girar realmente el engranaje sería dibujar todo el engranaje como un solo camino, y eso requiere más matemáticas de las que estoy dispuesto a escribir. Si alguien quiere probarlo, todo es de código abierto.

    El futuro del dibujo web

    Apostamos por cada nueva tecnología que aprendemos: esperamos que se popularice y que nuestra inversión dé sus frutos. Las tecnologías suben y bajan según sus respectivos méritos, pero entran en juego otros factores, como el soporte de los proveedores y los usos comerciales. El futuro de nuestra industria es casi un juego de ad






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Lanzamiento de dibujo web: Paper.js vs. Procesamiento.js vs. Rafael

    Lanzamiento de dibujo web: Paper.js vs. Procesamiento.js vs. Rafael

    ¡Registro! Implemente rápidamente. Implementar inteligentemente Índice Lecturas adicionales sobre Smash

    programar

    es

    https://aprendeprogramando.es/static/images/programar-lanzamiento-de-dibujo-web-paper-792-0.jpg

    2024-05-20

     

    Lanzamiento de dibujo web: Paper.js vs. Procesamiento.js vs. Rafael
    Lanzamiento de dibujo web: Paper.js vs. Procesamiento.js vs. Rafael

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20