Unidad 1

Estructuras: Elementos del Código

Elementos que se introducen en esta Unidad:

// (comentario), /* */ (comentario multilinea),”;”(terminador de acción), “,” (coma), print(),
println()

El hecho de crear un programa implica recurrir a la escritura y aprender un lenguaje. Similar a cuando
aprendemos un nuevo lenguaje oral o escrito, necesitamos aprender una sintaxis y una lógica. Escribir en un
lenguaje humano es muy complicado. Posee ambigüedad en las palabras, y mucha flexibilidad para la
construcción de párrafos. En ese sentido, el lenguaje de máquina es más sencillo, pero posee una dificultad
clara: la lógica de la programación. Usualmente, un ser humano puede percatarse de un error de sintaxis y
darlo por alto, restándole parcial o completa importancia. Sin embargo, en un lenguaje de máquina las cosas
son de una forma o de otra: O está bien, o está mal.

-Comentarios
Los comentarios son ignorados por los ordenadores, pero son muy importantes para los humanos.
Processing permite agregar notas en cualquier sector del código. Pueden ser de solo una línea o de muchas
líneas. Ya que los programas usan signos muy arcaicos y de difícil identificación, muchas veces es
complicado recordar que hacía cada sector individualmente. Por lo tanto se recurre a la utilidad del
comentario, muy útil a la hora de revisar el código, ya sea por el propio programador como por otros. El
siguiente programa explica, por sí solo, como se comenta:

// Dos barras laterales son usadas para comentar

// Todo el texto en la misma línea es parte de un comentario
// No debe haber espacio entre las barras, por ejemplo “/ /”, de lo contrario
// el comentario no funcionará.

// Si desea muchas líneas

// lo ideal es usar el método multilinea.

/*
Una barra lateral seguida por un asterisco
permite el comentario de multilinea.
*/

-Funciones
Las funciones permiten dibujar formas, colores, realizar cálculos matemáticos, entre otras variadas acciones.
Por lo general se escriben en minúsculas y seguidas por paréntesis. Algunas funciones aceptan
parámetros, los cuales se escriben entre los paréntesis. Si acepta más de uno, son separados por una coma
(,). A continuación un programa que incluye dos funciones: size() y background().

//Con esta función establecemos el tamaño de la ventana de presentación

//El primer parámetro corresponde al ancho de la ventana
//El segundo parámetro corresponde al alto.
size(400, 300);

//Con esta función establecemos el color de fondo de la ventana

//Acepta diversos parámetros, para una escala de grises bastará con valores de 0
(negro) a 255 (blanco).
background(0);

-Expresiones y Acciones
Si usáramos una analogía, la expresión de un software es como una frase. Las expresiones, por lo general,

Ignacio Buioli | Jaime Pérez Marín 6

van acompañadas de algún operador como +, -, * o /, ya sea a la izquierda o a la derecha del valor. Una
expresión en programación puede ser básica, como un solo número, o una compleja cadena de elementos.
De esta manera, una expresión siempre tiene un valor determinado.

Expresión Valor
5 5
10.5*2 21.0
((3+2)*-10)+1 -49

Hay expresiones que también pueden usarse en comparación de un valor con otro. Los operadores de >
/mayor a/ y < /menor a/ devuelven solo dos valores: true (verdadero) y false (falso).

Expresión Valor
6 > 3 true
54 < 50 false

Un conjunto de expresiones pueden formar una acción, lo que en programación equivale a una oración. Se
completa cuando se presenta el terminador de la acción. En Processing, el terminador de acción es el punto-
y-coma (;). Al igual que hay diversos tipos de oraciones, hay diversos tipos de acciones. Una acción puede
definir una variable, ejecutar una variable, asignar una variable, ejecutar una función, o construir un objeto. A
continuación unos ejemplos:

size(200, 200); //ejecuta la función size y determina los valores 200 y 200
int x; //declara una nueva variable
x = 102 //asigna un valor a la variable
background(x); //ejecuta la función background

Si se eliminara el punto-y-coma, el programa daría un error.

-Sensibilidad
En nuestra lengua, hay casos en los que las palabras comienzan en mayúsculas y casos en los que no. Es a
lo que se llama letra capital. Por ejemplo, nombres de lugares como Buenos Aires o Andalucía, o nombres
propios como Pablo o Enrique, todos ellos comienzan con la letra capital (primer letra en mayúsculas). Hay
diversos lenguajes de programación que son permisivos con esto y suelen dejarlo pasar. En el caso de
Processing, se produce una diferenciación entre mayúsculas y minúsculas, siendo que la correcta forma de
escritura es en minúsculas. Escribir size() como Size() produciría un error.

size(200, 200);
Background(102); //ERROR - La B en “background” está como letra capital.

Ignacio Buioli | Jaime Pérez Marín 7

-Espacios en Blanco
Existe una gran variedad de lenguajes de programación que son estrictos en cuanto a los espacios en blanco
que se dejan entre cada estructura. Sin embargo, Processing se presta para esto y le resta importancia.

Podemos tener el siguiente código:

size(200, 200);
background(102);

Y escrito de la siguiente manera funcionará exactamente igual:

size

(200 ,

200 );

background ( 102 )

-Consola
Cuando un programa es ejecutado, la computadora realiza acciones a tal velocidad que es imposible
percibirlas para el ojo humano. Por lo tanto, es importante mirar la consola, no solo para errores, sino también
para entender que ocurre detrás del programa.
La consola en Processing, se encuentra como un espacio en negro debajo del editor de texto. Como es muy
importante entender que ocurre dentro del programa, existen las funciones print() y println(). Estas
funciones no envían páginas a imprimir, ni muestran nada en la ventana de representación. Simplemente
muestran texto en la consola. La consola puede ser usada para mostrar una variable, confirmar un evento o
chequear datos externos que están ingresando. Al igual que los comentarios, print() y println() pueden
hacer más clara la lectura del código.

//Si se desea imprimir texto, este debe estar entre comillas

println(“Processing...”); //Imprime “Processing...” en la consola

//Si se desea imprimir una variable

//no debe ponerse su nombre entre comillas
int x = 20;
println(x); //Imprime “20” en la consola

//Mientras println() escribe cada cosa en una sola línea, print() escribe todo
en la misma línea
print(20);
println(30); //Imprime “2030” en la consola
println(80); //Imprime “80” en una nueva línea de la consola

//También pueden concatenarse múltiples textos con el operador “+” (no confundir
con su uso matemático)
int x = 20;
int y = 80;
println(x + “ : ” + y); //Imprime “20 : 80” en la consola

Ignacio Buioli | Jaime Pérez Marín 8

Unidad 2
Formas: Coordinadas y Primitivas

Elementos que se introducen en esta Unidad:

size(), point(), line(), triangle(), quad(), rect(), ellipse(), bezier(), background(), fill(),
stroke(), noFill(), noStroke(), strokeWeight(), strokeCap(), strokeJoin(), smooth(), noSmooth(),
ellipseMode(), rectMode()

