APUNTES

PROCESSING

Mara Arpa Recio

marparecio@[Link]

@Mara_Arpa
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

INTRODUCCIÓN................................................................................................................................................... 2
NOCIONES BÁSICAS ............................................................................................................................................ 2
Partes del entorno de desarrollo (IDE)........................................................................................................... 2
Funciones principales: .................................................................................................................................... 3
Comentarios .................................................................................................................................................... 3
Coordenadas: .................................................................................................................................................. 3
Orden: ............................................................................................................................................................. 4
Formas básicas: ............................................................................................................................................... 4
Colores y acabados: ........................................................................................................................................ 9
Datos: ............................................................................................................................................................ 11
Operadores: .................................................................................................................................................. 11
Variables........................................................................................................................................................ 11
Texto:............................................................................................................................................................. 12
FUNCIONES........................................................................................................................................................ 14
Matemáticas: ................................................................................................................................................ 14
Aleatorio: ...................................................................................................................................................... 15
Imagen:.......................................................................................................................................................... 15
CREAR FUNCIONES ............................................................................................................................................ 19
ITERACIONES ..................................................................................................................................................... 20
For: ................................................................................................................................................................ 20
While: ............................................................................................................................................................ 21
CONDICIONALES................................................................................................................................................ 22
Si .................................................................................................................................................................... 22
En caso de...................................................................................................................................................... 23
EFECTOS............................................................................................................................................................. 23
Escalar: .......................................................................................................................................................... 23
Trasladar: ...................................................................................................................................................... 24
Rotación: ....................................................................................................................................................... 24
Reiniciar Efectos ............................................................................................................................................ 25
TIEMPO Y VELOCIDAD....................................................................................................................................... 25
FECHA Y HORA .................................................................................................................................................. 26
ARRAY................................................................................................................................................................ 27
MATRICES .......................................................................................................................................................... 28
GUARDAR IMÁGEN Y CICLOS............................................................................................................................ 29
REPRODUCIR AUDIO ......................................................................................................................................... 30
REPRODUCIR VIDEO .......................................................................................................................................... 32
FUENTES CONSULTADAS .................................................................................................................................. 33

1
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

INTRODUCCIÓN
Processing es un lenguaje de programación, derivado de java, dirigido a la creación de gráficos, compatible
con los principales sistemas operativos. Es de código abierto, y desde la página [Link]
podemos descargar el entorno de desarrollo que nos permitirá escribir el código, ejecutar y visualizar los
programas creados.

Es un lenguaje fácil de empezar a usar, pero muy potente, permite usar distintos tipos de programación
como sentencia a sentencia, estructurada y orientada a objetos. Se puede combinar fácilmente con arduino
y html.

NOCIONES BÁSICAS
Para empezar a programar debemos conocer como es el entorno de desarrollo, cómo se incluyen
comentarios, cómo se usan las coordenadas, cuáles son las funciones, órdenes, datos, y variables principales.

Partes del entorno de desarrollo (IDE)

1. Menú.
2. Botones para ejecutar y parar el programa.
3. Control de variables.
4. Modo (Java, R, Python...).
5. Nombre del archivo.
6. Números de líneas.
7. Zona de código.
8. Visor de mensajes.
9. Botones de consola y errores.

2
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Funciones principales:
Un programa de processing está formado por dos funciones principales: void setup() donde se incluirán las
sentencias que se quieran ejecutar una sola vez, y void draw () que se ejecutará en bucle indefinidamente.

Comentarios
Para incluir comentarios en el código tenemos 2 formas según ocupen una o varias líneas.

 // 1 línea.
 /* */ varias líneas.

Coordenadas:
Muchas de las sentencias que usemos para crear nuestros diseños, utilizarán coordenadas. Lo primero que
debemos conocer es que el punto de origen es la esquina superior izquierda de la ventana.

Las coordenadas indicarán la posición de un punto, indicando su distancia en pixeles desde el eje x y la
distancia desde el eje y separados por una coma.

El tamaño del lienzo que vayamos a programar se indicará con la orden size(x,y), donde “x” serán los pixeles
que ocupará a lo ancho, e “y” los ocupados a lo alto. Este tamaño no limita los elementos, si no la parte
visible, si un elemento es más grande que el lienzo se saldrá por los lados o incluso ni se verá, si su origen
está en los bordes.

