APUNTES Processing 2021

TEMA 4: PROCESSING
Contenido
1. ¿QUÉ ES PROCESSING?................................................................................................... 2
1.1. Descargar Processing .................................................................................................. 2
1.2. El área de trabajo de processing ............................................................................. 5
1.3. Estructura de los programas ..................................................................................... 6
1.3.1. Funciones principales .............................................................................................. 6
1.3.2. Cómo se comenta el programa ........................................................................... 7
1.3.3. El lienzo de trabajo. El sistema de coordenadas ............................................ 7
 91 695 05 19
2. FORMAS BÁSICAS ............................................................................................................. 9

2.1. El color .............................................................................................................................. 9
2.2. Formas básicas ............................................................................................................. 11
2.3. Propiedades básicas................................................................................................... 12
Pº Pablo Iglesias, 5 – 28901 Getafe (Madrid)
3. PROGRAMAS INTERACTIVOS ..................................................................................... 13

4. VARIABLES EN PROCESSING....................................................................................... 15
4.1. Variables del sistema. ................................................................................................ 17
4.2. Operaciones más usuales. ...................................................................................... 18
5. TEXTOS ............................................................................................................................... 19
6. ESTRUCTURAS DE CONTROL: DECISIONES ........................................................... 20
6.1. Condicional if-else ...................................................................................................... 20
6.2. Switch .............................................................................................................................. 21
Colegio Divina Pastora
7. ESTRUCTURAS DE CONTROL. BUCLES .................................................................... 23

7.1. Bucle for()....................................................................................................................... 23
7.2. Bucle while() .................................................................................................................. 24
8. AÑADIR INFORMACIÓN CON EL TECLADO .......................................................... 25
9. TRABAJO CON IMÁGENES ........................................................................................... 26
Código de centro 28003262
CIF R-7800027-J
www.divinapastoragetafe.es
UNIÓN EURO-
secretaria@divinapastoragetafe.es 1
PEA PastorasGetafe
Fondo Social
Europeo
BACHILLERATO DUAL Divina Pastora Getafe
1. ¿QUÉ ES PROCESSING?
Processing es un lenguaje de programación próximo al Java o al C++, pero
más sencillo. Se orienta a la creación de gráficos para poder aprender los
algoritmos esenciales y se usa por profesionales del diseño, estudiantes e
investigadores. Fue iniciado por Ben Fry y Casey Reas, ambos miembros de
Aesthetics and Computation Group del MIT (Instituto de Tecnología de Massa-
chusetts) Media Lab dirigido por John Maeda.
Processing trae su propio IDE (entorno de desarrollo integrado), por lo que

no necesita instalación, y puede llevarse en un medio extraíble. Tanto la versión
 91 695 05 19
Linux como la versión Windows son paquetes comprimidos que no requieren

instalación, solo hay que descomprimir la carpeta que contienen en alguna
carpeta del usuario, por ejemplo, Mis documentos (en Windows)
o Documentos (en MAX u otra distribución Linux). Tras esto, resulta útil crear un
acceso directo a Processing en el escritorio.
Algunas de sus características más sobresalientes son:

 Es un software libre para descarga y de código abierto.
 Está disponible para GNU/Linux, Windows y Mac OS X.
 Está bien documentado y con gran cantidad de libros disponibles. También
hay una importante comunidad online de usuarios y desarrolladores que res-
palda el uso y la mejora del entorno.

 Permite la creación de programas interactivos con salida 2D, 3D y PDF.
 Dispone de más de 100 librerías.
 Permite crear aplicaciones para la web y para móviles.
 Permite la importación de fuentes tipográficas para uso en nuestros sketches.
 Permite la impresión de documentos y gráficos de calidad.
1.1. Descargar Processing

Lo primero que vamos a aprender es a descargarnos y arrancar el IDE de
Processing (entorno de desarrollo integrado) desde la
página https://processing.org/. Es un proceso rápido y sencillo, ya que no es
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
necesario instalarlo en el disco duro del ordenador (bastará con arrancar el
ejecutable que podéis tener en el propio PC o incluso en un pendrive). Los pasos
serían:
1º. Accede a https://processing.org/.
 91 695 05 19
2º. Haz clic en "Download Processing".

