Espacio Personal

ActiFolio: 222 Interacción tangible 222_20_656

Interacción tangible

Panel de emociones y control de acceso

Para este proyecto se ha creado un panel interactivo que permita a los infantes dar a conocer como se sienten.

Desarrollo 

Para poder desarrollar el panel de emociones, lo primero que debe hacerse es crear una base de datos y un servidor para poder almacenar el sitio web. Para ello se ha instalado Xampp, dentro del cual se encuentra el módulo apache para el servidor y la bbdd mySQL donde hay tres tablas. La web-app se comunica con el servidor, principalmente hecho con lenguaje php y html, para extraer y montar la web en función del número de alumnos y los datos de los alumnos.

Aquí en localhost encontramos tres tablas en una base de datos llamada school:

  1. Flag con dos columnas: id_flag e id_state. Esto sirve como control de que algo se ha escaneado con la cámara. Siempre tendrá un registro, 0 si no hay escaneado y id_alumno si se ha escaneado.
  2. State con 3 columnas: date, id y state. Sirve como registro del estado emocional del alumno.
  3. Student: contiene dos columnas, name e id. Posteriormente se podrían añadir otros datos importantes, como la clase, el nombre del profesor…

El sitio web está en el servidor Xampp (School web). Está hecha en php para que pueda funcionar la vinculación con la base de datos y html + css (style en las propias etiquetas html y en la librería Bootstrap 5). 

¿Cómo funciona la cámara? 

El código se encuentra programado en el IDE de Arduino. Se han tenido que instalar las librerías de ESP32. El script funciona de la siguiente manera: se conecta al WIFI (lo tiene integrado) y hace una serie de configuraciones, donde crea un servidor web en el cual se emitan las imágenes capturadas. Se muestra en 3 resoluciones diferentes, en este caso, se usa la resolución más baja, ya que el uso es simplemente como lector QR. Para que la cámara pueda identificar la grabación, se ha usado Python, ya que dispone de librerías de reconocimiento facial, de imagen, de objetos… En este caso, se ha enfocado en el reconocimiento de código de barras/QR. El código usado es copiado, excepto la vinculación con la base de datos. 

Una vez que se ha leído el QR y su correspondiente identificador, en este caso un texto con un número, este se guarda en la base de datos. 

La selección de emociones: 

Se usa el módulo ESP8266, que tiene Wifi y un procesador interno que permite gestionar características de Arduino. Cuando identifica que el flag de la base de datos se encuentra activo, flag modificado al leer el QR, se pulsa el botón con la emoción requerida, y se manda esta información a la bbdd a partir de llamadas a distintos ficheros php que realizan la función de consulta a base de datos, almacenados en la bbdd mysqp de XAMPP. De allí el registro puede consultarse en la página web creada para tal fin.

El acceso: 

Con el propio Arduino UNO R3 se ha incorporado una pantalla LCD y un sensor de movimiento. Al detectar movimiento, justo en el momento que se pasa la mano para escanear el QR, se muestra un texto de bienvenida en la pantalla LCD.

PEC 3: Conceptualización

Fase 1: Empatizar

Los usuarios potenciales, sobre los cuales se pretende conocer más a fondo sus necesidades y problemáticas, son infantes, que comprenden de los 3 a los 6 años de edad.

Uno de los problemas en las primeras etapas de vida, es tener la habilidad para expresarse y el poder dar un nombre a las emociones. Algunos niños y niñas no tienen la habilidad de poder decir claramente qué les pasa, ya que ésta no está desarrollada. Es posible que un niño o niña, cuando se sienta enfadado no sea capaz de decirlo de forma concisa, de igual manera que no son capaces de identificar la emoción de otra persona que, por ejemplo, se sienta triste. Este paso, la adquisición del conocimiento emocional, es muy importante para un desarrollo sano y madurativo, para que de adultos, tengan una empatía y puedan hacer saber a los demás cómo se sienten, sin estar retraídos. En resumen, que sean adultos sanos mentalmente, seguros y comunicativos.

Educar y legitimar las emociones

Aunque la gestión emocional puede parecer algo sencillo, una vez se es adulto, esto debe trabajarse y aprenderse desde la primera infancia. Es importante pues, acompañar, ayudar y gestionar estas emociones, para que crezcan de forma equilibrada y armónica. 

¿Qué sienten los infantes al no saber expresar sus emociones? Frustración.

¿Qué dicen o hacen? Al no saber expresarse, suelen desahogarse de otra forma, como tirando objetos, pegando a otros compañeros… en definitiva teniendo rabietas (de 2-4 años generalmente).

 

Fase 2: Definir