3
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Orden:
Las sentencias se ejecutan en orden descendente. Este orden también marca la posición de los elementos en
el lienzo, dibujándose unos sobre otros, quedando encima el último dibujado.

Formas básicas:

 Punto: point(x,y);posición en el eje x y posición en el eje y.

 Línea: line(x1,y1,x2,y2); Punto de inicio y punto de final.
 Rectángulo: o cuadradado rect(x,y,ancho,alto); punto de inicio (x,y) ancho y alto. Para cuadrados
también podemos usar square(x,y, lado); siendo x , y el punto de inicio.
o rectMode(); admite los parámetros CORNER, para tomar como punto de origen la esquina
superior izquierda en vez del centro que toma por defecto o con CENTER, y CORNERS, que
convierte los valores de ancho y alto en el punto de la esquina opuesta origen (esquina
inferior derecha)

4
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 Cuadrilátero quad(x1,y1,x2,y2,x3,y3, x4,y4) se indican los cuatro puntos que limitan el polígono.
 Círculo: o elipse, circle(x, y, diámetro) y ellipse(x,y,ancho,alto)
o ellipseMode(); RADIUS toma origen el centro de la elipse, pero los valores 3 y 4 indican sus
radios no sus diámetros como CENTER o por defecto. Con CORNER cambia el origen de la
elipse del centro a la esquina superior izquierda del rectángulo que la contendría, CORNERS
toma el origen como CORNER y los valores 3 y 4 como la esquina opuesta.

 Triángulo: triangle(x1,y1,x2,y2,x3,y3 )
 Arcos: arc(); tiene como valores, el centro (x,y), ancho, alto, ángulo inicial y ángulo final. Los ángulos
se pueden indicar en función de Pi, o usando radianes.

 Curva Bezier: bezier(x1,y1, cx1,cy1,cx2,cy2, x2,y2,) definida por los puntos de inicio y fin, y los puntos de
control.

5
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Forma libre:

Processing permite crear figuras a partir de sus vértices. Para ello usaremos el método beginShape()
endShape(), entre los que indicaremos los vértices de la figura vertex(x,y);. Para que se muestre la forma
contenida en los vértices usamos el parámetro CLOSE en endShape();

Si usamos curveVertex();, en vez de vertex, usaremos líneas curvas para limitar la figura creada. También
podemos usar la opción bezierVertex(); para usar curvas tipo Bezier .

Este método beginShape() admite como parámetros:

 POINTS, la forma está limitada por puntos.

6
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 LINES, la forma está limitada por líneas independientes (no comparten vértice).

 TRIANGLES, los vértices se unen mediante triángulos independientes.

 TRIANGLE_STRIP, los vértices se unen mediante una secuencia de triángulos unidos.

7
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 QUADS, agrupa cada cuaterna de vértices de forma independiente.

 QUAD_STRIP, Limita la forma mediante rectándolos contiguos, aquí el orden de los puntos varía, no
los indicamos por como los dibujaríamos con líneas sin saltar ningún punto. Los ordenamos de
menor a mayor, primero por el valor de x y después por el de y.

 POLYGON

8
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Colores y acabados:
El color de los distintos componentes se puede indicar usando principalmente los códigos RGB (con y sin
transparencia) y hexadecimal. El entorno de desarrollo incluye la herramienta “selector de color.”

Dependiendo de a qué queramos darle color usaremos las siguientes órdenes.

 Fondo: background(código_color);
 Relleno de formas: fill (código_color); antes de la forma o formas elegidas. noFill() sin relleno.

Si superponemos figuras no opacas de diferentes colores podemos crear colores nuevos en las
intersecciones.

 Borde: strokeWeight(grosor); antes de la formas o formas elegidas. stroke(código_color);

noStroke(); sin contorno.

9
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

strokeCap(); Acabado de los bordes, forma cuadrada (SQUARE), redondeada(ROUND) y termino medio
(PROJECT)

strokeJoin(); configura el acabado de los vértices de una figura para que aparezcan en esquina (MITER,
forma por defecto), corta recta la esquina (BEVEL), o esquina redondeada (ROUND)