Dibujar una forma con un código puede ser difícil porque todos sus aspectos de su ubicación deben ser
especificados con un número. Cuando uno está acostumbrado a dibujar con un lápiz o formas moviéndose en
una pantalla con el ratón, puede tomar mucho tiempo empezar a pensar en la relación de la red con una
pantalla de coordenadas estrictas. La diferencia fundamental entre ver una composición sobre papel o en su
mente y su traducción en notación de código es muy amplia, pero muy sencilla de entender.

-Coordenadas
Antes de hacer un dibujo, es importante que pensemos acerca del tamaño y las características de la
superficie sobre la que vamos a dibujar. Si vamos a hacer un dibujo en papel, podemos elegir multitud de
utensilios y tipos de papel. Para un esbozo rápido, papel de periódico y carboncillo es lo más apropiado. Para
un dibujo más refinado, puede ser preferible papel suave hecho a mano y lápices. Contrariamente, cuando
estás dibujando en un ordenador, las opciones principales disponibles son el tamaño de la ventana y el color
del fondo.
La pantalla de un ordenador es una rejilla de pequeños elementos luminosos llamados píxeles. Las pantallas
vienen en muchos tamaños y resoluciones. Existen tres tipos diferentes de pantallas para nuestro estudio, y
todas ellas tienen un número diferente de píxeles. Los portátiles tienen 1.764.000 píxeles (1680 de ancho por
1050 de alto), las pantallas planas tienen 1.310.720 píxeles (1280 de ancho por 1024 de alto) y los viejos
monitores tienen 786.432 píxeles (1024 de ancho por 768 de alto). Millones de píxeles pueden sonar como
una cantidad muy vasta, pero producen una pobre calidad visual comparado a un medio físico, como el papel.
Las pantallas modernas tienen una resolución de aproximadamente cien puntos por pulgada, mientras que las
impresoras modernas proveen más de mil puntos por pulgada. Por otra parte, las imágenes en papel son
fijas, mientras que las pantallas tienen la ventaja de ser capaces de cambiar su imagen muchas veces por
segundo. Los programas en Processing pueden controlar todos o un subconjunto de píxeles de la pantalla.
Cuando pulsa el botón Run, una ventana de representación se abre y te permite leer y escribir dentro de los
píxeles. Es posible crear imágenes más grandes que la pantalla, pero en la mayoría de los casos, haremos
una ventana de representación igual o menor a la pantalla. El tamaño de la ventana de representación está
controlada por la función size():

size(ancho, alto)

La función size() tiene dos parámetros: el primero establece el ancho de la ventana y el segundo su alto.

//Dibuja la ventana de representación de 320 de ancho y 240 de alto (píxeles).

size(320,240);

Una posición de la pantalla está comprendida por un eje de coordenadas x y un eje de coordenadas y. El eje
de coordenadas x es la distancia horizontal desde el origen y el eje de coordenadas y es la distancia vertical.
En Processing, el origen es la esquina superior izquierda de la ventana de representación y coordina los
valores hacia abajo y hacia la derecha. La imagen de la izquierda muestra el sistema de coordenadas, y la
imagen de la derecha muestra varias posiciones en la rejilla:

Ignacio Buioli | Jaime Pérez Marín 9

Una posición se escribe con el valor del eje x seguido del valor del eje y, separados por una coma. La
notación para el origen es (0,0), la coordenada (50,50) tiene 50 de coordenada x y 50 de coordenada y, y
la coordenada (20,60) tiene 20 de coordenada x y 60 de coordenada y. Si el tamaño de la ventana de
representación es de 100 píxeles de ancho y 100 píxeles de alto, el píxel de la esquina superior izquierda es
(0,0), el píxel de la esquina superior derecha es (99,0), el píxel de la esquina inferior izquierda es
(0,99), y el píxel de la esquina inferior derecha es (99,99). Esto se ve más claro si usamos la función
point().

-Figuras primitivas
Un punto es el elemento visual más simple y se dibuja con la función point():

point(x,y)

Esta función tiene dos parámetros: el primero es la coordenada x y el segundo es la coordenada y. A menos
que se especifique otra cosa, un punto es del tamaño de un sólo píxel.

point(20, 20);
point(30, 30);
point(40, 40);
point(50, 50);
point(60, 60);

point(-500, 100); //Los parámetros negativos no provocan

point(400, -600); //error, pero no se verán en la ventana de
point(140, 2500); //representación.
point(2500, 100);

Es posible dibujar cualquier línea mediante una serie de puntos, pero son más simples de dibujar con la
función line(). Esta función tiene cuatro parámetros, dos por cada extremo:

line(x1, y1, x2, y2)

Los primeros dos parámetros establecen la posición donde la línea empieza y los dos últimos establecen la
posición donde la línea termina.
line(25, 90, 80, 60);
line(50, 12, 42, 90);
line(45, 30, 18, 36);

Ignacio Buioli | Jaime Pérez Marín 10

 line(15, 20, 5, 80);
line(90, 65, 5, 80);

La función triangle() dibuja un triángulo. Tiene seis parámetros, dos por cada punto:

triangle(x1, y1, x2, y2, x3, y3)

El primer par define el primer punto, el segundo par el segundo punto y el último par el tercer punto. Cualquier
triángulo puede ser dibujado conectando tres líneas, pero la función triangle() hace posible dibujar una
figura con relleno. Triángulos de todas formas y tamaños pueden ser creados cambiando los valores de los
parámetros.

triangle(55, 9, 110, 100, 85, 100);

triangle(55, 9, 85, 100, 75, 100);
triangle(-1, 46, 16, 34, -7, 100);
triangle(16, 34, -7, 100, 40, 100);

La función quad() dibuja un cuadrilátero, un polígono de cuatro lados. Esta función tiene ocho parámetros,
dos por cada punto.

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

Variando los valores de los parámetros se puede construir rectángulos, cuadrados, paralelogramos y
cuadriláteros irregulares.

quad(20, 20, 20, 70, 60, 90, 60, 40);

quad(20, 20, 70, -20, 110, 0, 60, 40);

Dibujar rectángulos y elipses funcionan de una manera diferente a las figuras vistas anteriormente. En lugar
de definir cada punto, los cuatro parámetros establecen la posición y las dimensiones de la figura. La función
rect() dibuja un rectángulo:

rect(x, y, ancho, alto)

rect(x, y, ancho, alto, radio) //A partir de la versión 2.0
rect(x, y, ancho, alto, si, sa, id, ii) //A partir de la versión 2.0

Los dos primeros parámetros establecen la localización de la esquina superior izquierda, el tercero establece
el ancho, y el cuarto el alto. Use el mismo valor de ancho y alto para dibujar un cuadrado. La versión con el
parámetro radio permite agregar borde redondeados al rectángulo. El parámetro radio corresponde al
radio de redondeo. La versión con otros cuatro parámetros permite agregar un radio distinto de redondeo a

Ignacio Buioli | Jaime Pérez Marín 11

cada esquina. Siendo si (Superior Izquierdo), sa (Superior Derecho), id (Inferior Derecho) y ii (Inferior
Izquierdo).

