Tutorial de Processing

Instalación

¿Qué necesitaremos para instalar Processing?

● Ingresar a la página https://processing.org/

● Dar click en download.
● Cuando termine la descarga descomprimir el archivo y guardar la
carpeta en el disco local.
● Por último crear el acceso directo, entra a la carpeta, da click derecho al
archivo processing.exe y envíalo al escritorio.
● A cliquear processing.exe, esta pantalla se visualizará:

Vamos a observar que Processing nos ofrece un

espacio limpio y poco intimidante, donde podremos
probar poco a poco nuestra ideas. El Processing
Development Environment (PDE) es un pequeño
editor de código, con iconos para guardar, abrir y
ejecutar el programa.

Imagen 1

Tiene las funciones habituales para copiar y pegar,

buscar y reemplazar, ayuda y ejemplos, y algunas utilidades específicas para
manejar fuentes o color.

Una función útil es la de "Mostrar la carpeta del sketch", que nos permite
rápidamente acceder a este lugar en el disco duro y así organizar el contenido
extra que vamos a utilizar, como imágenes, vídeo, textos o sonidos. El sketch
es el nombre que Processing le dá al conjunto de instrucciones (programa),
¡recordemos este nombre porque lo utilizaremos a lo largo del tutorial!

1
 Imagen 2

Podemos comenzar escribiendo en el área del editor de texto un ejemplo de

una sola línea:

rect(10,10,20,20);
Esta línea le dice al programa que dibuje un rectángulo con el centro en la
posición 10, 10 (x,y) de 20 de alto y 20 de ancho, el que se verá en una
pequeña ventana que aparece arriba a la izquierda llamada ventana de salida.

2
 Imagen 3

Primeras funciones de Processing

Cuando programamos, debemos ser muy ordenados para que, si nuestro

programa crece, podamos seguir la lógica y agregarle funcionalidades de ser
necesario. Una manera de agrupar instrucciones es mediante funciones, que
serán invocadas.

En Processing utilizaremos inicialmente dos funciones: La primera es la

función “setup()” y la otra “draw()”. Cuando las escribamos en el editor de
texto, estas palabras se pondrán en color celeste automáticamente.

Todo lo que esté escrito bajo la función setup() se ejecutará UNA SOLA VEZ al
iniciar el programa. En ella se inicializarán algunos parámetros de arranque de
mi sketch (ya veremos algunos).

Por otro lado draw() es un “loop”. Es una función que se repite una y otra vez.
Es invocada automáticamente una vez por “Frame” (cada cuadro de la
animación).

Vamos a agregar otras dos funciones para poder visualizar cómo trabajan
setup() y draw(). Son dos funciones que nos permiten hacer impresión de
información en el área de texto (ver imagen 2): print() y println()

3
Formalidad: Escribiremos entre comillas el texto literal que se quiera trasladar
al área de textos de nuestra ID o ventana. La diferencia entre ambas funciones
es que println() coloca un retorno de carro luego del texto que escribamos (el
próximo texto se escribirá en el renglón siguiente), mientras que print() escribe
un texto detrás del otro.

¡A recordar! Todas las instrucciones que le demos a Processing deben

terminar con el signo de punto y coma: “;”.

print(“aca va el texto”);

println(“aca va el texto”);

Si queremos incluir comentarios dentro de nuestro sketch, como ayuda para

próximas revisiones, comenzaremos nuestro con los caracteres // . Todo lo
que esté a la derecha de estos caracteres será ignorado por “Processing”.
Estos comentarios aparecerán escritos en color gris.

¡Es momento de programar! ¿Están listos?

Primer ejemplo:

Descargar y abrir con “Processing” el programa Processing01.pde

(link).
Podemos ver que este sketch se encuentra casi vacío, solo posee la definición
de las funciones “setup()” y “draw()”. Este código es suficiente para poder
ejecutarlo. Inténtelo presionando la flecha “ejecutar” que se encuentra a la
izquierda superior de nuestra pantalla (Imagen 1).

4
 Imagen 4

Al ejecutarlo se abrirá la ventana de salida (Imagen 3) o lienzo de trabajo. Y

en el área de texto (Imagen 2) se escribirá una serie de palabras: una sola vez
la palabra “setup ::::” e infinitas veces la palabra “draw”.

Analicemos el código un instante.

Dentro de la función “setup()” hay una instrucción “println()” que se ejecuta una
sola vez al inicio. Por eso solo aparece una vez en el área de texto la leyenda
setup :::: . Pero también dentro de la función “draw()” está la instrucción
“print()” que, como dijimos previamente, se ejecutará indefinidas veces. Por eso
aparece la leyenda draw en el área de texto muchas veces.