El problema principal de la gestión de emociones en los infantes es la incapacidad de saber administrarlas. Por otro lado, necesitan a alguien con quién empatizar, los infantes deben crecer con figuras de apego sano, con las que puedan confiar. Estas figuras suelen ser de su entorno más cercano: los progenitores, los abuelos, los profesores… Dicho lo cual, el objetivo principal es buscar una forma de que los infantes puedan expresar sus emociones y hacerles saber a su entorno cómo se sienten para ser escuchadas, valoradas y puedan sentirse mejor al obtener una respuesta acorde a su sentimiento. 

Perfiles ficticios que puedan beneficiarse de una solución para la gestión de las emociones:

Samuel, 4 años: 

Ha tenido una hermana y sus progenitores no pueden prestarles la atención que precisa en una situación tan delicada.

Marta, 5 años:

Sus padres se han divorciado. Su vida tal como la conocía se ha desestabilizado, tiene que pasar unos días con cada uno, una nueva casa, peleas constantes entre ellos…

 

Ana, 3 años

Vive muchos cambios en su entorno: su madre viaja constantemente por trabajo y su padre no puede estar el tiempo debido con ella. 

 

Carlos, 6 años

Está pasando por una importante etapa de transición, se siente desorientado, miedoso, y reacciona de forma violenta cuando las cosas no le salen como quiere. 

Moodboard de emociones

 

Fase 3: Idear

Objetivo: Diseñar un sistema Arduino que permita a los infantes dar a conocer cómo se sienten y ser escuchados, tanto si la emoción es positiva, como si es negativa. 

Brainstorming

Posibles maneras de llegar al objetivo:

    • Juegos: disfraces, cartas…
    • Cuentos sobre emociones…
    • Crear un diccionario de emociones.
    • Dibujar y pintar emociones.
    • Música.
    • Círculo con un peluche en que los niños cuando lo tengan digan como se sienten los demás…
    • Pizarra de emociones.
    • Bote de emociones.
    • Fotomatón emotivo: con un dado de emociones, hacer fotos con la emoción que sale en el dado. 
  • Panel donde el infante pueda indicar mediante un botón la emoción que siente.

El humor es un buen aliado para gestionar las emociones.  Debe ser divertido en cierta manera. 

Fase 4: Prototipar

Dar forma a las ideas

Una vez que ya tenemos definido el público, su problema y el objetivo de lo que queremos conseguir (conocer las emociones de los pequeños, que sepan gestionarlas y acompañarlos en el proceso), nos centraremos tan sólo en los primeros pasos; es decir que el infante sepa expresar su emoción y esto llegue a un adulto y a partir de aquí, sepa consolar y dar alternativas al estado emocional del infante. Generalmente los niños, donde pasan más tiempo, es en las escuelas, por lo que este sistema emocional se instalaría en los colegios, en cada clase. Tiene que ser sencillo ya que va dirigido a los infantes. Se tratará de un panel con unos botones de unos emoticonos con cada emoción: Felicidad, miedo, enfado, tristeza.  Para poder identificar a cada niño con su emoción, se utilizará un lector de código QR que el alumno tendrá en su mochila, o en su bata, que pasará a la entrada de clase, justo antes de empezar. Una vez identificado, en una pantalla se muestra el nombre del alumno, un sonido específico, quizás algún elemento visual, como una bandera, para que el infante, entonces, seleccione la emoción, Esta entrada iría a una base de datos, vinculada a un software, como una página web sencilla en HTML, donde tendrá acceso el profesorado, que le permita tratarla a posteriori, ya sea inmediatamente o en el momento en que lo considere oportuno. También se podría hacer llegar a los tutores legales dicha información, como una especie de parte al final del día: “Hoy el alumno se ha sentido triste, por lo que la profesora ha hablado con él y le ha hecho saber el motivo”. Quizás la misma base de datos pueda servir para el control de asistencia de los alumnos, dejando a un lado el sistema de pasar lista. También sería interesante añadir al software un sistema de estadísticas donde se muestran los estados emocionales de cada alumno, su evolución y si la emoción se ha tratado debidamente. 

Boceto del esquema general

 

Esquema

Objetivo del panel de emociones: conocer el estado emocional diario de los infantes en la escuela

  • Pantalla LCD para mostrar la información del alumno.
  • Plataforma en la nube para guardar histórico.
  • Cuatro botones con cada emoción (Felicidad, tristeza, enfado, miedo).
  • Cable conexión eléctrica para que el panel funcione.
  • Lector QR para leer los códigos de cada infante.
  • Módulo WIFI para que los datos se transmitan.
  • Motor para levantar una bandera.
  • Página HTML para mostrar las entradas (alumno, emoción, día, parte profesor).
  • Códigos QR vinculados a cada alumno.

 

Video 

Cartel

Pec 2: Introducción al entorno de Arduino

Sobre el proyecto

Antes de ponerme manos a la obra con este proyecto, creé un pequeño esquema con lo que quería hacer y posteriormente las preguntas que quería que salieran. En un principio, iban a haber 3 posibles respuestas, pero como la pantalla lcd sólo permite 16 caracteres en horizontal y dos líneas en vertical, tuve que acortar las respuestas a dos, y tratar que, las preguntas no superarán los 40 caracteres, ya que es el máximo que permite. Por otro lado, opté por hacer el concurso en inglés, ya que no parece que el sistema acepte bien el sistema UTF-8.

ARDUCINE

Tu Arduino se va a convertir en un juego de preguntas sobre cine.

Para la creación de este interactivo juego de preguntas y respuestas se han usado los siguientes materiales:

  • 2 pulsadores.
  • 1 pantalla lcd.
  • 2 leds (uno rojo y uno verde).
  • Piezo.
  • 3 resistencias de 220 Ohmios.
  • 1 resistencia de 10 Kilo Ohmios.
  • 1 potenciómetro (de 10 Kilo Ohmios)

Tiempo: 50 minutos

Nivel: **

Basado en los proyectos: Piano electrónico, Bola de cristal.

Se necesitan muchos cables, por eso se tiene que prestar mucha atención a la hora de realizar las conexiones y asegurar que todo está en su sitio.  

Se tiene que añadir la librería LiquidCrystal para poder visualizar los caracteres. Una vez conectado, es importante que se gire la rueda del potenciómetro para que se muestre la pantalla. En mi caso, por falta de espacio se han tenido que usar dos placas, una para los componentes de la pantalla, el potenciómetro y los pulsadores (quería que estuvieran accesibles para poder jugar) y otra placa para añadir el piezo (“altavoz”) y los leds rojo (respuesta incorrecta) y verde (respuesta correcta).

Enlace a Youtube del Prototipado

Esquema de disposición de los pines

Enlace del proyecto

Bibliografía:

Libro de proyectos Arduino

https://www.tinkercad.com/

https://unsplash.com/

https://forum.arduino.cc/t/piezo-buzzer-winning-and-loosing-sound-fx/182115/4

https://www.arduino.cc/en/Tutorial/BuiltInExamples/Blink

https://forum.arduino.cc/t/counter-variables-with-analogread/581534

https://www.arduino.cc/reference/en/language/functions/random-numbers/random/

https://forum.arduino.cc/t/16×2-lcd-one-line-scrolling-one-stationary/406501/4

https://forum.arduino.cc/t/escribir-un-valor-en-la-pantalla/31703

https://forum.arduino.cc/t/correctly-display-long-sentences-on-lcd/322967

https://forum.arduino.cc/t/codigo-de-pulsometro/583136

https://forum.arduino.cc/t/getting-a-nice-sound-from-piezo/394393/7 lo

¿Qué es la interacción tangible?

Elección de proyectos

A la hora de buscar proyectos relacionados con arte digital tangible, me centré en buscar aplicaciones relacionadas con el mundo musical y pictórico. Hice una búsqueda en Pinterest y encontré proyectos muy interesantes. 

Adidas: un mural viviente

En el año 2018, la marca deportiva Adidas, con la asociación Journeys, instaló, en el festival de música de San Diego, varios espacios de arte interactivo. Uno de ellos,  permitía a los asistentes llenar de color una gran pancarta de 40 metros pulsando varios botones. 

Interactive musical wall: Muro musical

El estudio de arte canadenco, moment factory creative Studio, desarrolló una instalación multimedia interactiva para una de las salas de espera de un hospital infantil en la ciudad de Montreal. Se pretendía crear un entorno más agradable para los visitantes. Este «muro musical interactivo» está compuesto por un sistema de sensores de movimiento, proyectores de luz y un muro sobre el que actualizar la obra. A medida que el individuo interactúa con la obra de arte, el roce de sus dedos sobre el plano del arcoíris en la pared produce líneas y formas coloridas acompañadas de notas musicales.

Volkswagen: Escalera-Piano

El equipo de Fun Factory junto a la marca de coches Volkswagen,  instaló una escalera piano en una de las entradas del metro de Odenplan (Estocolmo). Cada escalón era una tecla, de manera que los transeúntes podían crear sus propias melodías mientras subían y bajaban. El reto era conseguir que más personas subieran por las escaleras en contra de las mecánicas, haciendo que fuera divertido. La idea fue un gran éxito, y aparecieron réplicas en otras partes del mundo. 

Effektorium: una orquesta interactiva

Los visitantes del museo Mendelssohn pueden dirigir una orquesta digital utilizando una pantalla táctil y una batuta. Podían seleccionar el color de las luces, los instrumentos y el tempo.

Más en profundidad: Effektorium

Sobre el proyecto: 

En el 2014, las entidades creativas WHITEvoid, aconica – creative lab for sound y el diseñador Bertron Schwarz Frey crearon una instalación multimedia interactiva para el museo Mendelssohn-Haus, en Leipzig, Alemania. Félix Mendelssohn fue un compositor, pianista, organista y director de orquesta alemán, que murió en 1847, en el lugar donde ahora está el museo mencionado. Los visitantes pueden dirigir una orquesta digital gracias a una pantalla táctil y el uso de una batuta, que sigue su movimiento a través de una cámara 3-D. 

Tras la reapertura del museo, esta instalación se ha convertido en la pieza central, una forma de atraer el público al lugar, haciendo que puedan vivir una experiencia única e inmersiva. Los visitantes no solo podrán escuchar de una manera original la obra de Mendelssohn, sino que, en cierta manera, se convertirán en directores de orquesta.

Mediante la interfaz de un navegador, se puede seleccionar varias canciones del compositor y controlar los 13 instrumentos. Cada uno dispone de su propia columna (un panel led) de sonido, lo que permite que uno se acerque y lo oiga de forma individual, como si estuviera en un concierto de verdad; además estos instrumentos pueden tratarse de muchas maneras, subir su volumen, silenciarlo, e incluso escuchar las diferentes versiones de cinco directores de orquesta diferentes. Los parámetros que se pueden seleccionar son los siguientes:  

  • Seleccionar una partitura y separar una parte en concreto. 
  • Seleccionar el volumen de todo el grupo orquestal o individualmente.
  • Indicar un silencio selectivo e escuchar solo un instrumento.
  • Optar por una acústica diferente según el tipo de sala: sala de conciertos, iglesia, salón de música, sala seca (con poca reverberación).
  • Afinar los instrumentos como históricos (tono 430 hz) o instrumentos modernos (443 hz).
  • Modificar la iluminación general, seleccionando el color. 

Después con la batuta, el visitante puede cambiar el tempo con el que sonará la canción seleccionada de forma instantánea. 

Análisis 

Mecanismos de interacción

Al tratarse de arte interactivo, se intercambia información entre la obra, el espectador y el entorno, de manera que no sólo circulan los datos, sino que se crea y se logra una comunicación eficaz. En el caso de Effektorium, el nivel de complejidad para su creación interactiva es avanzado, ya que hay muchos parámetros modificables, no obstante, el diseño del mismo permite que el usuario no perciba esto, puesto que su usabilidad es simple y el menú está bien estructurado: no es necesario ningún tipo de conocimiento adicional, cualquier persona, desde un niño pequeño hasta un anciano, podrán utilizarla gracias a su intuición y sencillez. 

 

El menú es coherente, fácil de navegar, tiene un buen diseño, todo lo necesario para cumplir los parámetros de una excelente usabilidad. 

Técnicas empleadas

Pantallas táctiles

Las pantallas táctiles permiten la entrada de datos dentro del dispositivo a través de un toque sobre la superficie. Estas pantallas actúan como periféricos de entrada y de salida, ya que muestran los resultados en la misma pantalla. En el caso de Effektorium, el visitante usa una pantalla táctil para dar órdenes a las columnas leds y a las luces de ambiente para que cambien según la elección.

GUI

La interfaz gráfica de usuario (GUI de las siglas en inglés), es un programa que usa un conjunto de imágenes y objetos gráficos para poder representar la información y las acciones disponibles por el usuario. Al pasar las partituras, simulan el paso real de las páginas, dando la sensación de que sobresalen de la pantalla.   

Visión artificial

La pantalla táctil tiene una cámara 3D incorporada que permite la captación de la velocidad de la batuta que el visitante maneja. Para que se pueda reconocer, se usa el Frame difference, seguimiento del movimiento, una técnica que permite obtener datos del movimiento y su dirección. 

El funcionamiento del diseño

Valoración personal y aportaciones creativas

De todos los proyectos que he podido analizar (de los mencionados anteriormente y otros) este fue el más completo, original y espectacular. Hacer que los visitantes, sin nociones preconcebidas, puedan dirigir una orquesta de forma interactiva me parece una idea magnífica. El diseño de las instalaciones es elegante, la interfaz de usuario sencilla, y la conexión con cada elemento está hilada hasta el último detalle. No solo es una buena idea, se ha sabido gestionar perfectamente. 

Bibliografía y enlaces