Grupo Ω, Taller de interacción 2016

Título	Grupo Ω, Taller de interacción 2016
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	encargo 1, interfaz
Asignatura	Taller de Diseño Gráfico 7ª Etapa,
Del Curso	Taller de Diseño de Interacción 2016,
Carreras	Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Tomás Andres Ortega Araya, Constanza Valdivia, Daniela Gajardo, Monserrat Torres, Maximiliano León
Profesor	Herbert Spencer, Pedro Garretón

Temática

Construcción de un objeto capaz de controlar 3 dimensiones como mínimo, donde hay que pensar y diseñar la interfaz junto con el sistema eléctrico, es decir, en su interacción completa. Este control debe calibrar una obra de abstracta de Piet Mondrian, como por ejemplo; su opacidad o saturación, cuyos valores deben ser continuos, y un claro ejemplo; sería la barra que indica del 0 al 100.

Cabe destacar que cada dimensión debe ser nombrada y el objeto poseer una interfaz que tenga relación con lo que se está hablando o modificando con las dimensiones,en otras palabras, debe existir una relación entre lo plástico y la dimensión del control, donde a través del juego de las variaciones, se logren crear nuevas obras sin perder la esencia de la pintura escogida.

Análisis pictórico

Archivo:GrupoCPietModrian,Rojo,AmarilloyAzul1930.jpg

"Rojo, Amarillo y Azul"', del año 1930.

Mondrian fue un personaje importante en el arte abstracto, cuyo estilo fue conocido como Neoplasticismo en 1917, cuyo movimiento está vinculado especialmente con el cubismo y futurismo. Este artista relacionaba sus estudios espirituales y fisiológicos, ya que buscaba la realidad pura, y encontrar la estructura básica del universo, teniendo en cuenta en todo momento la abstracción y la simplicidad.

Sus obras se caracterizaron por el solo uso de líneas rectas o ángulos rectos, junto con los colores puros o igualmente conocidos como colores primarios que corresponden al rojo, amarillo y azul, aunque también utilizaba el negro para determinar la forma y el blanco para crear el vacío y luz en la obra. Evitaba crear ilusiones de profundidad y el uso de perspectiva a base de curvas y diagonales e incluso las características sensoriales de la textura y superficie.

"Solo cuando estemos en lo real absoluto el arte no será ya más necesario." P. Modrian.

Dimensiones

Después de proponer todas las posibles ideas para las dimensiones del control, se descartaron aquellas que no seguían con los principios de Mondrian, es decir, aquellas que alteraban sus ideales con respecto al color, simplicidad, abstracción, superficie, etc. Es por esto que se escogieron estas tres dimensiones, la primera tiene relación con el color, la otra sobre un cruce de líneas y la última corresponde a la extensión del trazo negro.

• PRIMERAS IDEAS

Archivo:GrupoCGrosor.jpg

Grosor de la línea.

Archivo:GrupoCCurvatura.jpg

Ondulación de la línea.

Archivo:GrupoCColores.jpg

Combinación de colores.

Archivo:GrupoCMultiplicación.jpg

Progresión del trazo.

Archivo:GrupoCÁngulos.jpg

Cambio del ángulo.

Archivo:GrupoCReiteración.jpg

Reiteración del cuadro.

A) Traslación del color

Archivo:GrupoCEsquemaColor.jpg

Esquema

En un principio se pensó esta dimensión como la rotación de cuatro de los cinco colores que Mondrian solía utilizar en sus cuadros, pero finalmente se optó por el término traslación [1] ya que permite nombrar el accionar y las consecuencias de cambiar de sitio o espacio a una persona o un objeto.

En esta dimensión básicamente consiste en la traslación del color rojo, azul, amarillo y blanco, dentro de las figuras cuadradas y rectangulares que presenta la obra, destacando que en el estado natural de esta, la posibilidad de encasillar el color corresponde a 7 cuadrados distintos. Es por esto que en este caso el procedimiento de la interfaz consiste en girar hacia un lado o al otro la perilla, provocando que el sentido de traslación de los colores sea pasando del 1 al 7 o del 7 al 1.

