Con este artículo comenzamos una serie de tutoriales que nos servirán para aprender cómo comunicar entre los lenguajes de programación Processing y Javascript, para pasarse y ejecutar instrucciones desde el uno en el otro, con las librerías Processing.js.

Si estás leyendo el Manual de Processing.js publicado en DesarrolloWeb.com y te has puesto a imaginar una aplicación de que desarrollar como práctica, quizás te hayas parado a pensar en la manera de comunicar entre los dos lenguajes de programación que estarías utilizando.

Por qué necesitaremos comunicar entre Javascript y Processing

Javascript y Processing tienen un juego de instrucciones diferente y también ofrecen al desarrollador una serie de funciones y métodos con distintas coberturas, que sirven para relacionarse con los distintos integrantes de una aplicación web. Por un lado tienes Processing, que te facilita el trabajo dentro del elemento Canvas del HTML5 y por el otro tienes Javascript que contiene todas las instrucciones para trabajo con el navegador, que estás acostumbrado a utilizar en las aplicaciones web enriquecidas del lado del cliente tradicionales.

Si todavía no te queda clara esa necesidad, imagina por un momento un par de casos:

• Quieres hacer un botón en un formulario que, al pulsarlo, cambie lo que hay dibujado en el elemento canvas o modifique la animación que se está visualizando.
• Quieres hacer una animación cuyas características estén definidas por medio de elementos de un formulario.

Eso son un par de ejemplos, entre un millón de posibilidades que te podrías imaginar, en las que estarías obligado a comunicar entre Javascript y Processing. En el primer caso estarías haciendo un botón Javascript de toda la vida, pero que tiene un evento click de Javascript en el que querrías acceder al lenguaje Processing. En el segundo caso estarías en Processing y querrías acceder a objetos que dependen de la jerarquía de objetos del navegador en Javascript (el DOM de la página). Todo eso lo vamos a ver en éste y otros artículos a partir de varios ejemplos.

Acceso desde Processing a Javascript

La comunicación entre Processing y Javascript es bidireccional. Es decir, desde un lenguaje podrás acceder a los recursos de otro y viceversa. De entre esas dos direcciones posibles en el presente artículo vamos a ver únicamente una de ellas: acceder a las instrucciones Javascript cuando estamos animando un canvas con Processing.js.

Pero hay además otra cosa que debemos tener en cuenta y es que, como vimos en artículos anteriores de este manual, tenemos dos posibilidades para escribir programas basados en Processing.js. La primera consiste en escribir directamente código en el lenguaje Processing. La segunda es escribir código en el lenguaje Javascript utilizando el objeto Processing.

Veremos estos dos tipos posibles de programación aportando dos nuevos ejemplos para seguir aprendiendo el modo de trabajo que debemos desempeñar cuando trabajamos con Processing.js.

A) Acceder a Javascript si escribimos Processing con únicamente código Javascript

Si estás escribiendo tu aplicación Processing a través de código Javascript quizás no te cueste imaginar para nada cómo puedes acceder a los recursos Javascript, como el DOM del navegador (al fin y al cabo no has salido de Javascript).

¿Recuerdas el ejemplo de texto en movimiento relatado en el artículo de trabajo con Processing desde Javascript? Pues lo vamos a modificar para que el string que se mueva sea el que esté escrito en un campo INPUT de texto.

El ejemplo lo puedes ver en una página aparte.

Las diferencias con el anterior ejemplo son que ahora tenemos un campo de texto en la página:

<input type="text" id="txtmensaje" value="Me gusta processing.js" size="80">

Y que accedemos a ese campo de texto a través de la función draw (recordar que esa función era la que servía para indicar a Processing las instrucciones que se deben ejecutar para la animación).

processing.draw = function() {
   var texto = document.getElementById("txtmensaje").value;
   processing.background(66, 33, 33);
   processing.text(texto,5,posy);
   posy = (posy + 1) % processing.height;
};

Por si no te ha quedado claro, el lugar donde accedemos a lo que hay escrito en el campo de texto es:

var texto = document.getElementById("txtmensaje").value;

El restante de ese código es Javascript en el que se utiliza el objeto Processing, creado a través de las librerías Processing.js, para animar el canvas.

B) Acceder a Javascript si escribimos Processing con lenguaje Processing

Como habrás podido comprobar, si escribes todo con instrucciones Javascript, no hay mucho misterio en invocar otras sentencias Javascript en medio de tu código. ¿Pero qué pasa si estabas escribiendo código en el lenguaje Processing?

El lenguaje Processing para páginas web se interpreta por medio de las librerías Processing.js, que se encargan de traducirlo a Javascript nativo antes de que el navegador llegue a ejecutar nada. Por tanto, aunque escribas tu código en Processing, internamente se convertirá en Javascript antes de que el navegador lo ejecute. Lo que no hemos dicho todavía es que el intérprete de Processing.js es suficientemente listo para distinguir las instrucciones Processing y las instrucciones Javascript, por lo que solo traducirá a Javascript aquellas instrucciones no estén en ese lenguaje.

Por ello, cuando estamos codificando con Processing, podemos escribir tanto instrucciones del propio lenguaje Processing como instrucciones en el lenguaje Javascript y todas convivirán perfectamente y se ejecutarán en el motor de Javascript del navegador como Javascript nativo. Al final, como se deduce, al escribir código Processing no tenemos por qué preocuparnos mucho sobre si lo intercalamos con sentencias Javascript.

Para entender este asunto podemos mostrar otro ejemplo de uso de Processing.js para realizar animaciones. En este caso vamos a tener un sencilla animación de una forma de cuadrado cuyo tamaño aumenta hasta que supera los límites del canvas y se reduce nuevamente para comenzar la animación. En el ejemplo tendremos un checkbox que servirá para invertir los colores del dibujo si se encuentra marcado.

Podemos ver el ejemplo en una página aparte.

En este ejemplo tendremos que acceder constantemente al campo checkbox para comprobar si está marcado o no, de modo que se muestren unos colores u otros.

El código, en lenguaje Processing, de este ejemplo sería el siguiente:

int tamano = 1;

void setup(){
   size(250,250);
}
void draw() {
   //defino los colores según el campo checkbox esté o no marcado
   if(document.getElementById("invertir").checked){
      fill(80,80,80);
      background(200,200,200);
   }else{
      fill(200,200,200);
      background(80,80,80);
   }
   rect(125-tamano/2,125-tamano/2,tamano,tamano)
   tamano = (tamano + 1)%250;
};

Como se puede ver, está intercalado con una instrucción Javascript para acceder al campo checkbox del navegador. Creo que será fácil localizar el pedazo de código Javascript, pero para los más despistados, es el siguiente:

document.getElementById("invertir").checked

Processing.js es lo suficientemente listo como para interpretar ambos lenguajes sin hacerse ningún lío.

En el siguiente artículo veremos cómo acceder desde Javascript a las instrucciones propias del lenguaje Processing para realizar acciones sobre un canvas.