ESO

Robótica
SERIE INNOVA
2
El libro Robótica, para el segundo curso de ESO, es una obra colectiva
concebida, diseñada y creada en el Departamento de Ediciones Educativas
de Santillana Educación, S. L., dirigido por Teresa Grence Ruiz.

En su elaboración ha participado el siguiente equipo:

Raúl M.ª Carreras Soriano
Carlos Lamparero García
Laura Muñoz Ceballos
Gabriel Prieto Renieblas
David Sánchez Gómez

EDICIÓN
Raúl M.ª Carreras Soriano
Laura Muñoz Ceballos

EDITOR EJECUTIVO
David Sánchez Gómez

DIRECCIÓN DEL PROYECTO

Antonio Brandi Fernández

Las actividades de este libro no deben ser realizadas en ningún caso

en el propio libro. Las tablas, esquemas y otros recursos que se incluyen
son modelos para que el alumnado los traslade a su cuaderno.
Índice

1. Lenguajes de programación.................................................. 6
1. Lenguajes de programación.......................................................... 8
2. Diagramas de flujo........................................................................ 9
3. Scratch.......................................................................................... 10
Proyecto. Crea un videojuego completo.......................................... 32

2. Programación......................................................................... 36
1. Lenguajes de programación. Processing...................................... 38
2. Dibujar con Processing................................................................. 40
3. Variables y funciones.................................................................... 46
4. Repeticiones y bucles................................................................... 48
5. El color en una pantalla de ordenador......................................... 49
6. Eventos de ratón y teclado........................................................... 56
7. Trabajo con imágenes................................................................... 62
8. Trabajo con tablas de datos. Arrays.............................................. 64
Proyecto. Programa un editor de imágenes..................................... 68

3. Control de circuitos electrónicos.......................................... 72

1. Un mundo digital........................................................................... 74
2. Funciones lógicas.......................................................................... 76
3. ¿Qué es Arduino? Computación física.......................................... 78
4. El software de Arduino................................................................. 80
5. Salidas digitales............................................................................. 83
6. Sonidos.......................................................................................... 89
7. Entradas digitales.......................................................................... 92
Proyecto. Construye un reloj digital................................................. 102

4. Sensores................................................................................. 106
1. ¿Qué son los sensores?................................................................ 108
2. Sensores de luz............................................................................. 110
3. Sensores de infrarrojos................................................................. 116
4. Sensores de posición.................................................................... 120
5. Sensores de temperatura............................................................. 121
6. Sensores de sonido....................................................................... 125
7. Sensores de proximidad............................................................... 128
8. Sensores de distancia. Ultrasonidos............................................. 130
Proyecto. Construye un sensor para medir el nivel de un depósito. 134

2
 5. Control automático y robótica.............................................. 138
1. Máquinas automáticas y sistemas de control.............................. 140
2. ¿Qué es un robot?......................................................................... 141
3. Motores de corriente continua, DC.............................................. 142
4. Servomotores o servos................................................................. 148
5. Relés.............................................................................................. 151
6. Señales periódicas........................................................................ 153
Proyecto. Construye un robot siguelíneas....................................... 158

6. Proyecto: el radar.................................................................. 162

1. Definición del problema y búsqueda de ideas............................. 164
2. Análisis de las posibles soluciones............................................... 165
3. Diseño del radar............................................................................ 166
4. Planificación de la construcción del radar.................................... 167
5. Diseño 3D con OpenSCAD............................................................ 169
6. Diseño 3D del radar...................................................................... 173
7. Impresión 3D................................................................................. 177
8. Programación del radar con Arduino............................................ 181
9. Programación del radar en Processing......................................... 184
10. Montaje del radar y comprobación............................................... 188

7. Proyecto: robot de concurso................................................. 192

1. Definición del problema y búsqueda de ideas............................. 194
2. Análisis de soluciones para el proyecto....................................... 195
3. Planificación.................................................................................. 198
4. Diseño de los elementos en 3D.................................................... 200
5. Recursos necesarios para construir el robot................................ 209
6. Montaje......................................................................................... 210
7. Conexiones y programación de los motores................................ 211
8. Conexiones y programación de los sensores............................... 213
9. Conexiones y programación del pulsador.................................... 217
10. Programación del robot................................................................ 218

8. Proyecto: conectando con el mundo.................................... 222

1. Definición del problema y búsqueda de ideas............................. 224
2. Análisis de las posibles soluciones............................................... 226
3. Material necesario para el proyecto............................................. 228
4. Planificación del proyecto............................................................. 229
5. Sensores de temperatura. Programación y montaje................... 230
6. Shield Ethernet. Montaje y configuración..................................... 232
7. Recibir y publicar datos con ThingSpeak...................................... 234
8. La conexión de Arduino con el mundo......................................... 239

ANEXO
Referencia para programar en el IDE de Arduino............................. 244

3
 Te encantará SABER HACER CONTIGO porque:

1 Doble página de introducción a la unidad

La introducción a cada
unidad se presenta
Se incluye teoría a partir de
(SABER) y prácticas una pregunta.
o procedimientos
(SABER HACER).

La doble página inicial Una o varias actividades

presenta de manera activan los conceptos
gráfica una aplicación previos de los
de los contenidos de estudiantes relacionados
la unidad y que usamos con la unidad.
prácticamente a diario.

Varias actividades sirven

para afianzar los contenidos
presentados gráficamente.

2 Páginas de desarrollo de los contenidos

Los contenidos Cuando es necesario,

y definiciones esenciales se incluyen capturas
aparecen destacados con de pantalla y otras
un fondo de color. imágenes que ilustran
los procedimientos
paso a paso.

El apartado Presta atención

recoge contenidos
esenciales para el estudio
de la unidad.

Incluye contenidos de otros El apartado Saber más

cursos o estudiados incluye contenidos de especial
en unidades anteriores relevancia, aunque no son
en el apartado Recuerda. esenciales para el desarrollo
de la unidad.

Los apartados Saber hacer

muestran procedimientos
sencillos que deben Se incluyen actividades
dominarse para asimilar los a pie de página para reforzar
contenidos de cada unidad. el aprendizaje.

4
3 Trabajo de las competencias

Incluye trabajo específico de

Se incluyen documentos
las competencias, poniendo
y actividades que
énfasis en la competencia
fomentan la reflexión
matemática, científica
del estudiante, que debe
y tecnológica.
interrelacionar
los contenidos de la unidad
Tras presentar información con sus opiniones propias.
con diferente estructura
(texto, tablas, gráficos…), se
incluyen actividades sobre
la información presentada.

4 Proyecto

Indica qué materiales se Competencias

emplean para el proyecto
A lo largo del libro, diferentes
o el software que se utiliza.
iconos señalan e identifican
la competencia concreta
que se trabaja en cada
Para el desarrollo actividad o apartado.
del proyecto:  Competencia matemática,
S
 e detallan los materiales científica y tecnológica
y herramientas que se
  Comunicación lingüística
necesitan.
  Competencia social y cívica
 ay esquemas
H
e instrucciones   Competencia digital
para el desarrollo.  Conciencia y expresión
L as imágenes muestran artística
el proceso paso a paso.   Aprender a aprender
  Iniciativa y emprendimiento

5
 2 Programación
SABER

• Lenguajes de programación.
Processing.
• Dibujar con Processing.
• Variables y funciones.
• Repeticiones y bucles.
• El color.
• Eventos de ratón y teclado.
• Trabajo con imágenes.
• Trabajo con tablas de datos. Arrays.

SABER HACER

• Desarrollar programas con

un lenguaje de programación textual.
• Programar un editor de imágenes.

Los animales voladores y otras criaturas

fantásticas se programan diseñando
polígonos que forman una malla sobre
la que luego se «acoplan» la piel, las alas…
El movimiento de figuras
humanas emplea la técnica
denominada «captura
de movimientos». El actor
se mueve con una serie
de sensores incorporados
que trasladan la información
a un ordenador, para integrar
luego al actor en la escena.

La técnica del croma, el uso

de fondos verdes, permite cambiar
el paisaje de fondo sobre el que
aparecerá el actor en la escena final.

36
 NOS HACEMOS PREGUNTAS.
¿Cómo se producen escenas «imposibles» en el cine?
Ya sea en el ámbito de la animación infantil, de las películas de terror, de acción
o de ciencia ficción, el ordenador lleva unos años desempeñando un papel clave.
Paisajes de otros mundos, juguetes que hablan y gesticulan, transformaciones
«mágicas» o creación de seres imaginarios son algunos ejemplos.

En muchos paisajes
«fantásticos» se usan
como base imágenes
de paisajes reales.

El rodaje de películas en alta

definición añade dificultad,
pues cada escena ocupa El escáner en 3D permite digitalizar
decenas y decenas de gigabytes. la información de objetos reales
con el fin de introducirlos luego
en escenas generadas por ordenador.
Muchos paisajes se crean mediante
software 3D capaz de incluir fuentes
de luz, texturas variadas e incluso se
simula la gravedad para que la caída
de las ramas de los árboles sea más o
menos acusada.

? INTERPRETA LA IMAGEN CLAVES PARA EMPEZAR

• ¿Qué elementos de la imagen te parecen generados mediante • ¿Qué es el software de dibujo en 3D?
ordenador? ¿Crees que las películas que emplean escenas ¿Cómo pueden generarse dibujos en 3D?
generadas mediante ordenador son más fáciles • Opina. Hay quien dice que
de desarrollar? ¿Por qué? la introducción del ordenador en el cine
• ¿Qué ventajas añade la técnica de captura de movimiento ha tenido consecuencias negativas.
frente a la generación completa de imágenes mediante ¿Qué te parece a ti?
el ordenador?

37
 1 Lenguajes de programación. Processing

Processing es un lenguaje de programación de código abierto. Se uti-

RECUERDA
liza como herramienta para la enseñanza de programación en proyectos
multimedia. Sin embargo, es tan potente que también se usa para crear
Un lenguaje de programación
programas multimedia profesionales. Su estructura se basa en otro len-
es un conjunto de instrucciones
guaje de programación: Java. De hecho, la estructura de las sentencias,
que permite elaborar
funciones y estilo de programación de Processing son muy similares
programas.
a los de Java.
Los programas permiten
ejecutar diferentes tareas con A diferencia de otros lenguajes de programación, Processing no nece-
la ayuda de un ordenador, sita conexión a internet y tampoco se desarrolla en los servidores web
una tableta o un teléfono móvil: de sus creadores. Para trabajar con él basta instalarlo en un dispositivo
dibujar, visualizar páginas web, local, en un disco.
escribir textos, jugar...
Processing funciona en sistemas operativos Windows, Linux y Macintosh,
y es portable en memorias USB. Esto significa que puedes llevar tu Pro-
cessing en una memoria USB y usarlo en el ordenador que desees sin
necesidad de instalarlo, simplemente ejecutándolo desde la memoria USB.

  SABER HACER

1.  Instalar Processing en un ordenador

Para comenzar a usar Processing: o a algún familiar en tu casa. En este ejemplo se
emplea Windows de 64 bits.
1. Accede a la página de Processing Foundation
en esta dirección de internet:
https://processing.org

2. Se mostrará la siguiente pantalla. Haz clic

en la opción Download Processing.

4. Una vez marcada la opción elegida, comenzará

la descarga. En nuestro ejemplo, el fichero que se
3. Se mostrará una pantalla donde debes seleccionar descarga ocupa 130 MB.
tu sistema operativo, e indicar si este sistema
5. En la siguiente pantalla puedes hacer o no
operativo es de 64 bits o de 32 bits.
una donación.

PRESTA  ATENCIÓN 6. Al finalizar el proceso de descarga se habrá guardado

un fichero comprimido, con extensión .zip. Si haces
clic sobre él, verás que existe una única carpeta con
En Windows puedes averiguar si el sistema
el nombre de «processing» y el número de versión,
operativo es de 32 o 64 bits en Configuración F
similar a la siguiente pantalla:
Sistema F Acerca de. Aparece una pantalla que
lo indica.

Si desconoces el número de bits de tu sistema 7. Extrae la carpeta processing-XXXXX a la carpeta

