{"id":1969,"date":"2015-04-30T10:14:42","date_gmt":"2015-04-30T15:14:42","guid":{"rendered":"http:\/\/alejandroayala.solmedia.ec\/?p=1969"},"modified":"2015-04-30T11:33:46","modified_gmt":"2015-04-30T16:33:46","slug":"processing-y-javascript","status":"publish","type":"post","link":"https:\/\/alejandroayala.solmedia.ec\/?p=1969","title":{"rendered":"Processing y Javascript. Artes Visuales para programadores"},"content":{"rendered":"

Processing<\/a> es un lenguaje de programaci\u00f3n que permite desarrollar aplicaciones en un contexto audio visual, acercando a los artistas la posibilidad de usar la tecnolog\u00eda en trabajos art\u00edsticos.<\/p>\n

Este lenguaje esta construido sobre Java pero usa una sintaxis mucho m\u00e1s f\u00e1cil, orientado a lo gr\u00e1fico.<\/p>\n

<\/p>\n

Hace alg\u00fan tiempo pude probarlo y jugar un rato con \u00e9l. Viene con un IDE<\/em> incorporado, as\u00ed que es muy f\u00e1cil empezar a usarlo. Van a la p\u00e1gina de descargas<\/a> y obtienen el archivo seg\u00fan su sistema operativo, no hay que instalar nada, solo descomprimen y en el caso de Linux ejecutan el archivo processing<\/strong><\/em>.<\/p>\n

Algunas capturas de pantalla del IDE y el ejemplo del \u00abojo de Sauron\u00bb<\/strong> ejecut\u00e1ndose:<\/p>\n

\"El<\/a>

El IDE de Processing con un \u00absketch\u00bb en blanco listo para empezar a programar<\/p><\/div>\n

\"Ventanas<\/a>

Ventanas a la izquierda con el listado de ejemplos, a la derecha el sketch con el c\u00f3digo y el \u00abojo de Sauron\u00bb ejecut\u00e1ndose<\/p><\/div>\n

Cuando empec\u00e9 a jugar un poco con el programa pude encontrar que \u00abpor debajo\u00bb<\/em><\/strong> todo estaba contenido por una clase llamada PApplet<\/a>, una especie de Applet<\/em> para Processing<\/em>, ese d\u00eda puse final a mis ganas de seguir probando cosas con \u00e9l, sobre todo por el poco o nulo futuro de los applets<\/em>, a mi me interesaba la web<\/em>, as\u00ed que ah\u00ed lo deje.<\/p>\n

Por casualidad encontr\u00e9 un port<\/em> de Processing<\/em> para Javascript<\/em><\/a>, y ah\u00ed la cosa cambi\u00f3. El creador de jQuery<\/a> era el padre de este port<\/em>. La cosa pinta muy bien, cualquier archivo creado en procesing<\/em> es \u00abtransformado\u00bb a Javascript<\/em> y <\/strong>HTML5<\/strong>,<\/em> canvas<\/em><\/strong> para ser mas exacto, de esta manera es muy f\u00e1cil llevar las creaciones de Processing<\/em> sin instalar ning\u00fan pluggin<\/em> Java, \u00bfno es fant\u00e1stico?<\/p>\n

Entonces \u00bfc\u00f3mo podemos agregar nuestro archivo .pde<\/em>(extensi\u00f3n que usa Processing<\/em> al guardar el trabajo) y transformarlo a Javascript<\/em>?<\/p>\n

De la p\u00e1gina de ProcessingJS<\/a> tenemos para descargar dos archivos, processing.js<\/a> y processing.min.js<\/a>, aunque son los mismos, el uno se usa para ambientes de Desarrollo y el otro para ambientes de Producci\u00f3n, al momento de escribir esta entrada la versi\u00f3n se encontraba en la 1.4.8.<\/p>\n

Agregamos nuestro script<\/em> de ProcessingJS<\/em> a nuestro HTML<\/em>, yo lo he puesto junto con la p\u00e1gina, pero ustedes ya saben como agregar scripts.<\/p>\n

[html highlight=\u00bb5,10″]
\n<!DOCTYPE html>
\n<html>
\n <head>
\n <title>Sauron – Processing example<\/title>
\n <script src="processing.js" ><\/script>
\n <meta charset="UTF-8">
\n <\/head>
\n <body>
\n <h2>Sauron – Processing example<\/h2>
\n <canvas data-processing-sources="sauron.pde"><\/canvas>
\n <\/body>
\n<\/html>
\n[\/html]<\/p>\n

La l\u00ednea 5 agrega la librer\u00eda de ProcessingJS<\/em> y en la l\u00ednea 10 mediante el camvas y el atributo data-processing-sources<\/strong><\/em> se indica el archivo de Processing<\/em>, en mi caso el archivo se llama sauron.pde<\/strong><\/em> y est\u00e1 junto al archivo html<\/em> por eso sus rutas. Eso ser\u00eda todo, y como se dir\u00eda: un sketch<\/em> vale m\u00e1s que mil palabras, les dejo a continuaci\u00f3n con el Ojo de Sauron. Pasen el puntero del mouse<\/em> sobre el ojo y nunca m\u00e1s se librar\u00e1n de \u00e9l.<\/p>\n

Que lo disfruten<\/p>\n

El Ojo de Sauron<\/h3>\n