Programar en JS para PJS

trabajar con el framework Processing.js para dibujo y animación en el elemento canvas, pero utilizando siempre el lenguaje nativo Javascript.

En Processing podemos utilizar Javascript puro.

Ejemplos:

http://empatica-cursos.esy.es/js_pjs/ejemplo1.html

http://empatica-cursos.esy.es/js_pjs/ejemplo2.html

Los desarrolladores que tengan experiencia con Javascript probablemente preferirán seguir utilizando ese lenguaje porque aprender las sentencias y sintaxis del lenguaje Processing siempre significará un esfuerzo adicional, a pesar de que, como hemos visto, tanto Processing como Javascript tienen una sintaxis casi idéntica.

La decisión es personal, pues las diferencias no las aprecia la máquina sino el usuario que las escribe y lee (Processing está escrito para que ambos códigos sean sinónimos, es decir el programador elige si escribe en JS o PJS...porque para el navegador será lo mismo. es como hablarle en español o inglés indistintamente a alguien bilingüe que maneje esos dos idiomas. Incluso podríamos decirle unas palabras en inglés y otras en castellano y nos seguiría entendiendo. - esa es la magia de un preprocesador-traductor de lenguajes de programación.)

Tanto trabajando con Processing, como con Javascript, los navegadores van a ser igual de compatibles con nuestros programas y los recursos a los que tendremos acceso son exactamente los mismos.

El modo de crear nuestros programas tendrá algunas ligeras diferencias que debemos conocer.

En mi caso funcionó sobre Sketchpad aplicar las siguientes líneas de código al comienzo:

function miProceso(processing) {

var pos = 0;

processing.size(300,100); // definimos el tamaño de lienzo.

};

---------------------------

En el caso de usar Javascript, todo el código de nuestra aplicación, puede estar incluido en el mismo archivo HTML. Por ejemplo, podríamos utilizar un código como este:

<!DOCTYPE html>

<html>

<head>

<title>Trabajando con Processing</title>

</head>

<body>

<h1>Probando el framework para dibujo en el elemento canvas del HTML5</h1>

