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:

?

1 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.

?

1

2

3

4

5

6

7

8

void setup() {

size(480, 120);

}

void draw() {

9

10

11

12

13

14

15

16

17

18

19

20

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

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.