rect(0, 0, 90, 50);

rect(5, 50, 75, 4);
rect(24, 54, 6, 6);
rect(64, 54, 6, 6);
rect(20, 60, 75, 10);
rect(10, 70, 80, 2);

La función ellipse() dibuja una elipse en la ventana de representación:

ellipse(x, y, ancho, alto)

Los dos primeros parámetros establecen la localización del centro de la elipse, el tercero establece la ancho,
y el cuarto la altura. Use el mismo valor de ancho y de alto para dibujar un círculo.

ellipse(35, 0, 120, 120);

ellipse(38, 62, 6, 6);
ellipse(40, 100, 70, 70);

La función bezier() puede dibujar líneas que no son rectas. Una curva Bézier está definida por una serie
de puntos de control y puntos de anclaje. Una curva es dibujada entre dos puntos de anclaje, y los puntos de
control definen su forma:

bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)

Esta función requiere ocho parámetros para definir cuatro puntos. La curva se dibuja entre el primer punto y el
cuarto, y los puntos de control están definidos por el segundo y tercer punto. En los programas que se utilizan
curvas Bézier, tales como Adobe Illustrator o Inkscape, los puntos de control son representados por pequeños
nodos que sobresalen de los bordes de la curva.

bezier(32, 20, 80, 5, 80, 75, 30, 75);

//Dibujamos los puntos de control.
line(32, 20, 80, 5);
ellipse(80, 5, 4, 4);
line(80, 75, 30, 75);
ellipse(80, 75, 4, 4);

bezier(85, 20, 40, 10, 60, 90, 15, 80);

//Dibujamos los puntos de control.
line(85, 20, 40, 10);
ellipse(40, 10, 4, 4);
line(60, 90, 15, 80);
ellipse(60, 90, 4, 4);

-Orden de dibujo
El orden en que dibujamos las figuras en el código, define qué figuras aparecerán sobre otras en la ventana
de representación. Si dibujamos un rectángulo en la primera línea de un programa y una elipse en la segunda
línea, el rectángulo aparecerá debajo de la elipse cuando ejecutemos el programa. Revirtiendo el orden, el

Ignacio Buioli | Jaime Pérez Marín 12

rectángulo se coloca arriba.

rect(15, 15, 50, 50); //Abajo

ellipse(60, 60, 55, 55); //Arriba

ellipse(60, 60, 55, 55); //Abajo

rect(15, 15, 50, 50); //Arriba

-Valores de grises
Los ejemplos vistos anteriormente han usado el fondo por defecto de color gris claro, líneas negras, y figuras
blancas. Para cambiar estos valores, es necesario introducir sintaxis adicional. La función background()
establece el color de la ventana de representación con un número entre 0 y 255. Este rango puede ser
incómodo si no estás familiarizado con programas de dibujo en el ordenador. El valor 255 es blanco y el valor
0 es negro, con un rango de valores de grises en medio. Si no se define un valor para el fondo, se usa el valor
por defecto 204 (gris claro).
La función fill() define el valor del relleno de las figuras, y la función stroke() define el valor del
contorno de las figuras dibujadas. Si no se define un valor de relleno, se usa el valor por defecto 255
(blanco). Si no se define un valor de contorno, se usa el valor por defecto 0 (negro).

rect(10, 10, 50, 50);

fill(204);
stroke(102);
rect(20, 20, 50, 50);
fill(153);
stroke(153);
rect(30, 30, 50, 50);
fill(102);
stroke(204);
rect(40, 40, 50, 50);

Cuando se ha definido un valor de relleno o contorno, se aplica a todas las figuras dibujadas después. Para
cambiar el valor de relleno o contorno, usamos la función fill() o stroke() de nuevo.
Un parámetro opcional adicional para fill() o stroke() regula la transparencia. Definiendo el parámetro
a 255 hace que la figura sea totalmente opaca, y a 0 totalmente transparente:

background(0);
fill(255, 220);
rect(15, 15, 50, 50);
rect(35, 35, 50, 50);

El relleno y el contorno de una figura se puede eliminar. La función noFill() detiene a Processing de
rellenar figuras, y la función noStroke() detiene la creación de líneas y contornos de las figuras. Si usamos
noFill() y noStroke() no dibujaremos nada en la pantalla.

Ignacio Buioli | Jaime Pérez Marín 13

-Atributos de dibujo
Además de cambiar los valores de relleno y contorno de las figuras, también es posible cambiar atributos de
la geometría. Las funciones smooth() y noSmooth() activan y desactivan el suavizado (conocido como
filtro antialiasing). Cuando usamos una de estas funciones, afectará a todas las funciones dibujadas después.
Si usamos primero smooth(), usar noSmooth() cancelará el ajuste, y viceversa.

smooth();
ellipse(30, 48, 36, 36);
noSmooth();
ellipse(70, 48, 36, 36);

Los atributos de la línea, están controlados por las funciones strokeWeight(), strokeCap() y
strokeJoin(). La función strokeWeight() tiene un parámetro numérico que define el grosor de todas
las líneas dibujadas después de usar esta función. La función strokeCap() requiere un parámetro que
puede ser ROUND, SQUARE o PROJECT. ROUND redondea los puntos finales, y SQUARE los cuadra. PROJECT
es una mezcla de ambos: redondea las esquinas cuadradas suavemente. Esta función se usa en líneas. La
función strokeJoin() tiene un parámetro que puede ser BEVEL, MITTER o ROUND. Estos parámetros
determinan la forma del contorno de la figura. BEVEL corta en diagonal las esquinas cuadradas, MITTER
cuadra las esquinas (es el valor por defecto) y ROUND redondea las esquinas.

smooth();
strokeWeight(12);
strokeCap(ROUND);
line(20, 30, 80, 30); //Línea superior
strokeCap(SQUARE);
line(20, 50, 80, 50); //Línea central
strokeCap(PROJECT);
line(20, 70, 80, 70); //Línea inferior

smooth();
strokeWeight(12);
strokeJoin(BEVEL);
rect(12, 33, 15, 33); //Figura izquierda
strokeJoin(MITER);
rect(42, 33, 15, 33); //Figura central
strokeJoin(ROUND);
rect(72, 33, 15, 33); //Figura derecha

-Modos de dibujo
Por defecto, los parámetros para ellipse() definen la coordenada x del centro, la coordenada y del centro,
el ancho y el alto. La función ellipseMode() cambia la forma en que se usan estos parámetros para dibujar
elipses. La función ellipseMode() requiere un parámetro que puede ser CENTER, RADIUS, CORNER o
CORNERS. El modo por defecto es CENTER. El modo RADIUS también usa el primer y segundo parámetro de
ellipse() para establecer el centro, pero el tercer parámetro deber ser la mitad del ancho, y el cuarto
parámetro debe ser la mitad del alto. El modo CORNER hace que ellipse() funcione de manera parecida a
rect(). Causa que el primer y segundo parámetro se trasladen a la esquina superior izquierda del
rectángulo que circunscribe la elipse y usa el tercer y cuarto parámetro para definir la anchura y la altura. El
modo CORNERS tiene un efecto similar a CORNER, pero causa que el tercer y cuarto parámetro de
ellipse() se definan en la esquina inferior derecha del rectángulo.