Se dan varias opciones según vuestro sistema operativo:
Te pide una donación, pero no es necesario pagar nada (es gratuito).

CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
 91 695 05 19
3º. Comenzará a descargarse la carpeta comprimida.

Una vez descargada, descomprímela.
4º. Empezará a generarse la carpeta donde se encontrará el fichero ejecutable

de Processing.
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
5º. Ahora, tan sólo tenemos que hacer doble clic sobre el icono “Proccesing" y el
programa se abrirá, quedando listo para trabajar con él.
1.2. El área de trabajo de processing

La ventana de Processing incluye dos botones: Ejecutar, para iniciar el pro-
grama, y Detener, para pararlo. Además, incluye algunos menús desplegables; vea-
mos las opciones más usadas de estos menús:
 Archivo/Guardar como. Crea una carpeta en la ubicación donde queremos
guardar el archivo con el nombre que le indiquemos, además del archivo ejecu-
 91 695 05 19
table. La extensión de Processing es .pde.

 Archivo/Exportar aplicación. Nos permite crear un archivo ejecutable desde
Windows, MacOS o Linux.
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
 Ayuda/Referencia. Muestra ayuda sobre cómo utilizar las instrucciones básicas
de Processing.
 Archivo/Ejemplos. Presenta una colección de ejemplos.
 Sketch/Importar biblioteca/Añadir biblioteca. Mediante esta opción podemos
agregar las librerías que otras personas van creando y ver así nuevos ejemplos.
 Editar/Autoformato. Después de escribir un trozo de código, podemos hacer
que el texto adquiera el formato con las tabulaciones o espacios adecuados para
poder entender el código como marcan las normas de estilo.
Por otro lado, el botón Modo (arriba a la derecha) guarda por defecto los ar-
chivos en modo Java, pero podemos hacer clic en el desplegable y seleccionar apli-
caciones para Android, JavaScript o Python.
 91 695 05 19
1.3. Estructura de los programas

En este lenguaje de programación es muy importante la sintaxis:

 Cada expresión debe finalizar obligatoriamente con el símbolo de punto y
coma «;». De otro modo, obtendremos un error al intentar ejecutar el programa.
 También hay que respetar las mayúsculas y minúsculas en los nombres de
función. No es lo mismo line() que Line() o liNE().
1.3.1. Funciones principales

En Processing, los programas se denominan sketches o bocetos.
La estructura típica de un programa en Processing tiene dos funciones:

1. La función setup(), que se ejecuta una vez al iniciarse el programa. Para lla-
mar a esta función normalmente escribimos la línea de código void setup() {
/*instrucciones que se ejecutan solo una vez*/ }.
2. La función draw(), que se ejecuta de forma continua, es decir, se está repi-

tiendo todo el tiempo, luego aquí será donde realizaremos nuestros dibu-
jos. Para llamar a esta función normalmente escribimos la línea de código void
draw() { /*instrucciones que se ejecutan solo una vez*/ }.
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
1.3.2. Cómo se comenta el programa
En todo lenguaje de programación es muy recomendable comentar el código.
Esto es debido a que en muchas ocasiones no es muy intuitivo, se le pueden olvidar
ciertos detalles al propio programador al cabo del tiempo, y se intenta facilitar la
lectura del código a otras personas (ya que los grandes programas suelen ser fruto
del trabajo en equipo de numerosas personas a lo largo del tiempo, con las habitua-
les mejoras y actualizaciones). Para hacer comentarios de una línea se debe iniciar
el comentario con //. Para hacer comentarios de más de una línea, se debe co-
menzar el comentario con /*, y finalizar con */. Los comentarios de documenta-
ción empiezan con /** y acaban con */, se emplean principalmente para compartir
una descripción del sketch cuando el programa es exportado.
 91 695 05 19
1.3.3. El lienzo de trabajo. El sistema de coordenadas

Processing es un lenguaje de programación muy visual, por lo que debemos
tener bien claro cómo utiliza las coordenadas en el plano a la hora de dibujar. Mien-
tras que en matemáticas el origen de coordenadas (0, 0) se representa habitualmen-

