7 Para la primera pieza sería suficiente con el alzado y la planta.

PROCESSING
2
ä 2.1 Orientación del lenguaje y del entorno
Processing empezó a desarrollarse en 2001 en el MIT por Casey Reas
ä 2.2 Funciones gráficas
Processing dispone de muchas funciones gráficas interesantes. Va-
La sintaxis de Processing
Unidad 1

Cada expresión debe finalizar obligatoria-

Processing
y Ben Fry. Estos, a su vez, son los autores de los libros Getting Star- mos a ver algunas antes de escribir un primer sketch. Salvo indicación mente con el signo de punto y coma «;».
ted with Processing y Processing: A Programming Handbook for Vi- en contra, la unidad de medida en la que trabajan es el píxel. De otro modo, al intentar ejecutar el pro-
sual Designers and Artists, entre otros. Es decir, el lenguaje sirve para grama, dará un mensaje de error.
aprender a programar, pero sobre todo está enfocado hacia el diseño Función Significado También hay que respetar las mayúsculas
gráfico, las animaciones y otros aspectos que atañen a artistas visua- Define el tamaño en píxeles de la ventana gráfica en la que se y minúsculas en los nombres de función.
les menos interesados en producir programas funcionales y más atraí- size (ancho, alto)
ejecutará el sketch. No es lo mismo line() que Line() o liNE().
dos por producir arte por computador. Con Processing es muy senci-
point (x, y) Dibuja un punto en la coordenada (x, y).
llo crear formas, trabajar con colores y mover objetos por la pantalla.

Entorno Processing
En palabras de los propios autores, «Creamos Processing para hacer line (x1, y1, x2, y2) Traza una línea desde la coordenada (x1, y1) hasta (x2, y2).
más fácil la programación de gráficos interactivos. Estábamos frus-
triangle (x1, y1, x2, Dibuja un triángulo con vértices en los puntos (x1, y1), (x2, y2)
trados por lo difícil que era escribir este tipo de software con los len-
y2, x3, y3) y (x3, y3).
guajes de programación que empleábamos habitualmente (C++ y
Java) y fuimos inspirados por la sencillez con la que se podían escribir quad (x1, y1, x2, Dibuja un cuadrilátero con vértices en los puntos (x1, y1),
programas interesantes con los lenguajes de nuestra infancia (Logo y y2, x3, y3, x4, y4) (x2, y2), (x3, y3) y (x4, y4).
BASIC)».
rect (x, y, ancho, Dibuja un rectángulo con la esquina superior izquierda en (x,
Processing permite tres formas de programar: básica, estructurada y alto) y) y dimensiones (ancho, alto).
orientada a objetos, de modo que se puede ir progresando paulatina-

Sugerencias metodológicas
mente desde los inicios hasta el nivel avanzado. ellipse (x, y, Dibuja una elipse con centro en (x, y) y diámetros (ancho,
ancho, alto) alto).
Una de las opciones más interesantes es la de Exportar aplicación.
Al hacer clic sobre ella, se abre un cuadro de diálogo con opciones arc (x, y, ancho, Dibuja un arco con centro (x, y), dimensiones (ancho, alto) y
para hacer que la aplicación pueda ejecutarse en otros sistemas ope- alto, inicio, fin) ángulos de inicio y fin en radianes (inicio, fin).
rativos. También es posible hacer que se ejecute a pantalla completa.
Más adelante comprobarás que es muy sencillo definir el tamaño de
la ventana de ejecución.
Práctica guiada

• El bloque introductorio del epígrafe nos habla de las características de este entorno abierto.
Entorno de Processing
Ejecutar Parar 1 Abre Processing y escribe la siguiente línea de código:
Mode Manager. Al desplegarlo, line(0,0,100,100);
aparece el siguiente cuadro con otros
2 Presiona sobre el botón Run.
modos posibles de programación.

Aprovecharemos para debatir sobre las bondades del modelo de trabajo del software y
3 Si te aparece algún error, revisa el código y asegúrate de que no
Nombre del fichero has olvidado teclear el punto y coma al final de la expresión,
no has cambiado alguna letra de la instrucción por una mayús- Comprende, piensa, investiga...
cula (u otra letra), que los números están separados por comas
y que los paréntesis están donde deben. 8 Inicia Processing y abre el
Gestión de pestañas

hardware libre, de compartir el conocimiento y publicar la información en lugar de mantener la

(ficheros) menú File. Accede al elemento
4 Si todo ha ido bien, deberías ver algo similar a la imagen de la Examples… y verás que se abre
derecha. Has dibujado una línea desde el origen de coordenadas una ventana con varias carpetas
(0, 0) hasta el punto (100, 100). desplegables.
Área de escritura
de código Sigue la ruta Books – Chapter02
5 Processing tiene asignados una serie de valores por defecto
y abre los dos ejemplos Ex_02_01

actitud opuesta: código cerrado, secretos de desarrollo y falta de información como medios
para los elementos que emplea habitualmente. Genera una ven-
y Ex_02_02. Ejecuta ambas apli-
tana automáticamente, dentro de ella crea un lienzo de color
caciones y, a la vista del código
Área de mensajes gris enmarcado por una banda de color gris claro y la línea que
que has cargado, explica con tus
dibuja es de color negro y con grosor de un píxel. Todos estos
propias palabras qué crees que
elementos, desde la ventana a la línea, podemos configurarlos a
Consola de textos y depurado de errores hace Ex_02_02.
nuestra conveniencia.

14 15 para entorpecer el avance de los posibles competidores. Generosidad frente a egoísmo.

• A continuación, se describe la ventana de trabajo. Comparada con la de otros entornos, es muy
Plan Lingüístico
simple, lo que supone una gran ventaja para aquellos que se enfrentan por primera vez a la pro-
El alumnado dispone en [Link] del apar-
tado Plan Lingüístico, donde encontrará la informa-
gramación de código o que estaban acostumbrados a entornos visuales. Este apartado no de-
ción necesaria sobre cómo escribir un texto descrip- bería revestir dificultad, pero conviene recordar al alumnado dónde lo tienen disponible para
tivo. consultar en caso de necesidad.
• Es importante hacer especial énfasis en el apartado de sintaxis, en la obligatoriedad de teclear
ciertos caracteres y en características como la distinción entre mayúsculas y minúsculas que
hace Processing. Si esto les queda suficientemente claro, se ahorrarán muchos errores.

Soluciones
8 El primer ejemplo solo dibuja una elipse, mientras que el segundo dibuja elipses debajo del
puntero del ratón. Además, en este segundo ejemplo, si se presiona el botón izquierdo del ra-
tón, la elipse se rellena de negro.
Para asegurarse de que al dejar de presionar el botón las elipses se dibujan con el color por
defecto (blanco) se ha incluido un condicional antes de la instrucción que crea las elipses bajo
el cursor del ratón.

7
 2 PROCESSING ä 2.3 Elementos que definen una figura
Hasta ahora hemos visto que Processing dibuja por defecto las formas
Colores RGB
Unidad 1

Funciones gráficas y elementos que definen una figura

usando una línea negra de 1 píxel de grosor y las rellena, en el caso de Existen numerosas webs en las que puedes
Comprende, piensa, investiga... encontrar los códigos de colores RGB
poder hacerlo, con color blanco. Sería mucho más atractivo conse-