• VARIACIONES

• GrupoCColor01.jpg

  Estado de la obra.

• GrupoCColor02.jpg

  1 mov. a la derecha.

• GrupoCColor03.jpg

  2 mov. a la derecha.

• GrupoCColor04.jpg

  3 mov. a la derecha.

• GrupoCColor05.jpg

  4 mov. a la derecha.

• GrupoCColor06.jpg

  5 mov. a la derecha.

• GrupoCColor07.jpg

  6 mov. a la derecha.

B) Traslación de un eje

Archivo:GrupoCEsquemaIntersección.jpg

Esquema

Esta dimensión surge de la idea de trasladar la intersección de las líneas con mayor grosor, debido a que corresponde al cruce de mayor grado de identificación a simple vista. En un principio se determinó que la trayectoria de movimiento del eje, sería la diagonal del cuadro, pero a medida que íbamos desarrollando la idea, comenzaron a surgir las complicaciones.

Es por esto que se decide establecer un cuadrante o recorrido dentro de la obra, donde los colores estarán presentes en todo momento a pesar de la ubicación del eje. Esta dimensión tiene una inferzas giratoria al igual que la anterior.

• VARIACIONES

• GrupoCIntersección01.jpg

  Esquina derecha inferior del cuadrante.

• GrupoCIntersección02.jpg

  Centro derecho del cuadrante.

• GrupoCIntersección03.jpg

  Esquina derecha superior del cuadrante.

• GrupoCIntersección04.jpg

  Esquina izquierdo superior del cuadrante.

• GrupoCIntersección05.jpg

  Centro izquierdo del cuadrante.

• GrupoCIntersección06.jpg

  Esquina izquierda inferior del cuadrante.

C) Longitud

Archivo:GrupoCEsquemaExtensión.jpg

Esquema

Por último, encontramos la dimensión que consiste en la variación de extensión del trazo, en donde la línea puede llegar a desaparecer o alargarse hasta el borde opuesto del cuadro. Cabe destacar que solamente las líneas que cambiarán serán aquellas que no llegan al otro extremo, como se muestra ejemplificado en el esquema, actuando como representación del recorrido la línea punteada.

La cantidad de longitud aumentada o disminuida del trazo será según la proporción con respecto a la escala de 0 - 100%, como se puede apreciar en las variaciones de abajo, el cuadro está fragmentado en 10 columnas y filas de igual tamaño, por ende este varía de acuerdo a un 10%.

• VARIACIONES

• GrupoCExtensión01.jpg

  10 % Aumentado.

• GrupoCExtensión02.jpg

  30% Aumentado.

• GrupoCExtensión03.jpg

  40% Aumentado

• GrupoCExtensión04.jpg

  50% Aumentado.

• GrupoCExtensión05.jpg

  10% Disminuido.

• GrupoCExtensión06.jpg

  100% Disminuido

D) Combinaciones de estados

Básicamente las siguientes imágenes corresponden a las diversas versiones de la misma obra, con las tres dimensiones funcionando en diferentes estados, en las cuales se puede ver como actua este juego gráfico.

• Combinación01.jpg

  1) Traslación color: 1 mov. hacia la derecha. 2) Longitud: Aumentar 50%. 3) Traslación eje: Esquina inferior lado izquierdo.

• GrupoCCombinación02.jpg

  1) Longitud: Normal. 2) Traslación color: 4 mov. hacia el lado derecha. 3) Traslación eje: Esquina de abajo del lado derecho.

• GrupoCCombinación03.jpg

  1) Traslación eje: Normal. 2) Longitud: Disminuir 10% 3) Traslación color: 3 mov. hacia la izquierda.

• GrupoCCombinación04.jpg

  1) Traslación eje: Esquina de arriba del lado izquierdo. 2) Traslación color: 3 mov. hacia la derecha. 3) Longitud: 100% extendido.

• GrupoCCombinación05.jpg

  1) Traslación color: Normal. 2) Longitud: 0% extendido. 3) Traslación eje: Esquina del lado derecho superior.