operativo, pregunta al docente en el colegio donde quieres que se ejecute.

38
 Programación  2

¿Dónde instalar la carpeta de Processing?

Puedes instalarla donde quieras, incluso en una memoria USB, pero si
lo instalas en una memoria USB el acceso será mucho más lento que
si lo haces en un disco duro. No necesitas que esté en el disco C. Puedes
guardarlo en cualquier carpeta.
En nuestro ejemplo, al descomprimir el archivo zip se crea una carpeta
llamada processing-3.5.4. Dentro de ella verás las carpetas y archivos G
que muestra la imagen.

La pantalla de desarrollo de Processing

Si haces clic en processing.exe, aparecerá la pantalla de desarrollo de
Processing, donde crearás tus propios sketches o programas.

Menú principal

Run. Ejecuta el programa. Abre una nueva ventana, la ventana de dibujo.

Stop. Detiene la ejecución del programa.

Java. Modo de ejecución. Puede crear programas Java para

ordenadores o Android para teléfonos móviles y tabletas.

Consola. Muestra errores del programa. También puede

mostrar mensajes desde nuestro programa con las funciones
print() y println(), que escriben en esta zona.

Depurador. Activa el modo de depuración de errores paso

a paso.

SABER MÁS

Convertir un programa en portable

Al seleccionar Archivo F Exportar aplicación… en el menú aparece la ventana siguiente:

Si se marca Pantalla completa, Sistema operativo en el que

el programa ocupará toda se va a usar el programa.
la pantalla al ejecutarse.

Al hacer clic sobre la opción Para ejecutarse, Processing necesita que

Exportar, Processing crea una Java esté instalado. Si se marca esta
carpeta con las subcarpetas opción, Processing crea un programa
y ficheros indicados en la imagen. que incluye Java, para permitir ejecutarlo
incluso en ordenadores donde Java
no esté instalado. El problema es que
entonces genera archivos ejecutables
mayores de 100 MB.

39
 2 Dibujar con Processing

  SABER HACER

2.  Dibujar objetos 3. Aparece una nueva ventana.

Esta es la ventana de dibujo
Processing es un lenguaje especializado en crear de Processing, donde ha
y manejar figuras e imágenes. Aquí conocerás el espacio aparecido un punto de color
donde Processing las dibuja y las presenta. negro justo en el centro de
la ventana. El punto negro
Sentencias y sintaxis
es el que has creado
Las líneas de código de un lenguaje de programación con la sentencia
se denominan sentencias. Observa este programa. point (50,50).
size (100,100); Existen varias sentencias que controlan la ventana
point (50,50); de dibujo. La principal es size().
size (x,y);: crea una nueva ventana de dibujo
Está compuesto de dos líneas de código o sentencias.
cuyo ancho es de x píxeles por un alto de y píxeles.
Recuerda que todas las sentencias en Processing
Por ejemplo, ejecuta esta sentencia:
deben terminar con un punto y coma «;».
size (400,300);
PRESTA  ATENCIÓN Te debe aparecer una pantalla de 400 píxeles
de ancho y de 300 de alto en color gris claro.

Es extremadamente importante la forma Coordenadas en la ventana de dibujo

de escribir una sentencia, su sintaxis. Debes
respetar las mayúsculas y minúsculas en las En la ventana de dibujo de Processing, cada punto ocupa
sentencias: SIZE no es lo mismo que size. una coordenada cartesiana, es decir, todo punto
De hecho, SIZE no es nada en Processing, se determina por unas coordenadas (x, y ).
y utilizar dicha sentencia te producirá un error • El origen de coordenadas en la ventana de dibujo es
al ejecutar el programa. la esquina superior izquierda.
Todos los ejemplos de este libro se deben • Las coordenadas x crecen hacia la derecha,
transcribir tal y como aparecen al editor de y las coordenadas y, hacia abajo.
Processing. Existe una excepción, que son Por ejemplo, observa la ventana que hemos dibujado
los espacios en blanco: Processing los salta, con la sentencia size (400,300). Todas
de forma que, por ejemplo, point(50,50); las coordenadas y distancias en Processing
produce el mismo resultado que la sentencia se miden en píxeles.
point ( 50, 50);.

La ventana de dibujo de Processing Coordenada (200, 0)

x 5 200 e y 5 0
1. Escribe en el editor la siguiente sentencia,
exactamente como se muestra en esta línea: Coordenada (0, 0)
x50ey50
point (50, 50);
2. Ejecuta el programa haciendo clic en el icono Run. Coordenada (0, 150)
x 5 0 e y 5 150

Coordenada (400, 300)

x 5 400 e y 5 300

40
 Programación  2

  SABER HACER

3.  Dibujar formas geométricas simples

Processing es un lenguaje basado en un entorno visual 4. Ejecuta el programa.
en el que existen muchas formas de dibujar objetos.
5. Emergerá la siguiente
Ahora aprenderás a dibujar puntos y líneas desde
ventana:
tu propio programa.
Líneas
Puntos
Para dibujar una línea recta
1. Para dibujar un punto utiliza la sentencia point().
usa esta sentencia:
point(x,y); line (x1, y1, x2, y2);
Esta sentencia dibuja un punto con un píxel de
• x 1 e y 1 determinan el punto
diámetro en las coordenadas indicadas por x e y.
donde comienza la línea.
• x 2 e y 2 determinan dónde acaba la línea.
PRESTA  ATENCIÓN
1. Crea una ventana de 250 3 250 píxeles.
Comentarios 2. Traza una línea que comience en (120, 120) y termine
Es importantísimo añadir comentarios a cualquier programa. en (180, 180). Necesitarás un código similar a este:
Los comentarios son líneas de texto que explican lo que
hace una sentencia o un conjunto de sentencias size (250,250); //Ventana de 250x250 píxeles.
especialmente importantes, complejas o críticas. Facilita que line (120,120, 180,180); //Dibuja la línea.
otra persona pueda leer el programa y entender por qué se
usó determinada sentencia en vez de otra equivalente. 3. Ejecuta el programa.
También ayuda a recordar la razón por la que se utilizaron
algunas sentencias y hace más fácil modificar el programa. 4. Deberías obtener una ventana similar a esta:
Un programa siempre debe estar comentado.
Processing usa dos formas de comentar:
• Con dos barras //. Con este sistema, todo lo que va
a continuación de las barras y está en la misma línea será
considerado por Processing como un comentario
y no tratará de ejecutarlo.
• Con barra y asterisco /* y cerrando con asterisco
y barra */. Todo lo que esté entre esas dos parejas
de símbolos será un comentario para Processing.

2. Escribe un comentario tras la sentencia.

size (200,200);
//Crea ventana de 200x200 píxeles. ACTIVIDADES
3. Por ejemplo, crea una ventana de 200 3 200 píxeles
7 Realiza el circuito lógico para el siguiente
y dibuja puntos en las coordenadas (50, 50), (75, 75),
ACTIVIDADES
caso. Una cinta transportadora se puede
(100, 100) y (125, 125). Para ello deberás escribir
poner en marcha desde dos sitios,
el siguiente programa en Processing: 1 Dibuja una línea
interruptor A o elque
B. Además, la carga no
vaya
debe desde
superarel el
centro
máximo permitido que se
/* Ahora a continuación vamos a dibujar de una ventana de un sensor de peso que
detectará mediante
una serie de puntos que aparecerán como 200activará
3 200 aa la esquina se supere este
se 1 cuando
puntos negros en una diagonal sobre superior izquierda.
fondo gris claro.*/ máximo.
point (50,50); 2 Repite la actividad
8 Utiliza un software de simulación, como
point (75,75);
anterior consimular
Yenka, para todas el funcionamiento del
point (100,100);
las esquinas.
circuito lógico anterior.
point (125,125);

41
   SABER HACER

4.  Dibujar triángulos y cuadriláteros

Cualquier objeto simple puede dibujarse con puntos Dibujar un cuadrilátero
y líneas. Sin embargo, sería un proceso arduo y necesitarías
Se usa esta sentencia:
muchas sentencias para dibujar, por ejemplo, un triángulo
o un cuadrado. quad (x1, y1, x2, y2, x3, y3, x4, y4);
Cada par de coordenadas x, y representa uno de los cuatro
Dibujar un triángulo vértices del cuadrilátero. Permite dibujar cualquier
Para ello puedes usar la sentencia: cuadrilátero, cóncavo o convexo.
triangle (x1, y1, x2, y2, x3, y3); 1. Crea una ventana de 200 3 200 píxeles.
Cada par de coordenadas x, y representa uno de los tres size (200,200);
vértices del triángulo.
2. Crea un cuadrado dentro de la ventana.
1. Crea una ventana de 200 3 200 píxeles: quad (10,10, 120,10, 120,120, 10,120);
size (200,200);
3. Ejecuta el programa
//Crea ventana de 200 × 200 píxeles.
y comprueba que
2. Crea un triángulo rectángulo dentro de la ventana: crea una figura como
triangle (20,20, 20,120, 120,20); la siguiente:
//Crea un triángulo.
3. Ejecuta el programa.
Aparecerá una
ventana como esta:

PRESTA  ATENCIÓN

El orden en que aparecen las coordenadas dentro

de la sentencia quad es muy importante. Processing va
trazando una línea desde las coordenadas x 1, y 1 hasta x 2,
PRESTA  ATENCIÓN y 2, y así sucesivamente. Si intercambias las coordenadas,
como en el siguiente programa, la figura cambia:
La consola como control de errores size (200,200);
//Crea una ventana de 200x200 píxeles.
Escribe las siguientes sentencias. Observa que
quad (10,10,120,120,10,120,120,10);
en la última sentencia se ha escrito triange.
//Crea una “X”.
size (300,300);
triange (20,20,20,120,120,20); El programa da lugar
a la siguiente figura:
Aparecerá el siguiente mensaje en la consola:

Al ejecutar, se resalta en amarillo la línea de

programa donde se ha producido el error.

ACTIVIDADES
Indica cuál es 3 Dibuja esta figura
el error usando sentencias
triangle().
4 Dibuja un rombo
con una sentencia
quad().

42
 Programación  2

  SABER HACER

5.  Dibujar rectángulos y elipses

Ahora vas a aprender a dibujar en Processing otras 3. Ejecuta el programa. Como resultado aparecerá
dos formas sencillas: rectángulos y elipses. Para dibujar una ventana con aspecto similar a esta:
cuadriláteros y triángulos determinabas todos los vértices
de la figura. Ahora la estructura de las sentencias
es distinta, ya que en ellas aparecen la posición
y las dimensiones de las figuras en lugar
de las coordenadas de sus vértices.

Rectángulos
Para dibujar un rectángulo se utiliza la función rect():
rect(x, y, ancho, alto, radio);
• x e y son las coordenadas de la esquina superior
izquierda del rectángulo.
• ancho y alto son las dimensiones correspondientes
del rectángulo.
• radio es un parámetro opcional (si no quieres usarlo, ACTIVIDADES
puedes dejarlo en blanco) que permite dibujar
rectángulos con esquinas redondeadas, donde radio 5 Utiliza lo que acabas de aprender y dibuja
sería el radio de la circunferencia que redondearía la siguiente figura en Processing.
la esquina.

1. Crea una ventana de 200 3 200 píxeles.

size (200,200); //Ventana de 200x200.
2. Dibuja un rectángulo de 100 3 60 con la esquina
superior izquierda en el punto (10,10):
rect(10,10, 100,60); //Rectángulo.
3. Ejecuta el programa. El resultado será similar a:

Sugerencia: es una circunferencia, es decir,

una elipse que tiene las mismas
dimensiones de ancho y alto.

6 Dibuja la siguiente figura. Ten en cuenta que

es un rectángulo cuyas esquinas se han
Elipses redondeado con un radio de 20 píxeles.
Para dibujar una elipse se utiliza la función ellipse():
ellipse(x, y, ancho, alto);
• x e y son las coordenadas del centro de la elipse.
• ancho y alto son las dimensiones correspondientes
de la elipse.

1. Crea una ventana de 200 3 200 píxeles.