Soluciones
que desees usar, como [Link]
9 Abre Processing y ejecuta la instrucción de cada 11 Busca en la página de referencia de Processing guir que nuestros diseños estuvieran llenos de color y que pudiéramos
org/wiki/Colores_web.
uno de los apartados realizando las observacio- cómo se usan las siguientes funciones y ano- cambiar el contorno de las distintas figuras geométricas. Para ello, se
dispone de las siguientes funciones: Incluso algunas páginas disponen de una
nes que se indican. ta su significado y parámetros en tu cuader-
sencilla aplicación en la que puedes mover
a) line(0,0,100,100); no: background(), stroke(), line(), noStroke(), ➜ Trabaja con línea en escala de grises: stroke(nivel_de_gris);
un cursor y seleccionar el color deseado,
strokeWeight(), strokeJoin(), strokeCap(). lleva un solo parámetro, donde 0 representaría al negro, y, 255 al
Explica lo que ves en la ventana que aparece. devolviendo el valor que buscas en un
blanco. Todos los valores intermedios formarían la escala de grises.
b) line(0,0,200,200); 12 Practica con las funciones que conoces. cuadro anexo. Suelen aparecer los valores
➜ Trabaja con línea en colores: stroke(r,g,b); lleva tres paráme- decimales y también los hexadecimales.
Comprueba si varía el tamaño de la ventana a) Escribe el siguiente código:
tros: R, G y B, que son los colores primarios de la mezcla sustractiva

9 a) Se muestra una línea recta que recorre el lienzo en diagonal, desde la esquina superior iz-
gráfica. size(500,400);
red, green y blue. Cada uno puede variar entre 0 y 255.
c) rect(10,10,80,80); rect(250,100,150,100);
➜ Cambia el grosor de la línea: strokeWeight(n); modifica el grosor
¿Qué aparece en la ventana gráfica? ¿Ha ellipse(250,200,100,100); de la línea que se va a dibujar. El valor por defecto es 1.
cambiado el tamaño de la ventana? b) Haz en tu cuaderno un análisis de las tres lí- ➜ Rellena las figuras: fill(nivel_de_gris); y fill(r,g,b); rellenan
d) rect(10,10,180,180); neas de código. respectivamente una figura en niveles de gris o en color. Todo lo expli-
Describe las anomalías que detectas en la c) ¿Por qué crees que se superponen las fi- cado para cambiar el color del contorno se aplica también al relleno.

quierda hasta la inferior derecha.

ventana gráfica. guras? ➜ Cambia el color del lienzo: background(nivel_de_gris); y
10 Consulta la tabla de funciones de la página ante- background(r,g,b); pintan el lienzo en niveles de gris o de co-
rior y modifica el tamaño de la ventana gráfica del lores respectivamente. Todo lo explicado para cambiar el color del
primer ejemplo para que tenga 640 x 480 píxeles, contorno se aplica también al lienzo.
la resolución de las antiguas tarjetas gráficas VGA.
Siempre hay que indicar los atributos antes de dibujar una figu-
a) Escribe el código para trazar la diagonal des-
ra. Es decir, primero se seleccionan el color, el grosor de línea

b) El resultado en el lienzo es el mismo que en el caso anterior, a pesar de haberse modificado

de (0, 0) hasta la esquina opuesta.
y el relleno; después se dibuja la figura en la posición y con las
b) Modifica el código duplicando el valor de las dimensiones deseadas.
coordenadas finales: line(0,0,1280,960);
¿Qué sucede?
c) ¿Qué ocurre si solo duplicas el valor de una
de las dos coordenadas finales? Prueba ahora Comprende, piensa, investiga...

el código. La limitación viene dada por el tamaño del lienzo por defecto.
con la otra y anota tus conclusiones.
13 Escribe el siguiente código: stroke(100,180,140);
size(500,400); strokeWeight(100);
Las variables width y height stroke(160); rect(0,0,400,300);
rect(250,100,150,100); a) Explica qué ha ocurrido.
Las variables widht y height almacenan el valor del ancho y alto
de la ventana gráfica. Por ejemplo: Ahora modifica los valores de stroke() para b) Ahora modifica el programa para que el an-

c) Se muestra un cuadrado, centrado en el lienzo, con la esquina superior derecha en el punto

comprobar cómo varía el nivel de gris el color cho de línea sea de 5 píxeles y el rectángulo
size(200, 200);
del contorno del rectángulo. se dibuje en las coordenadas (50, 50).
smooth();
14 Prueba el código del apartado «Las variables c) Modifica también los valores de stroke()
ellipse(width/2, height/2, width/2, width/2);
width y height». para comprobar cómo varía el color del con-
println(width); a) Modifícalo para que el diámetro de la circun- torno el rectángulo.

(10, 10) y lado 80 píxeles.

println(height); ferencia ocupe 2/3 del ancho de la ventana. 16 Modifica el código anterior para que el rectán-
En este caso, como el valor del ancho y del alto de la ventana gráfica b) Cambia también las dimensiones por separa- gulo quede con un borde verde de 5 píxeles, re-
es de 200, el sketch dibuja una circunferencia en la posición 100, do y comprueba cómo se adapta la figura a la lleno de color rojo y sobre fondo azul.
100 con un ancho y alto de diámetro 100. Además, en la consola forma de la ventana.
aparece el número 200 en dos líneas contiguas. 17 Comprobamos. Elaborad una lista con
15 Escribe el siguiente código: los países que se encuentran en situación de po-
size(500,400); breza extrema y dibujad sus banderas.

16 17
d) El cuadrado no se muestra completo, no se ven los bordes inferiores, puesto que tiene un
tamaño superior al del lienzo. Añadiendo un lienzo de dimensiones mínimas 200 x 200
Aprendizaje cooperativo
píxeles se mostrará la figura completa.
Dispone del recurso «Comprobamos» a fin de que el
alumnado conozca la mecánica para aplicar esta téc- 10 El código debería ser:
nica de aprendizaje cooperativo.
a) s
 ize(640,480);
line(0,0,640,480);
b) Aparentemente, la escala se ha reducido a la mitad. En realidad, Processing solo dibuja la
parte visible del objeto línea.
c) La línea parece salir por un lado de la ventana, por lo que no se ha escalado la imagen.

11 Las funciones con sus parámetros y ejemplos de uso se pueden encontrar en las siguientes di-
recciones:
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

12 b) La primera línea establece el tamaño del lienzo. La segunda, dibuja un rectángulo con la es-
quina superior izquierda en (250, 100) y del tamaño que indica. La tercera hace lo propio
con la elipse de centro (250, 200).
c) Las figuras se superponen porque su coordenada x coincide y el círculo queda por encima
porque Processing va dibujándolas a medida que ejecuta el código.

13 Práctica libre a realizar por el alumnado.

14 a) size(200, 200);
smooth();
ellipse(width/2, height/2, 2*width/3, 2*height/3);

b) Una posible modificación sería:

size(300, 200);
smooth();
ellipse(width/2, height/2, 2*width/3, 2*height/3);

15 a) Se establece un lienzo de 500 x 400 píxeles.

Se elige un color verde para el trazo del borde de las figuras.
Se selecciona como grosor de ese trazo 100 píxeles.
Se dibuja un rectángulo en (0, 0) de 400 x 300 píxeles.

8
 La imagen queda asimétrica debido al exagerado valor del grosor del borde y a que el rec-
tángulo se dibuja en la esquina superior izquierda de la ventana. Se puede probar a cambiar
las coordenadas a (50, 50) para que el rectángulo quede centrado.

b) 

c) Práctica libre a realizar por el alumnado.

16 El código puede ser similar al siguiente:
size(500,400);
stroke(255,0,0);
strokeWeight(5);
fill(0,0,255);
rect(50,50,400,300);

17 Comprobamos: Actividad cooperativa para concienciar sobre la necesidad de perseguir los

Objetivos de Desarrollo Sostenible.

2 PROCESSING ä 2.4 Figuras personalizadas ä 2.5 Bloques de código, variables

Unidad 1 Figuras personalizadas
Processing permite la creación de nuevas figuras aparte de las que y tipos de datos
Imágenes de fondo están predefinidas. Para ello hay que indicarle el inicio y el fin de las

18 No se dibuja la última arista de la estrella.