Ignacio Buioli | Jaime Pérez Marín 14

 smooth();
noStroke();
ellipseMode(RADIUS);
fill(126);
ellipse(33, 33, 60, 60); //Elipse gris
fill(255);
ellipseMode(CORNER);
ellipse(33, 33, 60, 60); //Elipse blanca
fill(0);
ellipseMode(CORNERS);
ellipse(33, 33, 60, 60); //Elipse negra

Con un estilo similar, la función rectMode() afecta a cómo se dibujan los rectángulos. Requiere un
parámetro que puede ser CORNER, CORNERS o CENTER. El modo por defecto es CORNER, y CORNERS causa
que el tercer y cuarto parámetro de rect() se definan en la esquina contraria a la primera. El modo CENTER
causa que el primer y segundo parámetro de rect() definan el centro del rectángulo y usa el tercer y cuarto
parámetro para el ancho y el alto.

noStroke();
rectMode(CORNER);
fill(126);
rect(40, 40, 60, 60); //Rectángulo gris
rectMode(CENTER);
fill(255);
rect(40, 40, 60, 60); //Rectángulo blanco
rectMode(CORNERS);
fill(0);
rect(40, 40, 60, 60); //Rectángulo negro

Ignacio Buioli | Jaime Pérez Marín 15

Apéndice de Primitivas

Ignacio Buioli | Jaime Pérez Marín 16

Unidad 3
Datos: Variables

Elementos que se introducen en esta Unidad:

int,float, boolean, true, false, = (asignación), width, height

¿Qué son los datos? Los datos, con frecuencia son características físicas asociadas a un algo. Por ejemplo,
cuando decimos que una persona llamada Juan Pérez, en su registro de conducir figura una M (por género
masculino) sabemos que ese valor M esta asociado a la persona Juan Pérez.
En los sistemas informáticos, los datos son guardados como números y caracteres. Por ejemplo, los
ordenadores están constantemente recibiendo datos del mouse y el teclado. Cuando se crea un programa,
pueden guardarse datos de, por ejemplo, una forma, un color, o el cambio constante de la posición del
mouse.

-Tipos de datos
Processing puede almacenar y modificar muchos tipos de datos, como números, letras, palabras, imágenes,
colores, fuentes y valores booleanos (true y false). El hecho de guardar datos implica un mayor o menor
uso de la memoria del ordenador donde estemos trabajando. No es lo mismo guardar la palabra “Andalucía”
que guardar simplemente la “A”. Cada dato es representado como una serie de bits (0 y 1). Por ejemplo,
010000100 puede ser interpretado como una letra.
Como seres humanos, no hará falta aprender el lenguaje binario para programar, Processing se presta para
que el trabajo nos sea mucho más sencillo. Sin embargo, 01000001 puede ser interpretado como al letra “A” o
como el número 65. Por lo tanto, es importante definir que tipo de dato estamos trabajando.
El primer tipo de datos que enunciaremos, serán los datos numéricos. Existen dos clases de datos numéricos:
enteros y decimales (flotantes). Cuando hablamos de enteros, nos referimos a números completos, como 5,
-120, 8 y 985. Processing representa variables de tipo entero con int. En cambio, los número decimales,
también llamados de punto-flotante, crean fracciones de los números enteros como 12.8, -120.75, 8.333 y
985.8676543. Processing representa los datos tipo decimales con float.
La variable más simple en Processing es de tipo boolean. Solo admite dos valores true o false
/verdadero o falso/. Suele utilizarse cuando es necesario que el programa tome una decisión ignorando el
resto de las posibilidades. A continuación, una tabla con los tipos de variable y el tamaño que ocupa cada
una:

Nombre Tamaño Rango de Valores

boolean 1 bit true / false
byte 8 bits -128 a 127
char 16 bits 0 a 65535
int 32 bits -2147483648 a 2147483647
float 32 bits 3.40282347E+38 a - 3.40282347E+38
color 32 bits 16777216 colores

-Variables
Una variable es un contenedor para guardar datos. Las variables permiten que cada datos sea reutilizado
muchas veces en un programa. Cada variable tiene dos partes un nombre y un valor. Si una variable
almacena el valor 21 y es llamada edad, el nombre edad puede aparecer muchas veces en el programa.
Cuando el programa se ejecute, la palabra edad cambiará por el valor de 21. En adición a este nombre y
valor, hay que declarar que tipo de datos soporta esa variable.
Una variable debe ser, siempre, declarada antes de ser usada. Una declaración de variable consta del tipo de
datos que aceptará esa variable, seguida de un nombre creado por nosotros. En el siguiente ejemplo se
declaran varios tipos de variables y se les asigna un valor:

int x; //Declaración de variable x del tipo entero

Ignacio Buioli | Jaime Pérez Marín 17

float y; //Declaración de variable y del tipo flotante
boolean b; //Declaración de variable b del tipo booleana

x = 50; //Asignar el valor 50 a la variable x

y = 12.6; //Asignar el valor 12.6 a la variable y
b = true; //Asignar el valor true a la variable b

Hay una forma mas sintetizada de hacer lo mismo. Podemos, entonces, escribir lo mismo en una sola línea:

int x = 50;
float y = 12.6;
boolean b = true;

Más de una variable del mismo tipo pueden ser declaradas en la misma línea y luego asignarse un valor por
separado a cada una:

float x, y, b;
x = -5.56;
y = 12.6;
b = 76.789;

Cuando una variable es declarada, es importante ver que clase de dato se le va a asignar para elegir
correctamente el tipo de dato. Ni el nombre, ni el tipo de dato puede ser cambiado una vez declarado. Si es
posible reasignar otro valor:

int x = 69; //Declara variable x y le asigna el valor de 69

x = 70; //Cambiar el valor de x por 70
int x = 71; //ERROR – La variable x ya existe

El símbolo de igual (=) se utiliza para asignar valores, únicamente. Le asigna el valor que se encuentra en el
lado derecho, a la variable del lado izquierdo. Por lo tanto, es importante que lo que se encuentre del lado
izquierdo sea una variable:

5 = 25; //ERROR – Lo que se encuentre del lado izquierdo debe ser una
//variable

Hay que tener en cuenta el tipo de datos que estemos manejando. No es posible asignar un tipo de datos a
una variable que solo acepte otra clase. Por ejemplo, no podemos asignar valores decimales a una variable
tipo entero:

int x = 12.89; //ERROR – La variable es tipo entero y se le está asignando un

//valor decimal

float f = 12.89;
int y = f; //ERROR – La variable es tipo entero y se le está asignando un
//valor decimal

Las variables pueden tener nombres que describan su contenido. Eso simplifica mucho la tarea a la hora de
programar. Además, esto podría ayudar a reducir la cantidad de comentarios. Aún así, queda en el
programador elegir que clase de nombres utilizar. Por ejemplo, para variables de temperatura, se podrían
utilizar los siguientes nombres:

t
temp
temperatura

Ignacio Buioli | Jaime Pérez Marín 18

tempCuarto
temperaturaCuarto

La primer letra tiene que ser un carácter en minúsculas, las siguientes pueden ser prácticamente cualquier
cosa. Aún así, no se admiten acentos en ninguna parte del código.

-Variables de Programa
Processing, como lenguaje, ha construido variables muy útiles que ya vienen pre-programadas, a fin de
facilitarle el trabajo al usuario. Se las denomina variables del programa o variables del sistema. El ancho y el
alto de la ventana de representación están almacenadas como variables denominadas width /ancho/ y
height /alto/, respectivamente. Si el programa no incluye size(), por defecto width y height adquieren
el valor de 100.

println(width +” , “+ height); //Imprime “100, 100” en la consola

size(300, 200);
println(width +” , “+ height); //Imprime “300, 200” en la consola

Frecuentemente son usadas cuando se requiere mantener la escritura del programa en diferentes escalas y
que estas sean proporcionales.

size(100, 100);
ellipse(width * 0.5, height * 0.5, width * 0.66, height * 0.66);
line(width * 0.5, 0, width * 0.5, height);

Ignacio Buioli | Jaime Pérez Marín 19

Unidad 4
Matemáticas: Funciones Aritméticas

Elementos que se introducen en esta Unidad:

+ (suma), - (resta), * (multiplicación), / (división), % (módulo), () (paréntesis)
++ (incremento), – (decremento), += (asignar de suma), -= (asignar resta),
*= (asignar multiplicación), /= (asignar división),
- (negativo)
ceil(), floor(), round(), min(), max()

Tener amplios conocimientos en matemáticas puede ser importante a la hora de programar. Sin embargo, no
es necesario ser un basto conocedor de la misma para disfrutar de la programación. Hay muchas formas y
estilos para programar, y cada quien elige individualmente a que aspectos otorgarles un mayo grado de
minuciosidad y a cuales descuidarlos un poco.
Es muy común que aquellos que tuvieron una cantidad elevada de matemáticas en la escuela (por ejemplo,
en orientaciones en ciencias naturales o en alguna técnica) se sientan atraídos al ver su matemática
convertida en movimiento. No obstante, no es necesario ser un verdadero conocedor. Processing es un
lenguaje que se presta a la matemática desde un aspecto más tranquilo. Si bien pueden realizarse complejas
operaciones, también pueden lograrse resultados similares con una matemática más intuitiva. En esta clase
de manuales, se explican funciones aritméticas sencillas para lograr grandes resultados, puesto funciones de
mayor complejidad caen fuera de los objetivos de este libro.

-Aritmética
En programación, las propiedades visuales de una imagen son asignadas por números. Esto quiere decir
que podemos controlarlas de forma aritmética. El siguiente es un claro ejemplo de eso:
int grisVal = 153;
fill(grisVal);
rect(10, 10, 55, 55); //Dibuja un rectángulo gris
grisVal = grisVal + 102; //Asigna 255 a grisVal
fill(grisVal);
rect(35, 30, 55, 55); //Dibuja un rectángulo blanco

Utilizando los operadores de suma, resta, multiplicación y división, podemos controlar, por ejemplo, la
posición de los elementos. El signo + se utiliza para la suma, el signo – para la resta, el signo * para la
multiplicación y el signo / para la división.

int a = 30;
line(a, 0, a, height);
a = a + 40; //Asigna 70 a la variable a
strokeWeight(4);
line(a, 0, a, height);

int a = 30;
int b = 40;
line(a, 0, a, height);
line(b, 0, b, height);
strokeWeight(4);
line(b - a, 0, b - a, height); //Pueden usarse cálculos
//entre variables como
//valores

Ignacio Buioli | Jaime Pérez Marín 20

 int a = 8;
int b = 10;
line(a, 0, a, height);
line(b, 0, b, height);
strokeWeight(4);
line(a * b, 0, a * b, height);

int a = 8;
int b = 10;
line(a, 0, a, height);
line(b, 0, b, height);
strokeWeight(4);
line(a / b, 0, a / b, height);

int y = 20;
line(0, y, width, y);
y = y + 6; //Asigna 26 a la variable y
line(0, y, width, y);
y = y + 6; //Asigna 32 a la variable y
line(0, y, width, y);
y = y + 6; //Asigna 38 a la variable y
line(0, y, width, y);

Los signos +, -, *, / y = posiblemente sean muy familiares, pero el signo % es mucho más exótico. El
operador % es el de módulo. Determina cuando un número es dividido por otro, o sea, da como resultado el
resto del mismo. El número a la derecha es dividido por el que pongamos a la izquierda. Devolverá como
resultado el resto de la operación.

Expresión Resultado Explicación

9 % 3 0 El 3 solo entra tres veces en el 9, no sobra nada.
9 % 2 1 El 2 solo entra cuatro veces en el 9, sobra 1.
35 % 4 3 El 4 entra ocho veces en el 35, sobra 3.

Sin muchos problemas, puede explicarse más claramente con un cuento. Cuatro personas están hambrientas
y van a comer panes a un restaurante. Si hay solo 35 panes, entonces esas 4 personas solo podrán comer 8
panes cada uno, y sobrarán 3 panes. Eso que sobra es el resultado del módulo. Hay muchos usos para el
módulo, como por ejemplo saber cuando un número es par o impar. Sin embargo, en Processing es muy
común utilizarlo para mantener a los números en rango. Por ejemplo, si una variable sigue incrementándose
(1, 2, 3, 4, 5, 6, 7, 8...), el módulo puede convertirla en una secuencia. Un incremento continuo puede
convertirse en un ciclo entre 0 y 3 por aplicar % 4:

x 0 1 2 3 4 5 6 7 8 9 10
__________________________________________________________________________

x%4 0 1 2 3 0 1 2 3 0 1 2

Muchos ejemplos a lo largo de las explicaciones usarán el módulo de esta forma.

Al trabajar con operaciones matemáticas y variables, es importante tener en claro que tipo de datos estamos
manejando. La combinación de dos enteros ( int) nos dará como resultado otro entero. La combinación de
dos decimales (float) siempre nos dará como resultado un decimal. Pero la combinación de un entero ( int)
con un decimal (float) siempre nos dará un número decimal, a pesar de la operación diera un resultado
exacto. Es importante ser cuidadoso al momento de combinar tipos de datos para evitar errores:

Ignacio Buioli | Jaime Pérez Marín 21

int i = 4;
float f = 3.0;
int a = i / f; //ERROR – Imposible asignar un número decimal a una
//variable tipo entero
float b = i / f; //Asigna 1.3333334 a la variable b del tipo flotante

Es también importante prestar atención a algunos conceptos matemáticos, como por ejemplo el concepto de
límite, donde un número dividido por cero tiende a infinito. En esos casos el programa producirá un error:

int a = 0;
int b = 12 / a; //ERROR – Excepción Matemática: producida por el cero.