size (200,200); //Ventana de 200x200.
2. Dibuja una elipse de 100 3 60 con el centro
en el punto (100,100):
ellipse(100,100, 100,60); //Elipse.

43
   SABER HACER

6.  Elegir el color de la ventana: grises

En los ejemplos anteriores has visto que el fondo de la ventana era siempre de un color gris claro,
las líneas o puntos eran negros, y el interior de las figuras, blanco. Estos valores de color que ves
en la pantalla son distintas tonalidades de gris.
Ahora aprenderás a fijar el valor de gris de cada uno de los elementos que aparecen
en la ventana de dibujo.

Nivel de gris de la ventana de dibujo

Processing puede dibujar 256 niveles de gris distintos: Ahora practica con esto:
• 0: corresponde al negro puro.
1. Crea una ventana de 200 3 200 píxeles.
• 255: corresponde al blanco puro.
El valor que has visto como color de fondo en los ejemplos 2. Ajusta un nivel de gris de 0, 128 y 255,
en las páginas anteriores era 204, un gris claro. respectivamente.

Para establecer el nivel de gris de la ventana de dibujo 3. Ejecuta los programas. Observarás ventanas como
se usa esta sentencia: las de abajo.
background(n);
n es el valor de gris que quieres asignar al fondo
de la ventana.

background(0); background(128); background(255);

size (200, 200); size (200, 200); size (200, 200);

Niveles de gris de las figuras

Las figuras se dibujan por defecto con un fondo de color

blanco, mientras que las líneas de contorno se dibujan
de color negro. PRESTA  ATENCIÓN
Estos valores se pueden cambiar con las siguientes
Sentencias y funciones
funciones:
Cualquier sentencia en Processing que se escriba
fill(n); : determina el valor del nivel de gris
•  
a continuación con un paréntesis recibe
de relleno de las figuras, determinado por el valor de n.
el nombre de función.
Por defecto es blanco (255).
Por ejemplo, son funciones:
stroke(n); : determina el valor del nivel de gris
•  
de las líneas de contorno de las figuras, determinado •  rect()
por el valor de n. Por defecto es 0 (negro). •  size()
En estas dos funciones n puede tomar valores •  background()
entre 0 y 255.

44
 Programación  2

En el ejemplo siguiente podemos ver variaciones en los valores de borde y relleno de una circunferencia.

1. Crea una ventana de 240 3 240. 9. La figura resultante será similar a:

size (240, 240);
2. Dibuja una elipse de fondo blanco y contorno negro.
ellipse (75,75,60,60);
/*Circunferencia superior izquierda.
Al tener los valores por defecto,
el relleno es blanco y el contorno,
negro.*/
3. Oscurece el relleno.
fill(195);
//Vamos oscureciendo el relleno.
4. Aclara el borde.
stroke (90); //Aclaramos el borde. TRUCO
5. Dibuja otra circunferencia. Como ves, fill() y stroke() determinan los valores
ellipse (150,75,60,60); de relleno y contorno antes de dibujar la figura.
//Circunferencia superior derecha.
fill(120);
stroke (200); Transparencia

6. Dibuja otra circunferencia. Se puede fijar un parámetro adicional a fill()

ellipse (75,150,60,60); y a stroke(), que determina el nivel de transparencia
//Circunferencia inferior izquierda. de las figuras.
fill(60); Su sintaxis es:
stroke (255); fill(n, t);  stroke(n, t);
7. Dibuja otra circunferencia. El parámetro t determina la transparencia de la figura:

ellipse (150,150,60,60); • 0: totalmente transparente.

//Circunferencia inferior derecha. • 255: completamente opaco.
El valor tomado por defecto, si no se usa el parámetro, es 255.
8. Ejecuta el programa completo. Sería similar a:

ellipse (75,75,60,60);
/*Circunferencia superior izquierda. Al ACTIVIDADES
tener los valores por defecto, el relleno
es blanco y el contorno, negro.*/ 7 Dibuja la siguiente figura:
fill(195);
//Vamos oscureciendo el relleno.
stroke (90);
//Vamos aclarando el borde.
ellipse (150,75,60,60);
//Circunferencia superior derecha.
fill(120);
stroke (200);
ellipse (75,150,60,60);
//Circunferencia inferior izquierda.
fill(60);
stroke (255);
ellipse (150,150,60,60);
//Circunferencia inferior derecha.

45
 3 Variables y funciones

  SABER HACER PRESTA  ATENCIÓN

7.  Trabajar con variables Processing es un lenguaje desarrollado en EE. UU.,

y usa el punto «.» para asignar decimales.
Aquí vas a aprender a trabajar con uno de los elementos Para escribir 12 con 24 centésimas: 12.24.
más potentes de un lenguaje de programación:
las variables.
• Caracteres.
Una variable es una porción de memoria reservada
• Números de cualquier tipo, etc.
por el programa en el que se almacenan los datos.
Los datos pueden ser: Todo ello se puede almacenar en una variable.
Dependiendo del tipo de datos que se almacenan
• Posiciones del puntero del ratón.
en una variable, decimos que es de un tipo o de otro.
• Listas.
Los principales tipos de variables con las que vamos a
• Frases. trabajar en Processing son:

Tipo Cómo se declaran Descripción

Boolean boolean Son variables que solo pueden tomar dos valores: true o false, verdadero o falso.

Integer int Son números enteros, es decir, sin decimales.

Float float Son números que pueden tener decimales.

String String Es una cadena de caracteres. Por ejemplo, una frase como «Había dos gatos jugando en el jardín».

Color color Es el color que puede adoptar un píxel.

Las variables deben crearse antes de usarse en 2. Ejecútalo. El programa mostrará una ventana
un programa. Esto se llama «declarar la variable». de dibujo de 200 píxeles de ancho y 100 de alto.
Escribe y ejecuta este programa en Processing. 3. Ahora elimina la primera línea (int ancho;)
y vuelve a ejecutarlo.
int ancho;
ancho=200; 4. Aparecerá el siguiente mensaje en la consola:
int alto; Cannot find anything named “ancho”.
alto=100; Ese mensaje de error indica que no encuentra nada
size(ancho, alto); con el nombre «ancho», pues no has definido
previamente qué era la variable ancho (no la has
«declarado»), y para Processing es algo desconocido.
Asignación de valores a las variables

Observa que en el anterior programa se ha asignado

un valor a alto y a ancho mediante el operador «=», ACTIVIDADES
que asigna el valor que aparece tras él a la variable situada
antes que él. Por ejemplo: ancho=200; asigna el valor 8 En este programa encontrarás otras formas
200 a ancho, y alto=100; asigna el valor 100 a alto. de asignar valores. Cópialo y ejecútalo
en Processing. Si aparece una ventana
También puedes asignar un valor a una variable
de 200 3 100, has escrito bien todas las sentencias.
en el momento de crearla.

1. Copia el programa siguiente en Processing. En él int ancho = 200;

le das un valor a las variables al crearlas. int alto = 100;
boolean valor = true;
int ancho=200; boolean salida = false;
int alto=100; float numero_grande = 12.34789;
size(ancho, alto); String frase = “buenos días”;
size(ancho, alto);

46
 Programación  2

La consola como pantalla de salida

ACTIVIDADES
La consola, además de informarnos de errores, puede presentar cade-
nas de caracteres y números. 9 Programa y prueba en Processing
el siguiente conjunto de instrucciones.
• La sentencia print():
Luego observa la salida en la consola.
– print(a); escribe lo que almacena la variable a.
– print(182); escribe el número 182. println (“Esta es la nueva línea”);
– print(“Esto es una frase”); escribe literalmente Esto es String a = “Esto es una prueba”;
println(a);
una frase en la consola.
int b=142;
print() escribe el mensaje y deja el cursor en la misma línea. println(b);
boolean c=true;
• La sentencia println() funciona igual que print(), pero, al ter-
println(c);
minar de escribir, salta de línea, de forma que el siguiente mensaje float d=14.28;
de la consola aparecerá en la línea siguiente. println(d);

10 Programa y prueba en Processing

los ejemplos de la tabla de abajo
Escribe Hola, y comprueba que los resultados son
mundo y deja los mismos que los indicados.
el cursor en la
misma línea.

Escribe cinco puntos a continuación

de la anterior frase.

Escribe Al final cambio de línea

y el cursor salta a la siguiente línea.

Escribe Esta es la nueva línea

en una línea diferente.

Salida de la consola.

Trabajar con funciones aritméticas. Operaciones aritméticas

más usuales
Processing tiene incluidas las funciones aritméticas básicas (suma, res-
ta, producto, división) y alguna otra.

Salida por
Operación Símbolo Ejemplo Comentarios
consola

Suma 1 int a542; int b521; int c5a1b; print (c); 63

Resta 2 int a520; int b542; int c5a2b; print (c); 222

Si prevés que puede haber decimales

División / float a510; float b54; float c5a/b; print (c); 2.5
en una operación, usa tipos float.

Producto * int a512; int b520; int c5a*b; print (c); 240

Incremento 11 int a524; a11; print(a); 25 Aumenta en 11 el valor de a.

Decremento 22 int a511; a22; print(a); 10 Disminuye en 21 el valor de a.

Se pueden anidar funciones:

Mínimo min int a522; int b512; int c514; print(min(a,b,c)); 12 print(min(a,b,c))
muestra el mínimo de los tres números.

Máximo max int a522; int b512; int c514; print(max(a,b,c)); 22

47
 4 Repeticiones y bucles

  SABER HACER

8.  Trabajar con repeticiones: el bucle for()

Una de las ventajas de los ordenadores es que pueden (por ejemplo, la luz) o para programas de diseño gráfico
repetir instrucciones a gran velocidad. Esta repetición es en los que una figura se repite muchas veces con ligeras
muy interesante para realizar programas en robótica en variaciones. Todo ello se puede realizar con distintas
los que tienes que medir ciertas variables continuamente instrucciones de Processing.

El bucle for()

Iniciador: el bucle for() está controlado Condición: el bucle for() se ejecutará una y otra vez
por una variable, normalmente de tipo int. Se debe siempre que se cumpla esta condición. Controla el número
iniciar la variable en este lugar de la sentencia. de veces que se repetirá el bucle.

for ( i=1 ; i<10; i++) {

sentencias;
}
Llaves: el bucle for() abre unas llaves {}. Todas Actualización: varía el índice de control. Cada vez que
las sentencias que se encuentren dentro de estas llaves se ejecute el bucle, i se incrementa en 11. Controla el número
se ejecutarán cada vez que se repita el bucle. Cada de veces que se realizará la repetición. Como el bucle se repite
repetición de un bucle recibe el nombre de iteración. siempre que i sea menor que 10 e incrementamos i de 1 en 1,
En nuestro ejemplo, el bucle se itera 9 veces. este bucle se repetirá 9 veces (al inicio i=1).

Ahora dibuja varios círculos concéntricos. 7. Cierra la llave correspondiente al bucle: };.

1. Crea una ventana de 400 3 400. 8. Copia el código completo

size(400, 400); en Processing y ejecútalo.
Aparecerá una ventana
2. Define las variables enteras necesarias: con una figura similar
int i, a; 
//Crea los enteros i, a. a esta:

3. Asigna a la variable a el valor inicial 0.