Suavizar: noSmoth, muestra el contorno redondeado de las figuras como líneas y puntos, mientras que
smooth, opción por defecto, no hace falta especificarlo, suaviza los contornos, mostrando una sola línea
curva.

10
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Datos:
En programación se usan distintos tipos de datos, que permiten ser usados en diferentes sentencias y
operaciones. Los principales tipos de datos son:

 Entero: int
 Reales: float
 Carácter: char
 Cadena de carácter: string
 Lógicos: boolean

Operadores:
Asignación = Igualdad == distinto: !=
Mayor y menos que >, < Mayor o igual, menor o igual >=, <=
Suma + Incrementar en 1 ++ Resta – reducir en 1 --
Multiplicación * División cociente :/ resto: %
Lógicos o: || y: && no: !

Variables
Processing permite utilizar variables locales, creadas dentro de una función que solo puede usarse en ella, o
globales, creada fuera y que puede ser usada por todas las funciones.

Las variables se crean indicando el tipo de dato y el nombre de la variable. En el mismo momento se pueden
iniciar asignándoles un valor.

Variables de sistema:

 Anchura: width
 Altura: height

11
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 Posición del ratón en el eje x: mouseX

 Posición del ratón en el eje y: mouseY

De forma infinita se dibujará un cuadrado de 60x60 en la posición del ratón. En el segundo caso solo se ve el ultimo
dibujado, en cada repetición se pinta el fondo de Nuevo tapando los cuadrados anteriores.

 Última letra pulsada: key

 Código de letra: KeyCode Para conocer el código de las distintas teclas especiales (las letras y el
espacio tienen código 0)

Código de algunas teclas

Mayúscula: 16 Bloque mayúsculas: 20 Flecha izquierda:37
Control: 17 Alt:18 Flecha arriba:38
Inicio: 36 Fin: 35 Flecha derecha:39
Flecha abajo:40

 Presionar tecla: KeyPressed (bolean)

 Soltar una tecla: keyReleased (bolean)
 Presionar el ratón: mousePressed (bolean)
 Botón del ratón: mouseButton (RIGHT o LEFT)
 Soltar el ratón: mouseReleased (bolean)
 Esconder o modificar el cursor: noCursor() cursor(ARROW, CROSS, HAND, MOVE, TEXT, and WAIT)

Texto:
 Mostrar texto en la consola: print(“texto”); o println(“texto”); inserta un salto de línea después del
texto.

12
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 Mostrar texto en la ventana: text(“texto”, x,y); textSize(pixeles); antes del texto al que se le quiere
cambiar el tamaño.

Además del punto de origen del texto puedo indicar la anchura y altura del cuadro que contendrá el
texto.

Con textLeading(); puede configurar la distancia entre las líneas de un texto.

Con textAlign(LEFT, CENTER O RIGHT); Podemos alinear el texto dentro del cuadro de texto. Por
defecto se alinea a la izquierda.

13
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Para el color, al texto le afecta la orden fill, usando el código RGB además del color podemos
configurar la transparencia con el último parámetro, desde trasparente (0), hasta opaco (255).
También podemos cambiar la fuente con la herramienta crear fuente, en el código crearé una
variable PFont y usaremos el nombre del [Link] con la ordenes variable =
loadFont(“[Link]”) y textFont(variable);

Se ha escrito el mismo texto con el mismo color, cada vez 10pixeles más abajo y con una transparencia menor .

También podemos crear la fuente indicando el nombre de la fuente (puede no reconocer todas), el tamaño y true
para que no se solapen las letras createFont(“Algerian”,22,true)