• GrupoCCombinación06.jpg

  1) Longitud: 0% extendido. 2) Traslación eje: Normal. 3) Traslación color: 2 mov. hacia la derecha.

Desarrollo del control

A) Maqueta 01

Las primeras propuestas que surgieron sobre la forma del control recae en la portabilidad y la interacción con las dos manos del individuo, en donde los dedos pulgares eran los principales protagonistas de la acción, es por esto que se pensó en una estructura delgada y pequeña. También estuvo presente la forma de dialogar con el individuo y la obra, en donde los botones actuarían según la cualidad de la dimensión, como por ejemplo si los colores se trasladaban dentro del cuadro, el botón debía ser rotativo o giratorio, en donde el gesto del dedo imitaba el accionar del cuadro.

Por todos estos motivos, se pensó utilizar como sensores un potenciómetro llamado;"llave de cambio", cuya finalidad es controlada girando su eje, en donde cada vez que se realiza un giro este emite un sonido junto con una detención, permitiendo indicar y verificar la acción. También se planteó un botón para seleccionar la dimensión de traslación de color o la del eje, y para la dimensión de la longitud se utilizará un interruptor momentáneo o también conocidos como pulsadores que requiere que el individuo mantenga la presión sobre el actuante para que los contactos estén unidos, en donde básicamente la persona mantendrá presionado cierto lado, ya sea para aumentar o disminuir el tamaño, la cantidad de tiempo que sea necesario hasta que la línea llegue donde se desea.

Además, se optó por añadir al control, el botón de encendido y apagado, y el botón de restaurar, ya que si uno no deseaba los valores establecidos de la última dimensión, está desaparecía de manera rápida, incluso si este mismo botón se mantuviese presionado durante un determinado tiempo, todos los valores establecidos volverían al estado natural de la obra, ósea se borraría toda variación.

• GESTUALIDAD

Archivo:GrupoCLáminaM1.jpg

Corrección: 
1. Falta acercarse al material real del control.  

• REGISTRO FOTOGRÁFICO

Archivo:GrupoCMaqueta01.jpg

B) Prototipo 01

Construcción del prototipo corresponde a la evolución con el sistema eléctrico más realista de la maqueta 01, para lograr entender y comprender de manera literal el tamaño y funcionamiento de cada uno de los botones. Después de ver finalmente construido el control con todos los sensores que planteamos y con los estilos encontrados en el mercado, el resultado no fue el esperado y por esto se optó por seguir modificándolo, pero se logró esquematizar solamente en la lámina.

El cambio del control se basa básicamente en la eliminación del botón que diferenciaba las dimensiones de traslación ubicado en el centro del potenciómetro, por dos pulsadores ubicados en la parte superior del ancho del control posicionados uno en cada extremo, lo cual permite la interacción de otros dedos en el control. Y también se replanteó la idea de usar el interruptor de la dimensión de longitud por un joystick digital, que puede leer cuatro interruptores de encendido o apagado en cruceta situada en la base.

• CONSTRUCCIÓN

Archivo:GrupoCLáminaP1.jpg

Corrección: 
1. Existen demasiados botones, deben tener en cuenta cual es la cantidad máxima de sensores con la que se puede trabajar un arduino uno.
2. Tiene la estructura literal de control, no existe un pensamiento de fondo con respecto a la mano.

• REGISTRO FOTOGRÁFICO

Archivo:GrupoCPrototipo02.jpg Archivo:GrupoCPrototipo01.jpg Archivo:GrupoCPrototipo03.jpg

C) Prototipo 02

Existe este nuevo cuerpo, debido a un nuevo replanteamiento del control, en donde en vez de utilizar una cantidad excesiva de botones visibles, se utilizará solo 3 sensores, el potenciómetro rotativo o giratorio, el potenciómetro lineal o horizontal y un joystick digital, los cuales tampoco estarán a la vista, ya que buscábamos que el individuo tuviera una interacción con el cuerpo del objeto con ambas manos, en donde el sujeto debía desplazar, girar o mover todo o partes del cubo.