a=0; //El valor inicial de a es 0.
4. Comienza a aplicar el bucle:
for (i=1; i<10; i++){
//Secuencia de control del bucle for().
5. Dibuja una elipse. Como incluye la variable a,
el círculo se modifica en cada paso. Aquí se dibuja ACTIVIDADES
un círculo cada vez más pequeño.
11 Modifica el anterior programa y dibuja una figura
ellipse (200, 200, 380–a, 380–a);
//Cada vez que se ejecute el bucle, con más circunferencias.
//se dibuja un círculo más pequeño.
12 Modifica el anterior
6. Aumenta el valor de a para que los círculos sean programa y dibuja
cada vez más pequeños. la siguiente figura. ¿Cómo
puedes variar el color
a = a + 20;
del círculo de manera
/*Al aumentar a con cada repetición,
gradual usando un bucle?
los radios son más pequeños.*/

48
 Programación  2

G R B

5 El color en una pantalla de ordenador

En los ejemplos anteriores has visto que el fondo de la ventana era

siempre de un color gris claro, las líneas o puntos eran negros y el inte-
rior de las figuras, blanco. Sin embargo, Processing trabaja con más de
16 millones de colores distintos. Ahora aprenderás a controlar el color
de todos los elementos de tu ventana de dibujo. Luminóforos de un píxel. Las sensaciones
Las pantallas de cualquier dispositivo digital están compuestas por mi- de millones de colores distintos que
llones de puntos de luz, los píxeles. Percibimos los píxeles de distintos producen se deben a diferentes niveles
colores gracias a que están formados por tres emisores diferentes de de R, G y B emitidos por los luminóforos.
Esta forma de síntesis de color
color. Estos emisores se denominan luminóforos, y pueden ser de color
se conoce como color aditivo.
rojo, verde o azul (RGB por sus siglas en inglés).
• La suma del máximo de color de los luminóforos R, G y B produce el
blanco.
• La ausencia de luz en los tres produce el negro.
En Processing las sentencias de control del color son las mismas que
controlan los niveles de grises: background(), fill() y stroke().
La sintaxis de los tres es la misma. Vamos a utilizar background()
como ejemplo. Para asignar un color de fondo hay que programar
la sentencia background (r, g, b);, donde r, g y b son números
con valores entre 0 y 255 y asignan el valor rojo (r), verde (g) y azul (b),
respectivamente, de todos los píxeles de la ventana de dibujo. Modelo aditivo de color RGB.

  SABER HACER

9.  Modificar el color de fondo de la ventana

Vas a aplicar todo esto en sencillos programas.

1. Crea una ventana de 400 3 400.

size (400,400);
2. Completa el programa con la sentencia siguiente:
background (255,0,0);
3. Ejecuta el programa y observa el color de fondo de la ventana de dibujo.

4. Modifica el programa sustituyendo la línea que incluye la sentencia background

por las siguientes líneas (una en cada programa):
A. background (0,255,0);
B. background (0,0,255);
C. background (0,128,128);
5. Ejecuta cada programa
y observa el color de fondo A B C
de la ventana de dibujo
en cada caso.

49
   SABER HACER

10.  Usar el color para rellenos y bordes

Relleno  8. Haz que el relleno sea de color azul.

Si utilizas la sentencia fill(r, g, b), las figuras fill(0,0,255);

que dibujes tendrán el relleno de un color determinado //Relleno azul.
por los niveles RGB dados por el valor de r, g y b.
 9. Elige el color verde para el borde.
Borde stroke (0,255,0);
Si utilizas la sentencia stroke (r, g, b), las figuras
//Borde verde.
que dibujes tendrán un borde del color también
10. Dibuja una elipse en la parte inferior derecha.
determinado por los valores r, g y b.
ellipse (150,150,80,60);
Transparencia //Elipse inferior derecha.
Puedes añadir un cuarto parámetro t que define el nivel 11. Ejecuta el programa. Te deberá aparecer una figura
de transparencia. Su sintaxis es fill(r, g, b, t) similar a esta:
y stroke(r, g, b, t).
• 0: completamente transparente.
• 255: completamente opaco.
Si no escribes nada en ese parámetro, el valor por defecto
es 255.

Practica ahora todo esto:

1. Crea una nueva ventana de 240 3 240.

size (240,240);
2. Dibuja una elipse en la parte superior izquierda
con los colores por defecto para el relleno y el borde.
ellipse (75,75,80,60);
/*Elipse superior izquierda. Al tener Si quisieras añadir un color transparente:
los valores por defecto, el relleno fill(255,0,0,128);
es blanco, y el contorno, negro.*/ //Relleno rojo parcialmente transparente.
3. Ahora selecciona el color rojo para el relleno.
El selector de color
fill(255,0,0);
//Relleno rojo sin transparencias. Processing lleva incluido un selector de color en el que
puedes seleccionar niveles de color muy detallados,
4. Selecciona el color azul para el borde.
más de 16 millones de colores distintos.
stroke (0,0,255);
//Borde azul. 1. Para utilizarlo selecciona la opción de menú Tools
y, dentro de esta ventana, Color Selector. Observa.
5. Dibuja otra elipse en la parte superior derecha.
ellipse (150,75,60,80);
//Elipse superior derecha.
6. Añade un borde rojo.
stroke (255,0,0);
//Borde rojo.
7. Completa otra elipse en la parte inferior izquierda.
ellipse (75,150,60,80);
//Elipse inferior izquierda.

50
 Programación  2

2. Selecciona el color deseado:

Paleta de color general.

Aquí escoges el tono general
del color que quieras:
magentas, azules, rojos, etc.

Panel numérico. Una vez

Paleta de color
señalado el color en la paleta
específica. Dentro
específica, este panel RGB
del color general escogido
indica los valores de R, de G
en la paleta de color
y de B del color señalado.
general, puedes escoger
el matiz que desees.

Copiar el color. Puedes copiar el color deseado en el portapapeles haciendo clic en Copiar. Luego
puedes pegar el valor dentro del paréntesis de cualquier sentencia fill(), stroke() o
background(). Sin embargo, te aparecerá un código hexadecimal (por ejemplo, #D428E8) que no te
dará ninguna indicación intuitiva del color que se está utilizando. Por ejemplo, fill (#D428E8); .

ACTIVIDADES
13 Programa la figura de la derecha. Para ello deberás seguir varios pasos:
1. Dibuja una ventana de 296 3 296 píxeles, ya que vas a pintar líneas
de 256 píxeles y dejar un marco de 20 píxeles.
2. Pon el fondo en color rojo puro. Sugerencia: usa background(r,g,b);
dando valores r, g y b para que aparezca solo el color rojo.
3. Haz una secuencia de líneas que van cambiando de color desde el negro
al verde puro. El procedimiento sería el siguiente:
Repite, empezando por i50, i veces hasta que i valga 255 {
Dibuja una línea vertical con el color (0, 0, i) y desde (X1, Y1)5 (201i, 20)
hasta (X2, Y2)5 (201i, 276) }
a) ¿Por qué se está sumando el valor i a las coordenadas x de la línea?
b) ¿Cuál sería la orden para fijar el color de la línea a una secuencia de i verdes?
c) ¿Cuál sería la orden para pintar una línea desde (X1, Y1) a (X2, Y2)?
d) ¿Qué sentencia usarías para repetir desde i 5 0 hasta i < 256 sumando 1 a i
cada vez que se ejecute la sentencia?
Pista: utiliza las siguientes líneas de código:
1. Crea la ventana con un marco de 20 píxeles alrededor del verde.
2. Pon el fondo de color rojo puro.
3. Define la variable que controla la repetición del for( ).
4. Fija el color de la línea a una secuencia de i verdes.
5. Pinta de arriba abajo y mueve i píxeles la línea hacia la derecha.

14 Programa la figura de la derecha. Fíjate en que las líneas varían desde

el color negro hasta un color azul más claro, de arriba hacia abajo.

51
   SABER HACER

11.  Dibujar sin parar: draw y setup

Todos los programas que has visto hasta ahora interaccionando contigo (por ejemplo, un juego)
ejecutaban las órdenes que habías incluido en ellos hasta que decides terminarlo.
y terminaban. Aquí aprenderás a crear bloques de funcionamiento
Sin embargo, la gran mayoría de los programas que utilizas continuo en Processing mediante la función draw().
en tu vida diaria se ejecutan de forma continua, Y aprenderás a iniciarlos mediante la función setup().

Usar la función draw()

La función draw() es como un bucle for() que repite
continuamente lo que hay dentro de ella. No hay elemento TRUCO
de control como en for(), sino que se repite siempre.
La función delay(x) detiene el programa
Su sintaxis es: durante x milisegundos. Se introduce para
void draw() { que la escritura de los valores de i en la consola
Código que se va a repetir no vaya demasiado rápida. De esta forma
} aparecerá un valor de i cada segundo.

1. Codifica el siguiente programa en Processing.

int i=0; //Valor entero que va 2. Ejecútalo y observa el resultado.

//a ir apareciendo en cada línea. La salida por la consola tendrá un aspecto similar a este:

void draw() { //Función draw().

println(i);
//Escribe el valor de i en la
//consola en una línea y salta de línea.
i++;
//Aumenta el valor de i.
delay (1000);
//Espera 1000 milisegundos, • Cuando se utiliza la función draw(), se dice que
//es decir, un segundo, entre línea
Processing está funcionando en modo dinámico.
//y línea.
} • Cuando no se utiliza, se dice que está funcionando
en modo estático.

ACTIVIDADES
15 Modifica el ejemplo anterior sustituyendo println() por print(). Observa el resultado
en la consola.

16 Modifica el programa anterior comentando la línea en la que aparece delay.

La línea deberá aparecer así:
//delay (1000);
Observa el resultado en la consola. Deberá ser similar a este:

52
 Programación  2

Usar la función setup()

Como has visto, en modo dinámico todas las sentencias  6. Cierra la llave de la función setup.
que están dentro de la función draw() se repiten }
sin parar. Sin embargo, te puede interesar que
determinadas sentencias se ejecuten una sola vez.  7. Utiliza ahora la función draw.
Por ejemplo, si vas a dibujar algo en una ventana de dibujo, void draw() {
te interesa crear la ventana una sola vez y luego pasar //Función draw().
a dibujar con draw().  8. Dibuja líneas horizontales.
Para ello introduce las sentencias que solo se van line (20, 20+i, 380, 20+i);
a ejecutar una vez en una nueva función, setup(). //Dibuja líneas horizontales
Su sintaxis es la siguiente: //de arriba abajo.
void setup() {  9. Ve bajando la posición en la que se dibuja la línea.
//Código que se ejecuta una sola vez
} i++;
//Al aumentar i, vamos bajando
Para practicar codifica el siguiente programa en Processing. //la posición de la línea.
1. Primero define el valor entero. 10. Cierra la llave de la función draw.
int i=0; }
//Valor entero que vamos a usar para 11. Copia el programa completo y ejecútalo.
//mover las líneas.
12. Observa el resultado en la ventana de dibujo.
Ahí obtendrás una línea verde que va bajando
PRESTA  ATENCIÓN y cambiando el fondo rojo a verde.

La variable i está definida fuera de setup().

Esto debe ser así si queremos conocer el valor
de i dentro de la función draw().
Si definimos una variable dentro de la función
setup() o de la función draw(), solo
podremos utilizarla dentro de la función donde
la hayamos declarado.
Si queremos que una variable se pueda usar
dentro de cualquier función, debemos declararla
fuera de cualquier función. Se conocen como
variables globales. En este ejemplo, i es
una variable global.

2. Añade la función setup.

