Instalación:

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

1. Bajar la versión estàndard (no la expert)
2. Descomprimir el archivo .zip en una carpeta qualquiera a vuestro libre albedrío
3. Clicad “Processing.exe”… y ya está

3.-¿POR QUE PROCESSING?

• Porque es un proyecto pensado para aprender a programar, y enfocado al uso de la programación con fines artísticos y de diseño
• Por la simplicidad de la interfície, que permite centrarse en el código
• Porque es un proyecto open-source
• Porque, sin ser un competidor de Flash, puede ser una alternativa en según qué proyectos, y por eso vale la pena conocerlo y escoger entre uno y otro, en cada caso, según el tipo de proyecto
• Porque auque esté pensado para aprender a programar, es suficientemente flexible y potente para desarrollar proyectos muy complejos
• Porque aunque la programación multimedia en el máster la vamos a realizar sobretodo en Flash, el código en un y otro programa son en realidad muy parecidos en los puntos más importantes

4.- La Interfície de Processing:

La Interfície de p5 es sencilla. Esto permite que uno pueda familiarizarse con ella muy rapidamente. Si la comparamos con la complejidad de interfícies como las de Flash o Director, la diferencia es muy considerable.

Para empezar, nos fijaremos en el siguiente menú:

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

Hay tres que no hace falta explicar. Sólo saber que cuando creamos un proyecto nuevo en Processing, creamos un Sketch, y el Sketch folder es la carpeta donde éste se guarda. En principio, el Sketch consta tan solo de la misma carpeta y de un archivo .pde que contiene el código. Luego se pueden añadir carpetas para archivos de imagen, video, etc.

RUN: Sirve para ejecutar el código. Con la mágia de este simple botón nos ahorramos lo que en programación se conoce como compilación.

Java (y por consiguiente Processing) es un lenguaje compilado. Eso 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 otro mucho menos inteligible (aún!) para mentes humanas, pero mucho más cercano al ordenador: los famosos ceros y unos. Para poder compilar java hay que hacerlo con la línia de comandos, o bién con un deitor como Eclipse u otros de pago, que no son especialmente fáciles de intalar ni ejecutar. Además hay que instalar java en el ordenador, que siempre es una aventura.... En fin, sólo este botón hace que para empezar a programar con java nos podamos ahorrar aprendernos todos estos passos capaces de desanimar al más motivado.

STOP: Para el programa (of course!)

NEW: Crea un Sketch nuevo

OPEN: Abre un Sketch existente

SAVE: Guarda el Sketch con el que se está trabajando. Hay que utilizarlo mucho, por si acaso, pero aún más utilizar el "Save as" (ctrl+shift+s) para ir guardando versiones mientras trabajamos en nuestros proyectos.

EXPORT: Sirve para preparar el sketch para ser ejecutado a través de un navegador, ya sea en la web o simplemente fuera del entorno Processing.

Otra gran ventaja de trabajar con processing! Con java convencional, para ver el resultado de nuestro código via navegador (que es como funciona p5), hay primero que hacer un tipo de programa java específico: un applet. Eso p5 ya lo hace sólo. Pero después hay que compilar el código y escribir el html que contendrà el fichero y lo ejecutará via navegador. Todo eso, en Processing, es un click.Y además incluye en la página el código fuente del sketch, de acuerdo con la filosofía open-source del proyecto.

Tan sólo conociendo estos botones de la interfície (y el siempre útil “save as”) tenemos bastante como para empezar a trabajar con Processing, y possiblemente no necesitemos nada más durante estas primeras ocho sesiones.

5.- "Hello World!"

Llegados a este punto, es hora por fin de pasar a la acción y empezar a escribir código!

Processing, como qualquier entorno de programación que se precie, tiene una consola. Un espacio donde, via texto, podemos recibir mensajes del programa y, cuando los haya, ver y descifrar los errores. La consola de p5 se encuentra debajo del todo en la interfície de Processing, con fondo negro.

Aquí es donde veremos los resultados de nuestro programa, lo que en el argot de los programadores se conoce como el “Hello World!”.

Ejecutarlo, en p5, es tan sencillo como escribir:

dentro la interfície de Processing, darle a "run” y… voilà! Habéis creado el primer programa!

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

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

Notad que hay un punto y coma al final de la línia.
EN JAVA, HAY QUE ACABAR CADA LÍNIA DE CÓDIGO CON PUNTO Y COMA;
Eso significa que hace falta un “;” al final de cada instrucción, de hecho no necesariamente de cada línia tal y como la escribiremos a la interfície de Processing. Es un error muy común olvidarse punto y comas.

También és MUY IMPORTANTE al programar EL ORDEN en el que escribimos la instrucciones.

Así, el código

escribirá primero la frase en inglés y luego en catalán. Òbviamente aquí el ejemplo es trivial, pero la importancia es crucial a medida que el código se torna complejo.

También hauréis visto que en este segundo ejemplo la instrucción es prinln, con “ln”. Esto significa “print line”, y ejecuta un salto de línia después de escribir el parámetro.

Provad el código:

y veréis la diferencia.

