Programación con Processing

Programación con Processing

Tutorial dirigido a aquellas personas que quieran aprender a programar con la herramienta Processing desde cero.

• ¿Qué es programar?
• ¿Qué es Processing?¿Dónde lo encuentro?¿Cómo lo instalo?
• Interfície 1
• "Hello World!"
• Píxels: RGB y la cuadrícula

¿Qué es programar?

 

En cinco palabras, programar es comunicarse con una máquina. Darle instrucciones para que ejecute las tareas que se le piden. Esto se hace a través de muchos lenguajes de programación que existen. C, C++, java, html, javascript, actoinscript, lingo, perl, php, phyton ... son lenguajes de programación con diferentes caracterísitcas. Un poco como los lenguajes naturales, los de programación comparten estructuras básicas, i algunos se parecen más entre ellos que otros.

La comunicación con la máquina, en nuestro caso es con un ordenador, se hace a través de una serie de instrucciones: el código.

Este código se debe escribir con una sintaxis determinada (diferente en cada lenguaje) para que el ordenador lo entienda. Hay que tener en cuenta que, al fin y al cabo, todo lo que la máquina puede hacer es guardar valores, comparar valores, y hacer operaciones aritméticas. Pero esto lo hace a una velocidad altísima, y combinado con la posibilidad de entrada y salida de datos (la salida más común es la visualización en un monitor), tenemos en nuestras manos una herramienta muy potente y flexible si sabemos comunicarnos.

Aprender a programar es aprender a establecer esta comunicación. Es, en definitiva, aprender a hablar con una máquina. Y esto se hace (si se quiere una respuesta) a través de variables, algorítmos, estructuras de repetición, condicionales...

En nuestro caso esto lo haremos mediante uno de los lenguajes más utilizados, flexibles y potentes: Java, pero lo haremos a través de Processing. Un proyecto de Open Source que nos simplifica en gran medida la interfície y la sintaxis, mientras que mantiene practicamente todas las capacidades.

¿Qué es Processing?¿Dónde lo encuentro?¿Cómo lo instalo?

 

Como dicen sus creadores, Casey Reas y Ben Fry en la web del proyecto: "Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. Itis creates to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain." Y para más detalles: Processing FAQ.

Processing es entonces:

• Un lenguaje de programación.
• Un entorno.
• Un proyecto Open-Source en fase Beta.

 

¿Dónde está?

- http://processing.org/download/index.html

En este tutorial utilizaremos la versión 115.

 

Instalación

Para Windows, la instalación es extremadamente fácil.

1. Bajar la versión estándar.
2. Descomprimir el archivo .zip en la carpeta que os haga más gracia.
3. Clicar en Processing.exe... y ya está.

Tener el programa en marcha y los sketchs (programas) que hagáis los encontrareis en  "Mis documentos/Processing".

Para Mac y Linux...no lo digáis a nadie pero no lo sé porque nunca lo he probado, pero es altamente improvable que sea más complicado que para Windows!

Interfície 1

La interfície de p5 es sencilla. Esto permite que todo el mundo se pueda familiarizar muy rápidamente. Si la comparamos con la complejidad de las interfícies de Flash o Director, hace llorar de alegria...

Las opciones del menú son o bien las convencionales, o se repiten en lo que explico en este mismo tutorial, o estarán explicada en Interfície 2 (en este tutorial).

El menú que me interesa ahora es el siguiente:

6 opciones: run, stop, new, open, save, export.

Hay tres que casi no hay que explicar. Solamente hay que tener en cuenta que cuando creamos un nuevo proyecto con p5, se llama sketch, i l'Sketch Folder es la carpeta donde se guarda. En principio, 'Sketch consta tan solo de la misma carpeta y de un archivo .pde que contiene el código. Pero se pueden agregar carpetas: data por fichero de imagen, vídeo...

RUN: sirve para ejecutar el código. Con la mágia de este simple botón nos ahorramos lo que los programadores de verdad conocen como la compilación.

Java (y por tanto Processing) es un lenguaje compilado. Esto representa que para ejecutar un programa escrito en java, primero hay que hacer un paso previo (la compilación), que traduce el código que hemos escrito en uno de mucho menos inteligible para mentes humanas, pero más cercano al que lee el ordenador: los famosos ceros y unos. Para poder compilar java, se debe hacer vía línea de comandos, o bien vía editores de código como eclipse o otros de pago, que no son especialmente fáciles respecto al setup. Además hay que instalar java en el ordenador... En fin, solo este botón hace que comenzar a programar con java nos pueda ahorrar aprender todos estos pasos capaces de desanimar a más de uno.

STOP: Para el programa (of course!)

NEW: Crea un nuevo Sketch

OPEN: Abrir un Sketch existente

SAVE: Guardar l'Sketch con el que se está trabajando. Se debe utilizar mucho, por si  acaso, pero aún más utilizar el "save as" del menú convencional para ir guardando versiones de los proyectos a nmedida que vayamos trabajando.

EXPORT: sirve para preparar el programa con el que estamos trabajando para ser ejecutado a través de un navegador, ya sea en la web o simplemente fuera del entorno processing.

Otro grande de trabajar con processing! Con java convencional, para ver el resultado de lo que estamos programando vía navegador (que es como funciona p5),   primero hace falta hacer un tipo de programa especial, un applet. Esto p5 ya lo usa de por si. Pero después hace falta compilar el código y escribir el html que contendrá el fichero resultante y lo ejecutará vía navegador. Todo esto, con Processing, es un click. Y a más a más incluye el código fuente de l'Sketch, de acuerdo con la filosofía open-source del proyecto.

Tan solo conociendo estos seis botonoes de la interfície (y el siempre útil "save as") tenemos de sobras para trabajar con processing, y muchos no necesitaréis nada más durante este taller introductorio.

 

 

"Hello World!"

Llegados a este punto, es hora de pasar a la acción y comenzar a hacer código!

Processing, como cualquier entorno de programación con cara y ojos, tiene una consola. En un lugar donde, vía texto, podemos recibir mensajes del programa, y, cuando haya, ver los errores. Es la consola, y se encuentra al  final de la interfície de Processing, con un fondo negro:

Hacerlo es tan sencillo como escribir: print("Hello World!");

dentro de la interfñicie de Processing, presionar "run" y ... voilà! Habéis creado el primer programa!

Si habéis visto Hello World! escrito en blanco en la consola, el primer programa ha sido compilado y ejecutado con éxito.

print es una instrucción  que le dice a java que escriba el parámetro (que va entre paréntesis)en la consola. Si canviáis Hello World! por cualquier otra cosa y ejecutáis el programa veréis que el resultado cambia.

Veréis que hay un punto y coma al final de la línea. EN JAVA, ES NECESARIO ACABAR CADA LÍNEA DE CÓDIGO CON UN PUNTO Y COMA. Esto quiere decir que es necesario ";" al final de cada instrucción, no necesariamente de cada línea tal y como lo escribimos en la interfície de Processing. Pero si tener esto en cuenta siempre ya que es un error muy común olvidarse de alguno.

También es MUY IMPORTANTE cuando programamos EL ORDEN en que escribimos las intrucciones. Así, el código:

println("Hello World!");

println("Hola mundo!");

escribirá primero la frase en inglés y después en castellano. Obviamente aquí el ejemplo es trivial, pero la importancia es muy grande a medida que el código se volvió complejo.

También habréis visto que en este segundo ejemplo la instrucción es println, con "ln". Esto quiere decir "print line", y ejecuta un cambio de línea después de escribir cada parámetro.

Probad el código:

print("Hello World!");

print("Hola mundo!");

y veréis la diferencia.

También habréis visto que cada vez que ejecutábais un programa se habría una pequeña ventana en blanc (o en gris, de hecho). Se trata de la ventana que processing crea y es donde nos centraremos, sobretodo, a partir de ahora.  Sin dejar nunca de banda la consola, muy útil para el programador, evidentemente lo que nos interesa es la ventana, ya que este es el resultado final de la aplicación. Aquello que el público ve.

[Nota: si ya habéis hecho copiar+pegar el código desde el bloque a la interfície de processing, tenéis vocación de programadores!]

Píxels: RGB y la cuadrícula

Antes de continuar...un repaso del color y los píxeles. Puedes ver una simulación en esta dirección http://joan.cat/han06/sketches/10_simulacio/ que explica la cuadrícula de píxeles y Pixeldraw para ver el color.

COLOR:

El ordenador entiende el color de la manera siguiente:

AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

Esto significa que cada uno de los cuatro valores de color (alfa, rojo, verde, azul), ocupa 8 bits (1 byte) en la memoria.

Esto le da, de cara a processing un rango de 0 a 255 por cada uno de los cuatro valores. El valor de un color, entonces, se expresa en Processing así:

color(255,0,0) para un rojo pur, por ejemplo, o para un verde con un alfa (transparencia) del 50%: color(0,255,0,127). Si no se especifica el parámetro alfa se entiende que su valor es máximo, 255 y por lo tanto no hay transparencia (la opacidad es total).

Para ver estos valores, el color picker de la misma interfície de Processing o el de Pixeldraw pueden ser útiles.

Cuando un color está en la escala de grises (y por lo tanto los valores R,G,B son iguales), se puede expresar con un solo valor: color(127);

Hay varias maneras de utilizar el color. Las que utilizaremos al principio son background(), stroke() y fill(). Dentro los paréntesis pondremos un valor de color para cambiar, respectivamente, el color de fondo de la ventana, el trazo en una forma geométrica, y el color de la forma en si (el que lo rellena).

LA CUADRÍCULA:

Hemos dicho anteriormente que Processing trabaja píxel a píxel. Es decir, para dibujar con Processing debemos tener en cuenta que trabajamos en una cuadrícula de píxeles. Esta cuadrícula puede ser de 100 X 100 - la medida por defecto a p5, la hemos visto con los ejemplos de "Hello World!" -, 200 X 454, 1008 X 91... o lo que se quiera mientras la memoria RAM de la que disponemos lo pueda aguantar.

Para dibujarlo, por ejemplo, una línea, le deberemos decir de que punto a que punto de la cuadrícula debe ir. Por una esfera, en que punto comienza y que medidas tiene, etc.

Esto comportará a unos ciertos dibujos que son muy característicos de entornos con Processing (y totalmente diferentes de los entornos con Flash, por ejemplo).

Si se trabaja píxel a píxel, entonces, esto quiere decir que cada píxel tiene un lugar en la cuadrícula, que se expresa con las coordenadas X, Y. Hay que tener en cuenta que el punto 0,0 es la esquina superior izquierda.

Para entenderlo rapidamente, podéis mirar la siguiente simulación, donde moviendo el ratón veréis las coordenadas del píxel donde os encontráis.

Su posición en PixelArray es un concepto más avanzado que podéis ignorar por ahora.

Lo que si es interesante es utilizar las teclas "n" y "m" para ver diferentes simulaciones de resolución y como crece exponencialmente el número de píxeles en la cuadrícula a medida qque esta aumenta.

También podéis utilizar el click del ratón para intentar dibujar formas geométricas con las diferentes resoluciones simuladas.