Hasta el momento no hemos necesitado dividir nuestros programas
instrucciones que la definen así como las coordenadas de cada vértice
en bloques; sin embargo, esto irá cambiando a medida que avance-
de la figura. Todo esto se consigue con beginShape(), endShape() y
mos en el tema. En Processing, los bloques de código se encierran
vertex(x,y).
entre llaves «{ }». Estos bloques pueden ocupar varias líneas.
Por ejemplo, para definir una estrella de cuatro puntas:
Por otro lado, hasta ahora solo hemos dado valores numéricos fijos a
size(400, 400); los parámetros que iban entre paréntesis de las distintas expresiones.
beginShape(); Tampoco hemos creado aplicaciones interactivas. Para ello vamos a

19 Respuesta abierta.
vertex(200, 30); requerir el uso de variables.
vertex(230, 170); Las variables son esenciales en programación. Contienen valores que
La función background (imagen) se vertex(370, 200); serán utilizados más tarde. Habitualmente, asociamos las variables
puede usar para cargar una imagen en vertex(230, 230); solo con números, pero también pueden contener caracteres, texto,
el fondo. vertex(200, 370); imágenes, valores lógicos, etc.
El tamaño en píxeles de la imagen y del vertex(170, 230);
lienzo deben ser iguales. vertex(30, 200); Es necesario nombrar las variables. Se recomienda dar nombres que

20 Los códigos que producen las dos ilustraciones son:

vertex(170, 170); ayuden a deducir para qué sirven, pero no demasiado largos, por
Los formatos de imagen admitidos son
endShape(CLOSE); ejemplo: edad, nombre, etc. Comprende, piensa, investiga...
gif, jpg, png y tga. Las imágenes pueden
verse tanto en 2D como en 3D. Las variables deben ser de algún tipo: numérico, carácter u otro. 22 Escribe el siguiente código:
Processing distingue entre dos tipos de datos: primitivos y compues-
int a=3;
tos. Principalmente, trabajaremos con datos primitivos que, por orden
alfabético, son: boolean, byte, char, color, double, float, int y long. int b=5;
Comprende, piensa, investiga...
int c=a+b;
Entre los datos compuestos que se suelen emplear al inicio están:
18 Después de introducir el código de la estrella de cuatro pun- array, string y table. Por ejemplo: print(c);

size(400, 400);
tas, prueba a suprimir la palabra clave CLOSE dentro de la a) Fíjate en el área de texto y ex-
función endshape(). ¿Qué es lo que ocurre? int x; // Declara la variable de tipo entero x plica qué ha ocurrido. ¿Qué
x = 3; // Asigna un valor a la variable x hace la función print(c)?
19 Crea dos nuevas figuras; por ejemplo, una flecha y una estrella
con un número distinto de puntas. b) Ahora modifica el programa
Se puede declarar una variable y asignarle un valor en una sola línea para que las variables sean
20 Practica con las funciones strokeWeight(), strokeJoin() y de código. de tipo float. ¿Qué pasa si
strokeCap(). Cada una admite distintos parámetros, no solo
combinas variables de tipo
numéricos. Modifica el código de las figuras que acabas de int x = 3; // Declara la variable de tipo entero x

beginShape();
int y float en el cálculo?
crear para obtener resultados similares a los de los ejemplos // y le asigna valor
a continuación.
Operadores lógicos
strokeJoin() strokeCap() ä 2.6 Operadores y operaciones matemáticas
Posiblemente, con un gráfico se entien-
miter round Los operadores son símbolos que aplican una función matemática o da mejor lo que hacen los operadores
lógica a los operandos. Tenemos los siguientes operadores: !, && y ll, que se corresponden con las

bevel square
Asignación: =, signo igual.
Aritméticos: +, -, *, /, %, ++ y --, que se corresponden con suma, dife-
rencia, producto, división, resto o módulo de la división entera, incre-
mento y decremento en una unidad.
funciones lógicas NOT, AND y OR. Em-
plearemos la notación de conjuntos para
mayor claridad.

A
_
U
strokeWeight(10);
A
A B A B
Relacionales: >, >=, <, <=, == y !=, que se corresponden con mayor
que, mayor o igual que, menor que, menor o igual que, igual a, dis- _

strokeJoin(BEVEL);
A= U – A A–B A+B
round project 21 Crea un sketch combinando las dos figuras que acabas de tinto de.
construir. Rellena cada una de un color distinto y usa otro di- NOT/NO AND/Y OR/O
Lógicos: !, && y ||, que se corresponden con las funciones lógicas NOT, Negación Producto Suma
ferente para las aristas de las figuras. También debes cambiar
AND y OR. Se emplean con frecuencia en estructuras de control. lógica lógico lógica
el color del fondo.
NOT A A AND B A OR B

18 19

strokeCap(ROUND);
vertex(200, 30);
vertex(230, 170);
vertex(370, 200);
vertex(230, 230);
vertex(200, 370);
vertex(170, 230);

9
 vertex(30, 200);
vertex(170, 170);
endShape(CLOSE);

size(400, 400);
beginShape();
strokeWeight(8);
strokeJoin(ROUND);
strokeCap(SQUARE);
vertex(200, 30);
vertex(230, 170);
vertex(370, 200);
vertex(230, 230);
vertex(200, 370);
vertex(170, 230);
vertex(30, 200);
vertex(170, 170);
endShape(CLOSE);
21 El alumnado puede elegir entre superponer una con otra, ampliar el lienzo y ponerlas una al
lado de otra, modificar sus dimensiones, etc. Se recomienda establecer alguna restricción, co-
mo que no puedan coincidir las coordenadas de ambas.
22 a) Imprime la variable c en el área de texto, en este caso, 8.
b) E
 l resultado pasa a ser 8.0. Al combinar variables de dos tipos como int y float en el mismo
cálculo, Processing muestra el mensaje de error: Cannot convert from float to int.

2 PROCESSING ä 2.7 Funciones Ejemplo resuelto

Unidad 1
Funciones
Ya hemos empleado funciones incluidas en Processing como son Código del sketch Ex_02_02

Sugerencias metodológicas
line(), size() y stroke(), pero también podemos escribir nuestras void setup() {
propias funciones. size(480, 480); // Modificado para pantalla cuadrada
Las funciones se utilizan para definir tareas que van a ser ejecutadas smooth(); // Original size (480, 120)
varias veces. Su uso hace la programación más sencilla y reduce los }
errores de código. void draw() {
Las funciones admiten parámetros y pueden devolver valores. Los pa- if (mousePressed) {
rámetros de una función son variables con las que opera. fill(0);
} else {

• Una de las características que más le cuesta entender al alumnado es la necesidad de usar va-
fill(255);
Definición de variables dentro y fuera de las funciones
}
ellipse(mouseX, mouseY, 80, 80);
Las variables definidas dentro de una función se consideran lo- }
cales a la función y no están disponibles para otras funciones del
programa.

riables locales siempre que sea posible, debido a los posibles efectos inesperados que pueden
Las variables definidas fuera de las funciones (normalmente al ini- Las funciones elipse() y ellipseMode() Función ellipseMode()
cio del programa) se consideran globales y están disponibles para La función ellipse() tiene cuatro parámetros, y la función ellipse
todo el programa. Esto podría parecer una ventaja, sin embargo, Mode() cambia el modo en que son interpretados. Hay cuatro posi- ellipseMode(RADIUS);
entraña el riesgo de que sus valores sean modificados en algún bilidades:
fill(179,223,31); // Verde
punto del programa del que hayamos perdido conciencia de que ellipse(50,50,30,30);
ellipseMode(CENTER);

ocasionar las modificaciones de variables globales en distintos puntos de un programa.

lo hacía, pudiendo originar resultados inesperados y errores. ➜ CENTER. La opción por defecto. Los dos primeros parámetros de
ellipse()son las coordenadas del centro de la elipse y los otros fill(199,51,255); // Rosa
dos son el ancho y el alto totales (los diámetros). ellipse(50,50,30,30);

