Otro ejemplo de acceso entre Processing y Javascript

  • Por
Ejemplo de animación en CANVAS, en una página que contiene diversos controles para modificar sus características desde programación en Javascript y elementos de formulario que se pueden acceder desde Processing.
A lo largo de los últimos dos artículos del Manual de Processing.js hemos visto cómo comunicar entre Javascript y Processing. Por un lado tenemos que desde Processing se pueden acceder a los recursos Javascript y por otro lado que desde Javascript podemos acceder a las cosas definidas por Processing.

Ahora vamos a hacer un ejercicio que nos ayude a practicar un poco más sobre estas vías de comunicación y acceso a los recursos de Processing y Javascript entre si. El ejemplo es un canvas donde aparece una animación de un cuadrado que va moviéndose por el lienzo de manera aleatoria. Tendremos controles para definir el tamaño del cuadrado, así como parar y reanudar la animación. También habrá un par de elementos de texto donde se podrán ver las coordenadas donde se posiciona el cuadrado en cada instante.

El ejemplo podemos verlo en marcha para darnos perfecta idea de los objetivos a realizar.

Ahora vamos a mostrar los dos códigos que utilizamos para generar este ejemplo. Por un lado tenemos el código de la página (HTML y Javascript) y por otro lado el código en lenguaje Processing para definir la animación en el canvas.

Código HTML y Javascript

El código de la página que implementa este ejemplo es el siguiente:

<!DOCTYPE html>

<html>
<head>
<title>Accedo a objetos javascript desde processing</title>
<script type="text/javascript" src="processing/processing-1.3.6.min.js"></script>
<script type="text/javascript">
var fps=2;
function parar(){
processingInstance = Processing.getInstanceById('micanvas');
processingInstance.noLoop();
}
function reanudar(){
processingInstance = Processing.getInstanceById('micanvas');
processingInstance.loop();
}
function actualizaCoordenadas(x,y){
document.getElementById("coordenadax").value = x;
document.getElementById("coordenaday").value = y;
}
</script>
</head>

<body>
<h1>Trabajo entre Processing.js y Javascript</h1>

<form name="formulario">
Tamaño del cuadrado:
<br>
<select name="tam">
<option value="2">2</option>
<option value="5" selected=1>5</option>
<option value="15">15</option>
<option value="50">50</option>
</select>
<br>
<br>
<button type="button" onclick="parar()">Parar</button>
<button type="button" onclick="reanudar()">Reanudar</button>
</form>
<p>
<canvas id="micanvas" data-processing-sources="cuadrados-locos.pjs"></canvas>
</p>
<p>
<form>
X: <input type="text" id="coordenadax"> - Y: <input type="text" id="coordenaday">
</form>
</p>
</body>
</html>

Nos podemos fijar en el elemento Canvas, que tiene definido el atributo data-processing-sources="cuadrados-locos.pjs", que indica el código Processing que se debe ejecutar para generar la animación.

También sería bueno identificar los elementos de formulario que se utilizan para definir las características de la animación. Tenemos un elemento SELECT, dos botones BUTTON para parar o reanudar la animación y un par de elementos INPUT de texto para mostrar las coordenadas donde está el cuadrado.

Dentro del código Javascript de la página se hacen varias cosas. Lo primero que cabe señalar es la creación de una variable global llamada "fps" que nos guarda un valor entero. A esa variable accederemos luego desde el código Processing.

var fps=5;

Por último hay que fijarse en las funciones Javascript para realizar diversas funcionalidades. Mención especial para las funciones parar() y reanudar().

function parar(){
   processingInstance = Processing.getInstanceById('micanvas');
   processingInstance.noLoop();
}
function reanudar(){
   processingInstance = Processing.getInstanceById('micanvas');
   processingInstance.loop();
}

Como se puede ver, se accede a la instancia del objeto Processing asociada al canvas con id="micanvas" y luego se llaman a los métodos noLoop(), para parar la animación y loop() para reanudarla.

También hemos creado una función Javascript normal para invocarla desde el código de Processing.

function actualizaCoordenadas(x,y){
   document.getElementById("coordenadax").value = x;
   document.getElementById("coordenaday").value = y;
}

Esa función simplemente carga los valores de las coordenadas en los campos de texto.

Código Processing

Ahora veamos el código para hacer la animación en el Canvas, que se ha escrito en lenguaje Processing.

void setup(){
   size(150,100);
   fill(255, 230, 200);
   frameRate(fps);
};
void draw() {
   background(50, 120, 0);
   int x = random(0,150);
   int y = random(0,100);
   rect(x,y,document.forms["formulario"].tam.value,document.forms["formulario"].tam.value)
   actualizaCoordenadas(x,y);
};

En el setup de la animación se define el tamaño del canvas, el color de dibujo y el número de frames por segundo en la animación. Para marcar los frames por segundo se utiliza la función frameRate() de Processing, a la que se le pasa una variable que fue definida en el código Javascript (fps).

En el método draw se invoca a background() para borrar el lienzo, luego se calculan dos coordenadas aleatorias y luego se dibuja un cuadrado. La posición se define por x e y calculados aleatoriamente. Las dimensiones del cuadrado se definen por el SELECT que había en el código HTML y desde Processing se accede al value del SELECT de la misma manera que haríamos desde Javascript.

Por último, otra cosa interesante que se hace en draw es la llamada a una función definida en Javascript, actualizaCoordenadas(x,y), a la que se le pasan los valores aleatorios x, y definidos anteriormente en el código Processing.

Conclusión

Con este artículo y los dos anteriores del Manual de Processing.js, hemos podido aprender a comunicar entre los scripts Processing y Javascript.

Hemos aprendido a acceder a cualquiera de los recursos Javascript desde el código de Processing, como por ejemplo:

  • Objetos Javascript del DOM del navegador
  • Variables Javascript creadas por nosotros
  • Funciones Javascript creadas por nosotros
Hemos aprendido a acceder a los recursos Processing asociados a un elemento Canvas desde Javascript:
  • Acceso al API de Processing.js
  • Acceso a métodos creados por nosotros en el lenguaje Processing.
  • No tenemos acceso a variables creadas por nosotros en el código Processing, pero podemos acceder creando métodos, como si fueran variables privadas de programación orientada a objetos.
En definitiva, esperamos que todos estos conocimientos te den pie a desarrollar algún ejemplo interesante utilizando estas librerías, que utilice tanto los recursos del API de Processing.js como los recursos disponibles en el navegador del usuario.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Andres

16/5/2012
No consigo llamar correctamente al archivo pjs o pde
Hola.
Para que funcione tengo que programar en javascipt, pero me gustaría hacerlo en processing.
Si llamo al archivo .pde (cambiando la extensión a .pjs) o sin cambiarla no me funciona ningún ejemplo:
<canvas id="micanvas" data-processing-sources="cuadrados-locos.pjs"></canvas>
<canvas id="micanvas" data-processing-sources="cuadrados-locos.pde"></canvas>
Ninguna de esas llamadas me funciona, en niguno de los ejemplos del tutorial, ni en el más sencillo.
Un saludo y gracias.

FABIAN S.

23/6/2018
No funcionan ejemplo de Processing.js
Me sucedió lo mismo, los ejemplos más sencillos no funcionaban. Entonces instale en local el servidor XAMPP, y puse allí los archivos de ejemplo de Processing y todo funcionó.