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.
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
- 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...