8/6/2021 Unidad 1

Unidad 1

Sitio: Cursos Educ.ar Imprimido por: Fabio González

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 1/11
8/6/2021 Unidad 1

Tabla de contenidos

1. ¿Qué es Processing?

2. A descargar Processing

3. Ya lo descargué, ¿y ahora qué sigue?

4. Conocer el entorno

5. Funciones básicas: setup y draw

6. Algunos ejemplos

7. Desafío 1: conocemos la interfaz

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 2/11
8/6/2021 Unidad 1

1. ¿Qué es Processing?

Processing se refiere tanto a un lenguaje de programación como a un entorno de desarrollo de código abierto bajo GPL (General Public
License, licencia pública general). Esto quiere decir que el código fuente está disponible y que no es necesario pagar una licencia para
utilizarlo. Y es que lo desarrolla una fundación sin fines de lucro llamada también Processing.

La versión que usaremos está basada en el lenguaje de programación Java y se compone de palabras que, organizadas de determinada
forma, permiten dar instrucciones concretas.

El entorno de desarrollo o IDE te facilitará muchas cuestiones a la hora de programar: va a detectar errores, reconocer palabras y aportar otras
herramientas útiles. Sin embargo, una de las mayores ventajas es que vas a poder compilar y ejecutar el código sin necesidad de instalar ni
descargar nada más. Cuando hablamos de «compilar» nos referimos a traducir todo el código que se escribe en lenguaje de máquina para ser
interpretado por el procesador del dispositivo.

Tanto la interfaz como el lenguaje de Processing están pensados para el trabajo de artistas visuales y diseñadores, por lo cual vas a encontrar
muchas funciones que facilitan la realización.

Algunos ejemplos de obras y artistas que utilizan Processing son los siguientes:

- Phantogram voices (2014), de Joshua Davis y Timothy Saccenti.

(2012), de Daniel Franke y Cedric Kiefer.

- Big Screens (2018), de alumnos del ITP (Interactive Telecommunications Program, programa de telecomunicaciones interactivas) de la
Universidad de Nueva York.

- Flight Patterns (2009), de Aaron Koblin.

- Webcam Mosaic (2006), de Robert Hodgin.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 3/11
8/6/2021 Unidad 1

2. A descargar Processing

Llegó la hora de descargar Processing, que está disponible para los sistemas operativos Windows, Linux y Mac OS. Al entrar en el sitio web,
se ofrecen varias versiones del programa y, para poder escoger bien, es necesario contar con información precisa sobre el sistema operativo
en el que se ejecutará.

Para descargar el programa vas a necesitar conexión a internet. Si es posible, te conviene conectarte a una red de wifi.

En el caso de Windows, el sitio ofrece dos opciones: 32 y 64 bits. Esta información se refiere a la longitud máxima de cada palabra (datos que
contienen las instrucciones) que puede manejar el procesador del dispositivo. Es importante conocer este dato para que la versión descargada
funcione correctamente. 

Si se dispone de Windows 64 bits, se pueden descargar cualquiera de las dos versiones sin problema. Si tenés dudas, bajá la versión de 32
bits, que funciona en ambos.

En el caso de Linux, solo está disponible para arquitecturas de 64 bits.

Como alternativa, podés descargar versiones para Android e iOS.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 4/11
8/6/2021 Unidad 1

3. Ya lo descargué, ¿y ahora qué sigue?

Luego de descargarlo, vas a necesitar abrir el archivo comprimido.

En Windows podemos usar o WinRar; en Linux, la opción extract o el comando tar xvf processing-3.5.4-linux64.tgz; y en Mac, Stuffit
Expander o The Unarchiver.

En Mac, luego de extraerlo, copialo en la carpeta Aplicaciones para encontrarlo allí.

En Windows, vas a abrir la carpeta que se creó y hacer doble clic en processing.exe.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 5/11
8/6/2021 Unidad 1

En Linux, abrí la consola, utilizá el comando cd y agregale la ubicación de la carpeta que descomprimiste, para luego utilizar el comando sh
processing. 