void setup() {
3. Crea una ventana.
size (400,400);
↓  
Va bajando

//Crea una ventana de 400 x 400.

4. Ahora asigna un color al fondo de la ventana.
background (255,0,0);
//Asigna un fondo de color rojo. ACTIVIDADES
5. Elige un color para las líneas. 17 Modifica el programa anterior para que
stroke(0,255,0); el fondo cambie de abajo hacia arriba.
//Las líneas se dibujarán en verde.

53
   SABER HACER

12.  Aplicar sentencias de control: if-then-else

Los programas interactúan con el usuario de diversas Esta sentencia tiene la siguiente sintaxis:
maneras: if (condición1){
• Este presiona teclas. Bloque 1 de sentencias
•  Toca pantallas. }
• Mueve el ratón, etc. else{
Bloque 2 de sentencias
Dependiendo de estos eventos, se toman unas acciones
}
u otras.
Condición1 es una condición que se evalúa.
Lo mismo sucede con los cálculos internos del programa:
dependiendo del valor de ciertas variables, los programas • Si es cierta (true en Processing), se ejecuta el Bloque 1
toman unas acciones u otras. de sentencias.

Para tomar decisiones dentro de un programa se utiliza una • Si es falsa (false en Processing), se ejecuta el Bloque 2
sentencia fundamental: if-then-else. Aquí aprenderás de sentencias.
a tomar decisiones de control con esta sentencia. Las condiciones pueden evaluarse con operadores.

Operador Significado Ejemplo Resultado del ejemplo

> Mayor que. 4>2 true

< Menor que. 54<12 false
>= Mayor o igual que. 14>510 true
<= Menor o igual que. 22<511 false
== Igual a. 205519 false
!= Distinto de. “d”!5“r” true

Ahora vas a modificar el ejemplo anterior. En él la función draw()

dibujaba hasta que llegaba al final de la ventana de dibujo. Aquí vas
a hacer que el color verde llegue solo hasta la coordenada y 5 200. PRESTA  ATENCIÓN
1. Copia el siguiente programa en Processing.
La parte else es opcional
int i=0; en una sentencia if-then-else.
void setup() { Por ejemplo, en:
size (400, 400); if (condición1) {
background (255,0,0); Bloque_1 de sentencias
stroke(0,255,0);
}
}
void draw() { Si es cierta la condición1,
if (i<200) { se ejecuta el Bloque_1 de
//Evalúa si i es menor de 200. En caso afirmativo sentencias y el programa prosigue
//ejecuta las lineas entre los corchetes. en la siguiente línea. Si no es cierta
la condición1, no se ejecutan las
line (20, 20+i, 380, 20+i);
sentencias del Bloque_1.
//Dibuja líneas horizontales de arriba abajo.
i++; //Incrementa i en una unidad.
}
else{
//Si el valor de i ha llegado a 200, se ejecuta la sentencia entre { } siguiente.
i=0; //Pone el valor de i a 0 y vuelve a empezar.
}
}

2. Ejecútalo.

54
 Programación  2

3. La ventana se llenará de color verde hasta la mitad

y el programa, aparentemente, parará.
TRUCO
Puedes tener varios programas de Processing
abiertos simultáneamente. Es decir, no hace falta
cerrar la ventana de un programa para comenzar
a trabajar con otro.
Esto puede resultarte útil, por ejemplo, cuando
quieres comparar las acciones que se
desencadenan al ejecutar dos programas que
son uno variación del otro.
Lo puedes tener en cuenta a la hora de comparar
el programa que acabas de desarrollar
con el del SABER HACER de las páginas anteriores.

ACTIVIDADES
18 En el anterior ejemplo parece que el programa Si tardas mucho en hacerlo, deberías tener algo
rellena de color verde hasta la mitad parecido al siguiente código en la función draw().
de la ventana y luego para.
a) ¿Crees que realmente para? void draw() {
if (i<360) {
b) ¿Qué está haciendo la función draw()? background (255,0,0);
//Asigna un fondo de color rojo.
19 Modifica el programa para que se vea una única line (20, 20+i, 380, 20+i);
línea verde que llega hasta el píxel de coordenada //Dibuja líneas horizontales de arriba
y5200 y que luego vuelve a empezar. //abajo.
Sugerencia: en la función draw(), la función line (20+i, 20, 20+i, 380);
line() se ejecuta una y otra vez y deja el fondo //Dibuja líneas verticales de izquierda
//a derecha.
pintado de verde. Deberías pintar el fondo
i++;
de nuevo justo antes de la sentencia line().
}
Si tardas mucho en hacerlo, quita la sentencia else{
background (255,0,0); de setup() i=0;
y escríbela justo antes de la sentencia line(), }
dentro de draw(). }

20 Haz que el dibujo de la línea llegue hasta

la coordenada y5380. El resultado
debería ser algo
21 Modifica el programa para que la línea vaya parecido a esto,
de izquierda a derecha en lugar de arriba abajo. con las rectas
moviéndose en
22 Modifica el programa para que haya dos líneas
las direcciones
verdes, una horizontal y otra vertical, barriendo
el fondo rojo.
indicadas.
↓  
Movimiento

Sugerencia: usa simultáneamente la función

line(), que has programado para barrer
de arriba abajo, y la función line(), →
Movimiento
que has programado para barrer de izquierda
a derecha.

55
 6 Eventos de ratón y teclado

  SABER HACER PRESTA  ATENCIÓN

13.  Trabajar con eventos: el uso del ratón Cuando un programa tiene varias funciones, junto
con sentencias que tienen otras sentencias dentro
Muchos de los programas de ordenador pueden reaccionar de ellas, como if, for, etc., debe sangrarse.
a la posición del ratón, si sus teclas se presionan o no, etc. Esto significa que todas las sentencias que se
En estas páginas aprenderás a controlar tu programa ejecutan dentro de un bucle (por ejemplo, dentro de
de acuerdo con los eventos producidos por el ratón. draw()) o de otra sentencia (por ejemplo, dentro
de else) deben aumentar su margen izquierdo para
Coordenadas del ratón quedar dentro del bucle o sentencia que las engloba.
En Processing, mouseX y mouseY son dos variables Esta práctica mejora enormemente la legibilidad
del sistema que devuelven las coordenadas en las que del programa.
se encuentra el ratón.

1. Crea una nueva ventana en Processing con un tamaño

de 400 3 400. Pulsaciones del ratón
void setup() { Los ratones pueden tener entre dos y tres botones.
size (400,400); • Cuando se pulsa un botón del ratón, la variable
2. Selecciona un color azul para las líneas que de Processing mousePressed toma el valor true.
se dibujarán en la ventana creada. • En caso contrario, si no se presiona ningún botón, toma
el valor false.
stroke(0,0,255);
//Líneas en color azul. Existe otra variable que indica qué botón se ha presionado.
Es la variable mouseButton, que toma los valores
3. Selecciona un color amarillo para el fondo expresados en la siguiente tabla:
de la ventana.
background (240,240,10); Botón pulsado Valor de mouseButton
//Fondo en color amarillo. Izquierdo LEFT
} Derecho RIGHT

4. Utiliza la función draw. Centro CENTER

void draw() {
1. Copia el siguiente programa en Processing.
5. Ahora usa las nuevas variables que devuelven
las coordenadas del ratón. void setup() {
Estas sentencias
rect(mouseX,mouseY,40,40); están sangradas
size (400,400);
/*Dibuja un rectángulo de 40 x 40 stroke(0,0,255);
dentro de
píxeles cuya esquina superior izquierda fill (250,10,250);
setup().
está en la posición del ratón.*/ }
void draw() {
} background (240,240,10);
6. Ejecuta if (mousePressed){
//Si esta condición se cumple,
el programa
Esta sentencia //dibuja un rectángulo.
en Processing.
está sangrada rect(mouseX,mouseY,40,40);
7. A continuación dentro de if. }
mueve el ratón else{
por la ventana.
//Si no se cumple, es decir, cuando
//no se pulsa, se dibuja un círculo.
El resultado
ellipse(mouseX,mouseY,40,40);
visible será }
similar a este: }

56
 Programación  2

2. Ejecútalo.
PRESTA  ATENCIÓN
3. La salida en la ventana de dibujo será
similar a esta:
Hasta ahora has visto que la sentencia if se evalúa sobre
Si no se pulsa ningún Si se pulsa algún botón, una única condición lógica. Por ejemplo, if (a>b)
botón, dibuja círculos. dibuja cuadrados. o bien if (a!=b).
Sin embargo, se pueden evaluar varias condiciones lógicas
a la vez usando operadores lógicos. Son los siguientes:

Operador
Nombre Significado
lógico

cond1 && cond2 es true si las dos

&& Y
condiciones son ciertas.

cond1 || cond2 es true si alguna

|| O
de las dos condiciones es cierta.

! No !cond1 es true si la condición es falsa.

Por ejemplo, la sentencia de abajo solo se ejecuta si el botón

izquierdo del ratón está pulsado.
if (mousePressed && (mouseButton= =LEFT)) {}

ACTIVIDADES
23 Modifica el primer programa para que el cuadrado 25 Escribe en Processing un programa que:
no deje rastro, es decir, que solo se dibuje en a) Si no pulsas ningún botón, dibuja circunferencias
la posición del ratón. rojas sobre fondo verde al mover el ratón y deja
Pista: corta la sentencia background() rastro de esas circunferencias.
de setup() y pégala en draw() antes de b) Si mantienes pulsado el botón izquierdo
la sentencia rect(). del ratón, dibuja circunferencias azules,
sin borrar las ya dibujadas, y dejando rastro.
24 Elabora en Processing un programa que:
c) Si mantienes pulsado el botón derecho
a) Si no pulsas ningún botón del ratón, dibuja del ratón, dibuja circunferencias
circunferencias y deja rastros de ellas. amarillas, sin borrar las ya dibujadas
b) Si pulsas el botón izquierdo, dibuja cuadrados y dejando rastro.
y deja rastros de ellos. d) Si pulsas el botón central, borra todos
c) Si pulsas el botón derecho, dibuja líneas y deja los dibujos.
rastros de ellas.
El resultado final deberá tener un aspecto
d) Si pulsas el botón central, borra todos los dibujos. parecido al de la figura.
El aspecto, tras
hacer pruebas con
todos los botones
excepto con
el central, deberá
ser similar
al de la figura.

57
   SABER HACER

14.  Escribir texto

Processing escribe en la consola mediante las sentencias print() y println().
Hasta ahora has visto que también dibuja en la ventana de dibujo.
Sin embargo, Processing además puede escribir textos en la ventana de dibujo.
En estas páginas aprenderás a escribir cualquier cadena de texto en esa ventana.

Instrucciones de salida de texto en la ventana

Processing usa fundamentalmente dos instrucciones para representar
un texto en la ventana de dibujo: RECUERDA
textSize(n). Indica el tamaño de la letra que se va a escribir,
•  
expresado en puntos. • int: números enteros.
text(datos, x, y). Escribe lo que esté almacenado
•   • float: números que pueden
en la variable datos en la posición x, y de la ventana. Los datos puede ser: tener decimales.
– int • char: almacena un carácter.
– float • String: cadena de caracteres.
– char
– String

Programa para escribir texto en la ventana

Este sencillo programa te ayudará a comprender cómo funcionan las sentencias
anteriores.

1. Abre Processing y crea una ventana de 200 3 200.

size (200,200);
//Establece el tamaño de la ventana.
2. Elige el color negro para el texto que se escribirá.
fill(0);
PRESTA  ATENCIÓN
//Líneas negras.
3. Elige un fondo verde para la ventana. fill() determina el color de la letra
background (0,255,0); en la que se va a escribir.
//Fondo verde. En este ejemplo, fill(0) determina
4. Define la variable entera i, cuyo valor inicial será 0. que el color de la letra es negro.

int i=0;
5. Inserta un bucle for.
for (i=1; i<10; i++) {
6. Inserta la sentencia textSize dentro del bucle. La presencia de la variable i
dentro del paréntesis de esta sentencia hace que el tamaño del texto se modifique
en cada repetición del bucle.
textSize(12+i);
//Aumenta el tamaño del texto en cada repetición del bucle for().
7. Escribe el texto que se repetirá empleando la sentencia text. Al utilizar
la variable i dentro del paréntesis consigues que vaya cambiando la posición
del texto en cada repetición del bucle.
text (“Esto es una prueba”, 0, 0+20*i);
/*Cada línea se va escribiendo más abajo. La variable "i" se multiplica
por 20 para que quepan las líneas de texto cada vez más grandes.*/
}

58
 Programación  2

8. Ejecuta el programa completo en Processing.

9. Visualiza su resultado. Aparecerá en la ventana algo similar a lo que muestra

la figura.
Cada repetición del bucle hace que aparezca la frase sobre la ventana,
cada vez con un tamaño mayor.

TRUCO
El texto se puede alinear con la función
textAlign(modo), donde modo puede
tomar los valores RIGHT, LEFT y CENTER,
alineando a la derecha, a la izquierda
o al centro el texto que se escriba
a continuación con la sentencia text().

ACTIVIDADES
26 Escribe un programa en Processing que produzca la siguiente salida.

Observa que el tamaño aumenta, que la letra es cada vez más verde
y que la posición horizontal se desplaza hacia la derecha.
Ayuda: sigue los siguientes pasos.
1. Establece el tamaño de la ventana. 5. Aumenta el tamaño del texto en cada repetición
2. Usa fondo de color amarillo. del bucle.

3. Emplea un bucle. 6. Escribe el texto.

4. Haz que el color de la letra sea cada vez más 7. Incrementa las coordenadas x e y de comienzo
verde a medida que se repite el bucle. en cada repetición del bucle.

