Hoy voy a exponeros un tutorial muy básico usando ProcessingJS. Se trata de una librería hace el código Processing original en ejecutable en un navegador. Vamos a hacer uso de la etiqueta canvas del famosísimo html5.
Processing, y ProcessingJS por extensión, es una librería estilo Arduino. Digamos que es muy sencillo de utilizar. Se utiliza para prototipado y se pueden crear aplicaciones interactivas en 2D y 3D que, además, son multiplataforma.
La estructura del código también es similar a la de Arduino. Tenemos 2 bloques fundamentales. Uno de setup(), dónde se inicializa la aplicación y se prepara para ser ejecutada. El otro gran bloque es draw(), que, en general, es un bucle infinito dónde corre toda la lógica de la aplicación.
Si queréis ver cual sería el resultado o bajaros el ejemplo ya montado, podéis visitar mi esta Pizarra hecha con ProcessingJS que yo mismo os he preparado.
Vamos a ello:
####Paso 1: Crear nuestro HTML
Creamos nuestro archivo HTML normal de toda la vida. Un html, head, body… y ya. Como única novedad dentro del body tenemos que incluir un canvas con un id, en este caso pjs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial de ProcessingJS</title>
</head>
<body>
<h1>Tutorial de ProcessingJS</h1>
<canvas id="pjs"></canvas>
</body>
</html>####Paso 2: Incluimos la librería ProcessingJS
Incluimos la librería. En este caso incluyo la última, la 1.4.1, pero un ejemplo tan sencillo debe funcionar con versiones más antiguas.
http://processing-1.4.1.min.js####Paso 3: Código del setup()
Antes de empezar una aclaración, todo este código tiene que ir entre las etiquetas:
...
...
...
¡Atención! Fijaos en la etiqueta que usamos para incluir el script. Por una parte el type es application/processing. Por otra, incluimos el atributo data-processing-target para indicar sobre qué objeto canvas queremos ejecutarlo. En este caso, pjs que fué el id que yo usé para el canvas.
Incluyo la declaración de varialbes como parte del setup() aunque estrictamente no forma parte de él. Esas variables no se usan en esta parte del código, pero luego veremos porqué lo hago así.
var colorr = 0;
var colorg = 0;
var colorb = 0;
var weight = 1;
void setup() {
size(940, 500);
background(240);
}
He declarado una variable para cada canal del color (RGB) y otra para el grosor. En el setup() vamos a utilizar size() para establecer el tamaño de nuestro lienzo y background() para darle color. Yo le he puesto un gris (si damos sólo un valor es como si fuesen los 3 iguales) pero podemos darle cualquier color.
####Paso 4: Código del draw()
Aquí es dónde se desarrolla la lógica de la aplicación. Para crear una pizarra simple (sin cambio de color o grosor) bastaría con el siguiente código, que incrustaremos con sus correspondientes etiquetas:
void draw() {
stroke(0);
strokeWeight(1);
if(mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}La función stroke() sirve para colorear el trazo, strokeWeight() establece el grosor y line() pinta una línea entre los dos puntos descritos por los dos pares de coordenadas.
Las variables mousePressed, mouseX, mouseY, pmouseX y pmouseY son proporcionadas por ProcessingJS. mousePressed nos indica si algún botón del ratón está presionado. mouseX y mouseY nos indican la posición actual del puntero del ratón. pmouseX y pmouseY nos indican la posición anterior del puntero del ratón.
Así que bueno, en cada ciclo del draw() lo que hacemos es establecer el color y grosor del trazo y, si estamos presionando algún botón del ratón, pintamos una línea entre la posición actual del puntero y la anterior. ¿Simple no?
Ya tenemos una versión básica de la pizarra. Vamos a mejorarla un poco añadiendo selección de color y grosor.
####Paso 5: Añadimos funciones para cambiar color y grosor
Tenemos que añadir funciones para cambiar el color y el grosor del trazo. Ahora es el momento de usar las variables que antes declaramos y nunca llegamos a usar. Las funciones son tan sencillas como:
void set_color(int cr, int cg, int cb){
colorr = cr;
colorg = cg;
colorb = cb;
}
void set_weight(int ww){
weight = ww;
}Hay un detalle que pasará desapercibido para los no iniciados en Javascript. Por una parte, la declaración de variables como int loquesea y por otra la declaración de las funciones como void loquesea(). Ambos son inválidos para Javascript, pero esto no es Javascript, esto es ProcessingJS. Lo bueno es que podríamos hacerlo según Javascript y funcionaría igualmente.
Lo que hacen estas funciones no merece demasiada explicación, sólo modificamos los valores de las variables creadas en el setup().
####Paso 6: Cambiamos el código del draw()
Sólo tenemos que realizar un cambio. Tenemos que usar nuestras variables cuando vayamos a pintar. Tan sencillo como:
void draw() {
stroke(colorr, colorg, colorb);
strokeWeight(weight);
if(mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}####Paso 7: Acceder a nuestra instancia de ProcessingJS
En este punto deberíamos tener nuestra pizarra funcionando, sin poder cambiar de color ni grosor.
¿Cómo accedemos a nuestra instancia de ProcessingJS? Muy sencillo. Basta con hacer uso de la interfaz que nos ofrece la librería. Así:
var mi_processing = Processing.getInstanceById('pjs');
Processing estará disponible si todo está funcionando correctamente. Ahora desde mi_processing podemos usar las funciones para establecer el color y el grosor que creamos antes.
mi_processing.set_weight(5);
mi_processing.set_color(255, 127, 0);####Paso 8: Utilizamos nuestras funciones
Ya está casi todo hecho, basta con incluir unos cuantos botones para poder hacer las modificaciones de color y grosor en vivo.
Os dejo un ejemplo de botón para cambiar el grosor:
<input type="button"
onclick="Processing.getInstanceById('pjs').set_weight(5);"
value="Medio"></input>Y otro para cambiar el color:
<input type="button"
onclick="Processing.getInstanceById('pjs').set_color(127, 127, 127);"
value="Gris"></input>Y ya está. Espero que os haya gustado este tutorial.
Si tenéis dudas, comentadlas o contactadme por Twitter @AlvaroLab
Álvaro Hurtado 