te en la esquina inferior izquierda del papel, se toman los va lores positivos de x ha-
cia la derecha y los de y hacia arriba, en las pantallas de ordenador el origen de
coordenadas se sitúa en la esquina superior izquierda. Esto supone que los valo-
res de x siguen siendo positivos cuando nos desplazamos a la derecha, pero que
los valores de y son positivos hacia abajo.
Veámoslo en la siguiente imagen:
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
 91 695 05 19
Así, todo programa en Processing donde utilicemos el entorno gráfico, pasa

por definir una ventana o lienzo sobre el que va a transcurrir la acción del programa.
Para ello debemos utilizar la función: size(ancho,alto);. Si al comenzar el programa
no se define el tamaño del lienzo, el programa utiliza el tamaño por defecto
100x100 píxeles.
Vamos a crear nuestro primer programa, en el que creemos una ventana o

lienzo de 500 píxeles de ancho por 300 de alto:

CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
Processing llama por defecto a los programas generados “sketch”. Por eso, el
nombre que le asigna en este caso es un genérico sketch_nº. Nosotros podemos
asignarle otro nombre más intuitivo como “Miprimerprograma”, pinchando
en: Archivo->Guardar como… y dándole la ubicación y nombre deseados.
Ahora no tenemos más que pinchar en el icono de “Ejecutar” y ver el resulta-

do del programa:
…y observamos cómo
nos ha generado la
ventana o lienzo con
 91 695 05 19
las dimensiones
deseadas.
2. FORMAS BÁSICAS
2.1. El color
Ya hemos visto cómo, con la instrucción size(width,height); se define el tamaño

de la pantalla donde crearemos nuestro proyecto, con el formato "(ancho/alto)" en
píxeles. A la vez, podríamos utilizar colores para el fondo de esa pantalla con la ins-
trucción background(R,G,B); por ejemplo, podríamos utilizar la combinación
(0,255,0) para definir un fondo verde.
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
Para trabajar con el color
en Processing, podemos utilizar
tres sistemas distintos:
 El RGB, en el que cual-

quier color se puede
conseguir mezclando el
R (red-rojo), el G
(green-verde) y el B
(blue-azul). El valor
que toma cada uno de ellos va de 0 a 255. Si se utiliza un cuarto parámetro
es para referirnos a la transparencia.
 91 695 05 19
 #000000 (notación hexadecimal), donde cada dos cifras de dicho número

representan el valor en código hexadecimal de la componente Red, Green o
Blue del color.
 El HSB, en el que se utilizan los parámetros tono, saturación y brillo. (Nosotros
no lo vamos a usar en este nivel básico).
Para obtener cualquiera de estos parámetros para cualquier color podemos

utilizar una herramienta de la que dispone Processing, haciendo clic
en Herramientas/Selector de colores…
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
2.2. Formas básicas
Una vez definido el lienzo, podemos dibujar diversas formas básicas en él, las
más vienen dadas en la tabla siguiente (si no se indica otra cosa, la unidad en la que
trabajan es el pixel):
Función Significado
size (ancho, alto) Define el tamaño en píxeles de la ventana gráfica en la

que se ejecutará el sketch.
point (x, y) Dibuja un punto en la coordenada (x, y). Por defecto, el

punto se dibujará con grosor de 1 píxel.
 91 695 05 19
line(x1, y1, x2, y2) Traza una línea desde la coordenada (x1, y1) hasta (x2,
y2).
triangle(x1, y1, x2, y2, Dibuja un triángulo con vértices en los puntos (x1, y1),
x3, y3) (x2, y2) y (x3, y3).
quad(x1, y1, x2, y2, x3, Dibuja un cuadrilátero con vértices en los puntos (x1,
y3, x4, y4) y1), (x2, y2), (x3, y3) y (x4, y4). El orden en que apare-
cen las coordenadas dentro de la sentencia es muy im-
portante; Processing va trazando una línea desde las
coordenadas x1, y1 hasta x2,y2, y así sucesivamente.
rect(x, y, ancho, alto, Dibuja un rectángulo con esquina superior izquierda en

radio) (x, y) y dimensiones (ancho, alto). El parámetro radio es