5
Tamaño del lienzo:
El tamaño de nuestro lienzo de trabajo es modificable. Podemos establecer
cualquier medida, la que más nos convenga que entre en nuestro monitor.
Para ello se utiliza la instrucción “size” que posee la siguiente formalidad:
“size(tamaño de x, tamaño de y);”. Las medidas en Processing son en
pixeles, en cantidad de pixeles. Donde el eje horizontal se denomina “x” y el
eje vertical se denomina “y”.

Un pixel es la unidad mínima de una pantalla, posee la propiedad de posición y la

propiedad de color.

Descarguemos y veamos en Processing el ejemplo “Processing02.pde”.

6
¿Practicamos?

1. Crear un lienzo de trabajo más grande en x que en Y;

2. Crear un lienzo de trabajo más grande en y que en x;

7
¡A dibujar!

Processing nos proporciona una serie de instrucciones que nos permiten

realizar dibujos en la pantalla. También nos proporciona herramientas de color.

Pero lo primero es intentar realizar un pequeño dibujo con líneas. Para ello, le
deberé decir a Processing en qué pixel comienza y en que pixel termina la
línea. Se lo diremos mediante la instrucción line()

line(posición inicial de x, posición inicial de y, posición final de x,

posición final de y);
La instrucción line() nos permite dibujar una línea en el lienzo de trabajo.

Veamos el ejemplo Processing03.pde (descargar y abrir en Processing)

¿Practicamos?

3. Realizar un signo de “+” en el centro de la pantalla.

4. Realizar un signo de “X” en el centro de la pantalla.

8
Y ahora… ¡En colores!
Processing nos da herramienta para trabajar el color del pixel que está definido
en “RGB”.

RGB (siglas en inglés de “red”, “blue” y “green”) es la composición de color

basada en los colores primarios de la luz. En “Processing los tres canales se
encuentran separados y permiten crear 16.777.216 combinaciones de color
diferente.

La instrucción stroke() permite cambiar el color de una línea o color del borde de una
figura.