Una vez hecho esto, ya está listo para usar.

En Android o en iOS, simplemente se instala la aplicación (a veces estos dispositivos tienen limitaciones).

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 6/11
8/6/2021 Unidad 1

4. Conocer el entorno

El entorno de Processing (también llamado IDE) tiene varias partes:

- Menú principal / Barra de herramientas.

- Botones para ejecutar y/o detener el programa que escribimos.

- Pestañas: aquí vas a ver todos los archivos de extensión .pde que compongan el proyecto. Así como la extensión .jpg le permite entender a
una computadora que se trata de una imagen, la extensión .pde le indica a Processing que en esos archivos encontrará las instrucciones o
líneas de código. Para un mismo proyecto vas a tener como mínimo un archivo «nombre.pde». Dado que el entorno solo nos va a mostrar
archivos con esta extensión, únicamente nos presenta el nombre.

- Área de código: en este espacio escribirás todas las instrucciones que le des al programa. Para facilitar la detección de errores y manipular
mejor el código, están numeradas a la izquierda, tal como se puede ver en la imagen.

- Consola: en este lugar vas a poder «imprimir» toda la información que desees y Processing indicará (en inglés) los errores que detecte.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 7/11
8/6/2021 Unidad 1

5. Funciones básicas: setup y draw

Programar consiste en darle instrucciones al programa sobre los elementos que queremos mostrar o dibujar. Existen dos funciones básicas en
Processing, que se llaman «setup» y «draw». En líneas de código las vamos a escribir así:

Void setup(){

Void draw(){

Dentro de las llaves vas a incluir todas las instrucciones que necesites. ¡Es importante que las escribas correctamente para que el programa
pueda entenderlas!

Consejo: para darte cuenta de que están escritas correctamente, asegurate de que se vean de un color distinto y en negritas. Esto sucede
porque son «palabras reservadas» del lenguaje.

La función setup siempre se ejecuta una sola vez al presionar Ejecutar, y luego se lleva a cabo la función draw en loop (es decir que una vez
que termina de realizar todas las instrucciones, vuelve a la primera y empieza de nuevo).

Actividad: abrí el IDE y escribí estas dos funciones, verificá que el programa las reconozca y probá ejecutarlo. Vas a ver un resultado de este
tipo: 

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 8/11
8/6/2021 Unidad 1

6. Algunos ejemplos

Como mencionamos anteriormente, Processing es un lenguaje pensado para artistas y diseñadores. Y dado que sus principales aplicaciones
se relacionan con la interactividad y la animación, el entorno tiene incorporados algunos ejemplos que podés encontrar en Archivo >
Ejemplos…

Para abrirlos basta con hacer doble clic y para ejecutarlos, presionar el botón que tiene un triángulo.

En el ejemplo que ves aquí se dibuja una línea cuando se presiona el ratón.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 9/11
8/6/2021 Unidad 1

Al inicio del código vemos un texto en gris claro colocado entre estos símbolos /* */, que recibe el nombre de «comentarios» y es ignorado por
el programa. Sirve para agregar información sobre cómo interactuar con el código, notas personales, etc.

Luego verás un montón de palabras en colores distintos. Al igual que «setup» y «draw», son «palabras reservadas», que el entorno reconoce.
Para saber qué significan, en el sitio web de Processing hay una sección llamada «Referencia» donde están explicadas y se presentan
ejemplos de su uso.  

En el ejemplo «ContinuousLines», estas son las instrucciones que recibe el programa mediante el código. En las próximas unidades vas a
comprender mejor cada una de ellas.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 10/11
8/6/2021 Unidad 1

7. Desafío 1: conocemos la interfaz

¡Hora de explorar!

En este desafío te invitamos a que recorras varios ejemplos del IDE  y escojas uno. 

Cuando lo hayas seleccionado, probá cambiar el orden de algunas funciones o el valor de algunos números para ver su efecto en el resultado.

Recordá volver a ejecutar el programa cada vez que hagas un cambio en el código.

https://cursos.educ.ar/mod/book/tool/print/index.php?id=4075 11/11