-Prioridad en el Operador. Agrupación

La prioridad del ordenador determina que operaciones se realizan antes que otras. Esto es de gran
importancia ya que puede ser determinante para nuestro resultado. Por ejemplo, la expresión 3 + 4 * 5,
nos dará como resultado 23, puesto que tiene prioridad la multiplicación. Primero, 4 * 5 resultará en 20 y a
continuación se le sumará 3, dando por resultado 23. La prioridad puede ser cambiada agregando paréntesis.
Si tuviéramos la expresión (3 + 4) * 5, entonces la prioridad estaría en la suma, dando como resultado
final 35.

x = 3 + 4 * 5; //Asigna 23 a la variable
y = (3 + 4) * 5 //Asigna 35 a la variable

La siguiente tabla, a modo explicativo, muestra que elementos tiene prioridad sobre otros. Siendo, pues, que
los que se encuentran mas arriba, tiene mas prioridad que los que están debajo:

Multiplicativos * / %

Aditivos + -

Asignación =

-Atajos
Cuando programamos, recurrimos mucho a estructuras cíclicas. Muchas veces es necesario utilizar atajos de
escritura para reducir el tamaño del código y que sea mas legible. El operador de incremento es ++, mientras
que el de decremento es --. Ambos son usados como atajos de suma y resta.

int x = 1;
x++; //Equivale a x = x + 1;
println(x); //Imprime 2

int y = 1;
y--; //Equivale a y = y - 1;
println(y); //Imprime 0

Si deseáramos que se actualicé el valor antes de la expresión, solo cambiaremos de lugar el operador de
incremento/decremento:

int x = 1;
println(++x); //Imprime 2
println(x); //Imprime 2

Al asignar el operador de suma con el operador de asignación ( +=) obtendremos el operador de suma

Ignacio Buioli | Jaime Pérez Marín 22

asignada. En el caso de combinar el de resta con el de asignación ( -=) obtendremos el operador de resta
asignada:

int x = 1;
println(x); //Imprime 1
x += 5; //Equivale a x = x + 5;
println(x); //Imprime 6

int y = 1;
println(y); //Imprime 1
y -= 5; //Equivale a y = y - 5;
println(y); //Imprime -4

Al asignar el operador de multiplicación con el operador de asignación ( *=) obtendremos el operador de

multiplicación asignada. En el caso de combinar el de división con el de asignación ( /=) obtendremos el
operador de división asignada:

int x = 4;
println(x); //Imprime 1
x *= 2; //Equivale a x = x * 2;
println(x); //Imprime 8

int x = 4;
println(x); //Imprime 1
x /= 2; //Equivale a x = x / 2;
println(x); //Imprime 2

El operador de negación (-) es utilizado cuando deseamos cambiar el signo (positivo/negativo) de algún
número:

int x = 5;
x = -x; //Equivale a x = x * -1
println(x); //Imprime -5

-Limitando Números
Las funciones ceil(), floor(), round(), min() y max() son utilizadas para perfeccionar las
operaciones matemáticas. La función ceil(), redondea un número decimal convirtiéndolo en un entero. Lo
convierte en el valor igual o mayor. Redondea hacia arriba.

int x = ceil(2.0); //Asigna 2 a x

int y = ceil(2.1); //Asigna 3 a y
int w = ceil(2.5); //Asigna 3 a w
int z = ceil(2.9); //Asigna 3 a z

La función floor(), redondea un número decimal convirtiéndolo en un entero. Lo convierte en el valor igual
o menor. Redondea hacia abajo.

int x = floor(2.0); //Asigna 2 a x

int y = floor(2.1); //Asigna 2 a y
int w = floor(2.5); //Asigna 2 a w
int z = floor(2.9); //Asigna 2 a z

La función round(), redondea un número decimal convirtiéndolo en un entero. Lo convierte en un entero

mayor o menor, dependiendo el decimal. Si el decimal es menor a .5, entonces redondea hacia abajo. Si el
decimal es mayor o igual a .5, redondea hacia arriba.

Ignacio Buioli | Jaime Pérez Marín 23

int x = round(2.0); //Asigna 2 a x
int y = round(2.1); //Asigna 2 a y
int w = round(2.5); //Asigna 3 a w
int z = round(2.9); //Asigna 3 a z

Además, las funciones ceil(), floor() y round() funcionan con variables tipo decimales. A pesar de no
ser muy útil, puede utilizarse.

float y = round(2.1); //Asigna 2.0 a y

La función min() determina el número mas chico en una secuencia de números. La función max()
determina el número más grande en una secuencia de números. Ideal para determinar el número mayo o
menor de una secuencia. Ambas funciones pueden admitir dos o tres parámetros.

int u = min(5, 9); //Asigna 5 a u

float t = min(12.6, 7.89) //Asigna 7.89 a t
int v = min(4, 88, 65); //Asigna 4 a v

int y = max(5, 9); //Asigna 9 a y

float x = max(12.6, 7.89) //Asigna 12.6 a x
int w = max(4, 88, 65); //Asigna 88 a w

Ignacio Buioli | Jaime Pérez Marín 24

Unidad 5
Control: Decisiones

Elementos que se introducen en esta Unidad:

> (mayor a), < (menor a), >= (mayor o igual a), <= (menor o igual a), == (igual), != (distinto)
if, else, { } (corchetes), || (lógica O), && (lógica Y), ! (lógica NO)

Cuando un programa corre, lo hace en el orden en que ubicamos la líneas. Primero la primer línea, luego la
segunda, luego la tercera, y así. El programa finaliza cuando lee la última línea. Muchas veces, y para
agregar interés, es necesario que esta lectura se quiebre. A ese orden suele llamárselo flujo. Existen,
entonces, estructuras de control para rompe el flujo del programa.

-Expresiones Relacionales
¿Qué es la verdad? Esta gran cuestión filosófica es muy sencilla de responder en la programación.
Sencillamente, si algo es true (verdadero) es una verdad, y si algo es false (falso) es todo lo contrario.
Se trata tan solo de una noción lógica, no es necesario que se trate realmente de una “verdad”. Sin embargo,
si en la lógica del programa, eso es una verdad, entonces el programa devolverá un valor true, de lo
contrario devolverá un valor false. Tan sencillo como un 1 y un 0.

Expresión Evaluación
3 < 5 true
3 > 5 false
5 < 3 false
5 > 3 true

Cualquiera de estas expresiones puede leerse en español. ¿El número tres es menor al número cinco? Si la
respuesta es “si” expresa el valor true (verdadero). Al compararse dos valores con una expresión relacional,
solo pueden dar dos resultados posibles: true o false. A continuación, una tabla con los valores
relacionales y su significado:

Operador Significado
> Mayor que
< Menor que
>= Mayor o igual a
<= Menor o igual a
== Igual a
!= Distinto de

Las siguientes líneas de código muestran el resultado de comprar dos valores con una expresión relacional:

println(3 > 5); //Imprime false

println(5 > 3); //Imprime true
println(5 > 5); //imprime false

println(3 < 5); //Imprime true