FUNCIONES
Matemáticas:
 Cuadrado sq();, devuelve el cuadrado de un número.
 Raíz cuadrada sqrt();, devuelve el cuadrado de un número.
 Exponente pow(x,n);, devuelva la potencia i del número x.
 Número pi: PI, sus variantes (QUARTER_PI, HALF_PI, TWO_PI)
 Trigonometría: seno: sen(), coseno: cos(),
 Paso de grados radianes:(radians() y de radianes a grados degree();

 Convertir valor a otro rango: map cambia un valor(valor 1) de un rango indicado(valores 2 y 3) a otro
(valores 4 y 5)

14
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Aleatorio:
La función random permite crear número aleatorio dentro del rango marcado por los parámetros
random(n1, n2) o entre 0 y el parámetro marcado random(n);

Si en vez de escribir el bucle for, para repetir varias veces la creación de puntos con color, posición y tamaño
aleatorio, lo incluimos en la función draw(), crearemos una animación donde irán apareciendo puntos de
diversos colores, tamaños, y en distintas posiciones dentro de la pantalla.

Esta función tiene como variante randomSeed(); que repetirá en el mismo orden los números aleatorios
generados cada vez que se ejecute el programa.

Imagen:
Processing permite incluir imágenes. Para ello deben estar guardadas en la carpeta DATA del proyecto, y la
seleccionaremos desde el menú “Sketch”, opción “Añadir archivo”.

15
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

En el código debemos iniciar una variable de tipo PImage, en esta variable cargaremos la imagen
seleccionada con loadImage(“[Link]”); y después con la función image(variable,x,y); colocaremos al
imagen en el lienzo.

Podemos cambiar el tamaño de la imagen, añadiendo los valores al anchura y altura la función image();

Con la orden tint(); podemos tintar la imagen usando tonos de gris (un valor entre 0 y 255), gris con
trasparencia (valor de gris y valor de transparencia), con código RGB con y sin transparencia o con el código
hexadecimal. noTint(); devuelve el color original a la imagen.

16
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Efectos de imágenes

En processing existen varias sentencias que aplican efectos a las imágenes.

filter(MODO, NIVEL); aplica los siguientes modos en los que se podrá elegir con qué porcentaje se aplica.

 THRESHOLD, convierte a blanco y negro según el nivel.

 GRAY, convierte en escala de grises.

17
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 INVERT, invierte los colores de la imagen.

 POSTERIZE, convierte la imagen al número de colores que especifique el nivel. (2 A 255)

 BLUR, difumina la imagen con la intensidad que indique el nivel.

 ERODE, reduce la luz.

18
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

 DILATE, incremente la luz.

CREAR FUNCIONES
Además de las funciones principales void setup() y void draw();, podemos crear funciones propias que
después llamaremos desde las funciones principales. Esto permitirá organizar las ordenes de forma más
sencilla de entender al reducir el número de líneas de código dentro de las funciones principales, y a reducir
las órdenes necesarias al reutilizar aquellas sentencias que suelan repetirse.

Para crear una función usaremos void y el nombre de la función. A las funciones podemos pasarle
parámetros cuyos valores indicaremos entre los paréntesis de las funciones, o no pasar nada como ocurre
con setup o void por lo que los paréntesis aparecen vacíos. Si las funciones van necesitar parámetros se
crearán dentro del paréntesis de la creación. El código de la función aparecerá limitado por llaves {}.

Para llamar a la función simplemente se escribirá en las funciones principales el nombre de la función
seguido de los paréntesis vacíos o con los valores de los parámetros.

19
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Processing también permite crear funciones que devuelvan valores, En este caso la función no se creará
como void, si no del tipo de dato que vaya a devolver (float, int, char, string…). Puede pedir parámetros y la
última línea de la función será return y el valor a devolver.

ITERACIONES
For:
El bucle for, permite repetir una serie de órdenes o funciones en función de unas condiciones relacionadas
con una variable. Al bucle for debemos indicarle desde y hasta que valores de la variable va a ejecutarse, así
como el incremento que sufrirá la variable en cada ciclo.

Hemos repetido la orden línea desde x= hasta x=50 incrementando en 10 el valor de x en cada iteración, por lo que se
van a dibujar 5 líneas. Estas líneas tendrán como valor x de inicio 50, y de final 80, mientras que la posición del eje y se
va desplazando en 10 cada iteración, por lo que las líneas resultantes serán paralelas y distanciadas por 10 pixeles.

Los bucles for se pueden anidar, y forma común de anidarlos, es crear un bucle for para la posición x y
dentro otro para controlar la posición y.

20
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

El primer bucle controla desde el origen del eje x (x=0) hasta la anchura máxima de la pantalla (x=100), incrementando
cada vez el valor de x en 10 pixeles, a su vez se ejecute el mismo bucle para y (desde el origen del eje y hasta la altura
máxima), dibujando en cada iteración una línea diagonal. Llenando así todo el lienzo de líneas diagonales paralelas
distanciadas 10 pixeles.

While:
El bucle while se repite mientras se cumplen una condición. A diferencia del for, la variable contador a usar
se declara fuera del bucle, y el incremento se realiza dentro, como parámetro del while solo se incluye la
condición.

21
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

CONDICIONALES
Si
La función if permite que se ejecute una parte del código si se cumple una condición.

Si se presiona el ratón el color del fondo cambia de forma aleatoria.

La función if puede tener una segunda parte, else , de forma que si se cumple una condición se ejecute un
código, y si no se ejecute otro.

Al código de crear puntos con tamaño, color y en sitio aleatorio, se incluimos la condición de que si el tamaño es menor
de 60 el punto sea opaco, y si no tenga transparencia de 50.
Los condicionales pueden anidarse.

Ahora si los puntos son menores de 60 serán opacos, si miden entre 60 y 100 tendrán una transparencia de 150, y si son
mayores de 100 de 50.

22
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

En caso de
Si una variable puede tomar varios valores podemos usar la función Switch. Necesitaremos una variable, en
función del valor de esa variable tendremos varios casos, case, que harán que se ejecute un determinado
código delimitado por un break. La función switch cuenta con la opción default, que se ejecutará si no la
variable no coincide con el valor de ningún case. La variable switch debe ser un entero o carácter, por lo que
su uso está limitado.

Al pulsar la r, se dibujan cuadrados con borde rojo de tamaño y posición aleatoria, con la t se dibujan triángulo de borde
azul, con la e elipses con borde verde, y con cualquier otra tecla se vuelve al fondo inicial.

EFECTOS
Escalar:
scale(n); escala la forma a un tamaño n veces el original. Afecta a las formas dibujadas después.

23
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Trasladar:
translate(x,y); Traslada la forma dibujada después al punto indicado. Si al inicio del programa usamos
translate, estamos cambiando el origen del eje de coordenadas.

Rotación:
Con processing se pueden girar las formas con la orden rotate(n); donde n es el ángulo de giro, El giro se
produce respecto al eje de coordenadas. En el segundo ejemplo al ejecutar la rotación en el draw, se
repetirá creando una animación.

Para que un objeto gire sobre su centro, tendremos que cambiar el modo de la figura y trasladar el objeto al
centro del lienzo. Si no queremos que se vea la estela que dejan los cuadrados al sobrescribirse, podeos
cambiar el color del fondo en cada ciclo.

24
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Reiniciar Efectos
Para que los efectos anteriores no se apliquen a todas las formas dibujadas después podemos usar
pushMatrix(); y popMatrix(); para limitar a quién afecta cada opción, o resetMatrix(); para resetear los
efectos aplicados antes.

TIEMPO Y VELOCIDAD
Processing permite modificar la velocidad a la que se muestran los frames, cada uno de los ciclos. Indicando
cuando se muestran por segundo, por defecto la velocidad es de 60 por segundo. La opción frameRate();
permite modificar esta velocidad.

Con frameRate(10);los puntos se dibujarán mucho más despacio que con frameRate(100);

25
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

La función millis(); almacena el tiempo en milisegundos desde que empezó la ejecución del programa. Esta
función permite controlar en qué momento se ejecuta una orden.

En el ejemplo, a los 4 segundos de empezar se dibujaría una circunferencia cuyo radio va creciendo.

FECHA Y HORA
En processing podemos incluir información sobre la fecha y hora actual con las siguientes funciones.

 Día: day();
 Mes: month();
 Año: year();
 Hora: hour();
 Minuto: minute();
 Segundo: second();

Guardando en variables el resultado de las funciones de hora, podemos crear un reloj digital, mostrando
como texto el contenido de las variables, al que podemos dar distinto formato.

26
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Para que el valor de las horas, minutos, o segundos siempre se muestre en 2 dígitos, podemos usar
nf(variable,nºdígitos);

Usando el seno y el coseno de las funciones de hora podemos dibujar un reloj analógico. (código obtenido de
programació[Link]).

ARRAY
Para guardar una serie de datos, existe un tipo de dato complejo, el array. Nos va a permitir guardar y leer
varios datos de una misma variable.

Para poder asignar y recuperar los datos usaremos nombre_array[n], donde n es la posición del array. Para
asignar todos los valores podemos usar {} que incluirá la lista de valores separados por comas. Los array
pueden contener valores de distintos tipos de datos, a la hora de crearlo deberemos indicar el tipo de dato
que contendrá. La orden nombre_array.lenght indica el tamaño total del array, el número de valores que
almacena.

27
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

En el ejemplo se dibujan puntos de color aleatorio en la diagonal en las posiciones 10,10 al 90,90, posiciones marcadas
por los valores del array.

MATRICES
Las matrices son arrays de dos filas, como valores se guardan parejas de datos (posición 1 de las filas 0 y 1) .

En el ejemplo hemos guardado en una matriz los puntos para crear una forma. Dentro de beginShape hemos recorrido
la matriz para que cada columna nos indique las coordenadas de cada vértice de la figura.

28
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

GUARDAR IMÁGEN Y CICLOS.

Processing tiene órdenes para guardar las imágenes generadas en la carpeta del proyecto.

save(“[Link]”) guarda la imagen generada en Processing con el nombre y el formato indicado. Debe
escribirse en Void setup(), si se escribe en draw, se sobrescribirá la imagen cada ciclo.

saveFrame(“nombre-####.ext”) guarda la imagen generada en cada ciclo, el nombre será el indicado

sustituyendo las # por el número del ciclo.

La herramienta Creador de Películas, crea un archivo de vídeo con imágenes y audio. La herramienta nos
pedirá que le indiquemos donde están las imágenes a usar en la película y el audio que queremos incluir. El
resultado será un archivo .mov.

29
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Esta opción combina a la perfección con la opción de saveFrame.

REPRODUCIR AUDIO
Para incluir audio en un programa de Processing, lo primero que debemos hacer es guardar el archivo de
audio en la carpeta data del proyecto. El siguiente paso es importar una biblioteca de audio. Para ello desde
el menú Skecth, elegimos la opción importar biblioteca, añadir biblioteca. En la ventana que se abrirá, en el
desplegable de la derecha seleccionamos la categoría sonido. De las disponibles vamos a elegir Minim e
instalarla. Con esta librería vamos a poder reproducir archivos mp3 o wav, entre otros formatos.

30
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

Una vez instalada la librería Minim, en el programa tendremos que incluir una seria de órdenes:

En las primeras líneas debemos importar [Link].* para poder trabajar con funcionas básicas como
reproducir o parar el audio, crear una variable tipo Minim y un objeto tipo AudioPlayer.

En void setup para poder cargar el archivo de música, lo primero será asignar a la variable audio new
Minim(this), después al objeto reproductor le cargaremos el archivo guardado en la carpeta del proyecto con
.loadFile(). Una vez que el archivo se haya cargado ya podremos reproducir el audio con la función .play() y
pausarlo con .pause().

En el siguiente ejemplo el programa carga un archivo de audio, añade una imagen como fondo y muestra un
texto indicando que para que suene la música se debe pulsar la tecla p y para que pare se pulsará s. Las
acciones de lo que ocurre al pulsar una u otra tecla se controlan usando un Switch case con la última tecla
pulsada (key) y usando las funciones play, pause y stop.

31
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

REPRODUCIR VIDEO
Reproducir video dentro de un programa creado con Processing es un proceso muy parecido a reproducir
video. Primero instalaremos la biblioteca video desde la opción Sketch/importar biblioteca/añadir biblioteca
en la categoría visión de video instalamos la biblioteca Video.

Dentro del programa tendremos que importar [Link].*, crear una variable tipo Movie. De manera
parecida al sonido, le asignamos a la variable que hemos creado new Movie(this, “nombre_del _video”).
Para que processing lea el archivo de video crearemos la función void movieEvent, con un parámetro de tipo
Movie, dentro de la función usaremos el método read.

Para reproducir el video podremos usar las opciones play() o loop() sobre la variable global de tipo Movie ,
para pausarlo podemos usar .pause() y para pararlo y que se vuelva a reproducir desde el inicio .stop().

En el ejemplo se muestra texto indicando que al pulsar p se reproducirá el video y con p se pausará.

32
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio

FUENTES CONSULTADAS

Libro Processing A Programming Handbook for Visual Designers and Artists de Casey Reas y Ben Fry

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

33