Bienvenidos y bienvenidas, a la semana de herramientas en este caso vamos a hablar de la "Introducción al Software de Processing". Durante este video, vamos a estar explicando un poco qué es "Processing", y qué se puede y qué no se puede hacer con Processing. Para ello, vamos a explicar un poco el contexto general, el recorrido histórico de Processing, cómo llega hoy a ser una herramienta de importancia en el ámbito de visualización de datos, vamos a poner ejemplos de diferentes softwares, diferentes "sketch", luego entenderemos que significa "sketch", pero diferentes ejemplos de gente que ha utilizado el "Processing" para visualizar datos. Hablaremos de los pros y los contras de lo que se considera programación creativa y, finalmente, daremos unas cuantas referencias para aprender y para poder ampliar vuestro conocimiento, si es que es de vuestro interés esta herramienta, y también hablaremos de las comunidades de aprendizaje que existen hoy y que están activas. Vamos a hacer un poco de introducción histórica para que entendamos de dónde viene este software. Este software ha sido siempre una de las herramientas líderes en lo que se considera la programación creativa. Programación creativa es un ámbito de programación que intenta tener en consideración a los artistas, a los diseñadores, a los creativos, y en lugar de trabajar desde un paradigma muy tecnológico, intenta ser muy visual y muy sencillo para los primeros pasos poder conseguir resultados visuales. El padre de este movimiento de programación creativa, uno de los padres porque hay varios, podría ser John Maeda del MIT, el Massachussets Institute of Technology. Hablaremos de John Maeda, del diseño computacional, explicaremos cómo Casey Reas y Ben Fry, que son alumnos y discípulos de Maeda, llevan a producción las ideas de Maeda de forma exitosa y, finalmente hablaremos de cómo se está implementando en el mercado y el éxito que ha tenido las variantes y las ramificaciones del software Processing. Empecemos con John Maeda y el diseño computacional. John Maeda como veis en la imagen, es un personaje de origen japonés, es americano y estudia Ciencias Computacionales en el MIT, y después se va a Japón a estudiar Diseño Gráfico. Cuando llega a Japón y se pone a trabajar con su profesor de diseño, le dice que olvide la tecnología, que lo importante es el concepto y que lo importante es el boceto. John Maeda queda impactado por esta idea, y empieza a hacer bocetos en lápiz para preparar sus diseños. Uno de los consejos que os doy siempre para hacer una buena visualización de datos o una infografía, es empezar con un lápiz y un papel, hacer un boceto de lo que queréis explicar, y un boceto de la estructura con la cual vais a narrar ese contenido y cómo vais a visualizar esos datos. Conceptualizar antes de empezar a tocar la herramienta, es súper importante para tener muy claro lo que queremos comunicar. En este caso, John Maeda recoge esta idea, e intenta conciliar su capacidad de hablar de diseño, de sus conocimientos de computación y sus conocimientos de diseño gráfico, y encuña por primera vez el término "diseño computacional". ¿Cómo lo hace? Básicamente, desarrolla un software, que ha pasado a la historia con poco éxito, pero que es la semilla fundacional de lo que es después Processing, que se llama "Design By Numbers", diseñar con números. John Maeda reclama haciendo una crítica directa a lo que viene siendo las propuestas de Flash, de Photoshop, de Premier, que son herramientas creativas pero, que de alguna manera si lo pensamos bien intentan ocultar el ordenador, intentan simular que es un laboratorio fotográfico, un laboratorio de edición de vídeo, o que es un programa para hacer animaciones. John Maeda critica esta ocultación del ordenador, y reivindica ponerlo enfrente, permitir entender que programando se pueden hacer cosas visuales creativas, pero que la gracia de la computación es que el diseño puede utilizar algoritmos, que puede utilizar aleatoriedad, que puede utilizar el tiempo, e intenta sacar punta al concepto de que el diseño hoy, cuando estamos delante de un ordenador, puede ser muy interactivo y puede ser muy adaptado, a la situación, cosa que con un papel no se podía. John Maeda imparte clases en el MIT sobre diseño computacional y dos de sus estudiantes son Casey Reas y Ben Fry. Casey Reas y Ben Fry, fascinados por la capacidad de John Maeda de explicar esta importancia a la hora de hacer trabajo conceptual y de utilizar el ordenador con todo su potencial, deciden hacer una propuesta nueva, una versión nueva del "Design By Numbers", y crean la herramienta Processing, que es de la que estamos hablando hoy. Processing, sirve para hacer lo que ellos llaman "sketches", bocetos. ¿Qué quiere decir esto? El objetivo de Processing nunca fue, inicialmente, hacer proyectos finales, sino poder conceptualizar rápidamente y de forma visual ciertos "sketches". Vamos a ver, brevemente, cómo funciona la herramienta y después veremos ejemplos de su uso. Aquí tenemos el software que se puede descargar desde la web "Processing.org". En este caso abrimos la carpeta y tenemos un ejecutable "Processing.exe". Vamos a abrirlo, estamos en la versión tres y, como veis, un proyecto iniciado por Ben Fry y Casey Reas nos da la bienvenida, y aquí tenemos el software. Este software que ha sido valorado muy positivamente por la comunidad creativa y por la comunidad de visualización de datos, como veis, no sorprende, tiene apenas iconos y no parece muy atractivo a simple vista. Vamos a ver lo que sucede cuando yo escribo "línea, cero, cero, 100, 100", y voy a darle al "play", para ejecutar el "Sketch". Veo que se me abre una ventanita con un cuadrado y una línea que va del punto cero cero, a la coordenada 100 100. Poder dibujar una línea en tan poco tiempo sin necesidad de programar mucho, es una de las virtudes y uno de los objetivos de Processing. Cuando utilizamos Processing lo primero que podemos ver es que, es una herramienta de software libre, que es gratuita de ser instalada y que, por ejemplo, podemos acceder rápidamente a ejemplos que se encuentran en la carpeta, en archivo "ejemplos" y, por ejemplo, podemos probar un ejemplo gradiente radial, y aquí vemos el código que se ha escrito que son estas líneas de aquí, y, al ejecutarlo, vemos rápidamente un resultado visual de lo que permite este "Sketch". No es el objetivo de este curso enseñar con detalle cómo funciona Processing, pero sí que os indicaremos en qué sitios podéis encontrar fácilmente tutoriales, videotutoriales, tanto en inglés como en español, y también libros que hablan y explican cómo funciona Processing. Si John Maeda defiende la idea de hacer visible el ordenador y el poder computacional, Casey Reas y Ben Fry defienden también el hecho de hacerlo de forma abierta libre, es de software libre, y de hacerlo colaborando con la comunidad. Vamos a ver algunos ejemplos, empezaremos con un ejemplo de Ben Fry, uno de los propios desarrolladores. Aquí tenemos un código que, en este caso, estamos delante de una obra que se llama "Deprocess". Esta obra es una pieza de Ben Fry que enseña un código, un algoritmo, en el lado izquierdo podéis ver el código escrito de arriba abajo, es una impresión de alta resolución, hay cinco copias, creo que hay alguna disponible si estáis interesados en comprarla. Lo que hace el código es visualizar los "loops" que hace el propio código, las líneas que estamos viendo en azul son los recorridos que hace el programa para crear esta propia obra. El resultado es una reflexión sobre la belleza del código, las iteracciones del código, en este caso en concreto visualizando y, a la vez, programando para tener un resultado visual claro. Vamos a ver otro ejemplo también de Ben Fry, que es "All Streets", que son todas las calles de Estados Unidos. Simplemente representa las calles, en este caso de una zona en concreto, pero una cosa interesante de Processing, y que tiene que ver con visualización de datos de forma muy concreta, es que permite exportar a PDF en vectorial. Eso quiere decir que la resolución puede ser óptima para formato de impresión y también para jugar a nivel de escalas, etcétera. Esta imagen que, por desgracia por internet es complicado encontrar en alta resolución, pero que se puede adquirir con altísima resolución y es una impresión, creo que es de un metro veinte por unos 80 centímetros de alto, son simplemente y nada más que todas las carreteras que existen en Estados Unidos. Ben Fry adquiere estos datos del gobierno, y genera un algoritmo que dibuja las líneas simplemente. Es una obra sencilla pero, evidentemente como hemos dicho, en la sociedad de la información no sería posible hacerlo de forma tan potente y tan rápido si no fuera porque la información se puede digitalizar, se puede computar, se puede representar de forma ágil. Vamos a seguir viendo otros ejemplos. En este caso, en el ejemplo que hemos visto de Ben Fry, estamos hablando de la posibilidad de utilizar Processing para generar PDFs de alta resolución que, en caso de que se nos pida una visualización estática, una visualización de datos de Big Data por ejemplo en alta resolución, Processing podría darnos una buena solución como herramienta. Y, en caso de por ejemplo querer trabajar en web, podemos hablar de "Processing.js" o de "P5js" que hablaremos más adelante. Son adaptaciones del lenguaje de Processing a JavaScript. Aquellos que diseñáis webs o que conozcáis un poco el lenguaje JavaScript, vais a poder disfrutar de adaptar utilizando estas librerías vuestros proyectos y añadirles esta capa visual que es aparentemente tan atractiva. Vamos a ver este ejemplo. este ejemplo de Tom Carden nos enseña el mapa de Inglaterra, Travell Time Tube Map, perdón Londres, vamos a abrir el enlace y nos enseña el mapa a través de un paradigma que me parece muy interesante, que es a través de la idea de las distancias que hay entre estaciones. Vamos a aplicar una estación y vemos cómo el mapa adquiere otras dimensiones. Vamos a ir, por ejemplo, a una de las estaciones más extremas de la ciudad de Inglaterra y vemos cómo se distorsiona, y cómo de lejos quedan cada uno de los puntos. Esta visualización es una visualización que se hizo bastante famosa porque replanteaba el cómo entender las distancias, en este caso, a través del tiempo necesario para ir de un punto a otro. Cómo veis, esto está siendo ejecutado en directo en el buscador y, como todos los proyectos de Processing, suele tener disponible el acceso al código para ver cómo está hecho. Vamos a volver a algunos otros ejemplos. Tenemos, por ejemplo, Jer Thorp que es un artista, escritor, profesor y conferenciante que trabaja muy a menudo con Processing con visualización de datos. Vamos a ver un ejemplo, he decidido no poner el de Aaron Koblin, yo creo que habéis visto, es famoso el de "Flight Patterns", buscadlo por internet si os parece interesante conocer más referentes, pero Jer Thorp hace este video que se llama "Good Morning" y lo que hace es mapear 11000 tweets de una fecha, el 20 de agosto del 2008, si no me equivoco, y lo que hace es recoger todos los tweets, de 2009 perdón, todos los tweets de gente que dice "Good Morning" y los geolocaliza y los mapea en relación a la hora del día. Esto está hecho con Processing y es ejecutable y se puede visualizar, pero también se permite exportar, "video processing" permite la exportación a "MOV", o exportación fotograma a fotograma, y también permite la creación de aplicaciones que corren, o con Java, o con JavaScript o con Android, que luego explicaremos. Así, como podéis ver, esta propuesta nos permite ver cómo se puede capturar datos y rápidamente visualizarlos de una forma gráfica en torno al mundo. Se parece de alguna manera al concepto de Aaron Koblin que utiliza los patrones de vuelo de Estados Unidos para visualizar los vuelos y visualizar las infraestructuras americanas. En este ejemplo estamos visualizando la temperatura de Barcelona durante el 2016. Lo que podéis ver aquí es, en cada bucle de este círculo cada mes, aquí podemos ver 12 bucles y estamos viendo la temperatura alrededor de todo un ciclo, todo un año. Este proyecto es un proyecto que explora los límites de la visualización lineal. Vamos a ver un vídeo que introduce un poco el concepto y que nos permite ver de forma más clara lo que puede esta herramienta. Aprovecho este video para explicar que cuando se visualiza con Processing, programamos de cero y nos tenemos que inventar la interfaz, tenemos que inventárnoslo todo, entonces esto es un contra de Processing, tenemos que tener mucho conocimiento de lo que estamos haciendo, pero el pro, la ventaja es que podemos innovar, podemos pensar, podemos repensar. Esta visualización, es una visualización que intenta representar el tiempo de forma fractal, intenta representar los bucles diurnos como círculos, los bucles mensuales como círculos y los anuales también como círculos que, de forma recursiva, se repiten en diferentes escalas, o sea siguiendo el patrón de un fractal. Como veis en este vídeo se ve, por ejemplo, la temperatura del 1 de enero de 2016 representada a las doce de la noche, que era de 13.2 grados y lo que permite, mediante teclado, estas visualizaciones avanzar las horas pasando 24 horas, y ver la información en su contexto. Ejemplos como éstos, que son exploraciones que no son finales, sino que son intentos de pensar nuevas maneras de representar el tiempo por ejemplo en este caso, son típicas cosas que se pueden hacer con Processing porque no tienen plantillas predeterminadas y no tienen modelos predeterminados de cómo se tienen que hacer las cosas. El contra es que empezamos con una pantalla en blanco y el desafío de la hoja en blanco para empezar a escribir código. Vamos a ver los pros y contras para terminar con este video. Processing es extremadamente fácil para empezar a programar un poco, porque está orientado a un lenguaje mucho más ameno, no tienes que declarar excesiva, es tolerante digamos con los errores y no te pide declarar funciones, ni tener muchos conocimientos de informática antes de empezar. También es verdad que una vez hemos empezado con los primeros pasos, hacer crecer las posibilidades de Processing es cada vez más complicado, y uno tiene que tener una capacidad de abstracción y de lenguaje computacional, por así decirlo. Otro de los pros es que es completamente abierto y que no tiene ningún "preset", tiene librerías, tiene muchas posibilidades, pero tienes toda la libertad, por suerte o por desgracia, de empezar y de desarrollar el "sketch" que tú quieras. Es código libre y la mayoría de gente que trabaja con Processing libera también sus "sketches", sus bocetos, sus propuestas, entonces normalmente se puede reutilizar citando la fuente, y como un pro también es que Processing empezó usando la máquina de Java, pero actualmente está también disponible con JavaScript, con Python, en la misma instalación puedes añadir un modo de edición para hacer aplicaciones de Android, y parece que se está extendiendo mucho su uso en diferentes lenguajes. O sea, al final, Processing es una forma de aproximarse y de programar que es más visual y que es un poco más directa, pero no recae sobre una tecnología sino, como podéis comprobar, se adapta a diferentes tecnologías. Como contras, uno tiene que saber programar, y no hay plantillas, esto quiere decir que es más complicado empezar de cero, y que te salga algo muy bonito. Pero si os dedicáis suficiente tiempo, y os motiváis suficiente, podéis conseguir resultados muy potentes y muy diferentes. Os recomiendo sobre todo después de este vídeo justo ahora, ir a "hello.processing.org" y descubriréis a Daniel Shiffman, que es un personaje estupendo y super divertido que os puede dar un "hello.processing", una introducción "Hello World", primeros pasos en Processing, es un tutorial de una hora interactivo que te permite escribir código en el mismo vídeo, y ver resultados en tiempo real. Realmente, si os ha interesado mínimamente la herramienta, Daniel Shiffman os va a hacer una clase magistral de una hora de forma estupenda. Tenemos como enlaces "processing.org" desde donde se puede descargar la aplicación y donde hay también una exposición de trabajos hechos en Processing, seleccionados por los creadores del software, "p5js.org" que es donde podéis encontrar la información y el descargable de la librería de JavaScript de Processing, "Shiffman.net" que, si queréis aprender Processing y controlaís un poco el inglés, Daniel Shiffman es un showman que explica Processing de forma divertida, amena y, además, de forma muy eficaz, rápidamente podréis empezar a ver vuestros resultados en pocos minutos y seguir sus tutoriales. El enlace que pongo a continuación, "mosaic.uoc.edu", es una introducción a Processing que escribí yo mismo, donde hay una lista de referencias de libros sobre visualización. Por ejemplo Ben Fry, ha escrito un libro que es "Visualizing Information", que habla de cómo Processing puede servir para visualizar información y, finalmente, la web Ben Fry. No he puesto la de Casey Reas, que también la podéis buscar, pero Ben Fry de los dos, de Casey Reas y Ben Fry, es el que más ha trabajado con visualización de datos, y que más interés ha tenido en utilizar la herramienta de Processing de forma computacional, hacer diseños gráficos que visualizan información. Hasta aquí la introducción a Processing, ha sido un poco densa, realmente se podría explicar con muchas más horas porque Processing tiene muchas posibilidades, se utiliza para muchos aspectos distintos del ámbito creativo o visual pero es cierto que, tanto para crear imágenes, para infografías, como para visualización de datos interactivos o exportación de videos, Processing es una herramienta a tener realmente en cuenta si os interesa hacer exploraciones y aportaciones que puedan ser un poco más fuera de las herramientas preestablecidas que están especialmente enfocadas solo a la infografía y a la visualización de datos. Hasta aquí este video, nos vemos en el siguiente.
