Introduccin a Processing

Que es Processing?
Processing es un lenguaje de programacin y entorno de desarrollo integrado de cdigo abierto basado
en Java, de fcil utilizacin, y que sirve como medio para la enseanza y produccin de
proyectos multimedia e interactivos de diseo digital. Fue iniciado por Ben Fry y Casey Reas a partir de
reflexiones en elAesthetics and Computation Group del MIT Media Lab dirigido por John Maeda.

Processing es desarrollado por artistas y diseadores como una herramienta alternativa al software
propietario. Puede ser utilizado tanto para aplicaciones locales as como aplicaciones para la web
(Applets). Se distribuye bajo la licencia GNU GPL.
Podris ver que la interface es muy parecida a la de Arduino.

Empieza visitando la pagina http://processing.org/download y selecciona la versin que necesites

en funcin de tu sistema operativo (Windows, Linux o Mac). La instalacin sea cual sea el S.O. (Sistema
Operativo) es sencilla.

Para la versin de Windows debers tener descargado un archivo .zip. Haz sobre clic en el y arrastra
la carpeta que contiene a cualquier sitio de tu disco duro. Podras hacerlo en Archivos de Programa
o simplemente en el escritorio, pero recuerda que es importante extraer la carpeta del .zip. Luego haz
doble clic en processing.exe para empezar.
Para la versin de Mac OS X tambin descargars un .zip. Haz doble clic sobre el y arrastra el icono
de Processing a la carpeta de Aplicaciones. Si estas utilizando un ordenador ajeno y no puedes

modificar la carpeta Aplicaciones, tambin puedes arrastrarlo al escritorio. Despus haz doble clic
en el icono de Processing para empezar.
Para la versin de Linux se descarga un archivo tar.gz, que debera ser familiar para la mayora de
los usuarios de Linux. Descarga el archivo a tu directorio Home, abre el terminal de Windows y
escribe: tar xvfz processing-xxxx.tgz Reemplaza las xxxx por el nombre de tu archivo, en funcin
de su versin. Otra opcin es descomprimirlo y ejecutar el archivo Processing.

Con un poco de suerte, la pantalla principal de Processing estar abierta. La configuracin de cada PC es
diferente, as que si tienes algn problema y el programa no se inicia, visita la pagina
de troubleshooting para buscar posibles soluciones.

Tu primer programa en Processing

Ahora acabas de ejecutar el Processing Development Environment (o PDE).
No hay mucho en el; el rea larga es el editor de texto, y hay una tira de botones a lo largo de la parte
superior; es la barra de herramientas.
En la parte inferior esta el rea de mensajes, y debajo la consola. El rea de mensajes es usada para
mensajes de una linea y la Consola para aspectos mas tcnicos.
Escribe lo siguiente en el editor:
?

ellipse(50, 50, 80, 80);

Esta linea de cdigo significa dibuja un elipse, con el centro situado a 50 pixeles del margen izquierdo
y 50 del margen superior. Haz clic en este icono.

Si has escrito todo correctamente, veras aparecer esto en la ventana de visualizacin:

Si no lo has escrito correctamente, el rea de mensajes se volver roja y se quejara de los errores.
Si esto ocurre, comprueba que has copiado el ejemplo de cdigo exactamente: los nmeros debern estar
dentro del parntesis y separados por comas entre cada uno de ellos. La linea deber terminar con punto y
coma ;.
Uno de los aspectos mas complicados de empezar a programar es que debes ser muy especifico con el
sintaxis. El software de Processing no siempre es lo suficientemente inteligente como para saber lo que
quieres decir, pudiendo ser bastante quisquilloso con la colocacin de la puntuacin. Te acostumbraras
con un poco de practica.
Lo siguiente que vamos a hacer es avanzar hasta un sketch que es algo mas interesante. Borra el texto
del ejemplo anterior y prueba este.
?