opcional y permite dibujar rectángulos con esquinas
redondeadas.
ellipse(x, y, ancho, alto) Dibuja una elipse con centro en (x, y) y diámetros (an-
cho, alto).
arc(x, y, ancho, alto, Dibuja un arco con centro en (x, y), dimensiones (ancho,
inicio, fin) alto) y ángulos de inicio y fin en radianes (inicio, fin).
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
2.3. Propiedades básicas
En cuanto a las propiedades de todas estas formas básicas, podemos definir
algunas como el fondo, el borde, el relleno, ...
Si no le damos una instrucción que indique otra cosa, Processing dibuja
las formas usando una línea negra de 1 píxel de grosor y las rellena, en el caso
de poder hacerlo, con color blanco. Pero es mucho más atractivo conseguir que
nuestros diseños estén llenos de color y que pudiéramos cambiar el contorno de las
distintas figuras geométricas. Para ello, se dispone de las siguientes funciones:
 Trabaja con línea en escala de grises: stroke(nivel_de_gris); lleva un solo

parámetro nivel_de_gris, donde 0 representaría al negro y 255 al blanco. Todos los
valores intermedios formarían la escala de grises.
 91 695 05 19
 Trabaja con línea en colores: stroke(r,g,b); lleva tres parámetros: r, g, b, que

son los colores primarios de la mezcla sustractiva red, green y blue. Cada uno puede
variar entre 0 y 255.
 Cambia el grosor de la línea: strokeWeight(n); modifica el grosor de la línea

que se va a dibujar. El valor por defecto es 1.
 Rellena las figuras: fill(nivel_de_gris); y fill(r,g,b); rellenan respectivamente

una figura en niveles de gris o en color. Todo lo explicado para cambiar el color del
contorno se aplica también al relleno. Si queremos hacer figuras transparentes, sin
relleno (necesario si se quiere hacer visible lo que hay detrás de nuestra figura), te-
nemos que usar noFill();
 Cambia el color del lienzo: background(nivel_de_gris); y back-

ground(r,g,b); pintan el lienzo en niveles de gris o de colores respectivamente. To-
do lo explicado para cambiar el color del contorno se aplica también al lienzo.
Siempre hay que indicar los atributos antes de dibujar una figura. Es de-
cir, primero seleccionamos color, grosor de línea y relleno; después dibujamos
la figura en la posición y con las dimensiones que deseamos.
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
 91 695 05 19
3. PROGRAMAS INTERACTIVOS
Los programas que hemos realizado hasta ahora son los llamados programas
estáticos. Esto significa que nunca cambian. Se ejecutan una vez y cuando llegan a la
última línea de código, se paran. Si queremos que un programa sea interactivo, te-
nemos que habilitar la entrada de datos continuamente mientras el programa se eje-
cuta. Esto sólo es posible si la ejecución es continua.
Con Processing, puedes crear programas que se ejecuten continuamente utili-

zando la función draw();. Esta función repetirá el bloque de código una y otra vez
hasta que el programa se pare. Sin embargo, no todo el código escrito necesita ser
repetido continuamente. Para el código que sólo necesita ser ejecutado una única
vez, debes usar, como has hecho hasta ahora, la función setup();. Cuando se utiliza
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
la función draw(), se dice que Processing está funcionando en modo dinámico; cuan-
do no se utiliza, se dice que está funcionando en modo estático.
Vamos a escribir de nuevo un programa que dibuje una línea, pero utilizando
la función draw():
Programa 1:
1 void setup(){
2 size(300,300);
3}
4
5 void draw() {
6 line(0,0, width, height);
 91 695 05 19
7}
Este programa establece el tamaño de ventana a 300x300 píxeles y luego di-

buja una línea sobre toda la ventana una y otra vez. En vez de poner como punto fi-
nal (300, 300), último punto de la pantalla, hemos utilizado los comandos width y
height, que indican respectivamente el ancho y alto de la ventana.
En este momento, todavía no se puede apreciar que esto está pasando una y
otra vez (pues las líneas se dibujan una encima de otra continuamente), así que va-
mos a escribir otro programa para hacerlo más visible:
(programa 2)
1 void setup(){
2 size(300,300);
3}
4
5 void draw() {
6 line(0,0, mouseX, mouseY);
7}
El comando mouseX hace referencia a la coordenada X del puntero del ratón,

así como el comando mouseY hace referencia a la coordenada Y del mismo.
Este programa permite interactuar con la pantalla mientras se mueve el ratón.