println(5 < 3); //Imprime false
println(5 < 5); //imprime false

println(3 >= 5); //Imprime false

println(5 >= 3); //Imprime true
println(5 >= 5); //imprime true

println(3 <= 5); //Imprime true

println(5 <= 3); //Imprime false
println(5 <= 5); //imprime true

Ignacio Buioli | Jaime Pérez Marín 25

El operador de igualdad ( ==) determina si los dos valores que se evalúan son equivalentes. Devuelve true si
la igualdad se cumple. En cambio, el operador de diferenciación ( !=) evalúa si dos valores no son
equivalentes. Devuelve true si la desigualdad se cumple.

println(3 == 5); //Imprime false

println(5 == 3); //Imprime false
println(5 == 5); //imprime true

println(3 != 5); //Imprime true

println(5 != 3); //Imprime true
println(5 != 5); //imprime false

-Estructuras Condicionales
Las estructuras condicionales le permiten a un programa saber que línea de código ejecutar y cuales no. Las
líneas de código solo serán “visibles” para el programa si se cumple una condición. Permiten al programa
diferenciar acciones dependiendo el valor de variables. Por ejemplo, el programa dibuja una línea o una elipse
dependiendo el valor de una variable. Las estructura IF es usada en Processing para tomar esas decisiones:

if(condición){
acciones;
}

La condición debe ser una expresión que se resuelve con true o false. Si la condición es true, el código
que este desde la apertura del corchete ( { ) hasta el cierre del mismo ( } ), se ejecuta. En caso de ser
false, el programa directamente no “lee” las acciones.
Los siguientes tres ejemplos pretenden mostrar el funcionamiento de la estructura IF. Se recurre al mismo
código, solo que con diferentes valores la variable x:

//Las condiciones son “x > 100” y “x < 100”

//Como el valor de x es 150
//se ejecutará el primer bloque IF
//y se “eliminará” lo que ocurre en el segundo
int x = 150;
if (x > 100){ //si es mayor que 100
ellipse(50, 50, 36, 36); //dibuja una elipse
}
if(x < 100){ //si es menor que 100
rect(35, 35, 30, 30); //dibuja un rectángulo
}
line(20, 20, 80, 80);

//Las condiciones son “x > 100” y “x < 100”

//Como el valor de x es 50
//se ejecutará el segundo bloque IF
//y se “eliminará” lo que ocurre en el primero
int x = 50;
if (x > 100){ //si es mayor que 100
ellipse(50, 50, 36, 36); //dibuja una elipse
}
if(x < 100){ //si es menor que 100
rect(35, 35, 30, 30); //dibuja un rectángulo
}
line(20, 20, 80, 80);

Ignacio Buioli | Jaime Pérez Marín 26

 //Las condiciones son “x > 100” y “x < 100”
//Como el valor de x es 100
//no se ejecutará lo que ocurre en ninguna estructura IF
int x = 100;
if (x > 100){ //si es mayor que 100
ellipse(50, 50, 36, 36); //dibuja una elipse
}
if(x < 100){ //si es menor que 100
rect(35, 35, 30, 30); //dibuja un rectángulo
}
line(20, 20, 80, 80);

En el caso específico de que la condición de como resultado false, y estemos deseando que aún así, ocurra
algún evento, se utilizará, como agregado a la estructura IF, la estructura ELSE. La estructura ELSE extiende
a la estructura IF, permitiendo agregar acciones cuando la condición devuelve un resultado false.

int x = 90; //Como x vale 90, dibujará un rectángulo

if (x > 100){ //si es mayor que 100
ellipse(50, 50, 36, 36); //dibuja una elipse
} else { //sino,
rect(35, 35, 30, 30); //dibuja un rectángulo
}
line(20, 20, 80, 80); //siempre dibuja una línea

int x = 290; //Como x vale 290, dibujará una elipse

if (x > 100){ //si es mayor que 100
ellipse(50, 50, 36, 36); //dibuja una elipse
} else { //sino,
rect(35, 35, 30, 30); //dibuja un rectángulo
}
line(20, 20, 80, 80); //siempre dibuja una línea

Las condicionales pueden ser “encadenadas” una dentro de otra para tener completo control de las líneas de
código. En el siguiente ejemplo se evalúa si el valor es mayor a 100, y luego de eso si es mayor a 300.

int x = 420;
if (x > 100){ //Condición para dibujar elipse o línea
if (x < 300){ //Condición, lo determina
ellipse(50, 50, 36, 36);
} else {
line(50, 0, 50, 100);
}
} else {
rect(33, 33, 34, 34);
}

Podemos, también, ganar incluso un mayor control en las decisiones al combinar la estructura IF con la
estructura ELSE, consiguiendo la estructura ELSE IF.

int x = 420;
if (x < 100){ //Si es menor a 100
rect(33, 33, 34, 34); //dibuja un rectángulo
}else if (x > 300){ //Sino, si es mayor a 300
ellipse(50, 50, 36, 36); //dibuja una ellipse
} else { //Sino,
line(50, 0, 50, 100); //dibuja una línea
}

Ignacio Buioli | Jaime Pérez Marín 27

-Operadores Lógicos
Los operadores lógicos se utilizan al combinar dos o mas expresiones relacionales y para invertir los valores
lógicos. Los símbolos de los operadores lógicos corresponden a los conceptos de Y, O y NO.

Operador Significado
&& Y
|| O
! NO

La siguiente tabla muestra todas las operaciones posibles y los resultados:

Expresión Evaluación
true && true true
true && false false
false && false false

true || true true

true || false true
false || false false

!true false
!false true

El operador lógico O (||), hace que el valor sea un true solo si una parte de la expresión es true
(verdadera).

int a = 10;
int b = 20;
if((a > 5 ) || (b < 30)){ //Si a es mayor a 5 o b es menos
//a 30 dibuja una
line(20, 50, 80, 50); //línea. Como ambas condiciones
//se cumples, se
} //dibuja la línea
if((a > 15) || (b < 30)){ //Si a es mayor a 15 o b es menor
//a 30, dibujar una
ellipse(50, 50, 36, 36);//elipse. Solo una de las
//condiciones se cumplen, se
} //dibuja la elipse

Los procesos de lógica se descomponen en pasos. Los paréntesis son utilizados para delimitar las
componentes y así simplificar el trabajo. En las siguientes líneas se muestra un breve paso a paso de como
debe interpretarse:

Paso 1 (a > 5) || (b < 30)

Paso 2 (10 > 5) || (20 < 30)
Paso 3 true || true
Paso 4 true

El operador lógico Y (&&), hace que el valor sea true solo si ambas expresiones son true.

int a = 10;
int b = 20;
if((a > 5 ) && (b < 30)){ //Si a es mayor a 5 y b es menos
//a 30 dibujar una
line(20, 50, 80, 50); //línea. Como ambas condiciones

Ignacio Buioli | Jaime Pérez Marín 28

 //se cumples, se
} //dibuja la línea
if((a > 15) && (b < 30)){ //Si a es mayor a 15 y b es menor
//a 30 dibujar una
ellipse(50, 50, 36, 36);//elipse. Solo una de las
//condiciones se cumplen,
} //NO se dibuja la elipse