27 Escribe otro programa en Processing que produzca a la salida

un curioso efecto de tu elección con el texto.

59
   SABER HACER

15.  Introducir información con el teclado

Processing puede recibir datos por el teclado, determinando si se ha pulsado alguna tecla
y la tecla que se ha pulsado. Ahora aprenderás a reconocer estos eventos.
Processing usa fundamentalmente dos variables para reconocer si se ha pulsado
o no una tecla y reconocer cuál es:
•  keyPressed. Es una variable de tipo boolean, que adopta el valor true
mientras se presiona una tecla. Si no se está presionando ninguna tecla, devuelve false.
•  key. Es una variable de tipo char que adopta el valor de la última tecla presionada.

Crea un ejemplo del uso de ambas variables.

1. Crea una nueva ventana. Observa:

void setup() { void draw() {
size (550, 200); if (keyPressed= =true) {
//Establece el tamaño de la ventana. //Detecta que se ha pulsado alguna tecla.
2. Define el tamaño del texto.
background (240,240, 10);
textSize (16); //Fondo amarillo nuevamente.
3. Elige el color del fondo.
 ext(“Pulse una tecla y aparecerá
t
 ackground (240,240, 10);
b su valor en el centro de la
//Fondo amarillo. pantalla”, 20, 20); //Se repite.
4. Selecciona el color del texto. String salida_de_texto= “Ha

fill(0,0,255); //Escribe en azul. presionado la tecla “ + key;
text(salida_de_texto, 20, 100);
5. Inserta el texto que se mostrará en la ventana. }
 ext(“Pulse una tecla y aparecerá
t }
su valor en el centro de la 7. Ejecuta
pantalla”, 20, 20); el programa.
} Comprueba que
al presionar
6. Añade una condición para detectar la pulsación
la letra «D»
de una tecla y escribe la tecla pulsada en la pantalla.
la salida es:

ACTIVIDADES
28 Analiza el programa anterior y comenta (con //) 30 Analiza el programa anterior y comenta
la línea en la que aparece la sentencia (con //) la línea en la que aparece la sentencia
background(240,240,10) dentro background(240,240,10) dentro
de la función setup(). de la función draw().
a) ¿Qué sucede? ¿Por qué sucede? a) ¿Qué sucede? ¿Por qué sucede?
b) Quita el comentario. b) Quita el comentario.

29 En el programa anterior, comenta (con //) 31 En el programa anterior, comenta (con //)
la línea en la que aparece text(“Pulse
una la línea en la que aparece text(“Pulse
una
tecla y aparecerá su valor en el tecla y aparecerá su valor en el
centro de la pantalla”, 20, 20) centro de la pantalla”, 20, 20)
dentro de la función setup(). dentro de la función draw() .
a) ¿Qué sucede? ¿Por qué sucede? a) ¿Qué sucede?
b) Quita el comentario. b) ¿Por qué sucede?

60
 Programación  2

Carga de fuentes
Todas las frases que has escrito en la pantalla de dibujo se han represen-
tado con el mismo tipo (tamaño) y fuente (estilo) de letra. Sin embargo,
en tu ordenador hay cargadas bastantes fuentes.
Para usar una fuente de tu ordenador en tu programa debes cargarla
previamente en Processing. Para ello, en la opción de menú Tool selec-
ciona la opción Create Font.
Aparecerá la siguiente ventana:

Fuentes cargadas
en tu ordenador.

Nombre con el que Processing convierte

Tipo de la fuente la fuente en un formato de imagen interno
(tamaño). al pulsar Aceptar: .vlw.
Este es un formato de tipo imagen
y se carga en la carpeta data
de tu programa.

Para escribir con una de las fuentes que has convertido a .vlw debes
utilizar las siguientes sentencias:
•  PFont Mi_fuente;: declara una variable, «Mi_fuente», que es del
tipo PFont, usado por Processing para manejar fuentes.
• Mi_fuente = loadFont (“ArialNarrow-48.vlw”);: car-
ga la fuente en el programa. ¡No te olvides de crearla antes!
•  textFont(Mi_fuente);: todo lo que se escribe a continuación
aparecerá con esta fuente.

ACTIVIDADES
32 Crea una fuente ArialNarroww-48.vlw PFont Mi_fuente; /*Declaras una variable,
en un programa y guarda el programa. Mi_fuente, del tipo PFont.*/
Mi_fuente = loadFont (“ArialNarrow-48.vlw”);
33 Copia en este programa el código del programa textFont(Mi_fuente); /*Todo lo que se escribe
que reconocía y escribía en pantalla el carácter a continuación aparecerá con esta fuente.*/
pulsado.

34 Añádele las siguientes sentencias justo después 35 Haz que la primera línea de la ventana de dibujo
de la sentencia void setup() 
y examina del programa de la página anterior se escriba con
el resultado: una fuente, y la segunda línea, con otra distinta.

61
 7 Trabajo con imágenes

Además de generar imágenes propias, Processing puede presentar y

manipular imágenes que estén cargadas en tu ordenador, como foto-
grafías, capturas de pantalla, etc. En estas páginas aprenderás a presen-
tar y transformar imágenes.

  SABER HACER

16.  Visualizar imágenes

Processing puede abrir y presentar archivos de tipo JPEG, PNG y GIF,
entre otros. Las imágenes se deben encontrar en la carpeta data
del sketch que estés desarrollando.
Para ver esta carpeta basta seleccionar la opción de menú Sketch y,
dentro de ella, la opción Mostrar carpeta del Sketch.
Por ejemplo, el siguiente código carga y visualiza una imagen del disco
en pantalla:

Crea una ventana. size(400,300); Se crea la variable

PImage imagen_01; imagen_01 del tipo
imagen_01 =loadImage(“IMG_3055.jpg”); PImage.
image(imagen_01, 20, 20, 300, 200);
Posición Dimensiones

La variable imagen_01 carga la imagen almacenada La función image() se encarga

en tu carpeta data con la sentencia loadImage(). de presentar nuestra imagen.
Asegúrate de dar el nombre de una imagen
que se encuentre en la carpeta data (en este ejemplo,
IMG_3055.jpg).

Parámetros de la función image

• nombre_imagen: nombre de la variable
tipo imagen que vamos a visualizar.
• x, y: posición de la esquina superior
izquierda.
• Ancho, alto: las dimensiones a las que
se reescalará nuestra imagen. Si se dejan
en blanco, la imagen se cargará a su tamaño
original.
Por ejemplo, el resultado de este programa
puede ser similar al de la derecha, que
muestra una imagen llamada IMG_3055.jpg:

Tamaño de
la imagen:
300 3 200. Tamaño de la ventana:
400 3 300.

62
 Programación  2

  SABER HACER

17.  Colorear imágenes y establecer transparencias

En Processing, las imágenes pueden ser coloreadas con la función tint(). Esta función añade
una capa de color determinada por sus parámetros. Estos son:
tint(R, G, B, Transparencia):
• R, G y B son el nivel, de 0 a 255, de cada uno de los componentes RGB que se quiere añadir
a la imagen.
• Transparencia funciona de modo similar a las funciones fill() y stroke(), donde:
– El valor 0 corresponde a completamente transparente.
– El valor 255 corresponde a completamente opaco.
Ahora vas a practicarlo con un programa.

1. Crea una nueva ventana. 7. Elige otro tinte para la imagen.

size(800,600); tint(255,0,0,60);
//Mantienen el rojo y aumenta
2. Carga una imagen que tengas almacenada
//la opacidad. Abajo, izquierda.
en la carpeta data y muéstrala en la ventana.
PImage imagen_01 8. Visualiza la imagen en otra posición.
=loadImage(“IMG_3055.jpg”); image(imagen_01, 0, 301, 400, 300);
image(imagen_01, 0, 0, 400, 300);
9. Ejecuta el programa. Obtendrás algo parecido a esto.
3. Elige un tinte rojo para la imagen.
tint(255,0,0,255);
//Utiliza un rojo puro para pintar,
//pero totalmente transparente.
//Arriba, derecha.
4. Carga la imagen en otra posición. Aparecerá tintada.
image(imagen_01, 401, 0, 400, 300);
5. Elige un tinte rojo para la imagen,
pero con más opacidad.
tint(255,0,0,120);
//Mismo nivel de rojo, pero aumenta
//la opacidad. Abajo, derecha.
6. Muestra de nuevo la imagen en otra posición.
image(imagen_01, 401, 301, 400, 300);

ACTIVIDADES
36 Modifica el programa para que
se creen distintos niveles
de transparencia de la imagen.
Sugerencia: cambia rojo
por blanco en las sentencias tint().
Te debería quedar algo como
lo que muestra la imagen
de la derecha.

63
 8 Trabajo con tablas de datos. Arrays

En programación es muy frecuente tener que trabajar con listas de datos.

PRESTA  ATENCIÓN Todos los lenguajes de programación incluyen estructuras para manejar
grandes listas de datos: los arrays. En estas páginas aprenderás a crear-
Numeración de los, almacenar información en ellos y leer la información almacenada.
las posiciones en un array
Un array se parece a una tabla con datos. Podemos almacenar cualquier
Los arrays se numeran desde 0
tipo de datos en ellos: int, char, boolean, float, etc. Sin embargo,
(primera posición) hasta n 2 1
a diferencia de las tablas, pueden tener más de dos dimensiones. De
(última posición), donde n es
hecho no existe límite práctico al número de dimensiones posibles.
el tamaño del array.
De esta forma, el array Los arrays deben ser declarados junto con el tipo de datos que se va a
teclas[] del texto almacenar en ellos:
de la derecha tiene elementos •  char [] teclas;: crea un array en el que almacenar variables de
desde teclas[0] hasta tipo char y que llamaremos teclas. Observa los corchetes: son el
teclas[11]. elemento de sintaxis que determina que este tipo de datos es un array.
No es necesario determinar la dimensión del array al declararlo. Lo
podemos hacer posteriormente, como veremos a continuación.
• teclas = new char[12];: crea un array donde caben 12 char.
También podríamos declarar e iniciar el array en la misma sentencia:
char[] teclas = new char[12];
Se puede declarar un array de dos dimensiones, por ejemplo, así:
color [][] pantalla = new color [800][600];
Este es un array que puede almacenar los valores de color de todos los
píxeles de una pantalla de 800 3 600.
Para acceder a una de las posiciones de un array es necesario designar
la posición que se desea leer dentro de los corchetes.

  SABER HACER

18.  Trabajar con arrays de datos

Analiza el siguiente ejemplo. Es un programa que:
• Mientras se pulsa el botón izquierdo del ratón, «memoriza» las posiciones X e Y del ratón
en dos arrays y no dibuja nada en pantalla.
• Cuando se pulsa el botón derecho, presenta una línea que une todos los puntos por los que pasó el ratón.

1. Escribe el programa en Processing.

int mediciones = 1000; 

//Crea la variable número máximo de mediciones que
//se van a hacer de las posiciones del ratón.

int [] pantalla_X = new int [mediciones]; //Array que almacenará las posiciones X del ratón.

int [] pantalla_Y = new int [mediciones]; 

//Array que almacenará las posiciones Y del ratón.

int puntero = 0; //Puntero determina el número de posición que vamos leyendo.

void setup(){
size (800,600); //Crea la ventana de dibujo.
background (240,240,10); Continúa
} →

64
 Programación  2

void draw(){
if (mousePressed && (mouseButton = = LEFT)) { //Solo cuando se presiona el botón
//izquierdo del ratón se recogen datos.
background (240,240,10);
if (puntero<mediciones){ //Muy importante para no superar
//los límites del array. Si no hacemos
//esto, Processing producirá un error
//en tiempo de ejecución.

pantalla_X[puntero] = mouseX; //Almacenamos el valor de la posición X

//del ratón.

pantalla_Y[puntero] = mouseY; //Almacenamos el valor de la posición Y

//del ratón.

puntero++; //Al incrementar puntero podemos

//direccionar la siguiente celda
//de los arrays.
}
}
if (mousePressed && (mouseButton = = RIGHT)) {  //Al pulsar el botón derecho del ratón,
//dibujaremos las líneas almacenadas.
int a;
for (a = 0; a < (puntero  -   1); a++){
line (pantalla_X [a + 1], pantalla_Y [a + 1], pantalla_X [a], pantalla_Y [a]);
}
for (a = 0; a < puntero; a++){ //Una vez dibujado, se limpian
//los arrays para un nuevo ciclo.
pantalla_X [a] = pantalla_Y [a] = 0;
}
puntero = 0; //Se deja el puntero a cero para iniciar un nuevo ciclo.
}
}

2. Ejecuta el programa anterior en Processing y comprueba su funcionamiento.

ACTIVIDADES
37 Modifica la siguiente zona del código comentando 40 Comenta con barras la última sentencia, en la que
la primera y última línea (la de la llave). está escrito puntero = 0;, y ejecuta varios
if (puntero<mediciones){ ciclos de dibujo, hasta que el programa se pare
pantalla_X[puntero] = mouseX; por algún error.
pantalla_Y[puntero] = mouseY; a) ¿Qué error es ese? ¿A qué se debe?
puntero++; b) Vuelve a dejar el programa como estaba.
}
41 Modifica el programa para que:
38 Inicia el programa, sitúa el ratón en la zona
a) En vez de dibujar líneas, dibuje rectángulos
de la ventana y pulsa el botón izquierdo del ratón
de 40 3 40 cuya esquina superior izquierda esté
hasta que el programa dé un error en la consola
en las posiciones guardadas del puntero.
(tardará unos segundos).
b) La mitad de las figuras que dibuje sean
a) ¿Qué error aparece? ¿A qué es debido?
rectángulos, y la otra mitad, circunferencias
b) Vuelve a dejar el programa como estaba. de 40 píxeles de diámetro.

39 ¿Por qué este bucle solo cuenta hasta < (puntero 2 1):
for (a = 0; a < (puntero  -  1); a++)?

65
   SABER HACER Competencia científica

APLICA UNA TÉCNICA.  Comparar un programa y su diagrama de flujo

A la hora de programar es útil recapacitar sobre lo que queremos que realice el programa.
Y elaborar con estas ideas un esquema de las acciones llevadas a cabo por el ordenador
al ejecutar el programa. Este esquema se denomina diagrama de flujo.
Observa en la tabla un diagrama de este tipo y su correspondiente programa escrito en Processing.

Diagrama de flujo Programa

void setup() {
Inicio size (400, 400);
stroke(0,0,255);
fill (250,10,250);
Crear una ventana
}
void draw() {
background (240,240,10);
Definir el color de líneas if (mousePressed){
y de relleno //Si esta condición se cumple,
//dibuja un rectángulo.
rect(mouseX, mouseY, 40,40);
}
Definir el color del fondo
else{
//Si no se cumple, es decir, cuando
//no se pulsa, se dibuja un círculo.
ellipse (mouseX, mouseY, 40,40);
¿Está Sí Dibujar rectángulos }
presionado el botón
al mover el cursor }
del ratón?

No Dibujar círculos al mover

el cursor

42 ¿Crees que es útil desarrollar esquemas antes 47 Busca información sobre cuáles son los lenguajes
de escribir el programa o, por el contrario, consideras de programación más empleados en la actualidad.
que es una pérdida de tiempo? a) Recopila información textual y gráfica y elabora
con ella una presentación multimedia.
43 Identifica las sentencias de Processing con
las diferentes partes que conforman el diagrama b) ¿Se usan todos los lenguajes de programación
de la izquierda. para lo mismo?

48 En los últimos años la programación «está de moda»,

44 Contesta:
pues muchos profesionales del sector de las nuevas
a) ¿Te parecen útiles los comentarios? ¿Por qué? tecnologías creen que las personas que sepan
b) Añade algún comentario más al programa de programar tendrán un acceso más sencillo
la derecha. Piensa que vas a dar el programa al mundo laboral.
a una persona que no tiene ninguna experiencia a) Busca alguna noticia aparecida en televisión, internet
de trabajo con el lenguaje Processing. u otro medio de comunicación relacionada
con este asunto y preséntala a la clase.
45 Elige uno de los programas de esta unidad y desarrolla
b) Debatid en el aula sobre la conveniencia o no de que
el diagrama de flujo correspondiente.
todas las personas aprendan a programar, aunque
46 Ahora inventa un nuevo programa para desarrollar luego no trabajen en ese campo.
en Processing y elabora un esquema con el diagrama c) ¿Cómo convencerías a alguien de que es importante
de flujo correspondiente. saber programar?

66
 Programación  2

UN CASO PRÁCTICO. Análisis científico. ¿Cómo protegernos de los virus informáticos?

[…] La tendencia actual de creación de códigos maliciosos Recomendaciones

tiene un objetivo netamente lucrativo, lo que redunda
• Actualice las herramientas de protección (antivirus,
en la programación de malware de riesgo alto. Aquellos
antiespías) con frecuencia para conseguir una
tiempos en los que la motivación de los creadores
protección eficaz. Haga lo mismo con su navegador.
de códigos maliciosos era principalmente por
el reconocimiento público ha dado paso a grupos • Active la actualización automática en la configuración
mafiosos organizados cuyo único fin es el económico. de los programas y del sistema operativo.
Al infectar los equipos de los usuarios, los atacantes toman • Verifique cada mensaje nuevo de correo antes
el control de los sistemas, centrándose principalmente de abrirlo, sobre todo los que contengan ficheros
en la captura de credenciales bancarias y en la utilización adjuntos y los de origen sospechoso.
colectiva de los equipos comprometidos –lo que
• Evite la descarga e instalación de programas
se conoce como redes zombie– con diferentes fines
desde sitios web que no ofrezcan garantías.
maliciosos: envío de correo basura, ataques
de denegación de servicio a páginas web, fraude • En algunos casos, puede que le resulte útil considerar
en buscadores y publicidad en línea. el uso de los servicios de empresas que ofrecen
seguridad gestionada o implantan herramientas
Los datos del estudio revelan que durante el escaneo
de seguridad.
de los equipos, mediante la herramienta proporcionada
por INTECO, casi 8 de cada 10 equipos (77,1 %) mantiene • Instale cortafuegos para proteger su equipo frente
uno o más códigos maliciosos en el ordenador a accesos externos y manténgalo actualizado.
con el que se accede a internet. • Identifique las aplicaciones confiables y los usuarios
Por ello, es hoy más necesario que nunca que los usuarios autorizados.
sean conscientes de la utilidad de las herramientas de • Nunca acceda a la banca electrónica haciendo clic
seguridad como los antivirus, cortafuegos, antiespías, etc. en enlaces o utilizando los favoritos del navegador.
Con esa premisa, a lo largo de esta guía se da un repaso
de las principales herramientas de seguridad que es • Verifique que la página web es segura –empieza
recomendable utilizar en un entorno doméstico, qué son por «https://»– y que está certificada –tiene un candado
y para qué sirven. Además de un completo listado en la parte inferior derecha–. Haciendo doble clic sobre
de herramientas gratuitas, acompañado por manuales este candado puede confirmar que la web es legítima.
prácticos, para facilitar al usuario su instalación y uso • No acceda a la banca online desde ordenadores o sitios
básico. […] no confiables (cibercafés, aeropuertos…).
Aunque estas soluciones informáticas son fundamentales • Utilice siempre contraseñas difíciles de averiguar,
los usuarios deben conocer sus limitaciones. especialmente para la banca electrónica. […]
Es imprescindible, para aumentar la seguridad,
acompañarlas con unos buenos hábitos, que garanticen Fuente: Instituto Nacional de Tecnologías
un uso responsable y seguro de las nuevas tecnologías. de la Comunicación (INTECO, actual INCIBE, adaptado).

49 COMPRENSIÓN LECTORA. Busca la información 51 USA LAS TIC. Busca información en la web sobre
necesaria y explica el significado de estas expresiones ciberseguridad aplicada a los jóvenes.
en el texto. a) Elabora un listado con los posibles riesgos.
a) Códigos maliciosos. b) Elabora a continuación una lista con acciones que
b) Objetivo netamente lucrativo. entrañan riesgos a la hora de usar un ordenador,
un teléfono móvil o una tableta conectada a internet.
c) Uso responsable y seguro de las nuevas tecnologías.
d) No acceda a la banca online desde sitios 52 ¿Qué medidas de seguridad tienes en cuenta a la hora
no confiables. de navegar por internet o usar el correo electrónico?

50 ¿Cómo ha evolucionado el motivo que impulsa 53 TOMA LA INICIATIVA. Recapacita y contesta:

a algunas personas a elaborar códigos maliciosos ¿qué hábitos debes mejorar para aumentar
para acceder sin permiso a equipos informáticos tu seguridad a la hora de emplear el correo
ajenos? electrónico o las redes sociales?

67
 PROYECTO Trabajo cooperativo

Programa un editor de imágenes

En este proyecto vas a desarrollar un programa que realiza ciertas tareas de edición
sobre una imagen. Verás que la estructura del programa es modular, así que puedes
seguir añadiendo funciones al editor de forma muy sencilla.

Especificaciones del proyecto

El programa que debes realizar tiene las siguientes especificaciones y funcionalidades mínimas:

Especificaciones de entrada y salida (cómo se cargan y se presentan las imágenes)

• La ventana de trabajo tiene unas dimensiones mínimas de 1024 3 768 píxeles.
• El programa carga una imagen determinada, escrita en el cuerpo de programa.
No necesita abrir una ventana para buscar la imagen en el disco.
• La imagen se visualiza y debe caber en la pantalla y dejar un borde alrededor
de ella.
Tecla Función
Funciones del visualizador
+ Aumenta el tamaño.
• La tecla «1» agranda el tamaño de la imagen, mientras que la tecla «2»
lo disminuye. 2 Disminuye el tamaño.

• Pulsando la tecla «flecha arriba», ↑, la imagen se mueve desplazándose r Aumenta el rojo.

hacia arriba. Las teclas «flecha abajo», ↓, «flecha derecha», → y «flecha
e Disminuye el rojo.
izquierda», ←, moverán la imagen en sus direcciones respectivas.
• La tecla «r» aumenta el nivel de rojo. La que está situada a su izquierda, la «e», g Aumenta el verde.
lo disminuye.
f Disminuye el verde.
• Análogamente, la tecla «g» aumenta el nivel de verde. La que está situada
a su izquierda, la «f», lo disminuye. b Aumenta el azul.

• De igual modo, la tecla «b» aumenta el nivel de azul. La que está situada v Disminuye el azul.
a su izquierda, la «v», lo disminuye.
l Aumenta la luminosidad.
• La tecla «l» aumenta la luminosidad de la imagen y la de su izquierda, la «k»,
la disminuye. k Disminuye la luminosidad.

• La tecla «n» convierte la imagen a tonos de grises. n Convierte a tonos de gris.
• La tecla «q» retorna a la imagen original, eliminando los cambios de color,
q Vuelve a la imagen original.
de luz o de gris.

Codificación: especificaciones de entrada y salida

Estas especificaciones se resuelven con la función Para conocer las dimensiones de una imagen se usan
setup() de un programa en Processing. Hay que tener las funciones width y heigth.
en cuenta que la imagen que carguemos (vamos a llamarla De esta forma:
imagen_01) también ha de verse en la parte draw()
• imagen_01.width devuelve el ancho
del programa.
de imagen_01.
Para ello la variable imagen_01 debe declararse antes
• imagen_01.heigth devuelve el alto
de setup(), para que sea una variable global a todo
de imagen_01.
el programa. Para que la imagen se visualice se debe usar
la siguiente sentencia: Dado que vamos a mover x e y por toda la pantalla y
image(imagen_01, x, y, ancho, alto); variar el ancho y el alto de la imagen, hay que declarar
las variables x, y, ancho y alto como
x, y es la posición de la esquina superior izquierda
variables globales.
de la imagen, mientras que ancho y alto son las
dimensiones de la ventana donde debe aparecer.

68
 Programación  2

Por tanto, para cargar y ver la imagen, basta con codificar:

float x = 10; float y = 10; //Dar un borde de 10 píxeles alrededor de la imagen.