void setup() {

2
3

size(480, 120);

4
5

6
7
8

void draw() {

if (mousePressed) {

10
11

fill(0);

12
13

} else {

14
15

fill(255);

16
}

17

ellipse(mouseX, mouseY, 80, 80);

18
19

20
Este programa crea una ventana de 480 pixeles de ancho y 120 pixeles de alto.

Despus empieza a dibujar crculos blancos en la posicin del ratn. Cuando el botn del ratn esta
pulsado, el color del circulo cambia a negro. Explicaremos mas adelante sobre los elementos de este
programa. DE momento ejecuta el cdigo, mueve el ratn y haz clic para probarlo.

Show
Hasta ahora hemos explicado solamente el botn Run. Probablemente te habrs preguntado para que sirve
el botn de Stop que hay junto a el.

Si no quieres usar estos botones siempre puedes utilizar el men Sketch, que muestra el acceso rpido
(Ctrl-r en Windows y Cmd-R en Mac) para ejecutar. Debajo de Run, en el men Sketch, tenemos Present,
que limpia la pantalla de ventanas al ejecutar tu sketch.

Tambin puedes usar Present desde la barra de herramientas, manteniendo pulsada la tecla Shift mientras
pulsas el botn Run.

Save
El siguiente comando importante es Save (salvar). Es la flecha con forma de descarga (hacia abajo) en la
barra de herramientas.

Puedes buscar tambin esta opcin en el men File. Por defecto, tus programas son guardados en
el sketchbook, que es una carpeta que almacena tus programas por defecto, tiene un acceso sencillo.
Pulsando el botn Open de la Barra de Herramientas (la flecha hacia arriba) se muestra una lista de los
sketches contenidos en tu sketchbook, as como una lista de los ejemplos que vienen incluidos en el
software de Processing.

Es una buena idea salvar tus sketches con frecuencia. Cada intento puedes guardarlo con un nombredistinto
para poder volver atrs si fuese necesario. Esto es especialmente til si -y no cuando- algo falla o se atasca.
Tambin puedes ver donde esta situado el sketch seleccionando la opcin Show Sketch Folder en el
men Sketch.
Puedes crear un nuevo sketch mediante el botn New de la toolbar:

Share (compartir)
Otra parte del trabajo con Processing es compartir tu trabajo. El botn de exportar aplicacin Export
Application en la barra de herramientas te permitir compilar tu cdigo en una aplicacin para distintos
sistemas operativos (Mac, Windows y/o Linux). Esto es una forma fcil de crear versiones ejecutables de
tus proyectos.

Tambin puedes encontrar Export Application en el men File.

Ademas puedes cambiar el mode de Processing para exportar tu cdigo a otras plataformas. Por ejemplo,
cambiando al javaScript Mode, exporta a HTML5 y WebGl. Cambiando el Mode a Android, exporta
una aplicacin para Smartphones y Tablets que funcionan bajo Android.

Ejemplos y Referencias (Example and Reference)

Aprender como programar en Processing implica explorar mucho cdigo: ejecutarlo, alterarlo, destrozarlo
y mejorarlo hasta reconfigurarlo en algo nuevo. Con esta idea en mente, la descarga del software
de Processing contiene docenas de ejemplos que demuestran diferentes caractersticas del software. Para
abrir un ejemplo. Selecciona ejemplos desde el men File O haz clic en el icono Open del PDE.
Los ejemplos esta agrupados en categoras basadas en su funcin, como por ejemplo: Form, Motion e
Image Encuentra una categora interesante y prueba un ejemplo!
Si ves una parte del programa que no te es familiar y esa coloreada en naranja (Esto significa que es una
parte de Processing), selecciona su nombre y haz clic en Find Reference en el men Help. Tambin
puedes hacer clic derecho en ese texto y seleccionar Find in Reference en el men que aparece. Esto
abrir la pagina de referencia del elemento seleccionado en el navegador web. La Reference esta
tambin disponible online.

La Reference de Processing explica todos los elementos de cdigo con una descripcin y ejemplos.
Los programas de reference son mucho ms cortos (habitualmente cinco lineas) y fciles de seguir que los
cdigos largos y ms complejos que encontramos en Examples. Recomendamos mantener la pagina de
referencia abierta mientras lees este libro y mientras ests programando.
La lista de elementos de cdigo se puede consultar por orden alfabtico o por temtica (a veces es mas
rpido hacer una bsqueda de texto con tu navegador).
La Reference fue escrita pensando en el principiante. Esperamos haberla hecho lo suficientemente sencilla
y entendible. Agradecemos a toda la gente que ha detectado errores y los ha reportado. Si crees que puedes
mejorar alguna entrada de Reference o encuentras un error, por favor, hznoslo saber haciendo clic en el
link Reference.