Esto sucede porque cada vez que el código dentro de draw() se ejecuta, una nueva
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
línea se dibuja; el segundo punto de la línea cambia dependiendo de la posición del
puntero del ratón. En el siguiente link se puede ver el resultado.
https://www.youtube.com/watch?v=lZA0qiPpMuY&feature=emb_logo
Como puede verse en el video, se deja un rastro de líneas por donde se mueve
el ratón. Esto es porque cada línea dibujada no es eliminada ni se dibuja nada más
por encima. Puede añadirse una nueva línea de código al principio del draw() para
establecer el color de fondo a blanco, por lo que parecerá que existe siempre una
sola línea. Esto se debe a que el código dentro de esta función se ejecuta una y
otra vez, línea por línea, de arriba a abajo. Por tanto, lo primero que sucede cada vez
que el draw() se ejecuta es que se crea el fondo blanco sobre todo lo anterior; des-
pués una nueva línea es dibujada y luego el fondo se vuelve a poner blanco,... así una
y otra vez.
 91 695 05 19
(programa 3)
1 void setup(){
2 size(300,300);
3}
4
5 void draw() {
6 background(255);
7 line(0,0, mouseX, mouseY);
8}
El resultado https://www.youtube.com/watch?v=Z85_5QBK_zs&feature=emb_logo
4. VARIABLES EN PROCESSING
Las variables son como un contenedor para diferentes tipos de datos. Pa-
ra cada variable, se necesita especificar qué tipo de datos contendrá. Los tipos de
datos más comunes que utilizaremos son los siguientes:
1. Enteros (int). Permiten representar valores numéricos de tipo entero.

CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
Ejemplo de utilización: int ancho=200;
int alto=100;
rect(10,10,ancho,alto);
2. Reales (float). Permiten representar valores numéricos de tipo real.

 91 695 05 19
Ejemplos: float peso=40.56;

float temperatura=18.2;
Processing es un lenguaje desarrollado en EEUU y usa el punto "." para asignar

decimales. Para escribir 12 con 24 centésimas: 12.24.
3. Caracteres (char). Permiten representar caracteres.

4. Cadenas de caracteres (string). Permiten representar palabras, frases comple-

tas, etc.
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
Ejemplos: string nombre="Luis";
string apellidoI0="Torres";
5. Valores lógicos (boolean). Permiten representar valores de tipo lógico

(true/false).
 91 695 05 19
Ejemplos: boolean sensorActivado=true;

boolean alarmaMotor=false;
4.1. Variables del sistema.

Además de las variables que hemos visto hasta ahora, que son definidas y
creadas por nosotros según necesidades, existen unas variables asociadas a paráme-
tros del sistema que nos serán muy útiles en determinadas circunstancias. Ejemplos
de éstas son:
 width, ancho de la ventana.

 height, alto de la ventana.
 mouseX, posición del ratón en el eje X.
 mouseY, posición del ratón en el eje Y.

 key, variable char que almacena la última tecla pulsada.
 keyPressed, keyReleased, mousePressed, mouseButton, mouseRe-
leased; variables de tipo boolean que reaccionan a las acciones del teclado o
el ratón (como presionar una tecla o el ratón, o soltarlos).
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
4.2. Operaciones más usuales.
Processing tiene incluidas las funciones matemáticas o lógicas más usuales pa-
ra utilizarlas con las variables creadas.
 Asignación: =, signo igual.
 Paréntesis: ( y ).
 Aritméticos: +, -, *, /, ++ y --, que se corresponden con suma, diferencia,

producto, división, incremento y decremento en una unidad.
 Relacionales: >, >=, <, <=, == y !=, que se corresponden con mayor que,
mayor o igual que, menor que, menor o igual que, igual a, distinto de.
 91 695 05 19
 Lógicos: !, && y ||, que se corresponden con las funciones lógicas NOT, AND y
OR. Se emplean con frecuencia en estructuras de control del flujo del programa.
¡ATENCIÓN!: Si definimos una variable dentro de la función setup() o de la fun-