Finalmente, habréis notado que cada vez que ejecutábamos el programa se abría una pequeña ventana en blanco (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 tener un ojo a la consola, herramienta esencial para el programador, evidentemente lo que nos interesará es la ventana, ya que allí estará el resultado final de nuestra aplicación. Lo que el público o el visitante verá.

6.- "Hello World!" gráfico

Para empezar a ver de qué estamos hablando, y ya que Processing es un entorno essencialmente gráfico, vamos a realizar otro tipo de "hello world!" haciendo un primer dibujo. Lo primero que vamos a hacer es dibujar una línea con:

Ahora sí que donde hay que mirar es a la ventana gris. Si canviáis éste código por el que sigue

y comparáis los resultados podéis empezar a suponer cómo está respondiendo el programa a nuestras intrucciones en este caso. A esto estará dedicada la segunda sessión de programación en una semana.

7.-LA CUADRÍCULA

Processing, y java, trabajan píxel a píxel. Es decir, para dibuijar con p5 hay que tener en cuenta que trabajamos sobre una cuadrícula de píxels, que puede ser de 100x100 –el tamaño por defecto que vimos con los ejemplos del “Hello World!”– , 200×454, 1008×91… o lo que se quiera mientras la memória RAM de la máquina donde trabajamos lo pueda aguantar.

Para dibujar, por ejemplo, una línea, tenémos que especificar en el código de qué punto a qué otro de la cuadrícula tiene que ir. Para una esfera, el punto central y el radio, etc.

Veréis que trabajando así a veces llegaremos a ciertos dibujos que són muy característicos de entornos como Processing (y muy diferentes por ejemplo que los de Flash).

Cada píxel, pues, tiene su lugar en la cuadrícula. Esta posición se expresa mediante coordenadas X, Y, con el punto 0,0 en la esquina superior izquierda de la ventana.
Para entenderlo rápidamente, podéis mirar esta simulación donde moviendo el ratón veréis las coordenadas del píxel en el que estáis.

Su posición en pixelArray es un concepto avanzado que de momento podéis ignorar.

Lo que sí es interesante en la simulación es utilizar las teclas ‘n’ y ‘m’ para ver la simulación a distintas resoluciones y ver como, al duplicar el tamaño de la cuadrícula, el número total de píxels crece exponencialemente.
También podéis utilitzar el botón izquierdo del mouse para intentar dibujar formas geométricas en la resoluciones simuladas.

8.-COLOR

Cuando trabajamos con Processing, el ordenador entiende el color así:

AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

aunque nosotros en realidad lo veremos así:

RRRRRRRRGGGGGGGGBBBBBBBBAAAAAAAA

Esto significa que cada unos de los cuatro valores (rojo, verde, azul y alfa) ocupa 8 bits (un byte) en memoria.

Un byte tiene 256 valores possibles. Así pues, el color en Processing tendrá un rango de 0 a 255 por cada uno de estos cuatro valores.

El valor de un color en Processing se expressa así: color(255,0,0) pera un rojo puro, por ejemplo, o para un verde con alfa (transparéncia) 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 que por lo tanto no hay transparéncia (la opacidad es total).

Pera ver estos valores de color, el color picker de la interfície de Processing puede ser muy útil.

Cuando un color está en la escala de grises (y por consiguiente sus valores R, G y B son iguales entre sí), se puede expressar con un solo valor: color(127);

Hay varias maneras de utilizar el color. De momento, veremos las funciones background(), stroke() y fill(). Dentro de sus paréntesis (es decir, como parámetros), pondremos el valor de color (en forma de uno, tres, o cuatro números de 0 a 255), para canviar, respectivamente, el colro de fondo de una ventana, el color del trazo en una forma geométrica, o su color de relleno.

Por ejemplo:

9.-Funciones de dibujo I

Volvemos ahora al “hello world” gráfico:

Escribid

en la interfície de Processing y clicad Run.

Veréis que una línia negra en la ventana gris que Processing ha abierto.
Una línia que va del punto 20,20, al 80,80 en una quadrícula de 100×100 píxels.

Si escribís

veréis, efectivamente, que se crea un rectángulo (quadrado en este caso) a partir del punto 20,20 y de 60 píxels de largo y ancho.

Y así successivamente con las siguientes formas geométricas:

line() pe: line(30, 20, 85, 75);

rect() pe: rect(30, 20, 55, 55);

ellipse() pe: ellipse(56, 46, 55, 55);

triangle() pe: triangle(30, 75, 58, 20, 86, 75);

Recordad que EN JAVA, HAY QUE ACABAR CADA LÍNIA DE CÓDIGO CON UN PUNTO Y COMA. Esto significa que hace falta “;” al final de cada instrucción, no necessàriamente, de hecho,  de cada lína tal y como la escribimos en la interfície de Processing. Pero hay que tener esto siempre en cuenta ya que es un error muy común olvidarse algún punto y coma.

10.- PRÁCTICA

La primera práctica consiste en reproducir tres dibujos, combinando dibujo y color.

Los dibujos a reproducir son: s

Uno:

dos:

tres: