Grau de Multimèdia
DISSENY D’INTERACCIÓ PR1 (Mayo 2013) Alumne: JOAN SOLER ABELLÓ
ENUNCIAT PR1 : Disseny d’un sistema interactiu - Es demana el disseny d'un sistema interactiu que incorpori l'us d'un mínim de dues tècniques d'interacció, d'entre les distintes tècniques que hem estudiat al llarg del curs. - No serà vàlid un projecte en el que només s'usin mouse i teclat. - La temàtica de la pràctica és lliure. Podeu proposar projectes relacionats amb el control de processos industrials, videojocs interactius, visualització musical, aplicacions domòtiques, instal·lacions artístiques, aplicacions web, visualització de dades, etc. - Materialitzeu el prototip del sistema mitjançant les eines de que disposem: Processing i Arduino. Tant el software fet amb Processing com el firmware Arduino dels possibles dispositius electrònics haurà d'entregar-se amb comentaris a peu de codi. - El prototip en funcionament haurà de ser documentat mitjançant video (no importa el format o la resolució mentre se'n pugui apreciar el funcionament). El video resultant haura de penjar-se a la plataforma de vídeo online vimeo.com o youtube.com - Es demana també un document de text amb el concepte del disseny interactiu i la bitàcora del procés de treball. Resumint, els documents a entregar són els següents: 1-Document de text amb concepte del disseny d'interacció i descripció del procés de treball 2-Vídeo penjat a Vimeo o youtube amb imatges del sistema en funcionament 3-Firmware en format Arduino i/o Software en format Processing 4-Esquemàtica en format Fritzing, si el projecte incorpora prototipatge electrònic.
PR1-Disseny d’interacció
1 / 15
PR1 : COLOR: VER y ESCUCHAR Links a video presentación: https://vimeo.com/66848045
http://youtu.be/t1uf7N5ueiw
Introducción El objetivo de ésta Práctica es desarrollar una aplicación con el IDE Processing y una placa Arduino de forma que podamos reproducir los colores en tonos musicales además de su percepción visual. Antes de describir la aplicación interesa definir el concepto: SINESTESIA En neurofisiología, sinestesia (del griego συν-, 'junto', y αἰσθησία, 'sensación') es la percepción conjunta o interferencia de varios tipos de sensaciones de diferentes sentidos en un mismo acto perceptivo. Un sinestésico puede, por ejemplo, oír colores, ver sonidos, y percibir sensaciones gustativas al tocar un objeto con una textura determinada. No es que lo asocie o tenga la sensación de sentirlo: lo siente realmente. La sinestesia es un efecto común de algunas drogas psicodélicas, como el LSD, la mescalina o algunos hongos psilocibios. (Wikipedia : http://es.wikipedia.org/wiki/Sinestesia )
Lo que se pretende es crear un efecto sinestético derivado que se conoce como cromoestesia (http://en.wikipedia.org/wiki/Chromesthesia) siendo éste un tipo de sinestesia en la que se escuchan los sonidos de forma automática e involuntariamente evocando una experiencia de color.
Descripción de la aplicación Mediante una placa Arduino One, algunos componentes y programando con Processing se reproducen de forma sonora los colores generados por tres potenciómetros que definen las ternas RGB, o los colores leídos de un círculo cromático o bien los colores obtenidos de las imágenes captadas por una webcam. Además de la reproducción sonora, los colores se reproducen en un led RGB y la onda sinusoidal se muestra en pantalla, viendo así cómo se modifica la frecuencia asignada a cada color.
Se lleva a cabo una aplicación dividida en tres partes seleccionables:
Selección 1: Obtendremos el color, que se representa en un rectángulo, mediante el accionamiento de tres potenciómetros de forma que cada uno de ellos comanda uno de los valores de la tríada RGB desde (0,0,0) a (255, 255, 255) . Cada rango de color tendrá una equivalencia en frecuencia sonora. Además observaremos en pantalla una onda sinusoidal con la frecuencia acústica correspondiente. El color será también mostrado por un led RGB.
Selección 2: Se representa un círculo cromático y según nos movamos con el ratón por éste iremos obteniendo los distintos sonidos provenientes de la correspondiente relación RGB y frecuencia sonora. Según nos movemos por el círculo, el color elegido aparecerá en el rectángulo del apartado anterior. También podrá verse gráficamente la onda sinusoidal cuya frecuencia corresponde a la frecuencia sonora asimilada al color. El led RGB mostrará el color correspondiente a la terna RGB.
Selección 3: Mediante la captura de video a través de una webcam y dependiendo del color sobre el que está posicionado el ratón obtendremos la frecuencia sonora correspondiente a la vez que el color elegido aparecerá en el rectángulo del primer apartado. En este apartado podemos modificar la posición del ratón para obtener diferentes sonidos o bien movemos la webcam o los objetos que
PR1-Disseny d’interacció
2 / 15
ésta captura. La onda sinusoidal indicada anteriormente será también visible. El led RGB también seguirá mostrando el color correspondiente al que señala el mouse sobre la imagen.
Se dispondrá de un pulsador para conmutar de una selección a otra y tres leds blancos indicarán si hemos seleccionado la opción 1, 2 ó 3 según el número de ello encendidos. Además de la visualización de colores en pantalla y de poder escuchar el sonido asignado, dispondremos de un led RGB (de cátodo común) al que le enviamos las ternas RGB obteniendo los correspondientes colores de forma lumínica. Por lo tanto se dispone de una varias representaciones del color definido: -
Rectángulo de color (visible)
-
Led RGB (visible)
-
Gráfica de onda sinusoidal con frecuencia correspondiente al color (visible)
-
Sonido a través de los altavoces del PC (audible)
-
Terna de valores RGB del color seleccionado en la parte inferior consola Processing (visible)
Se dará una equivalencia “musical” a valores discretos de colores ya que es complicado encontrar una relación sencilla que relacione ternas RGB y frecuencias de sonido. De hecho en el estudio http://www.sedoptica.es/menu_volumenes/pdfs/opa43-4-267.pdf se llega a una propuesta que relaciona la longitud de onda cromática y la longitud de onda sonora (de donde podemos obtener la frecuencia) pero no es sencillo relaciona las triadas RGB con su longitud de onda ya que para ello se deben llevar a cabo cálculos complejos donde intervienen las coordenadas cromáticas no siendo fácil relacionarlas con una simple fórmula. No se dará sonido al blanco (255, 255, 255) ni al color negro (0,0,0).
Vistas de la pantalla para cada opción disponible a escoger:
Selección 1
PR1-Disseny d’interacció
Selección 2
Selección 3
3 / 15
Con respecto a lo referente a la utilidad de la aplicación se observan algunas posibilidades:
Juego de entretenimiento para adivinar colores a partir del sonido. Pudiendo crear el color, obtenerlo a partir de un circulo cromático o bien a través de objetos observados a través de una webcam
También se puede intentar la creación de sintonías sencillas
Sin olvidar la parte educativa de poder asociar colores a sonidos
Proceso de trabajo Una vez se ha definido el propósito del montaje a llevara a cabo, se ha utilizado la placa Arduino Uno cableándose los elementos montados en la Protoboard a esta según lo mostrado más abajo y en paralelo se ha ido programando según se iban añadiendo y conexionando elementos. Se han usado los elementos siguientes: Inputs :
1 Webcam
3 potenciómetros (entradas analógicas)
1 pulsadores (funciones selección)
Posición del ratón (capturando color)
1 led amarillo indicador on/off
3 led blancos (indicador de selección)
1 led RGB (mostrando color elegido u objeto)
Tarjeta de sonido del ordenador
Pantalla PC (mostrando consola Processing y datos sobre ternas obtenidas)
Outputs:
En el propio código de programación en Processing pueden encontrarse amplios comentarios sobre cómo se han solucionado las opciones.
PR1-Disseny d’interacció
4 / 15
Imágenes del montaje Vista general, identificando componentes
Y algunas fotos de toda la aplicación montada:
PR1-Disseny d’interacció
5 / 15
Imágenes del led RGB (con capuchón para evitar que “queme” la imagen y pueda apreciarse mejor el color
Imagen pantalla de Processing:
Detalle de las ternas de valores RGB obtenidas al ir desplazando el cursor y de la onda sinusoidal cuya frecuencia corresponde a la frecuencia de audio relacionada al color: PR1-Disseny d’interacció
6 / 15
Puntos importantes del desarrollo Aparte del propio montaje y programación hay que destacar que un punto importante del desarrollo ha sido la conversión las ternas RGB de color a frecuencias sonoras. Nos basamos en el estudio mencionado más arriba (http://www.sedoptica.es/menu_volumenes/pdfs/opa43-4267.pdf ) donde encontramos el círculo cromático:
PR1-Disseny d’interacció
7 / 15
Al que corresponde la tabla:
Se quiso establecer una ecuación entre las coordenadas de color y la frecuencia sonora y se encontró la relación entre la longitud de onda cromática y la longitud de onda sonora (en el estudio mencionado):
donde λc (nm) es el valor de la longitud de onda del tono de color considerado, y λm (nm) es el valor de la longitud de onda de la altura de la nota del espectro de sonido. Pero la dificultad radicaba en encontrar una fórmula que relacionase las coordenadas RGB con la longitud de onda cromática. Por ello se han usado los valores discretos de la tabla anterior y se han dado rangos amplios para acotar la cantidad de datos a entrar (siendo viable pero no dentro del alcance de esta práctica). Los valores han quedado definidos por:
R
G
B
freq (Hz)
255
0 64 65
0
27,5
A0
La0
255
128 192 193
0
48,999
G1
Sol1
255
255
0
87,307
F2
Fa2
255 193 192
255
0
87,307
F2
Fa2
128 64
255
0
155,563
D3#
Re#3
65 0
255
0
277,183
C4#
Do#4
0
255
0
277,183
C4#
Do#4
PR1-Disseny d’interacció
Nota denom. eng
Nota denom. esp
8 / 15
R
G
B
freq (Hz)
Nota denom. eng
Nota denom. esp
64 65
0
255
128 192 193
493,883
B4
Si4
0
255
255
880
A5
La5
0
255 193 192
255
880
A5
La5
0
128 65 64
255
1567,982
G6
Sol6
0
0
255
2793,826
F7
Fa7
0 64 65
0
255
2793,826
F7
Fa7
128 192
0
255
4978,032
D8#
Re#8
193 255
0
255
8869,944
C9#
Do#9
255
0
255 193 193
8869,944
C9#
Do#9
255
0
128 65 64
15804,266
B9
Si9
255
0
0
27,5
A0
La0
PR1-Disseny d’interacció
9 / 15
Para una nueva versión, se podría aumentar el conjunto de valores relacionados de ternas RGB con valores de frecuencia sonora para ello disponemos de la rueda cromática ampliada:
Deberemos convertir la nomenclatura inglesa a la nuestra (puede verse en la tabla que se ha presentado anteriormente) Y con la fórmula que sigue podemos calcular la frecuencia sonora de cada tono;
Donde octava es un entero entre 0 y 10, y "nota" es un entero en el rango de 1 a 12. Do=1, Do#=2, Re=3, Re#=4, Mi=5, Fa=6, Fa#=7, Sol=8, Sol#=9, La=10, La#=11, Si=12.
PR1-Disseny d’interacció
10 / 15
Con todo ello obtendríamos tablas tales como:
Con ello los valores de colores relacionados con frecuencias sonoras aumentaría y con ello la fidelidad y mejora del sonido.
PR1-Disseny d’interacció
11 / 15
Montaje protoboard (Fritzing)
Esquema (Fritzing)
PR1-Disseny d’interacció
12 / 15
Identificación de las funcionalidades básicas Paso a enumerar las principales funcionalidades definidas en la aplicación (aparte de los amplios comentarios que se añaden en el código de Processing):
- Importación de las librerías Arduino, Serial, Minim y OpenCV - Declaración de todas las variables, entradas y salidas - Función de setup declarando un tamaño de display de 600x900 px, establece la conexión serie, establece y define el estado y características de algunas variables (y pins) e inicia los objetos Capture de video, Minim de audio - La función principal (draw) empieza dando la orden de encendido a los leds blancos según la selección - Se han definido funciones: -
pantalla () : Dibuja la “pantalla” de la aplicación con sus colores e imágenes insertadas dependiendo de la selección efectuada.
-
tomar_color() : para obtener un color del punto donde está situado el cursos del ratón en un lugar de la pantalla en que operamos
-
rgb_freq(): asigna a cada color (o mejor dicho rango de color) una frecuencia discreta de audio
-
led_RGB() : función que controla el LED rgb dependiendo de los valores que recibe
-
cuadro_color ():define el color y lo muestra en pantalla según entrada valores del potenciómetro
-
rueda_color ():dibuja una rueda de colores (circulo cromático de la pantalla)
- Se lanza la función sine.setFreq(freq) que crea onda sinusoidal con la frecuencia definida de audio
Tecnologías usadas para el prototipo Se ha usado Processing v.1.5.1 para la programación. Se usa Arduino One y una protoboard para el montaje. Para la composición del video se ha usado After Effects CS5. En la composición se incluye video filmado y secuencias de imágenes de la propia aplicación (pantalla de Processing) obtenidas mediante CAM Studio .
Dificultades detectadas -
Se quería usar un servomotor como dispositivo “apuntador” (montando un pequeño puntero que sobre una carátula señalase la opción escogida pero las dificultades de comandar el servo sólo con Processing ha llevado a desechar esta inciativa. (Ver mis discusión en Foro de Laboratori Programació Creativa aula 1).
-
En principio se usó un zumbador que debía reproducir las vibraciones mediante el comando Tone a través de Processing. Ello no fue posible ya que el Processing 1.5.1 no admite este comando.
-
Se intentó mediante comandar la salida digital mediante intervalos de high/low (generando onda cuadrada en dos estados) pero la limitación de la velocidad de transmisión en Arduino One (limitada a 57600bps) y con el uso de transmisión de imagen de video la frecuencia quedaba muy alterada.
PR1-Disseny d’interacció
13 / 15
-
Se intentó mediante un player arrancado ficheros wave de sonido que de hecho fueron creados con Audacity:
-
Al final he optado por el uso de la librería Minim de Processing cerando una onda sinusoidal que es audible a través de la tarjeta del PC y a la vez me permite con un poco más de código mostrar en pantalla dicha onda sinusoidal a la frecuencia sonora correspondiente a cada color.
-
Se usó el Processing 1.5.1 ya que la versión 2 no soporta Firmata.
-
Se optó por no usar el IDE de Arduino para evitar los problemas de transmisión simultánea con un solo puerto serie lo que nos dejaba sin consola Arduino y con la imposibilidad de poder chequear los valores recibidos y trasmitidos de y a Processing.
Y ya posteriormente en la filmación del video aparecieron un par de problemas adicionales: -
La luminosidad del led RGB no dejaba grabar correctamente el color que se obtenía. Se usó un capuchón semiopaco para mitigar algo el problema.
-
En un principio la idea era imprimir laminas con las imágenes a leer por la webcam pero se desechó ya que la impresión no era suficientemente buena y la webcam leía colores incorrectos. La solución fue leer las imágenes de una segunda pantalla hacia la que se enfocó la cámara. En este caso la luminosidad de la pantalla fue un aliado.
Un punto importante sería la mejora de la aplicación disponiendo de un mayor número de colores relacionados con notas musicales. Para ello se recomienda consultar el párrafo anterior: Puntos importantes del desarrollo
PR1-Disseny d’interacció
14 / 15
Bibliografía http://en.wikipedia.org/wiki/Web_colors http://www.sedoptica.es/menu_volumenes/pdfs/opa43-4-267.pdf http://sh.xmit.org/pub/appinventor/websafe4appinv.html http://www.disfrutalasmatematicas.com/numeros/hexadecimal-decimal-colores.html http://es.wikipedia.org/wiki/Sinestesia http://es.wikipedia.org/wiki/Armon%C3%ADa_crom%C3%A1tica http://en.wikipedia.org/wiki/Chromesthesia http://www.audicus.com/blogs/hearing-aids-blog/6631150-hearing-colors-and-seeing-sound http://cogprints.org/6268/1/Cortex_sound-colour_Synaesthesia.pdf http://www.colormusica.com/ http://www.musicaycolor.com/ http://es.wikipedia.org/wiki/Frecuencias_de_afinaci%C3%B3n_del_piano http://webdelprofesor.ula.ve/ciencias/sanrey/tubos.pdf http://latecladeescape.com/t/Frecuencia+de+las+notas+musicales
===============================================
PR1-Disseny d’interacció
15 / 15