Esta es mi guía más o menos básica para empezar a programar con el lenguaje Processing.
Del mismo modo que las otras guías que hice hasta el momento, se trata de un texto escrito por un principiante. Estoy escribiendo para aprender.
Dicen que la mejor manera de aprender algo es primero practicarlo y luego explicarlo. Y eso es lo que intento hacer.
Otros ejemplos de esos apuntes que escribí en el pasado con el mismo objetivo de aprender enseñando son:
Hago todo lo posible para transmitir mi experiencia de aprendizaje en la forma más efectiva que puedo. Cualquier error que encuentres en el material, no olvides decirme con tu comentario o correo. Todos tus consejos ayudan a mejorar este material.
¿Qué es Processing?
Processing es un lenguaje de programación y un entorno de desarrollo.
Se utiliza principalmente para la creación de arte y la generación de imágenes, aunque también se puede usar para muchos otros tipos de proyectos (juegos interactivos o similares).
Estoy a punto de instalar el entorno que va a permitirme desarrollar ideas en este lenguaje. Este software se conoce por el nombre de “PDE” (Processing Development Enviroment) o “entorno para el desarrollo de Processing”.
Vale agregar además que Processing es un proyecto de código abierto y esta basado en el lenguaje de programación Java.
Cómo instalar Processing en Linux
Este es el link al sitio oficial para descargar el software.
En este caso en particular estoy buscando la versión de Linux, así que presiono el botón de download correspondiente a esa opción y descargo el archivo “.tar.gz”.
Existen varias versiones del programa. Hasta el momento de escribir este texto existen las versiones: 2.0, 3.0 y 4.0 con todas sus variantes intermedias.
Existen algunas diferencias entre cada versión. Aunque este texto fue escrito con la “versión 3” en mente, creo que puede funcionar bien para explicar aspectos fundamentales compartidos por cualquiera de las opciones.
Entonces descargo la última edición estable, solo por seguridad. Pero es bueno saber que si necesito por algún motivo especifico una versión más antigua, siempre puedo conseguirla.
Una vez descargada la versión necesaria, muevo este archivo a una nuevo directorio.
Voy a crear entonces una carpeta dedicada para almacenar toda esta nueva información en mi computadora. Esta nueva carpeta puede estar dentro de “Home” (el directorio Personal) por ejemplo, o en cualquier lugar que considere más apropiado para el caso.
No es necesario desempaquetar el contenido de la descarga, realmente no hay que lidiar con ningún software de instalación. Todo el proceso ocurre en la terminal de comandos.
Lo siguiente es abrir la nueva carpeta en la terminal de Linux.
Para esto puedo buscar el directorio especifico desde la consola, o puedo hacer click derecho en la carpeta y elegir “Open in terminal” (abrir en la terminal).
Luego escribo:
tar xvfz processing-xxxx-linux64.tgz
Y cuido de reemplazar el “xxxx” que aparece en el comando por el número de versión de processing que descargué en el equipo.
La parte de “linux64” del comando se refiere a que estoy usando una versión para un sistema operativo de 64 bits. Esta parte también puede cambiar dependiendo de la versión que estoy instalando.
Dicho esto, por ejemplo, en mi caso el comando queda:
tar xvfz processing-4.0b1-linux64.tgz
Eso va a extraer una nueva carpeta dentro del nuevo directorio.
Si ingreso a esa nueva carpeta voy a encontrar un archivo llamado “processing”. Si lo ejecuto, se va a abrir el entorno de desarrollo.
Y eso es todo, ya puedo empezar a escribir código dentro del mismo entorno de Processing.
También puedo abrir esa nueva carpeta en la terminal, y luego escribir:
./processing
Y el entorno de Processing otra vez va a ejecutarse. Son dos formas distintas de abrir el mismo programa
Listo, eso termina la instalación. Se podría decir que ya no me queda nada por hacer, pero todavía hay algo más…
Cómo agregar un acceso directo para Processing en el escritorio
Quiero agregar en mi escritorio un acceso directo del programa, para poder encontrar el programa rápidamente.
De otro modo voy a tener que ejecutar el entorno de Processing buscándolo siempre en la carpeta donde empecé la instalación en el paso previo, lo que a la larga puede terminar siendo engorroso.
Para conseguir crear el acceso directo de Processing, lo que tengo que hacer es:
1- Ir al escritorio y hacer click sobre el mismo con el botón derecho del ratón.
2- Luego seleccionar la opción “Create a New Launcher Here”.
Me va a aparecer una nueva ventana.
Esa ventana me pide que le de un nombre al acceso directo. Lo hago, y luego presiono explorar.
La idea es ir hasta la carpeta donde instalé el programa, para linkear este nuevo “lanzador” con el archivo llamado Processing que utilicé antes.
También puedo darle una imagen a este ícono, si exploro la carpeta de Processing voy a encontrar una librería (por lo general ubicada en lib > icons) con algunos posible gráficos para utilizar.
Y listo, si todo salio bien voy a tener el acceso directo creado en el escritorio.
No solo eso, al llevar a cabo esta acción también se me va a preguntar si me gustaría agregar el acceso directo en el menú. Si elijo que si, ahora también voy a tener a Processing en la categoría de “otros programas”. Aunque puedo mover ese acceso directo a otra categoría.
Con todo eso ya tengo el entorno de Processing en mi equipo, puedo ya entonces empezar a utilizarlo.
¿Qué es un sketch en Processing?
En Processing un sketch es el nombre básico que se le asigna al proyecto que voy a programar.
Este sketch puede conectar en su interior múltiples tipos de archivos, por ejemplo imágenes o sonidos externos.
Empezar a programar con Processing
Los programas creados en Processing se conocen como un sketch.
Claro, un sketch es la misma palabra que en el mundo del arte define por ejemplo a un dibujo rápido de una idea.
Siendo que Processing esta muy orientado a la creación de arte e imágenes, puedo decir que la idea de sketch funciona bien para describir estos programas.
Por otro lado, el directorio donde se guardan estos programas se llama sketchbook (libro de sketches o “carpeta de sketches”)
Pero no necesito tener obligatoriamente un entorno de Processing para correr un sketch.
El lenguaje permite crear aplicaciones específicas que pueden usarse “por separado”, para que mi programa pueda ejecutarse de forma independiente en otras computadoras o navegadores.
Cómo crear un nuevo sketch en Processing
Necesito hacer click en el botón “new” (nuevo) para generar un nuevo sketch. Luego puedo ponerle nombre al programa al momento de guardarlo (por ejemplo con “save as”).
Nada de esto es diferente a, por ejemplo, crear un nuevo documento en un procesador de texto como Word o LibreOffice Writer.
Al momento de utilizar Processing por primera vez, por defecto se crea un directorio donde los sketches van a comenzar a guardarse. Sin embargo siempre tengo la opción de guardar mis programas en otra carpeta, si encuentro eso más conveniente.
Cada sketch esta compuesto por una carpeta que lleva el nombre que utilicé al crear el programa. Dentro de la carpeta voy a encontrar un archivo con “.pde” por extensión.
El archivo .pde es un texto sin formato que contiene las lineas de código del programa que estoy desarrollando.
Pero también se puede guardar otro tipo de archivos, por ejemplo con la extensión “.java”, aunque todavía es muy pronto como para preocuparme por eso.
A la vez esta carpeta puede contener otra en su interior, llamada “data”. Estos son datos externos (imágenes y audios, por ejemplo), elementos con los que puede interactuar el programa.
Dentro del sketch
Ya tengo Processing abierto.
Voy a Escriir en su interior el siguiente código y al presionar “run” voy a dejar que la magia del arte comience a comunicarse con mi pantalla pantallas.
void setup()
{
size(500,500);
}
Para ejecutarlo presiono Run (el botón de “Play en la esquina superior izquierda de la pantalla) o el combo de teclas Ctrl + R en teclado.
Si todo salio bien, una nueva pantalla en blanco va a presentarse. Si cierro la pantalla, el programa termina.
Entonces… ¿Qué significa este código?
Un sketch tiene varias funciones, todas unidas por una sintaxis específica.
Una función es un set de instrucciones, con un nombre específico, que lleva adelante un trabajo.
Hay distintos tipos de funciones. Y la función setup() es parte estructural del lenguaje Processing.
Por decirlo de algún modo, la función setup() organiza el contenido del sketch. Puedo entender esto más claramente si tengo en cuenta que la palabra setup quiere decir organización o disposición.
Dentro de esta función puedo poner otra funciones que van a ejecutarse una única vez, en orden secuencial.
Si me fijo bien, luego de la función hay dos corchetes. Todo lo que entra entre esos corchetes se conoce como bloque. Ahí voy a encontrar todos los comandos, que son parte de la función setup().
void setup()
{
size(500,500);
}
Esta función es muy importante, porque necesito usarla para cada sketch que realizo.
setup(): el resumen
Entonces lo que conozco hasta el momento es:
1- La función principal “setup()” es parte básica de la estructura de mi programa.
2- Se llama una única vez al principio del Sketch.
3- En su interior contiene algunas propiedades básica que le dan forma a mi proyecto.
En este caso como propiedad básica tengo la función size(). En su interior le asigno el tamaño que va a tener la ventana (Display)que va a usar el proyecto.
Puedo leerlo de esta forma:
size(500,500);
Quiere decir que la ventana va a tener 500 pixels de ancho y 500 pixeles de alto.
También puedo notar que la función size termina como un “punto y coma”.
Dentro de una función principal (por ejemplo Void) cada parametro extra termina un “;” de separación. De este modo el sketch sabe cuando finaliza y comienza otra función.
Por eso entre los corchetes puedo poner varias funciones diferentes, separadas por medio del “punto y coma”.
Cuestion de formato
La sintaxis, la forma de escribir en los sketches, tiene otros aspectos para tener en cuenta. Algunas de estas cuestiones son solamente de forma, ayudan a crear un código más fácil de leer y entender.
Tengo la opción de darle “auto formato” al código, para que todo quede hermosamente presentado. El atajo para esto es presionar el combo Ctrl + T en el teclado.
Por otra parte, otros errores de la sintaxis pueden generar un error y que el programa no se ejecute.
Aunque voy a encontrar más de cerca estos errores en el futuro, Processing siempre me va a dar una idea general sobre donde se encuentra el posible error.
Por ejemplo, digamos que olvido un “;” al terminar una función.
Al ejecutar el código Processing va a mostrarme un mensaje de error que dice “Missing a Semicolon “;”” (Esto es “hace falta un punto y coma “;””).
De esta forma es más sencillo depurar el programa de errores.
Pero para cerrar este apartado, voy a volver al código .
Hasta el momento tengo escrito:
void setup()
{
size(500,500);
}
Y al presionar Run o las teclas Ctrl + R en teclado, el código se ejecuta y una pantalla con las dimensiones 500×500 aprece.
Esta nueva ventana es la que invoqué con “size()”. Se trata del espacio que mi futuro sketch va a utilizar para desplegar lo que voy a ir haciendo.
Escribir comentarios en Processing
Ahora digamos que quiero explicitar lo que hace mi pequeño programa, explicar su funcionamiento sin tener que ejecutarlo primero.
Para eso puedo escribir un comentario dentro del código.
Los comentarios que haga no van a a ejecutarse, y por lo tanto no van a interferir con el funcionamiento del sketch.
Para escribir un comentario, hago uso de dos barras consecutivas // (en inglés forward flashes).
Por ejemplo, si quiero agregar la fecha de creación del programa, puedo hacer:
// Modificado el 26/09/5041
void setup()
{
size(500,500);
}
Todo lo que se encuentra en la misma linea que las dos barras // forma parte del comentario.
Pero ahora digamos que quiero todo un párrafo de comentario, sin tener que agregar nuevamente las dos barras al comienzo de cada renglón.
Para hacer un comentario de múltiples linea hago uso de una barra y un asterisco al comienzo del texto /* y luego cierro con un asterisco y una barra */ para terminar.
Agregando un comentario de múltiples lineas en el código anterior, puede quedarnos así:
/* Modificado el 26/09/5041.
Este programa crea una ventana.
Por ahora no hace nada más*/
void setup()
{
size(500,500);
}
Pero tengo que recordar que es importante cerrar el comentario de múltiples lineas, o el código va a dar error. Dicho de otro modo, va a parecer que todo el programa es parte de un comentario aun no terminado.
Realmente voy a notar que lo que se considera “comentario” dentro del programa aparece con una tipografía ligeramente diferente en su tono, para facilitar la distinción entre partes a simple vista.
Otra cosa que vale la pena recordar. Puedo utilizar los comentarios para “ocultar” partes del código, consiguiendo así que estos bloques comentados no se ejecuten.
Processing, entender la ventana en pixels
Voy a tratar de pensar «geográficamente» el display del sketch, para luego poder usar las dimensiones de la ventana a mi favor para la creación de imágenes.
Pero antes, un ejemplo.
Digamos que tengo que hacer una animación, un video de tres segundos de duración.
La animación se trata de un fondo blanco, con un pequeño circulo azul por delante. El circulo se mueve desde el costado izquierdo del cuadro hacia el derecho. Todo esto en un dibujo (o mejor dicho, un plano) de dos dimensiones.
El circulo puede ir hacia arriba o hacia abajo; moverse hacia la izquierda o hacia la derecha de la pantalla.
Entre la primera y la última posición del circulo hay varios cuadros de animación. Voy a suponer tres posiciones, una por segundo. Cada una de esas posiciones forman cuadros (frames) individuales.
En cada uno de los tres segundos, en cada cuadro, la figura tiene una posición distinta en el espacio.
Sin embargo ¿Cómo se trasladada esto al mundo del código? ¿Cómo se divide el espacio de la pantalla? ¿En que forma puedo trasladar conceptos del tipo “arriba o abajo” dentro de un script?
Al programar no tengo una forma gráfica para «arrastrar» cada elemento por el cuadro. No puedo usar, al menos en principio, el ratón para crear las posiciones de cada frame. Tampoco hay linea de tiempo para ayudarme.
La respuesta: tengo que pensar pantalla de Processing como en una grilla de pixeles en la que puedo ubicarme por coordenadas.
Tengo que entender el espacio de mi proyecto como una grilla donde el punto de origen (0,0) se encuentra siempre en la esquina superior izquierda de la pantalla.
Todo esto puede sonar algo confuso… y mi explicación no puede estar ayudando mucho. Pata entenderlo más, voy a intentar expandir la idea con el ejemplo que sigue.
Crear una ventana en Processing
Antes escribí un pequeño programa básico. El código había quedado así:
void setup()
{
size(500,700);
}
La función size() tiene dos parámetros. Le hice una pequeña modificación y ahora dice (500,700) en lugar de (500, 500)
Con el primero de esos parámetros se define el ancho de la ventana ( expresado en la letra x), y con el segundo la altura (expresado en la letra y). Puedo pensar la función como size(x,y).
Por ejemplo, al ejecutar dentro del código:
size(500,700);
Me encuentro con una nueva ventana. La conozco como ventana de display (display window) y es el espacio donde se va a cristalizar el resto de mi código.
Digamos que quiero dibujar una linea, esa linea va a aparecer representada en el display window.
En este caso, en una ventana de 500 de ancho por 700 de alto.
Pero falta que me haga la pregunta ¿500 y 700 de qué cosa? ¿En que unidad se mide el ancho y el alto de la ventana?
La respuesta : píxeles.
Por ejemplo, puedo decir que el tamaño de una hoja A4 es de 21 centímetros de ancho y 29,7 centímetros de alto. Pero ahora en la pantalla tengo una ventana de display, no una hoja.
Y el tamaño del display que hice tiene 500 píxeles de ancho y 700 pixeles de alto.
Una ventana medida en pixels
El pixel es la unidad más pequeña de la imagen digital.
Si pudiera ver el monitor desde muy muy cerca, podría ver cada pixel como un único punto de color individual en un mar de otros puntos que conforman la imagen.
En inglés la palabra pixel viene de “picture element” o “elemento de imagen”.
El monitor no es más que un conjunto de pixeles que se iluminan según la imagen lo requiere. Por eso cuando se dice que un “pixel muere” se hace referencia a un punto específico en la pantalla que ya no se ilumina o que ya no se enciende correctamente.
En ese caso se puede diferenciar ese pixel individual porque es uno que no esta funcionando dentro de una grilla más grande.
Sin dudarlo se discute mucho sobre pixels, en especial cuando se trata de calidad de fotos, televisores o monitores. Todas esas cosas vienen en distintos tamaños y resoluciones.
Por ejemplo, la medida de una pantalla de computadora puede ser de 1680 pixeles de ancho y 1050 de altura. La cantidad total de pixeles la sabemos porque:
1680 x 1050 = 1.764.000
1.764.000 es la cantidad de pixeles individuales en ese rectángulo. Y dentro de esa grilla, puedo ubicar cada punto por su coordenada específica.
Eso se va a volver de utilidad muy pronto para mi programa.
Del mismo modo, la distancia y la posición de la ventana del sketch esta dada en pixels. Y cada uno de esos pixels me cuenta de una ubicación especifica en el display con su propia coordenada.
Pixels y coordenadas en la ventana de Processing
Estas coordenadas son validas incluso para la dimensión de “profundidad”, si proyecto tuviera imagenes en tres dimensiones.
Pero este caso es más sencillo, estoy trabajando solamente en dos dimensiones y por eso con dos parámetros en lugar de tres.
La ventana de display en cierta forma es parecida al Plano Cartesiano. Hay coordenadas, hay un eje X e Y.
Pero a diferencia del Plano Cartesiano, la ventana de Processing no se encuentra divida en cuadrantes positivos y negativos.
Por ejemplo, en el Plano Cartesiano existes X y -X, para representar un lado positivo y otro negativo de plano. El punto (0,0) de origen esta en el centro de la grilla.
En el caso de Processing, el punto de origen (0,0) se encuentra en la esquina superior izquierda de la ventana. Entonces el eje Y aumenta de valor a medida que descendemos por el eje de X.
En resumen de lo importante: El punto (0,0) en processing se encuentra en la esquina superior izquierda.
Entonces cada cada pixel corresponde a una coordenada del plano. Una coordenada X y otra Y.
Mientras me muevo hacia la derecha del display, el valor de X se agranda, se hace “más ancho”. Y si me muevo en un pixel más bajo, el valor de Y se agranda, se vuelve “más alto”.
La clave en esto es notar que la pantalla en Processing no es más que una grilla, en la que puedo moverme por sus coordenadas.
El resto es simplemente ubicar lo que quiero en la pantalla, por medio de esa mismas coordenadas.
Dibujar un punto en una coordenada
Para entender mejor todo esto, voy a dibujar un punto en el plano.
Pero antes, voy a hacerle también algunos cambios a mi programa original. El mismo se encuentra ahora de esta forma:
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
point(10, 20);
} Si bien recuerdo por lo estudiado anteriormente, la función “void setup()” se ejecuta siempre una vez al principio del programa.
Lo que hice ahora es agregar una nueva función llamada “background()”.
Esta función background() acepta valores entre 0 (negro) y 255 (blanco), siendo un tono de gris cualquier valor intermedio.
Ahora mi display esta relleno de un color blanco, para simular una hoja de papel.
Void Draw (): La otra parte de un sketch
Lo siguiente de para entender de mi nuevo sketch aparece por:
void draw()
{
}La función draw() es otra funcion principal. Pero a diferencia de void setup() que aparece y se ejecuta solo una vez al comienzo del sketch, la función draw() se ejecuta constantemente.
Luego en su interior puedo agregar el ya tan mencionado punto, por medio de la función “point”:
point(x, y);
Esta función también tiene dos parámetros, para definir la posición. La coordenada X (en el ancho, la horizontal del plano) y la coordenada Y (en el alto, en la vertical del plano).
Por ejemplo, para dibujar un punto ubicado en la coordenada X (10) y la Y (20) escribimos
point(10,20);
Después de todo esto ya nos damos cuenta que X nos indica la posición en la horizontal, e Y en la vertical. De ese modo, viendo de nuevo el código completo, al decir:
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
point(10, 20);
point(50, 40);
point(100, 50);
point(150, 70);
}
El código consigue dibujar tres puntos, en tres pares de coordenadas diferentes, cada uno representando a un pixel distinto en alguna parte del display.
Los puntos son diminutos, pequeños como pixels, pero lo reviso voy a poder encontrarlos ahí.
Aunque voy a admitirlo, encontrar esos puntos es bastante dificil. Va sa ser más facil encontrar lo que dibujo en el sketch si uilizó algunas figuras geométricas básicas.
Dibujar una linea en Processing
Para dibujar una linea tengo la función:
line(x1, y1, x2, y2);
Lo que estoy haciendo es darle a Processing dos pares de coordenadas por medio de los parámetros de la función. Estas coordenadas son la del “principio de la linea” con el par (x1, y1) y el “cierre de la linea” con el par (x2, y2).
Como ejemplo:
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
line(10, 10, 200, 350);
}
La linea dibujada cruza hasta el centro de la pantalla.
En resumen:
– Estoy ubicando mi dibujo en un tipo de grilla con un eje X y otro eje Y.
– El punto (0,0) se encuentra en la esquina superior izquierda del display.
En mi opinión lo más común es pensar la imagen en el monitor y decir “voy a ubicar este punto/imagen para que se vea en la parte superior izquierda del plano”.
Pero al mismo tiempo casi nunca pienso ,o al menos no hasta hoy, “voy a ubicar este punto/imagen para que se vea entre las coordenadas/pixel (0,100) y (20, 140)”.
Ahora, al programar en Processing, entiendo que por fuerza necesito pensar en pixels. Antes había pixeles, pero no les prestaba atención. Ahora tengo que medir todo lo que agrego en el programa a la medida de estos diminutos puntos digitales.
Dibujar otras figuras básicas en Processing
Ya me encuentro en la última parte de esta guía.
Los dibujos que estoy haciendo pueden parecer muy sencillos, pero forman las bases de cualquier imagen que vaya a crear en el futuro.
No creo que sea necesario dar ejemplos individuales de cada una de estas funciones, porque al aprender como trabaja una de ellas luego es posible usar otras sin muchos inconvenientes.
Solo por mostrar algunas opciones más, puedo dibujar un triangulo con la función triangle():
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
triangle(100, 280, 250, 90, 370, 315);
}
O también puedo hacer un cuadrado con la función square():
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
square(110, 280, 315);
}
Y al mismo tiempo, puedo agregarle atributos a una figura. Por ejemplo, puedo rellenarla de un color con la función fill():
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
square(110, 280, 315);
fill(170);
}
O puedo además modificar el ancho de los bordes con la función strokeWeight():
void setup ()
{
size(500, 700);
background(255);
}
void draw()
{
square(110, 280, 315);
fill(170);
strokeWeight(12);
}
Cada función acepta su propio set de parámetros en su interior, y me ofrece resultados diferentes.
Es posible conocer todas las funciones leyendo de ellas en el manual de Processing.
Conclusión:
Con esto llego al final de este apunte llamado “Processing: guía práctica básica”.
Todavía me queda mucho por aprender, voy a ir sobre esos nuevos temas en futuros apuntes sobre Processig.
Cualquier error que encuentres en el texto, por favor avisame para que pueda solucionarlo. Lo mismo me gustaría recibir cualquier pregunta o consulta que tengas, para intentar ayudar en lo que pueda.
La seguimos en el próximo apunte.
Recursos:
– Sitio oficial de Processing
– Comunidad dedicada a compartir sketches de Processing
Leave a Reply