ción draw(), sólo podremos utilizarla dentro de la función donde la hayamos
declarado.
Si queremos que una variable se pueda usar dentro de cualquier función, de-
bemos declararla fuera de cualquier función, al principio del programa. Se conocen
como variables globales. Un ejemplo de este tipo de variables es el del siguiente
programa:
(Programa 4)
1 int i=0; //variable global de valor entero que vamos a usar para mover las lí-
neas
2 void setup() {
3 size (400,400); //lienzo de 400x400 píxeles
4 background(255,0,0); //fondo de color rojo

5 stroke(0,255,0); //las líneas que se dibujarán serán de color verde
6}
7 void draw(){
8 line(20,20+i,380,20+i); //dibuja líneas horizontales de arriba a abajo
9 i++; //al aumentar i, vamos bajando la posición de la línea
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
10 }
Escribe el programa y averigua qué es lo que dibuja. Puedes comprobarlo en

el link: https://www.youtube.com/watch?v=8c51jLAGLxw&feature=emb_logo
5. TEXTOS
Con processing se puede mostrar información en forma de texto de dos ma-
neras:
 En la consola del IDE, con las instrucciones print(“Texto”); o println(“Texto”);
incluyendo en el segundo caso un salto de línea. Esto sirve para mostrar men-
sajes de confirmación de cara al programador o usuario.
 91 695 05 19
 En la ventana o lienzo. Veamos cómo se puede escribir un texto en la venta-

na del programa con un ejemplo sencillo:
(Programa 5)
1 void setup(){
2 size(350,200); //creamos la ventana con tamaño 350x200 px
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
3 textSize(12); //definimos el tamaño de la letra
4 fill(125,0,125); // definimos el color de fuente
5 text("tecnologia",10,30); //indicamos el texto a escribir en (10,30)
6}
6. ESTRUCTURAS DE CONTROL: DECISIONES
6.1. Condicional if-else

Los programas interactúan con el usuario de diversas maneras: al presionar te-
clas, tocar pantallas, mover el ratón, etc. Dependiendo de estos eventos, se toman
 91 695 05 19
unas acciones u otras.

Lo mismo sucede con los cálculos internos el programa: dependiendo del valor
de ciertas variables, los programas realizan unas acciones u otras. Para tomar deci-
siones dentro de un programa se utiliza una sentencia fundamental, if-else, cuya
sintaxis es la siguiente:
if (condición1){
Bloque 1 de sentencias
}
else{
Bloque 2 de sentencias
}
La condición1 se evalúa y, si es cierta (true en Processing), se ejecuta el Bloque

1 de sentencias. Si es falsa (false en Processing), se ejecuta el Bloque 2 de senten-
cias. La parte else es opcional en este tipo de estructuras; si no se utiliza, y en caso de
que sea cierta la condición1, se ejecuta el Bloque 1 de sentencias y el programa pro-
sigue en la línea siguiente, si no es cierta la condición1, no se ejecutan dichas senten-

cias.
Las condiciones pueden evaluarse con operadores:
Operador Significado Ejemplo Resultado del ejemplo

CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
> Mayor que 4>2 true
< Menor que 54<12 false
>= Mayor o igual que 14>=10 true
<= Menor o igual que 22<=11 false
== Igual a 20==19 false
!= Distinto de "d"!="r" true
Por otra parte, debemos tener en cuenta que pueden utilizarse va-
rios if()anidados.
La sentencia if puede evaluarse sobre varias condiciones lógicas a la vez usan-
do operadores lógicos. Son los siguientes:
 91 695 05 19
Operador ló- Nombre Significado

gico
&& Y cond1 && cond2 es true si las dos condiciones son cier-
tas
|| O cond1 || cond2 es true si alguna de las dos condiciones
es cierta
! No !cond1 es true si la condición es falsa
6.2. Switch
La sentencia switch es muy útil si tenemos una serie larga de funciones que
queremos que se ejecuten cuando el valor de una variable coincida con el que le
indiquemos. Su sintaxis sería la siguiente:
switch(selector){
case A:
funcion_1();
break;
case B:
funcion_2();
break;
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
case C:
funcion_3();
break;
deafult: //opcional
funcion_defecto();
break;
}
Así, si el valor de la variable "selector" es "A", ejecuta funcion_1; si el valor