El cuerpo del control está dividido en tres partes de diferentes ancho, uno de 2 cm, de 3 cm y el otro de 5 cm, sumando un total de 10 cm. Cada fragmento del cubo cumple una finalidad, la pieza A que corresponde al fragmento más pequeño, es la pieza giratoria que controlara la traslación de color, la pieza B es la que corresponde al centro del cubo donde iría la perilla del joystick, la pieza C corresponde a la pieza que mide 3 cm , la cual se desplaza hacia un lado para lograr la asociación de modificar las líneas en el cuadro, y la pieza D es la base del control, donde iría todo el sistema eléctrico, como el arduino.

• CONSTRUCCIÓN

Archivo:GrupoCLáminaP2.jpg

Corrección: 
1. Existe un claro avance en la forma del control, pero sigue sin llegar a un cuerpo manejable para la mano.
2. El material esta restringiendo el cuerpo de un posible control con los mecanismos y gestos ya pensados.

• REGISTRO FOTOGRÁFICO

Archivo:GrupoCPrototipo2-04.jpg Archivo:GrupoCPrototipo2-05.jpg Archivo:GrupoCPrototipo2-02.jpg

D) Prototipo 03

En busca de la curvatura del objeto, que busca acoger la mano, ya sea en la posición de los dedos o la palma, creando un volumen dado por el material (Madera), es decir, que existe una mezcla de rigidez dada por el material y la hospitalidad con respecto a la mano dado por las curvas.

El control sigue siendo un objeto pensado para ambas manos, junto con las mismas ejecuciones de las manos sobre las piezas que permitirían controlar las dimensiones.

Corrección:
1. El cuerpo se aleja bastante a los principios con los cuales llegaron en un principio.
2. Las piezas deben estar ubicadas dentro del cuerpo según un fundamente por detrás, no puede parecer que esta ahí por que no había otro lugar donde colocar el sensor.
3. Las piezas de los costados son iguales, las cuales dan indicio que ambas se giran.
4. Se busca simplicidad, minimalismo y fidelidad.

• REGISTRO 3D

D) Prototipo 04

Replanteamiento de las propuestas anteriores, dentro de las cuales se escogió la propuesta 2, donde esta tenia más potencial con respecto a nuestro ideal de seguir los principios de Mondrian, de lo octagonal y simplicidad. Se re-observan los gestos de las piezas y se modifica solamente la pieza deslizante, en donde en vez de extenderlo hacia el costado, pasa a ser un objeto que se desliza hacia adelante o atrás. También se cambia de posición el analogo, ya que se propone un cuerpo que sea capaz de interactuar sobre la mesa y en las dos manos del individuo, siguiendo siempre el movimiento en cruz de la interacción con la obra.

Cabe destacar que se busca que del mismo cuerpo las piezas al moverse, modifique el cuerpo implicando, provocando también una interacción propia con el control de la misma manera que se va modificando en la pantalla, en otras palabras, que si la linea se extiende, el brazo también se extenderá y el cuerpo se moverá al igual que la linea en el programa.

• CONSTRUCCIÓN

Archivo:GrupoCLáminaP4.jpg

• GESTUALIDAD

Archivo:GrupoCLáminaP4.1.jpg

Archivo:GrupoCLáminaP4.2.jpg

Corrección:
1. Si la construcción de control esta basado en los principios de Mondrian, todas las piezas deben cumplir con esos principios.
2. Si es un cuerpo tosco, que el material que lo compone también lo sea. 

• REGISTRO 3D

Omega Cubix

Al seguir avanzando con la propuesta anterior, tomamos la decisión de que el objeto solo debía ser tomado por las manos al momento de interactuar, para que la pieza giratoria girara por completo. Al darnos cuenta que el analogo arriba quedaba incomodo, se opto por trasladarlo al centro de la cara frontal del control para que todo quedara cerca de ambas manos, buscando principalmente que las manos se mantengan sujetando el cuerpo mientras que los dedos buscaban interactuar con las piezas.

También nos dimos cuenta que el sacado que poseía la pieza deslizante estaba mal pensada debido a que quedaba incomoda al momento de deslizar, pero no al sujetar el control, por esto cambiamos esta idea por in corte diagonal en la estructura, dejando más cómodo al deslizar la pieza sin dejar de lado el agarre del control.