stroke(# color rojo, # color verde, # color azul);

El valor de rojo, verde y azul tiene que ser expresado en un rango de 0 a 255,
separado cada uno de ellos por carácter coma(“,”). Una vez que se define un
color Processing lo utilizara con el resto de los dibujos hasta que le
indiquemos un color nuevo.

Ejemplo: stroke(255,255,255);
Para ver un ejemplo en un programa (descargar y abrir en Processing):
Processing04.pde.

9
También podemos establecer el grosor de una línea con la instrucción

strokeWeight(tamaño);

El tamaño está predefinido en 1 y tiene la misma lógica que el color, una vez
definido un grosor Processing realizará todos los dibujos con ese grosor hasta
que le indiquemos uno nuevo.

Ejemplo: Processing05.pde

10
¿Practicamos?

5. colorear el dibujo realizado en el ejercicio 3 y ejercicio 4.

Color del fondo:

Otra instrucción que nos puede ser útil es

background(R,G,B);
Nos permite establecer el color del fondo de nuestro lienzo de trabajo. Posee la mismo
formalidad de la herramienta “stroke()”. Su formalidad es la siguiente:
“background(valor rojo, valor verde, valor azul);”

11
¿Practicamos?

6.: seleccionar un color de fondo para el ejercicio 3 y 4;

Rectángulos

¿Recuerdan al comienzo de tutorial, cuando instalamos Processing, que

hicimos un rectángulo? Utilizamos la función “rect()”. La formalidad en la
siguiente:

rect(x inicial, y inicial, tamaño en x, tamaño en y);

También podemos definir un color de relleno y un color para su marco.

¿Se imaginan cómo?

Con la instrucción “stroke()” que ya conocemos definimos el color del marco, y

agregamos una nueva instrucción:

fill(R,G,B);
con la que definimos el color del relleno.
¡Son muchas instrucciones nuevas!
Lo mejor es que las veamos en un ejemplo: Processing06.pde

12
¿Practicamos?

7. Con rectángulos y colores dibujar un edificio con sus ventanas.

Circunferencias

La instrucción para dibujar circunferencias es “ellipse()”. Y su formalidad

en la siguiente:

ellipse(posición central x, posición central y ,

tamaño en x, tamaño en y);

13
También puede cambiarse el color de del relleno con la instrucción “fill();”. y del
contorno con la instrucción”stroke();”.

¿Practicamos?

8. Realizar un dibujo de una luna con ojos y boca.

Sin contorno o relleno

Para algunos dibujo necesitaremos formas sin relleno o sin borde. Para quitar
el relleno de una forma utilizamos la instrucción “noFill();”. Luego de invocar a
esta función Processing realizará todas las formas sin relleno, hasta que
realicemos una nueva definición de color con la función “fill();”.

Con la misma lógica, si queremos quitar el borde a una forma utilizaremos la

función “noStroke();”. Processing no dibujara ningún borde hasta que
definamos un nuevo color con “stroke();”.

ADVERTENCIA: si invocamos la función “noStroke();” y queremos realizar

una línea con la función “line();”. ¿Qué sucederá?....

14
 La línea no se verá ya que su único componente es un borde.

Cuadriláteros

Processing permite dibujar cuadriláteros de cualquier forma. Para ello

nos ofrece la herramienta “quad();” que requiere en su formalidad la posición de
cada uno de sus cuatro vértices:

quad(x1, y1, x2, y2, x3, y3, x4, y4);

¿Parece complicado? Bajar y ejecutar el ejemplo: Processing07.pde.

Variables

Las variables son espacio de memoria que podemos utilizar durante la

ejecución de nuestro programa. A estos espacios se los llama por un alias o
nombre. Una variable podemos pensarla como una caja en la que podemos
almacenar un valor. Y durante la ejecución de nuestro programa podemos
abrirlo y mirar lo que tiene. También podemos abrir el cajón cambiar su
contenido y volverlo a cerrar. Es decir, que el contenido de la variable podemos
ir cambiándolo durante la ejecución del programa (por eso se llama variable).

15
El tamaño variable o de la caja está dado por su tipo. La variable tendrá que
tener el tamaño necesario para que entren los valores que se desean guardar,
por ello existen lo que se denomina “tipo
de variables”.

Los tipo “int” almacenan números

enteros.
Los tipo “float” guardan números
decimales.
Los tipo “Boolean” solo pueden tomar
dos valores: true o false (verdadero o
falso).
Los tipo “String” nos permiten almacenar
texto.

Para utilizar una variable hay que definirla. La formalidad es muy sencilla. Se
nombra el tipo de variable que quiero crear y luego el nombre que queremos
ponerle (no nos olvidemos el ;).

Generalmente el nombre que se utiliza hace referencia al contenido, esto nos

facilita la lectura del programa. El nombre de las variables puede tener letras o
números e incluso guiones bajos (“_”). Pero el nombre no puede empezar
con un número.

Para almacenar valor dentro de la variable se utiliza el operador de asignación

igual (”=”). La formalidad de la operación sería:

nombre de variable = valor a asignar;

Miremos un ejemplo Processing08.pde.

16
Prestar atención a las instrucciones “println(nombre de una variable);”. Al poner
dentro de la instrucción en nombre de una variable sin comilla, Processing
reemplaza al nombre de la variable por el contenido. Esto lo hace cada vez que
mencionamos una variable: cambia el nombre por su contenido.

Así;

variable_string= “hola mundo”;

print(“En mi variable_string está guardado: “);
println(variable_string);

Al ejecutar en la línea de texto dirá:

En mi variable_string está guardado: hola mundo

Colores con variables

¿Para qué utilizaríamos variables? Es muy común utilizarlas, por ejemplo,

como contadores. Ante alguna condición, puedo agregar o restar uno a la
variable que me sirve para, por ejemplo, guardar un puntaje.

Podríamos, como muestra el ejemplo, tener una variable que varia uno en uno
por frame. Veamos el ejemplo Processing09.pde.

Nosotros vamos a utilizar este valor variable para cambiar por programa el
color del fondo. recordemos que los colores van de 0 a 255. De alguna manera
deberemos “frenar” el contador cuando llegue a 255. Si lo colocamos dentro de
draw(), el ciclo es infinito, por lo que el número rápidamente se irá de rango,
como observamos al ejecutar el programa Processing09.pde

17
Para hacer eso Processing nos ofrece la instrucción de control IF (SI) que
comparte con la mayoría de los lenguajes de programación. El IF es una
estructura condicional que evalúa una condición establecida por el
programador. Si la condición es verdadera el programa ejecutara una serie de
instrucciones colocadas por el programador entre llaves. La formalidad en la
siguiente.

if(valor operador valor) {

Instrucciones a ejecutar;
}
El condicional o argumento está compuesto tres elementos: los dos
valores pueden ser dos variables o una variable y un valor específico. El
tercero y central es un operador que vincula a los dos valores. Puede ser:

== igual que
< menor que
<= menor o igual que
> mayor que
> mayor o igual que
¡= es distintos que

Veamos el ejemplo anterior completo Processing10.pde

Al ejecutarse, esto sucederá:

18
 https://drive.google.com/open?id=1KzfPTAZjNwDOoz1HF355DEYdZihAvILt
¿Qué pasaría si utilizo tres colores? ¿Se animan?

Estamos listos para experimentar. No olvides que encontrarás foros de

intercambio y consultas en la sección Comunidad del área de Programación.

19