es "B", ejecuta funcion_2, etc. Si el valor no es ninguno de los especificados, se ejecu-
tará la función establecida por defecto.
 91 695 05 19
Un ejemplo sería el siguiente:

(programa 6)
1 int contador = 0;
2
3 void setup() {
4 size(400, 400);
5 background(0);
6 stroke(255);
7 fill(0);
8 rectMode(CENTER);
9 }
10
11 void draw() {
12 contador++;
13 switch (contador) {
14
15 case 1 : //si 'contador' es igual a 1

16 background(0);
17 ellipse(width/2, height/2, 300, 300);
18 delay(500);
19 break;
20 case 2 : //si 'contador' es igual a 2
21 rect(width/2, height/2, 300, 300);
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
22 delay(500);
23 break;
24 default: //para cualquier otro valor de 'contador'
25 contador = 0; //reinicia 'contador'
26 delay(500);
27 break;
28 }
29 }
7. ESTRUCTURAS DE CONTROL. BUCLES

Un bucle es una estructura que contiene una serie de instrucciones que
 91 695 05 19
deben ejecutarse de forma reiterativa mientras se cumple cierta condición (tam-

bién hay bucles que se ejecutan hasta que se cumple cierta condición). En Processing
hay dos bucles: el bucle while y el bucle for.
7.1. Bucle for()

Las estructuras iterativas o repetitivas se suelen utilizar en todos los lenguajes
de programación para realizar una determinada instrucción que se repite un deter-
minado número de veces (bajo unas determinadas condiciones) mediante una única
función dentro de un bucle o loop.
El bucle for() funciona de la siguiente manera:

CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
Veamos cómo funciona en un ejemplo concreto:
(programa 7)
1 void setup()
2{
3 size(400,400);
4 for(int x=20; x<=380; x=x+20)
5{
6 line(x,20,x,380);//dibuja una linea vertical
7}
8}
 91 695 05 19
7.2. Bucle while()

El bucle while() también permite realizar una serie de operaciones similares,
siempre que se cumpla una determinada condición.
Un ejemplo sería el siguiente:

(programa 8)
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
8. AÑADIR 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. Para ello, 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 presio-
nada.
Un ejemplo del uso de ambas variables sería:

 91 695 05 19
La variable key se suele utilizar cuando pulsamos teclas de letras y números,

mientras que keyCode se utiliza cuando utilizamos teclas de símbolos y caracteres
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
especiales (SHIFT, CTRL, UP, DOWN, etc). También es posible implementar la fun-
ción keyReleased que, al contrario que keyPressed, será invocada cada vez que se
suelte una tecla.
9. TRABAJO CON IMÁGENES

Processing puede abrir y manipular imágenes que estén cargadas en tu orde-
nador de tipo JPEG, PNG y GIF, entre otras.
Lo más habitual es que las imágenes se encuentren en la carpe-

ta data del sketch que estemos desarrollando (para ello basta con seleccionar el me-
nú Sketch y, dentro de él, la opción Añadir archivo, eligiendo entonces la imagen que
 91 695 05 19
queramos de entre las guardadas en nuestro equipo).
Para cargar una imagen que se encuentre dentro de nuestra carpeta data,
puede utilizarse un código como el siguiente:
Es importante conocer las dimensiones de la imagen (ancho y alto) en pí-

xeles, para crear previamente una ventana donde encajarla; de no ser así, podría
salir la imagen cortada. Si queremos usar el tamaño original de la imagen y ubicar

su esquina superior izquierda en las coordenadas (0,0) del lienzo, en la última línea
deberíamos poner:
image(imagen_01,0,0);
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo
Si pusiéramos: image(imagen_01, 100,100,width/2,height/2); estaríamos si-
tuando la esquina superior izquierda de la imagen en las coordenadas (100,100) y el
tamaño de imagen sería la mitad.
Si lo que queremos es acceder a una imagen alojada en Internet a través de su

URL, debemos usar la siguiente sintaxis:
 91 695 05 19
FUENTES CONSULTADAS
https://sites.google.com/site/processing2obachillerato/
Libro tecnología, programación y robótica 3ºESO- Anaya
CIF R-7800027-J
UNIÓN EURO-
PEA PastorasGetafe
Fondo Social
Europeo

APUNTES Processing 2021

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