La forma del control esta construida de madera, pero todo lo que tiene relación con las conexiones con los sensores son piezas diseñadas en 3D, debido a que nos entregaba más facilidad y libertad al momento de pensar las vinculaciones y sujetadores, sin olvidar el ahorro del tiempo al momento de construir el total. Esta materialidad nos permitió intervenir con el color, donde básicamente es un juego con las piezas negras que estaban visibles con los trazos rectos que contenía la misma obra, donde además reafirmaba el accionar de las dimensiones.

• CONSTRUCCIÓN

Archivo:GrupoCLáminaP5.jpg Archivo:GrupoCLáminaP5.1.jpg

• REGISTRO FOTOGRÁFICO

Cuerpo del objeto

Ensamblaje de las partes

Ensamble final

Visualización del gesto

• REGISTRO 3D

• EXPOSICIÓN

Sistema eléctrico

Fritzing

Es un software o programa de automatización de diseño electrónico libre, para diseñadores, artistas o individuos con interés en la electrónica y el desarrollo de prototipos a productos finales, ya que permite documentar los prototipos basados en Arduino utilizando diversas herramientas permitiendo crear esquemas de circuitos impresos para su posterior fabricación. [2]

Como se puede apreciar en la primera imagen, los circuitos que están conectados corresponde a los sensores; llave de cambio representada con 6 botones, ya que no se encontraba el objeto en el programa, el joystick y el potenciomentro lineal; los cuales correspondían a nuestra primera propuesta. Pero a medida que avanzábamos con el circuito, nos dimos cuenta que la llave de cambio era muy difícil trabajar sus conexiones, por lo que se opto por cambiarlo por un potenciomentro continuo, como se puede apreciar en la segunda imagen.

Archivo:Fritzing-final-c.jpg

Versión final

Archivo:1FritzingGrupoC.jpg

Primera versión

Shield

• REGISTRO DEL PROCESO

Archivo:ProcesodesoldaduraGO.jpg

Processing

Primera pestaña, construccion

//primera pestaña
import cc.arduino.*;
import org.firmata.*;
import processing.serial.*;

Arduino arduino;

//declaro variable para cambiar el color

int n = 0;

//metodo para cambiar el color, leyendo un arreglo de colores y asignandole un valor a cada color.

color colorCarrusel(color[] col, int i, int n) {
  int newIndex = (i+n) % col.length;
  return(col[newIndex]);
}



void setup() {
  size(displayHeight, displayHeight);
  definirProporciones(width, height);
  // Prints out the available serial ports.
  

  arduino = new Arduino(this, "COM3", 57600);


  // Set the Arduino digital pins as inputs.
  for (int i = 0; i <= 13; i++)
    arduino.pinMode(i, Arduino.INPUT);
}


void draw() {

  input();

  background(255);

//comienzo a contruir cada parte del cuadro como rectangulos y lineas

  noStroke();
  
//construccion de rectangulos
//El relleno de los resctangulos (fill) es el que declara su color, y al mismo tiempo declara la funcion de cambio de color.

  fill(colorCarrusel(col, 0, n)); 
  rect(a, 0, width, b); //cuadrado rojo

  fill(colorCarrusel(col, 4, n));
  rect(0, b, a, height);//cuadrado azul

  fill(colorCarrusel(col, 3, n));
  rect(a, b, width*0.70, height);//cuadrado blanco 3

  fill(colorCarrusel(col, 1, n));
  rect(width*0.94, b, width*0.57, height);//cuadrado blanco 4

  fill(colorCarrusel(col, 2, n));
  rect(width*0.94, height*0.868, width, height);//cuadrado amarillo

  fill(colorCarrusel(col, 6, n));
  rect(0, 0, a, width*0.28);//cuadrado blanco 1

  fill(colorCarrusel(col, 5, n));  
  rect(0, width*0.28, a, b-width*0.29);//cuadrado blanco 2

  stroke(0);
  strokeCap(SQUARE);
  strokeWeight(21);
  
  //construccion de lineas.
  //los valor designados como letras estan declarados en la tercera pestaña y significan valores pensados desde una coordenada en la pantalla.
  //los valores multiplicados son para manteener proporcionado el cuadro en cualquier pantalla.

  line(a, 0, a, height);//linea vertical

  line(0, b, width, b);//linea horizontal

  line(0, height * 0.273, o, height * 0.273);//linea superior movil

  line(width*0.942, f, width*0.942, height);//linea inferior movil

  line(p, height * 0.86, width, height * 0.86);//linea del cuadrado amarillo

}