float ancho, alto;
PImage imagen_01; //Crea una variable imagen_01 del tipo PImage.
void setup(){
size(1200,800);
imagen_01 = loadImage(“IMG_3055.jpg”); //La imagen debe estar en la carpeta data.
ancho = imagen_01.width; //Asigna a ancho el ancho (width) de imagen_01.
alto = imagen_01.height; //Asigna a alto el alto (height) de imagen_01.
}
void draw(){
background (204); //Crea un fondo gris claro.
image(imagen_01, x, y, ancho, alto);
//Visualiza la imagen.
}

La salida en la ventana de dibujo será similar a la que

se muestra a la derecha.

Codificación: funciones
Función a
El programa debe detectar que las teclas «1» o «2» Función b
se están presionando. La variable keyPressed se hace
Sigue la estructura de programa vista en la función a. Por
true mientras una tecla esté presionada.
un lado detecta con un if si la tecla adecuada está siendo
Además, se debe cumplir la condición de que esa tecla presionada. Si es así, variarás alguna variable. En este caso
sea «1» para aumentar el tamaño de la imagen. estas variables son x e y, que son las que controlan
La variable key devuelve el último carácter pulsado la posición de la imagen en la pantalla.
con el teclado. El carácter que devuelve un teclado
La captura de las teclas «flecha» es ligeramente especial.
es una variable de tipo char. Para hacer comparaciones
Corresponden a un grupo de teclas donde la variable key
con una variable tipo char se usan comillas simples.
toma el valor CODED cuando se pulsa. Además, para
Por tanto, para averiguar si la tecla pulsada fue la tecla «1» averiguar qué tecla específica se ha pulsado hay que
y si se mantiene pulsada, el programa deberá hacer examinar el valor de otra variable, keyCode. Esta variable
una pregunta del tipo: puede tomar el valor UP, DOWN, RIGHT o LEFT,
if ((key = =’+’) && (keyPressed)) dependiendo de si la flecha que se ha pulsado es arriba,
//Se hace true cuando la tecla se abajo, derecha o izquierda, respectivamente. Teniendo
//mantiene pulsada y es ‘+’. en cuenta estas especificaciones, el código para actuar
con «flecha arriba», ↑, sería:
Recuerda que la función draw() se repite sin parar.
Puedes aumentar en un 1 % las variables ancho y alto if ((key = = CODED) && (keyPressed)) {
cada vez que se ejecute el bucle y se cumplan //Una tecla CODED se ha pulsado
las condiciones anteriores. Para ello basta introducir //y se mantiene presionada.
el bloque siguiente de código: if (keyCode = = UP) y = y  -   2;
if ((key = =’+’) && (keyPressed)) { //Movimiento arriba. Repetir y modificar
//Ampliación de la imagen. //este if para DOWN, RIGHT y LEFT.
ancho = ancho*1.01; }
alto = alto*1.01; Como se indica, basta repetir la sentencia
} if (keyCode = = UP) y = y   -   2; y modificarla
ligeramente para obtener los cuatro movimientos.
El código para reducir la imagen al pulsar la tecla «2» es Continúa
similar, pero hay que multiplicar por 0,99 en vez de 1,01. →

69
 PROYECTO (continuación) Trabajo cooperativo

Función c
Esta función varía el valor de rojo, verde o azul • Función draw(). Añadir:
de la imagen. Analiza el caso del rojo. Se debe detectar if ((key = = ‹r› || key = = ‹e› ) && keyPressed) {
si se pulsa la tecla «r» o «e» (aumenta/disminuye
//Controles del color rojo.
el rojo). Si se pulsa «r», harás que cada vez
for (int i = 0; i < dimension; i++) {
que se ejecute draw() aumente en 12 el valor
//Lee todos los valores RGB de la imagen.
de RED de cada píxel.
r = red (imagen_01.pixels[i]);
Para ello debes extraer el valor de RED de cada píxel. //Lee el valor RED del píxel i.
Esto se hace en dos pasos: a = blue (imagen_01.pixels[i]);
//Guarda el valor BLUE. Se usa luego.
1. La función imagen_01.pixels[i]; extrae
el valor de color del píxel i de la imagen_01.
v = green (imagen_01.pixels[i]);
//Guarda el valor GREEN. Se usa luego.
2. La función red(color) extrae el valor de RED if (key =  = ‘r’) r = r + 2;
de una variable de tipo color. if (key =  = ‘e’) r = r     -     2;
Así, rojo = red (imagen_01.pixels[i]); imagen_01.pixels[i] = color(r,v,a);
da el valor de RED de un píxel en la posición i. //Se actualizan los píxeles de la imagen.
Lo devuelve en una variable a la que puedes llamar, }
por simplicidad, rojo. imagen_01.updatePixels();
//Se pasan los píxeles a la imagen.
Para aumentar todo el valor de rojo del array pixels[],
}
basta hacer un bucle for() a lo largo de toda
la dimensión de la imagen. Este proceso actualiza El resultado de encuadrar la imagen y subir el color rojo
el array pixels[]. sería similar a:
Para que este cambio se refleje en la imagen
se necesita ejecutar la sentencia siguiente, fuera
del bucle for():
imagen_01.updatePixels();
//Se pasan los píxeles a la imagen.

Por tanto, es necesario modificar el código de la siguiente

forma:
• Zona global. Añadir las variables: float:
dimension, r, v, a
• Función setup(). Añadir la sentencia:
dimension = alto*ancho; De forma similar se controlan el color azul y el verde.

Función d
El control de luminosidad es muy sencillo de realizar a partir del código anterior. Subir la luminosidad
eleva los tres canales de color a la vez. Bajarla reduce el valor de los tres canales. Basta introducir
las sentencias siguientes en el bucle for() de control del color:
if (key = =‘l’) {a = a + 2; r = r + 2; v = v + 2;}
if (key = =‘k’) {a = a     -     2; r = r     -     2; v = v     -     2;}
Función e
Cambiar a gris implica que los tres canales RGB tengan el mismo valor. Para ello se asigna a los tres canales
el valor de su media. Basta añadir las siguientes líneas al bucle for() que controla el color:
if (key = =‘n’) {
gris =(a + r + v)/3; //Si los 3 luminóforos tienen el mismo valor, se ve gris.
a = r = v = gris; //Asigna el valor de gris a a (azul), r (rojo) y v (verde).
}
Además, se debe añadir una variable float gris; en la sección inicial del programa.

70
 Programación  2

Función f
Es muy sencilla. Basta cargar de nuevo la imagen al principio de la función draw(),
justo después de la sentencia background():
if (key = =’q’) imagen_01 = loadImage(“IMG_3055.jpg”);
El código completo, optimizado, sería el siguiente:

int x = 10; int y = 10;

float ancho, alto, dimension, rojo, azul, verde, gris;
PImage imagen_01;
void setup(){
size(1200,800); //La imagen que uses debe estar cargada
imagen_01 = loadImage(“IMG_3055.jpg”);  //en el directorio data de tu programa.
ancho = imagen_01.width; alto = imagen_01.height;
dimension = alto * ancho;
}
void draw(){
background (204);
image (imagen_01, x, y, ancho, alto);
if (key = = ‘q’) imagen_01 = loadImage(“IMG_3055.jpg”);
if ((key = = CODED) && (keyPressed)) { //Solo mientras se presione la tecla.
if (keyCode = = UP) y = y    -     2; //Movimiento arriba, abajo, izquierda
if (keyCode = = DOWN) y = y + 2; //y derecha.
if (keyCode = = RIGHT) x = x + 2;
if (keyCode = = LEFT) x = x    -     2; RECUERDA
}
if ((key= =’+’) && (keyPressed)) { //Ampliación. El operador lógico «O» se expresa
ancho = ancho*1.01; alto = alto*1.01; en Processing con dos barras
} verticales: || (teclas AltGr 1 1  ).
if ((key = = ‘-’) && (keyPressed)) { //Reducción.
ancho=ancho/1.01; alto=alto/1.01;
}
if (
 (key = = ‘r’ || key = = ‘e’ || key = = ‘g’ || key = = ‘f’|| key = = ‘b’ || key = = ‘v’
|| key = = ‘l’ || key = = ‘k’ || key = = ‘n’) && keyPressed) {  //Controles de color.
for (int i = 0; i < dimension; i++) { //Lee todos los valores RGB de la imagen.
rojo = red (imagen_01.pixels[i]);
azul = blue (imagen_01.pixels[i]);
verde = green (imagen_01.pixels[i]);
if (key = = ‘r’) rojo = rojo + 2; if (key = = ‘e’) rojo = rojo    -     2;
if (key = = ‘g’) verde = verde + 2; if (key = = ‘f’) verde = verde    -     2;
if (key = = ‘b’) azul = azul + 2; if (key = = ‘v’) azul = azul    -     2;
if (key = = ‘l’) {azul = azul + 2; rojo = rojo + 2; verde = verde + 2;}
if (key = = ‘k’) {azul = azul - 2; rojo = rojo    -     2; verde = verde    -     2;}
if (key = = ‘n’) {
gris = ( azul + rojo + verde)/3;
//Si los 3 luminóforos tienen el mismo valor, se ve gris.
azul = rojo = verde = gris;
}
imagen_01.pixels[i] = c olor(rojo, verde, azul);   //Se actualizan los píxeles.
}
imagen_01.updatePixels();
//Se pasan los píxeles a la imagen.
} ACTIVIDADES
} //Draw 54 Modifica el programa para que complete
alguna otra acción al pulsar otra tecla.

71
 ANEXO: Referencia para programar en el IDE de Arduino

Estructura

Básica Descripción Ejemplo

void setup() Se ejecutará una sola vez al principio void setup() {

del programa. //Instrucciones a ejecutar una sola vez
}

void loop() Se ejecutará una y otra vez mientras la placa void loop() {
Arduino tenga alimentación. //Instrucciones a ejecutar repetidamente
}

De control Descripción Ejemplo

if Se utiliza en conjunción con un operador if (nombre 55 5) { //Si se cumple la condición

de comparación. Si se cumple una condición, //Instrucciones a ejecutar
se ejecutarán las instrucciones. }

if / else Se utiliza en conjunción con un operador if (nombre 55 5) { //Si se cumple la condición

de comparación. //Instrucción a ejecutar
Tras comprobar si se cumple una condición }
permite hacer una cosa u otra. else { //Si no se cumple
//Instrucción a ejecutar
}

for Se utiliza para repetir instrucciones un número for (byte i50 ; i<10 ; i5i++) {
determinado de veces. //Instrucciones a repetir
}

Swicht … case Se utiliza para comparar el valor de una variable Swicht (variable) {
en los diferentes casos. case 1:
Cuando el valor de la variable coincide con el //Hacer algo cuando variable vale 1
valor de uno de los casos, se ejecutará lo que break;
haya dentro de este. case 2:
//Hacer algo cuando variable vale 2
La sentencia break se utiliza para acabar cada break;
caso. }

while Se utiliza para repetir un bloque de while (boton 55 0) {

instrucciones hasta que se cumpla una //Instrucciones a repetir
condición. Por ejemplo, que alguien pulse un }
botón.

return; Finaliza una función y devuelve un valor. return(distancia);

return (valor);

Sintaxis adicional

Símbolos Descripción Ejemplo

; Se usa para finalizar una declaración. int a 5 13;

{} Una apertura de llaves, «{», siempre debe ir void setup(){

seguida por una llave de cierre, «}». //Instrucción que se ejecutará una vez
Se utilizan en varias construcciones diferentes }
e indican el principio y el fin de una estructura.

// Las líneas de comentarios se utilizan para dar int x 5 5; //Esta es una sola línea de comentario.
/*… */ información del programa. Las líneas de int x 5 10; /* Si el comentario ocupa más de una línea
comentarios son ignoradas por el compilador. puedes utilizar esta sintaxis */

Otros Descripción Ejemplo

#define Reemplazará el nombre definido por el valor #define PINVERDE 3 //#define Nombre Valor
asignado.

#include Se utiliza para incluir librerías fuera de su #include <Servo.h> //Librería para manejar servos
sketch.

244