El operador lógico NO (!) es una marca. Simplemente invierte el valor lógico. Por ejemplo, si se trata de un
valor true, al escribir !true, estaríamos convirtiendo su valor en false. Solo es posible aplicarlo a una
variable del tipo boolean.

boolean b = true;
println(b); //Imprime true
b = !b;
println(b); //Imprime false
println(!b); //Imprime true
println(5 > 3); //Imprime true
println(!(5 > 3)); //Imprime false
int x = 20;
println(!x); //ERROR – Solo puede aplicarse a variables boolean

Ignacio Buioli | Jaime Pérez Marín 29

Apéndice de Estructura IF, ELSE y ELSE-IF

Ignacio Buioli | Jaime Pérez Marín 30

Unidad 6
Control: Repetición

Elementos que se introducen en esta Unidad:

for

La breve historia que poseen los ordenadores nos remonta a su antigua función que era realizar cálculos
velozmente. Actualmente, las computadoras emergen como máquinas que pueden realizar ecuaciones
matemáticas muy complejas a una increíble velocidad. Los antiguos ordenadores eran distribuidos como
máquinas que podía realizar precisas y rápidas ecuaciones repetitivas.

-Iteración
Las estructuras repetitivas son encargas de producir iteraciones. Es decir, a través de pocas líneas de código
se puede repetir, prácticamente, infinitas veces una misma línea de código. Esto ayuda a un mejor
rendimiento del programa, pero especialmente a un mejor rendimiento del programador, que con simples
estructuras puede reducir notablemente el tiempo y, por ende, errores. Se utiliza una estructura denominada
estructura FOR, la cual es encargada de repetir un ciclo las veces que queramos. En el siguiente ejemplo se
muestra el original código, compuesto de unas 14 líneas, y la versión con el ciclo FOR compuesto tan solo de
4:

Código Original Código utilizando un FOR

size(200, 200); size(200, 200);
line(20, 20, 20, 180); for (int i = 20; i < 150; i += 10) {
line(30, 20, 30, 180); line(i, 20, i, 180);
line(40, 20, 40, 180); }
line(50, 20, 50, 180);
line(60, 20, 60, 180);
line(70, 20, 70, 180);
line(80, 20, 80, 180);
line(90, 20, 90, 180);
line(100, 20, 100, 180);
line(110, 20, 110, 180);
line(120, 20, 120, 180);
line(130, 20, 130, 180);
line(140, 20, 140, 180);

La estructura FOR perfecciona las repeticiones, pudiendo simplificarse su código básico en esta simple y
funcional estructura:

for(iniciador, condición, actualización){

acciones;
}

Los paréntesis asociados a esta estructura corresponden a tres acciones internas: iniciador, condición
y actualización. Las acciones dentro del bloque del código se ejecutan constantemente, siempre y
cuando la condición devuelva un true (verdadero). El iniciador asigna el valor inicial de la iteración,
mientras que la actualización modifica el valor del iniciador con cada bucle. Los pasos en un FOR son los
siguientes:

1- El iniciador comienza a ejecutarse

2- La condición evalúa si es true o false
3- Si la condición es true, continúa en el paso 4, si es false, pasa al paso 6
4- Ejecuta las acciones en el bloque
5- Ejecuta la actualización y pasa al paso 2

Ignacio Buioli | Jaime Pérez Marín 31

6- Sale de la estructura y continúa ejecutando el resto del programa

Los siguientes ejemplos muestran diversas formas de uso de la estructura FOR en un programa:

// El iniciador es"int i = 20", la condición es"i < 80",

// y la actualización es "i += 5". Cabe notar que el
// punto-y-coma termina los dos primeros elementos
for (int i = 20; i < 80; i += 5) {
// Esta línea continuará ejecutándose hasta que “i”
// sea mayor a 80.
line(20, i, 80, i+15);
}

for (int x = -16; x < 100; x += 10) {

line(x, 0, x+15, 50);
}
strokeWeight(4);
for (int x = -8; x < 100; x += 10) {
line(x, 50, x+15, 100);
}

noFill();
for (int d = 150; d > 0; d -= 10) {
ellipse(50, 50, d, d);
}

for (int i = 0; i < 100; i += 2) {

stroke(255-i);
line(i, 0, i, 200);
}

-Iteración Anidada
La estructura FOR produce repeticiones en una dimensión. Anidando iteraciones podemos crear efectos
sumamente interesantes. Por ejemplo, teniendo tan solo dos coordenadas de puntos, si los anidamos en una
estructura FOR, podemos cambiar una simple dimensión a una figura de dos dimensiones.

for (int y = 10; y < 100; y += 10) {

point(10, y);
}

for (int x = 10; x < 100; x += 10) {

point(x, 10);
}

Ignacio Buioli | Jaime Pérez Marín 32

 for (int y = 10; y < 100; y += 10) {
for (int x = 10; x < 100; x += 10) {
point(x, y);
}
}

La técnica es muy útil para crear fondos, texturas y los conocidos patterns. Los números producidos por las
variables de control de repeticiones pueden aplicarse a la posición, al color, al tamaño, a la transparencia o a
cualquier otra cosa de atributo visual.

fill(0, 76);
noStroke();
smooth();
for (int y = -10; y <= 100; y += 10) {
for (int x = -10; x <= 100; x += 10) {
ellipse(x + y/8.0, y + x/8.0, 15 + x/2, 10);
}
}

noStroke();
for (int y = 0; y < 100; y += 10) {
for (int x = 0; x < 100; x += 10) {
fill((x+y) * 1.4);
rect(x, y, 10, 10);
}
}

for (int y = 1; y < 100; y += 10) {

for (int x = 1; x < y; x += 10) {
line(x, y, x+6, y+6);
line(x+6, y, x, y+6);
}
}

-Formato de las Estructuras

Es importante el espacio entre las estructura para que sea legible y clara la lectura de las mismas. Las líneas
de código dentro de las mismas suelen llevar tabulaciones. Cuando el programa se hace largo una clara
lectura es ideal en esta clase de estructuras. En este libro utilizamos la siguiente convención de espacios en
blanco:

int x = 50;
if (x > 100) {
line(20, 20, 80, 80);
} else {
line(80, 20, 20, 80);
}

La siguiente es una alternativa de formato usada muy frecuentemente:

int x = 50;
if (x > 100) {

Ignacio Buioli | Jaime Pérez Marín 33

 line(20, 20, 80, 80);
} else {
line(20, 80, 80, 20);
}

Es esencial utilizar un formato limpio para mostrar la jerarquía del código. El entorno de Processing tratará de
ajustar su código a medida de que escribe. Aún así, en la sección Tools siempre puede utilizarse la
herramienta “Auto Format” para limpiar el código cuando se lo necesite.

Ignacio Buioli | Jaime Pérez Marín 34

Apéndice de Estructura FOR

Ignacio Buioli | Jaime Pérez Marín 35