Segunda pestaña, arreglo de colores

//segunda pestaña

//declaro el arreglo de colores que se usa para la funcion del cambio de colores (el relleno de los rectangulos).
//los colores se ponen en el orden que les di respecto del cuadro, es por eso que el blanco se repite tantas veces ya que existen 4 rectangulos blancos.
//            0 rojo,1 blanco, 2amarillo, 3blanco,4azul,5blanco,6blanco
color[] col = {#C12408,#FFFFFF,#FAE330,#FFFFFF,#150ABF,#FFFFFF,#FFFFFF};

Tercera pestaña, interaccion con el hardwer

//tercera pestaña

void input() {
  
  //declaro los pines que utilizan las manillas para manipular los datos, con esto puedo asignarle funciones a cada controlador.
  float perilla = arduino.analogRead(0);
  float joistyk = arduino.analogRead(2);
  float joistyk2 =arduino.analogRead(3);
  float joistyk3 =arduino.digitalRead(3);
  float palanca =arduino.analogRead(1);
  float m1=1023;
  float v1=0;
  
  //declaro que la variable n (que es la que cambia los colores, sea modificada por los valores de en este caso el potenciometro radial.
  //le designo que solo haga 7 cambios.
  n = round(map(perilla, 0, 1023, 0, 7)); //parametro del color
  
  //declaro que las variantes o,p,f (las lineasque incrementan su longitud) sean modificadas todas por el potenciometro lineal.
  //estas tuvieron que ser calibradas una a una para que en la alineacion dentro del control (fisico) todas las lineas estuvieran en su punto de inicio.
  
  o= round(map(palanca, 216, 0,0,width));//linea horizontal siperior
  p= round(map(palanca, 0,174, 0, width));//linea horintal inferior
  f= round(map(palanca, 0, 225, 0, height));//linea vertical
  
 //limites de configuraciones de las lineas de los ejes
  a = constrain(a, width*0.24, width *0.94); 
  b = constrain(b, height * 0.305,height* 0.7202);

 //aqui comienzo a trabajar con el joistick, donde lo trato como si fuera un boton.
 //declaro que si el joistick llega a un valor mayor que 700 y menor que 500 hara alguna accion.
 
  if (joistyk2 >= 700){//parametro de aumento de horizontal grande
  b=b-3;}//sube en y
if(joistyk2 == m1){
if(b>height * 0.305){
      f=f-3;}}
   if (joistyk2 <= 500){
     
  b=b+3;//baja en y
if(b<height * 0.723){
      f=f+3;}}
  
  
   if (joistyk == m1){//parametro de aumento de vertical grande
  a=a+3;
  if(a<width*0.94){
      o=o+3;}}
      
   if (joistyk == v1){
  a=a-3;
  if(a>width * 0.24){
      o=o-3;}}
      

 //aqui declaro que el boton del joystick regrese los parametros que el mismo modifico al inicio.     
      
 if (joistyk3 == 0){ //parametro para regresar todo
  a = width * 0.24; //defino origen de x
  b = height*2.24;//defino origen de y
 
  }
     
  

  println(joistyk2);
}

Cuarta pestaña, declaro variables

//cuarta pestaña

//declaro variables que se modifican en el cuadro
float a, b, o, f, p;


void definirProporciones(float ancho, float alto) {
  a = ancho * 0.24; //defino origen de x
  b = alto * 0.7202;//defino origen de y
  o = ancho * 0.24; //defino x de linea horizontal superior
  f = alto * 0.7202;//defino y de linea vertical inferior
  p = ancho*0.94; //defino x de la linea horizontal inferior
}