Las funciones setup y draw

➜ RADIUS. Los dos primeros parámetros de ellipse() son las coor-
Existen dos funciones especialmente interesantes que se usan de for- denadas del centro de la elipse y los otros dos son la mitad del
ma conjunta en numerosos sketches. Se trata de setup() y draw(). ancho y del alto (los radios).
Si has probado alguno de los ejemplos que vienen con Processing, es

• Las funciones setup() y draw() son muy similares a las setup() y loop() de Arduino. Conviene
posible que hayas reparado en ellas. Su utilidad es la siguiente: ➜ CORNER. Suponiendo que la elipse estuviera inscrita en un rectán-
gulo, los dos primeros parámetros de ellipse() son las coordena-
➜ setup() se escribe al principio del sketch, justo después de las va-
das de la esquina superior izquierda del rectántulo y los otros dos
riables globales que se van a usar. Sirve para inicializar el entorno
son el ancho y el alto totales.
de trabajo. Por ejemplo, dentro de setup() se puede definir el ta-
maño de la ventana gráfica con size(), decidir si se van a suavizar ➜ CORNERS. Los dos primeros parámetros de ellipse() son las

que el alumnado entienda las características diferenciadoras de ambas, como que setup() solo
los bordes de los objetos dibujados para darles más realismo con coordenadas de la esquina superior izquierda del rectántulo cir-
smooth(), o no, con noSmooth(). cunscrito a ella y los otros dos parámetros son las coordenadas de ellipseMode(CORNER);
su esquina inferior derecha. fill(31,188,223); // Azul
➜ draw() crea un bucle de repetición automático. Es decir, si que-
ellipse(25,25,50,50;
remos que nuestro programa no finalice, solo hay que escribir el
La función arc() ellipseMode(CORNERS);
código dentro de draw(). fill(228,234,16); // Amarillo

se ejecuta una vez al iniciar el sketch y draw() es un bucle que se ejecuta sin parar hasta que se
Si no lo has hecho aún, abre Processing. Dirígete a File / Examples. Hay dos modos de llamar a la función arc(): ellipse(25,25,50,50);
En la ventana selecciona: Contributed Examples / Getting Started…
/ 02_Start / Ex_02_02. El ejemplo procede de Getting Started with arc(x, y, ancho, alto, inicio, fin)
Processing, de Casey Reas y Ben Fry. arc(x, y, ancho, alto, inicio, fin, modo)

Este sencillo ejemplo ilustra el uso de las funciones setup() y draw(),

La segunda forma añade el parámetro modo, que admite tres formas:

cierra la ventana de ejecución.

además de introducir el uso de una estructura de control simple. El
sketch dibuja circunferencias que van siguiendo al puntero del ratón. ➜ OPEN (por defecto). Deja el arco abierto.
Si solo movemos el ratón sobre la ventana, las rellena de blanco; pero
si presionamos el botón izquierdo del ratón, las rellena de negro. ➜ CHORD. Traza una línea desde el inicio al fin del arco.
En la página siguiente puedes ver el código y el resultado de ejecutar ➜ PIE. Traza una línea desde el inicio del arco al centro de la elipse
el sketch Ex_02_02. que lo genera y, desde allí, otra línea hasta el fin del arco.

20 21

• Una ventaja de usar funciones es que no tenemos que entender cómo operan, es suficiente con
saber cómo se usan. Podemos imaginar una función como una caja con mecanismos internos
que actúan sobre los datos.
• Conviene señalar que también es posible escribir nuestras propias funciones. Se emplean para
hacer cosas redundantes, que van a ser ejecutadas varias veces. Hace más sencilla la programa-
ción y reduce los errores. Una explicación sencilla de cómo crear funciones puede encontrase
en este enlace:
[Link]

2 PROCESSING ä 2.8 Estructuras de control. Decisiones

Unidad 1
Soluciones
Estructuras if else if
Si un programa solo fuera una lista de instrucciones que se ejecutan
En esencia se trata de la misma estructura.
Comprende, piensa, investiga... una tras otra de forma lineal, desde el inicio hasta el fin, resultaría útil,

23 Este sketch emplea las primeras seis líneas en establecer el valor de diversas variables que
Tras el if siempre va una condición que en
pero un poco pobre, ya que en ocasiones se pueden dar circunstan- caso de cumplirse, hará que se ejecuten
23 Escribe el siguiente código y redacta en tu cuaderno un análisis cias que hagan que el curso del programa deba cambiar. Para detec- las instrucciones del bloque entre llaves
tar estas situaciones, están las estructuras de selección y decisión. En que hay a continuación.
de lo que hace el programa.
Processing hay dos de estas estructuras: if else y switch case. Después, el programa continúa con su
int anchoV=500; ejecución. Si queremos añadir otro grupo
int altoV=400; if else de instrucciones para el caso específico
en que la condición sea falsa, añadimos

necesitará con posterioridad: las dos primeras establecen las dimensiones de la ventana y, en
int rojo=100; else y otro bloque de instrucciones entre
if (condición)
int verde=180; llaves.
{instrucciones en caso de que la condición sea
int azul=140; También podemos encadenar secuencias
cierta}
int grosorLinea=3; if else:
else
size(anchoV,altoV); {instrucciones en caso de que la condición sea if (condición)

la última línea del sketch, se usan también para centrar la elipse y hacerla con diámetros de la
stroke(rojo,verde,azul); {instrucciones}
falsa}
else if (otra condición)
strokeWeight(grosorLinea);
{más instrucciones}
ellipse(anchoV/2,altoV/2,anchoV/2,altoV/2); else {otras instrucciones}
Ejemplo resuelto
24 Escribe un sketch que dibuje una ventana cuadrada y en su
interior una diana con cuatro círculos concéntricos. El fondo El siguiente sketch dibuja una elpise en la posición del puntero del

mitad de esas dimensiones. Las variables rojo, verde y azul se usan para los niveles de colores
debe ser negro, el centro de la diana blanco y cada uno de los ratón. Si el puntero está sobre la mitad izquierda de la ventana,
tres círculos restantes de los colores básicos RGB. Usa variables la elipse se rellena de negro. Si el puntero se sitúa sobre la mitad
y operaciones matemáticas para calcular las dimensiones de los derecha, cambia a blanco.
círculos. No olvides poner comentarios en el código. Comprende, piensa, investiga...
void setup(){
25 Comprueba cómo cambia el aspecto de las circunferencias del size(300,300);

RGB de stroke(). La última variable se emplea para el grosor de línea que se usará para dibujar
ejemplo anterior usando la función noSmooth(). Si no parece smooth() 27 Teclea el código del ejemplo
smooth();
estar bastante clara la diferencia, abre un nuevo sketch e intro- if else de la izquiera. ¿Qué
La función smooth() viene activada } // Fin setup()
duce el siguiente código: pasa si escribes la función
por defecto, aunque es buena cos- void draw(){ background() en setup() en
size(300, 120); tumbre añadirla a la función setup(). background(150) ; // Un gris intermedio lugar de hacerlo en draw()?
smooth(); // Activa smooth En la figura se puede ver un círculo
if(mouseX<150 ) // La mitad de la ventana

objetos.
con función smooth (izquierda) y 28 Modifica el código del ejem-
ellipse(100, 60, 80, 80); {
uno con función noSmooth (dere- plo para que la ventana tenga
noSmooth(); // Desactiva smooth cha). fill(0); 500 x 200 píxeles y divídela
ellipse(200, 60, 80, 80); ellipse(mouseX,mouseY,50,50); (de forma imaginaria) en cinco
} // Fin if mouseX bloques iguales, de modo que
26 Modifica el ejemplo Ex-02-02 para que el fondo sea de color
else al mover el ratón por el primer
gris y la forma que se dibuje sea un cuadrado de 20 x 20 píxeles
bloque la elipse esté rellena de

24 Un posible código sería:

{
de color verde cuando no se presiona el botón del ratón, y de
fill(255); color negro, los tres bloques
color rojo al presionarlo. ¿Dónde situarías el cambio de color
ellipse(mouseX,mouseY,50,50); intermedios correspondan con
del fondo? ¿Y los cambios de color y de forma del objeto que
rellenos rojo, verde y azul, y que
sigue al ratón? } // Fin else
en el último bloque se rellene
}
de blanco. Pista: tendrás que
encadenar una serie de if else,
cada uno con una condición.

int anchoV=500; // Fijamos el ancho y alto de la ventana

22 23

int altoV=500;
int colorMax=255; // Valor máximo que pueden tomar los colores
size(anchoV,altoV); // Crear la ventana gráfica
background(0); // Fondo negro
noStroke(); // Vamos a dibujar sin línea
fill(colorMax,0,0); // Primer círculo en rojo
/* Todos los círculos estarán centrados

10
 vertex(30, 200);
vertex(170, 170);
endShape(CLOSE);

size(400, 400);
beginShape();
strokeWeight(8);
strokeJoin(ROUND);
strokeCap(SQUARE);
vertex(200, 30);
vertex(230, 170);
vertex(370, 200);
vertex(230, 230);
vertex(200, 370);
vertex(170, 230);
vertex(30, 200);
vertex(170, 170);
endShape(CLOSE);
21 El alumnado puede elegir entre superponer una con otra, ampliar el lienzo y ponerlas una al
lado de otra, modificar sus dimensiones, etc. Se recomienda establecer alguna restricción, co-
mo que no puedan coincidir las coordenadas de ambas.
22 a) Imprime la variable c en el área de texto, en este caso, 8.
b) E
 l resultado pasa a ser 8.0. Al combinar variables de dos tipos como int y float en el mismo
cálculo, Processing muestra el mensaje de error: Cannot convert from float to int.

2 PROCESSING ä 2.7 Funciones Ejemplo resuelto

Unidad 1
Funciones
Ya hemos empleado funciones incluidas en Processing como son Código del sketch Ex_02_02

Sugerencias metodológicas
line(), size() y stroke(), pero también podemos escribir nuestras void setup() {
propias funciones. size(480, 480); // Modificado para pantalla cuadrada
Las funciones se utilizan para definir tareas que van a ser ejecutadas smooth(); // Original size (480, 120)
varias veces. Su uso hace la programación más sencilla y reduce los }
errores de código. void draw() {
Las funciones admiten parámetros y pueden devolver valores. Los pa- if (mousePressed) {
rámetros de una función son variables con las que opera. fill(0);
} else {

• Una de las características que más le cuesta entender al alumnado es la necesidad de usar va-
fill(255);
Definición de variables dentro y fuera de las funciones
}
ellipse(mouseX, mouseY, 80, 80);
Las variables definidas dentro de una función se consideran lo- }
cales a la función y no están disponibles para otras funciones del
programa.

riables locales siempre que sea posible, debido a los posibles efectos inesperados que pueden
Las variables definidas fuera de las funciones (normalmente al ini- Las funciones elipse() y ellipseMode() Función ellipseMode()
cio del programa) se consideran globales y están disponibles para La función ellipse() tiene cuatro parámetros, y la función ellipse
todo el programa. Esto podría parecer una ventaja, sin embargo, Mode() cambia el modo en que son interpretados. Hay cuatro posi- ellipseMode(RADIUS);
entraña el riesgo de que sus valores sean modificados en algún bilidades:
fill(179,223,31); // Verde
punto del programa del que hayamos perdido conciencia de que ellipse(50,50,30,30);
ellipseMode(CENTER);

ocasionar las modificaciones de variables globales en distintos puntos de un programa.

lo hacía, pudiendo originar resultados inesperados y errores. ➜ CENTER. La opción por defecto. Los dos primeros parámetros de
ellipse()son las coordenadas del centro de la elipse y los otros fill(199,51,255); // Rosa
dos son el ancho y el alto totales (los diámetros). ellipse(50,50,30,30);

Las funciones setup y draw

➜ RADIUS. Los dos primeros parámetros de ellipse() son las coor-
Existen dos funciones especialmente interesantes que se usan de for- denadas del centro de la elipse y los otros dos son la mitad del
ma conjunta en numerosos sketches. Se trata de setup() y draw(). ancho y del alto (los radios).
Si has probado alguno de los ejemplos que vienen con Processing, es

• Las funciones setup() y draw() son muy similares a las setup() y loop() de Arduino. Conviene
posible que hayas reparado en ellas. Su utilidad es la siguiente: ➜ CORNER. Suponiendo que la elipse estuviera inscrita en un rectán-
gulo, los dos primeros parámetros de ellipse() son las coordena-
➜ setup() se escribe al principio del sketch, justo después de las va-
das de la esquina superior izquierda del rectántulo y los otros dos
riables globales que se van a usar. Sirve para inicializar el entorno
son el ancho y el alto totales.
de trabajo. Por ejemplo, dentro de setup() se puede definir el ta-
maño de la ventana gráfica con size(), decidir si se van a suavizar ➜ CORNERS. Los dos primeros parámetros de ellipse() son las

que el alumnado entienda las características diferenciadoras de ambas, como que setup() solo
los bordes de los objetos dibujados para darles más realismo con coordenadas de la esquina superior izquierda del rectántulo cir-
smooth(), o no, con noSmooth(). cunscrito a ella y los otros dos parámetros son las coordenadas de ellipseMode(CORNER);
su esquina inferior derecha. fill(31,188,223); // Azul
➜ draw() crea un bucle de repetición automático. Es decir, si que-
ellipse(25,25,50,50;
remos que nuestro programa no finalice, solo hay que escribir el
La función arc() ellipseMode(CORNERS);
código dentro de draw(). fill(228,234,16); // Amarillo

se ejecuta una vez al iniciar el sketch y draw() es un bucle que se ejecuta sin parar hasta que se
Si no lo has hecho aún, abre Processing. Dirígete a File / Examples. Hay dos modos de llamar a la función arc(): ellipse(25,25,50,50);
En la ventana selecciona: Contributed Examples / Getting Started…
/ 02_Start / Ex_02_02. El ejemplo procede de Getting Started with arc(x, y, ancho, alto, inicio, fin)
Processing, de Casey Reas y Ben Fry. arc(x, y, ancho, alto, inicio, fin, modo)

Este sencillo ejemplo ilustra el uso de las funciones setup() y draw(),

La segunda forma añade el parámetro modo, que admite tres formas:

cierra la ventana de ejecución.

además de introducir el uso de una estructura de control simple. El
sketch dibuja circunferencias que van siguiendo al puntero del ratón. ➜ OPEN (por defecto). Deja el arco abierto.
Si solo movemos el ratón sobre la ventana, las rellena de blanco; pero
si presionamos el botón izquierdo del ratón, las rellena de negro. ➜ CHORD. Traza una línea desde el inicio al fin del arco.
En la página siguiente puedes ver el código y el resultado de ejecutar ➜ PIE. Traza una línea desde el inicio del arco al centro de la elipse
el sketch Ex_02_02. que lo genera y, desde allí, otra línea hasta el fin del arco.

20 21

• Una ventaja de usar funciones es que no tenemos que entender cómo operan, es suficiente con
saber cómo se usan. Podemos imaginar una función como una caja con mecanismos internos
que actúan sobre los datos.
• Conviene señalar que también es posible escribir nuestras propias funciones. Se emplean para
hacer cosas redundantes, que van a ser ejecutadas varias veces. Hace más sencilla la programa-
ción y reduce los errores. Una explicación sencilla de cómo crear funciones puede encontrase
en este enlace:
[Link]

2 PROCESSING ä 2.8 Estructuras de control. Decisiones

Unidad 1
Soluciones
Estructuras if else if
Si un programa solo fuera una lista de instrucciones que se ejecutan
En esencia se trata de la misma estructura.
Comprende, piensa, investiga... una tras otra de forma lineal, desde el inicio hasta el fin, resultaría útil,

23 Este sketch emplea las primeras seis líneas en establecer el valor de diversas variables que
Tras el if siempre va una condición que en
pero un poco pobre, ya que en ocasiones se pueden dar circunstan- caso de cumplirse, hará que se ejecuten
23 Escribe el siguiente código y redacta en tu cuaderno un análisis cias que hagan que el curso del programa deba cambiar. Para detec- las instrucciones del bloque entre llaves
tar estas situaciones, están las estructuras de selección y decisión. En que hay a continuación.
de lo que hace el programa.
Processing hay dos de estas estructuras: if else y switch case. Después, el programa continúa con su
int anchoV=500; ejecución. Si queremos añadir otro grupo
int altoV=400; if else de instrucciones para el caso específico
en que la condición sea falsa, añadimos

necesitará con posterioridad: las dos primeras establecen las dimensiones de la ventana y, en
int rojo=100; else y otro bloque de instrucciones entre
if (condición)
int verde=180; llaves.
{instrucciones en caso de que la condición sea
int azul=140; También podemos encadenar secuencias
cierta}
int grosorLinea=3; if else:
else
size(anchoV,altoV); {instrucciones en caso de que la condición sea if (condición)

la última línea del sketch, se usan también para centrar la elipse y hacerla con diámetros de la
stroke(rojo,verde,azul); {instrucciones}
falsa}
else if (otra condición)
strokeWeight(grosorLinea);
{más instrucciones}
ellipse(anchoV/2,altoV/2,anchoV/2,altoV/2); else {otras instrucciones}
Ejemplo resuelto
24 Escribe un sketch que dibuje una ventana cuadrada y en su
interior una diana con cuatro círculos concéntricos. El fondo El siguiente sketch dibuja una elpise en la posición del puntero del

mitad de esas dimensiones. Las variables rojo, verde y azul se usan para los niveles de colores
debe ser negro, el centro de la diana blanco y cada uno de los ratón. Si el puntero está sobre la mitad izquierda de la ventana,
tres círculos restantes de los colores básicos RGB. Usa variables la elipse se rellena de negro. Si el puntero se sitúa sobre la mitad
y operaciones matemáticas para calcular las dimensiones de los derecha, cambia a blanco.
círculos. No olvides poner comentarios en el código. Comprende, piensa, investiga...
void setup(){
25 Comprueba cómo cambia el aspecto de las circunferencias del size(300,300);

RGB de stroke(). La última variable se emplea para el grosor de línea que se usará para dibujar
ejemplo anterior usando la función noSmooth(). Si no parece smooth() 27 Teclea el código del ejemplo
smooth();
estar bastante clara la diferencia, abre un nuevo sketch e intro- if else de la izquiera. ¿Qué
La función smooth() viene activada } // Fin setup()
duce el siguiente código: pasa si escribes la función
por defecto, aunque es buena cos- void draw(){ background() en setup() en
size(300, 120); tumbre añadirla a la función setup(). background(150) ; // Un gris intermedio lugar de hacerlo en draw()?
smooth(); // Activa smooth En la figura se puede ver un círculo
if(mouseX<150 ) // La mitad de la ventana

objetos.
con función smooth (izquierda) y 28 Modifica el código del ejem-
ellipse(100, 60, 80, 80); {
uno con función noSmooth (dere- plo para que la ventana tenga
noSmooth(); // Desactiva smooth cha). fill(0); 500 x 200 píxeles y divídela
ellipse(200, 60, 80, 80); ellipse(mouseX,mouseY,50,50); (de forma imaginaria) en cinco
} // Fin if mouseX bloques iguales, de modo que
26 Modifica el ejemplo Ex-02-02 para que el fondo sea de color
else al mover el ratón por el primer
gris y la forma que se dibuje sea un cuadrado de 20 x 20 píxeles
bloque la elipse esté rellena de

24 Un posible código sería:

{
de color verde cuando no se presiona el botón del ratón, y de
fill(255); color negro, los tres bloques
color rojo al presionarlo. ¿Dónde situarías el cambio de color
ellipse(mouseX,mouseY,50,50); intermedios correspondan con
del fondo? ¿Y los cambios de color y de forma del objeto que
rellenos rojo, verde y azul, y que
sigue al ratón? } // Fin else
en el último bloque se rellene
}
de blanco. Pista: tendrás que
encadenar una serie de if else,
cada uno con una condición.

int anchoV=500; // Fijamos el ancho y alto de la ventana

22 23

int altoV=500;
int colorMax=255; // Valor máximo que pueden tomar los colores
size(anchoV,altoV); // Crear la ventana gráfica
background(0); // Fondo negro
noStroke(); // Vamos a dibujar sin línea
fill(colorMax,0,0); // Primer círculo en rojo
/* Todos los círculos estarán centrados

10
 background(150); // Si se quita deja rastro
ellipse(mouseX,mouseY,50,50);
}

Unidad 1 29 El código del ejemplo cambia el color de relleno de la elipse en función de nuestras pulsacio-
nes de teclas. Si definimos la variable letter en setup(), al intentar ejecutar el sketch, nos de-
2 PROCESSING switch case ä 2.9 Estructuras de control. Bucles
Se emplea cuando hay más de dos posibles valores entre los que elegir: Un bucle es una estructura que contiene una serie de instrucciones
que deben ejecutarse de forma reiterativa mientras se cumple cierta
switch (expresión) condición (también hay bucles que se ejecutan hasta que se cumple
{ cierta condición). En Processing hay dos bucles: el bucle while y el

vuelve un error: Cannot find anything named «letter» (No puedo encontrar nada llamado «let-
case etiqueta_1: bucle for.
instrucciones; // No son necesarias las llaves
El bucle while
break;
case etiqueta_2: El bucle while ejecuta una serie de instrucciones mientras se cumple
otras instrucciones; la condición de control del bucle. Los diseñadores de Processing nos
advierten de que lo usemos con cuidado, pues el código que hay den-

ter»). Si definimos la variable fuera de setup() y de draw(), el programa se ejecuta, pero no

break;
tro del bucle se ejecutará hasta que se cumpla la condición de salida.
default:
Esto podría ocasionar que los eventos de teclado y ratón quedaran
instrucciones si no se cumplen los anteriores
desactualizados e, incluso, se podría llegar a bloquear el entorno de
casos;
ejecución.
}
Comprende, piensa, investiga...

responde a las pulsaciones de teclas cambiando el color de relleno de la elipse, por lo que no
Comprende, piensa, investiga... while (condición)
{ 33 Teclea el código del ejemplo,
29 Teclea el código del ejemplo re- haz un análisis de la función
Ejemplo resuelto Instrucciones del interior del bucle, se
suelto switch case. ¿Qué pasa draw() y responde a las si-
ejecutan mientras la condición entre paréntesis
si la variable letter la defines en Este código dibuja una elipse en la posición del puntero del ratón. guientes preguntas:
es cierta.
setup()? ¿Y si la defines fuera Si pulsamos en el teclado las letras R, G o B (mayúsculas o mi- Una de las instrucciones debe cambiar la a) ¿Qué pasa si cambiamos

hace lo que esperábamos.

de las dos funciones, setup() y núsculas), el color de relleno de la elipse pasa a ser rojo, verde o variable de control del bucle de modo que la el tamaño de la ventana a
draw()? azul, respectivamente. Si pulsamos cualquier otra tecla, el relleno condición de control deje de ser cierta. 300 x 100?
30 ¿Qué se debe hacer si quieres cambia a blanco. } b) ¿Y si sobre el original cam-
dejar un rastro de elipses de void setup(){ biamos la condición del
colores a lo largo de la ventana size(500,200); while a (i<1000)?
gráfica? smooth(); Ejemplo resuelto
c) ¿Y con la condición (i>1)?
} // Fin setup()
31 Modifica el código del ejemplo

30 Lo más sencillo es definir background() en setup().

void draw(){ void setup(){ 34 Modifica el código del ejemplo
switch case para que puedas size(500,200);
char letter = key; // Leer carácter de teclado while para que el alto de las
cambiar el color de la elipse al smooth();
background(150); // Fondo gris intermedio elipses se adapte a la altura de
pulsar los números del 0 al 4 y background(150); // Fondo gris intermedio
switch(letter){ la ventana.
el color del fondo al pulsar los noStroke(); // Figuras sin borde
números del 5 al 9. case 'r': // Si pulsamos ‘r’ o ‘R’ } // Fin setup() 35 Busca en [Link]
case 'R': void draw(){ org/reference/[Link] la ex-
32 Modifica el código del ejem- fill(255,0,0); // Relleno rojo int i = 50; // Variable de control del bucle plicación para while, e introdu-
plo if else de la página ante- break; // servirá para variar la coordenada X
ce el ejemplo que allí aparece.

31 Se espera que asigne los colores blanco, negro, rojo, verde y azul a los números del 0 al 4 para
rior para que la ventana tenga while(i<width-25){
case 'g': // Si pulsamos ‘g’ o ‘G’ Explica línea a línea qué es lo
500 x 500 píxeles y divídela ellipse(i,height/2,25,25); // Dibujamos las
case 'G': // elipses en las coordenadas que marcan i y que hace cada una de las ins-
(de forma imaginaria) en cua-
fill(0,255,0); // Relleno verde // (height/2) así quedan centradas verticalmente trucciones.
tro cuadrantes. Haz que la elip-
break; i=i+50; // Incrementamos i para salir del bucle
se cambie a uno de los cuatro 36 Modifica ese ejemplo introdu-
case 'b': // Si pulsamos ‘b’ o ‘B’ } // Fin while
colores del parchís (rojo, ver- } // Fin draw() ciendo las siguientes variaciones:
case 'B':
de, amarillo y azul) al entrar en

el relleno y del 5 al 9 para el fondo. El código podría ser similar a:

fill(0,0,255); // Relleno azul line(30, i, 80-i, i);
cada uno de los cuadrantes co-
break; line(0, i, 80-i, i);
rrespondientes. Haz que el fon-
default: line(0, 80+i, 80-i, i);
do cambie a blanco al pulsar la
fill(255); // Si pulsamos otro relleno blanco line(0, 80+i, 80, i);
letra W y que cambie a negro
al pulsar K, en ambos casos se
} // Fin switch 37 Crea ahora dos nuevas varia-
ellipse(mouseX,mouseY,50,50); ciones y explica qué es lo que
deben admitir mayúsculas y mi-
} // Fin draw() hacen.
núsculas.

24 25 void setup(){
size(500,200);
smooth();
} // Fin setup()
void draw(){
char letter = key; // Leer carácter de teclado
background(150); // Fondo gris intermedio
switch(letter){
case ‘0’: // Si pulsamos ‘0’
fill(0); // Relleno negro
break;
case ‘1’: // Si pulsamos ‘1’
fill(255); // Relleno blanco
break;
case ‘2’: // Si pulsamos ‘2’
fill(255,0,0); // Relleno rojo
break;
case ‘3’: // Si pulsamos ‘3’
fill(0,255,0); // Relleno verde
break;
case ‘4’: // Si pulsamos ‘4’
fill(0,0,255); // Relleno azul
break;
case ‘5’: // Si pulsamos ‘5’
background(0); // Fondo negro
break;
case ‘6’: // Si pulsamos ‘6’
background(255); // Fondo blanco
break;
case ‘7’: // Si pulsamos ‘7’
background(255,0,0); // Fondo rojo
break;
case ‘8’: // Si pulsamos ‘8’
background(0,255,0); // Fondo verde
break;
case ‘9’: // Si pulsamos ‘9’
background(0,0,255); // Fondo azul
break;
default:
fill(255); // Si pulsamos otra tecla relleno blanco y
background(150); // Fondo gris intermedio
} // Fin switch
ellipse(mouseX,mouseY,50,50);
} // Fin draw()

12
 36 Esta actividad ilustra el hecho de que el simple cambio de alguno de los parámetros de una
instrucción tan sencilla como line puede producir efectos sorprendentes.
a) Para line(30, i, 80-i, i); b) Para line(0, i, 80-i, i);

c) Para line(0, 80+i, 80-i, i); d) Para line(0, 80+i, 80, i);

37 Trabajo a realizar por el alumnado.

Unidad 1 38 El código de la primera versión de for es:
Práctica guiada
2 PROCESSING El bucle for
Videotutoriales de Processing
El bucle for ejecuta una serie de instrucciones mientras que se cumpla Mediante esta práctica guiada vamos a ver cómo anidar un bucle

for (int i = 0; i < 40; i = i+1) {

una determinada condición de test. Además del bloque de instruc- for dentro de otro y sacar partido de su empleo. En el siguiente enlace puedes encontrar
ciones que se van a repetir, el bucle for consta de tres partes que se numerosos tutoriales en vídeo que co-
El ejercicio consistirá en dibujar una matriz de círculos de 3 filas y bren los habituales niveles; principiante,
escriben entre paréntesis: inicialización de la variable de control, com-
5 columnas. En cada fila, los círculos harán un degradado de uno intermedio y avanzado. Pueden resultarte
paración y actualización de la variable de control. Las tres partes se de gran ayuda.
de los colores primarios, RGB. Para ello, vamos a ir resolviendo
separan entre sí por medio de «;».
paso a paso cada una de las partes y, finalmente, pondremos todo
a trabajar en conjunto.
for (inicialización; comparación; incremento)
1 En una primera aproximación construimos una fila y trabajamos

line(30, i, 80, i);

{
Instrucciones del interior del bucle, se sin color:
ejecutan mientras la condición entre paréntesis
void setup(){
es cierta.
Este bucle modifica la variable de control size(600,100);
automáticamente, nosotros decidimos el valor del smooth();
incremento. noStroke(); // Figuras sin borde

}
} } // Fin setup()
void draw(){
Ejemplo resuelto // La variable de control del bucle
// se puede declarar dentro del paréntesis
void setup(){
for(int i=0;i<5;i=i+1){
size(500,500);

Su ejecución produce 40 líneas horizontales contiguas, por lo que da la sensación de ser un

fill(255/(i+1)); // Aprovecho i para un
smooth();
// degradado de blanco a negro
background(117,221,143); // Fondo verde claro
ellipse((i+1)*100,50,70,70); // Elipses
noStroke(); // Figuras sin borde
} // Fin setup() } // Fin for
} // Fin draw()

rectángulo relleno.
void draw(){
// La variable de control del bucle
// se puede declarar dentro del paréntesis
for(int i=0;i<width;i=i+10){
fill(i/2); // Aprovecho i para un degradado de negro a blanco
ellipse(i,i,12,10); // Dibujamos las elipses formando 2 Lo siguiente es construir tres filas. Para ello hay que redimensio-
// una diagonal nar la ventana. También podemos aprovechar para usar un color
} // Fin for diferente en cada una de las filas.
} // Fin draw() void setup(){
size(600,300);
smooth();
Comprende, piensa, investiga... noStroke(); // Figuras sin borde
} // Fin setup()
38 Busca en la página de referencia del lenguaje 40 Crea ahora líneas inclinadas
Processing, la explicación para for, e introduce los 45° como las del ejemplo. void draw(){
tres primeros ejemplos que allí aparecen. Emplea las funciones se- // La variable de control del bucle
Explica qué es lo que diferen- tup() y draw() para ajustar // se puede declarar dentro del paréntesis
cia las tres versiones del códi- las dimensiones de la ventana for(int i=0;i<5;i=i+1){
go. y declarar las variables donde fill(255/(i+1),0,0); // Aprovecho i para el
mejor corresponda.
39 Modifica el código del segun- //degradado de rojo
do ejemplo para formar líneas ellipse((i+1)*100,50,70,70); // Elipses
paralelas verticales. } // Fin primer for

26 27

El código de la segunda versión de for es:

for (int i = 0; i < 80; i = i+5) {
line(30, i, 80, i);
}
Su ejecución es como la de la primera versión del bucle while de la actividad 16.

El código de la tercera versión de for es:

for (int i = 40; i < 80; i = i+5) {
line(30, i, 80, i);
}
Su ejecución es muy similar a la del anterior ejemplo. La única diferencia es que el bucle em-
pieza en 40 en lugar de 0, por lo que se ejecuta menos veces y la primera línea dibujada ya no
está en y = 0, sino en y = 40.

39 Las condiciones del bucle no se modifican. Solo hay que cambiar: line(i, 30, i, 80);
40 Una posible solución es:
void setup(){
size(150,100);
smooth();
} // Fin setup()
void draw(){
// La variable de control del bucle
// se puede declarar dentro del paréntesis
for(int i=0;i<width-50;i=i+5){
line(i,80,i+50,30); // dibujamos las líneas diagonales
} // Fin for
} // Fin draw()

15
 2 PROCESSING for(int i=0;i<5;i=i+1){
Taller de tecno
logía
Unidad 1
Processing. Práctica guiada
Dibujos fractales
fill(0,255/(i+1),0); // Aprovecho i para el
degradado de verde

La anidación de bucles se puede considerar característica avanzada para el alumnado de 3.º de

ellipse((i+1)*100,150,70,70); // Dibujamos las
elipses Los fractales son figuras geométricas en las que las formas que se di-
} // Fin segundo for Presentación bujan se repiten en diferentes escalas. Imagínate que dibujas un trián-
for(int i=0;i<5;i=i+1){ proyecto gulo sencillo y que defines un segmento de su perímetro en el que
fill(0,0,255/(i+1)); // Aprovecho i para el haces el mismo triángulo, pero más pequeño, y que según creas el
// degradado de azul 1.ª Interacción 2.ª Interacción triángulo pequeño, haces nuevos segmentos con triángulos aún más

ESO. No deberían abordar este epígrafe sin haber realizado las actividades de las páginas previas
ellipse((i+1)*100,250,70,70); // Dibujamos las pequeños y así sucesivamente, disminuyendo la escala de los triángu-
// elipses los y aumentando su número. Cada vez que reduces la escala, produ-
} // Fin tercer for ces una iteración. La figura geométrica que obtendrías se llama Curva
} // Fin draw() de Koch. Copia el programa de Processing y observa el resultado.
3 Como se puede observar en el código anterior, es posible reutilizar

y haber entendido todo lo que concierne a coordenadas y operaciones para modificar la posición
// Rombos fractales, creado por [Link], [Link] y
la variable i, aunque también podríamos haber elegido otros nom-
[Link] (2019)
bres de variables de control para los bucles segundo y tercero. No 3.ª Interacción
void setup(){
obstante, es fácil darse cuenta de que, salvo por pequeñas dife-
size(500,500); // Pantalla de 500x500 píxeles
rencias, hemos repetido el código del primer bucle tres veces. Una
alternativa es emplear dos bucles anidados, de modo que uno se }
void draw(){

y las proporciones de los objetos dibujados.

encargue de variar la coordenada x, y otro, la coordenada y.
background(200,200,220); // Fondo de color violeta
void setup(){ stroke(0,0,200,50); // Atributos color contorno
size(600,300);
fill(0,0,255,70); // Atributos de color de relleno
smooth();
translate(width/2,height/2); // Traslado al centro
noStroke(); // Figuras sin borde
draw_fractal(250); // Llamada función fractal r=250
} // Fin setup()
}
// Inicio de la función de dibujo fractal
void draw(){
void draw_fractal(floatr){
for(int j=0;j<3;j=j+1){

Soluciones
quad(-r,0,0,r,r,0,0,-r); // Rombo que servirá de base
for(int i=0;i<5;i=i+1){
if (r<1) // El rombo más pequeño tendrá lado 1 px
if(j==1){fill(0,255/(i+1),0);}
return; // Matriz de rombos trasladados hacia abajo
else if(j==2){fill(0,0,255/(i+1));}
pushMatrix(); // Se crea la matriz de transformaciones
ellipse((i+1)*100,(j+1)*75,70,70);
translate(0,r/4); // Mueve el origen abajo 1/4 de r
// Dibujamos las elipses Hay muchas figuras de la naturaleza
draw_fractal(r/2); // Llamada recursiva rombo 1/2
} // Fin for interno. Controla coordenada x que se construyen mediante fractales.
Observa, por ejemplo, la forma de
popMatrix(); // Se cierra la matriz de transformaciones
} // Fin for externo. Controla coordenada y
una coliflor romanesco. // Se repite el proceso trasladando rombos hacia arriba
} // Fin draw()

41 Una posible solución es:

pushMatrix();
translate(0,-r/4);
draw_fractal(r/2);
popMatrix();
Comprende, piensa, investiga... // Repite el proceso trasladando rombos derecha
pushMatrix();
41 Modifica Elipses_color_for_anidados para que en 43 Aumenta el número de elipses por fila hasta 10. translate(r/4,0);
la primera fila aparezca la escala de grises. Tendrás Tendrás que modificar sus diámetros. También draw_fractal(r/2);
que ajustar también el tamaño de la ventana. sería recomendable modificar el tamaño de la

void setup(){
pushMatrix();
ventana para que las elipses se ajusten mejor y
42 En el ejemplo Elipses_color_for_anidados se ha // Repite el proceso trasladando rombos izquierda
el color de fondo no predomine. pushMatrix();
dejado, a propósito, una separación en el eje y dis-
tinta de la del ejemplo anterior, Elipses_color_for. 44 ¿Cómo harías para que el tamaño de las elipses translate(-r/4,0);
Haz las modificaciones necesarias para que el re- y su separación se ajustaran a las dimensiones draw_fractal(r/2);
sultado obtenido sea igual al de Elipses_color_for. de la ventana? pushMatrix();
}

28 29
size(600,400);
smooth();
noStroke(); // Figuras sin borde
} // Fin setup()
void draw(){
for(int j=0;j<4;j=j+1){
for(int i=0;i<5;i=i+1){
if(j==0){fill(255/(i+1));}
else if(j==1){fill(255/(i+1),0,0);} // Aprovecho i para el degradado de color
else if(j==2){fill(0,255/(i+1),0);}
else if(j==3){fill(0,0,255/(i+1));}
ellipse((i+1)*100,j*100+50,70,70); // dibujamos las elipses
} // Fin for interno. Controla coordenada x
} // Fin for externo. Controla coordenada y
} // Fin draw()

42 Una posible solución es:

void setup(){
size(600,300);
smooth();
noStroke(); // Figuras sin borde
} // Fin setup()
void draw(){
for(int j=0;j<3;j=j+1){
for(int i=0;i<5;i=i+1){
if(j==0){fill(255/(i+1),0,0);} // Aprovecho i para el degradado de color
else if(j==1){fill(0,255/(i+1),0);}
else if(j==2){fill(0,0,255/(i+1));}
ellipse((i+1)*100,j*100+50,70,70); // dibujamos las elipses
} // Fin for interno. Controla coordenada x
} // Fin for externo. Controla coordenada y
} // Fin draw()

16