APUNTES Processing 2021

Cargado por

Copyright:

Formatos disponibles

TEMA 4: PROCESSING

2. FORMAS BÁSICAS ............................................................................................................. 9

3. PROGRAMAS INTERACTIVOS ..................................................................................... 13

7. ESTRUCTURAS DE CONTROL. BUCLES .................................................................... 23

Processing trae su propio IDE (entorno de desarrollo integrado), por lo que

Linux como la versión Windows son paquetes comprimidos que no requieren

Algunas de sus características más sobresalientes son:

palda el uso y la mejora del entorno.

 Permite la impresión de documentos y gráficos de calidad.

1.1. Descargar Processing

2º. Haz clic en "Download Processing".

Te pide una donación, pero no es necesario pagar nada (es gratuito).

3º. Comenzará a descargarse la carpeta comprimida.

4º. Empezará a generarse la carpeta donde se encontrará el fichero ejecutable

1.2. El área de trabajo de processing

table. La extensión de Processing es .pde.

1.3. Estructura de los programas

En este lenguaje de programación es muy importante la sintaxis:

1.3.1. Funciones principales

La estructura típica de un programa en Processing tiene dos funciones:

2. La función draw(), que se ejecuta de forma continua, es decir, se está repi-

1.3.3. El lienzo de trabajo. El sistema de coordenadas

tras que en matemáticas el origen de coordenadas (0, 0) se representa habitualmen-

Así, todo programa en Processing donde utilicemos el entorno gráfico, pasa

Vamos a crear nuestro primer programa, en el que creemos una ventana o

lienzo de 500 píxeles de ancho por 300 de alto:

Ahora no tenemos más que pinchar en el icono de “Ejecutar” y ver el resulta-

Ya hemos visto cómo, con la instrucción size(width,height); se define el tamaño

 El RGB, en el que cual-

 #000000 (notación hexadecimal), donde cada dos cifras de dicho número

no lo vamos a usar en este nivel básico).

Para obtener cualquiera de estos parámetros para cualquier color podemos

size (ancho, alto) Define el tamaño en píxeles de la ventana gráfica en la

point (x, y) Dibuja un punto en la coordenada (x, y). Por defecto, el

x3, y3) (x2, y2) y (x3, y3).

rect(x, y, ancho, alto, Dibuja un rectángulo con esquina superior izquierda en

radio) (x, y) y dimensiones (ancho, alto). El parámetro radio es

 Trabaja con línea en escala de grises: stroke(nivel_de_gris); lleva un solo

 Trabaja con línea en colores: stroke(r,g,b); lleva tres parámetros: r, g, b, que

 Cambia el grosor de la línea: strokeWeight(n); modifica el grosor de la línea

 Rellena las figuras: fill(nivel_de_gris); y fill(r,g,b); rellenan respectivamente

 Cambia el color del lienzo: background(nivel_de_gris); y back-

Con Processing, puedes crear programas que se ejecuten continuamente utili-

Este programa establece el tamaño de ventana a 300x300 píxeles y luego di-

El comando mouseX hace referencia a la coordenada X del puntero del ratón,

Este programa permite interactuar con la pantalla mientras se mueve el ratón.

datos más comunes que utilizaremos son los siguientes:

1. Enteros (int). Permiten representar valores numéricos de tipo entero.

2. Reales (float). Permiten representar valores numéricos de tipo real.

Ejemplos: float peso=40.56;

Processing es un lenguaje desarrollado en EEUU y usa el punto "." para asignar

3. Caracteres (char). Permiten representar caracteres.

4. Cadenas de caracteres (string). Permiten representar palabras, frases comple-

5. Valores lógicos (boolean). Permiten representar valores de tipo lógico

Ejemplos: boolean sensorActivado=true;

4.1. Variables del sistema.

 width, ancho de la ventana.

 mouseY, posición del ratón en el eje Y.

 Asignación: =, signo igual.

 Aritméticos: +, -, *, /, ++ y --, que se corresponden con suma, diferencia,

¡ATENCIÓN!: Si definimos una variable dentro de la función setup() o de la fun-

4 background(255,0,0); //fondo de color rojo

Escribe el programa y averigua qué es lo que dibuja. Puedes comprobarlo en