function miProceso(processing) { //todo el código Javascript para definir el dibujo y la animación }

var canvas = document.getElementById("micanvas");

var miInstanciaProcessing = new Processing(canvas, miProceso);

</script>

</body>

</html>

Este código está simplificado

Detalles más importantes del código anterior.

<canvas id="micanvas" width="300" height="100"></canvas> // incluimos el canvas en donde se verá la animación, hay que ver su atributo "id", que luego // utilizaremos para referirnos a este elemento.

function miProceso(processing) {

//todo el código Javascript para definir el dibujo y la animación

}

Esa función debe contener todo el código que queramos implementar en nuestra aplicación, para inicializar el dibujo y realizar la animación deseada. Como vemos, en la función recibimos un parámetro que se almacenará en la variable "processing".

Ese parámetro es muy importante, ya que, dentro del código de la función, contendrá un objeto sobre el que podremos invocar métodos y acceder a sus propiedades, para realizar los comandos propios de las librerías ProcessingJS.

var canvas = document.getElementById("micanvas");

Con esto accedemos al objeto canvas, del DOM del navegador, asociado al identificador "micanvas".

var miInstanciaProcessing = new Processing(canvas, miProceso);

Finalmente, a través de esta sentencia estamos haciendo que Processing.js ejecute la función miProceso sobre el objeto canvas que habíamos recuperado en la sentencia anterior.

Ahora que ya hemos visto la estructura básica que tendría nuestro archivo HTML, que hace uso de Processing.js para animar un canvas, vamos a ver cómo sería la función Javascript que definiría todo el trabajo de dibujo y animación.

function miProceso(processing) {

var pos = 0;

processing.setup = function(){

processing.size(300,100);

processing.fill(220, 220, 255);

var fontA = processing.loadFont("verdana");

processing.textFont(fontA, 18);

}

processing.draw = function() {

processing.background(83, 203, 0);

processing.text("Hola mundo!!!",pos,45);

pos = (pos + 1) % processing.width;

};

}

Como ya habíamos comentado, esta función recibe un parámetro que es el objeto Processing, sobre el que podemos invocar los métodos que incluye la librería de dibujo y animación.

Una vez dentro de la función, podemos definir variables globales que utilizaremos a lo largo de la animación, como es el caso de la variable "pos".

Luego tenemos dos bloques de código, definidos por dos funciones asignadas a las propiedades "setup" y "draw" del objeto Processing.

Tal como vimos en el artículo anterior, la función asignada a "setup" contiene el código que inicializará el lienzo y las variables que queramos usar a lo largo del programa.

Por su parte, la función "draw" contendrá el código que se ejecutará repetidas veces para producir el efecto de animación.

processing.draw = function() { } //la función para dibujar

En el código anterior, durante el setup, realizamos varias acciones de inicialización:

processing.size(300,100); // definimos el tamaño de lienzo.

Como has podido ver en la anterior línea de código, utilizamos el objeto "processing" recibido por parámetro para acceder a las funciones de la librería Processing.js.

Si queremos invocar la función size() para alterar el tamaño del canvas, tendremos que lanzar el método sobre dicho objeto y quedaría processing.size(300,100).

En las librerías Processing.js hay también algunas variables accesibles por los programadores, como la anchura y la altura del lienzo, a las que accedemos también a través de las propiedades del objeto "processing", por ejemplo processing.width o processing.height.

processing.fill(220, 220, 255); // Luego definimos el color de dibujo, con el que se pintará un texto que vamos a dibujar más tarde.

var fontA = processing.loadFont("verdana"); // Declaramos una fuente tipográfica "verdana" que utilizaremos más adelante.

processing.textFont(fontA, 18); //Por último asignamos el tamaño de la fuente.

Durante el proceso de dibujo, definido por la función asignada a "draw", hacemos otra serie de pasos:

processing.background(83, 203, 0); //Primero pintamos el fondo del lienzo, borrando todo lo que hubiera anteriormente.

processing.text("Hola mundo!!!",pos,45); // Luego escribimos la frase "Hola Mundo!!!", en las coordenadas definidas por la varible "pos" y el valor 45. Además, se escribirá con la fuente dada de alta en el método setup (verdana a 18 puntos). Por ejemplo, al comenzar la animación, dado que pos=1, el texto se dibujará en la posición (1,45).

pos = (pos + 1) % processing.width; //Por último se incrementa en 1 la variable pos, para que en cada paso de la animación el texto se pinte en una posición distinta. La varible "pos", por medio del operador % y el valor processing.width, se consigue que se reinicie a 0 cuando llegue al valor de anchura del lienzo de canvas.

Con esto hemos conseguido una sencilla animación de un texto que se mueve de izquierda a derecha por el lienzo del canvas. Cuando llega a desaparecer por la derecha, vuelve a aparecer por la izquierda, en un bucle infinito.

ejemplo en marcha.

Cómo implementar eventos de ratón en Canvas del HTML5 mediante PJS

A lo largo de esta introducción al framework Processing.js hemos podido conocer ya varias de las utilidades que facilitan la animación dentro de los elementos canvas del HTML5. Claro que hemos

visualizado únicamente la punta del iceberg y que Processing.js contiene mucho más de lo que hemos explicado, no obstante, esperamos que el lector haya podido adquirir una idea general de las posibilidades que ofrece.

No obstante, esta introducción no estaría completa si no hablamos un poquito de interacción con el usuario, así que en este artículo vamos a mostrar de una manera rudimentaria cómo podemos detectar eventos de ratón y cómo podemos realizar acciones cuando se produzcan.

Además, en este artículo volveremos sobre lo explicado en el tema anterior, creando un nuevo ejemplo de trabajo con las librerías Processing.js escribiendo código directamente con Javascript nativo.

En el presente ejemplo vamos a crear un dibujo de una bola que sigue los movimientos del ratón por el lienzo de canvas. Es un ejemplo bastante sencillo, en el que aprenderemos a trabajar con un tipo de método adicional que se ejecuta cuando se mueve el ratón por el canvas, que se llama mouseMoved.

Nota: El método "mouseMoved" es similar en esencia a los métodos "setup" y "draw". Recordemos que "setup" servía para inicializar el canvas y "draw" para implementar la animación por medio de fotogramas. Pues bien, "mouseMoved" sirve para ejecutar código cuando el ratón se mueve por encima del lienzo de canvas.

En el artículo anterior conocimos la estructura básica que tendría un archivo HTML que utiliza Processing.js para animar un canvas, por lo que ahora vamos a mostrar simplemente la función que pondría en marcha las funcionalidades de Processing.js.

function miProceso(processing) {

var posX = 100;

var posY = 100;

processing.setup = function(){

processing.size(300,300);

processing.fill(220, 0, 55);

processing.frameRate(15);

};

processing.draw = function() {

var tamano = 50 + (Math.sin(processing.frameCount) * 5)

var tamano2 = 50 + (Math.cos(processing.frameCount) * 5)

processing.background(255, 200, 200);

processing.arc(posX, posY, tamano, tamano2, 0, (2*Math.PI))

};

processing.mouseMoved = function(){

posX = processing.mouseX;

posY = processing.mouseY;

}

Ahora podemos ver que el código es muy parecido al que teníamos en ejemplos anteriores. La novedad más importante en este caso es que estamos asignando una función a la propiedad "mouseMoved", que como acabamos de decir, sirve para definir las acciones que realizar cuando el ratón se desplaza sobre el canvas.

Estamos utilizando algún método adicional en este script de los pertenecientes a la librería Processing.js, que vamos a comentar a continuación:

processing.frameRate(15);

Con este método definimos el número de frames (fotogramas) por segundo que tendrá la animación, es decir, el número de veces que se ejecutará el método draw() en cada segundo. En este caso estamos definiendo que se hagan 15 fotogramas por segundo, cuando el valor por defecto es de 60.

Nota: Por supuesto, si la animación es muy compleja, merece la pena bajar este número de frames, para que los ordenadores poco potentes puedan ejecutarla sin significar una carga exagerada para el sistema. En este caso la animación no es nada pesada para el ordenador, pero aun así está bien probar esa característica.

processing.frameCount

Esta propiedad lleva la cuenta del número de fotogramas visualizados desde que se inició la animación. Por ejemplo, si el frameRate se fijó en 15 fotogramas, a los 2 segundos la cuenta nos daría 30 fotogramas.

Nota: Quizás os preguntéis para qué sirven las líneas de código donde se está utilizando la propiedad frameCount. Son simplemente para crear dos variables tamano y tamano2, que utilizaremos para crear la forma circular que seguirá los movimientos del ratón. Esas variables las enviaremos como parámetros para definir el tamaño del arco, al invocar la función arc(). Tendrán un valor variable cada vez que se llame a draw(), que producirá el efecto de animación. Como resultado, en el ejemplo podremos ver que el tamaño del círculo irá variando con una frecuencia, lo que dará la sensación de que la forma se estira y se encoje constantemente. Esa frecuencia la obtenemos matemáticamente a través de las funciones seno y coseno, que invocamos a través de los métodos sin() y cos() de la clase Math, nativa de Javascript.

processing.arc()

Esta función sirve para dibujar arcos de circunferencia, de manera similar a como se definen en la función arc() nativa de Javascript para el dibujo con Canvas.

Pero lo que más nos debe llamar la atención en este ejercicio es el código asignado a mouseMoved, en el que tenemos acceso a las propiedades mouseX y mouseY.

processing.mouseMoved = function(){

posX = processing.mouseX;

posY = processing.mouseY;

}

Como podemos haber deducido, processing.mouseX nos dará la posición del ratón en la horizontal y processing.mouseY la posición en la vertical.

Eso es todo por ahora. Simplemente nos queda poner un enlace al ejemplo en marcha.

Page updated

Google Sites

Report abuse