Grupo G: Explorador de arte

Archivo:Composicion2rojo,azulyamarillo.jpg

Grupo G: Explorador de arte

Título	Grupo G: Explorador de arte
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	control, interacción, interfaz, encargo 1
Período	2016-2016
Asignatura	Taller de Diseño de Interacción,
Del Curso	Taller de Diseño de Interacción 2016,
Carreras	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., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Kim López, Juan Pablo Vergara, Consuelo Santis Escudero
Profesor	Herbert Spencer, Pedro Garretón

Construcción de una experiencia de interacción

Parametros de trabajo

Como encargo dentro del Taller de interacción nace el encargo de construir un Control "Joystick" que sea capaz de modificar distintas dimensiones de un cuadro de Piet Mondrian, en este caso, la obra escogida es Composición II en rojo, azul y Amarillo, 1930.

Este control debe poder modificar entre 3 y 6 dimensiones pictóricas o gráficas relacionadas directamente con el cuadro escogido. De igual forma debe existir una relación plástica constructiva entre la obra, los controles que modifican cada dimensión y su disposición con el control.

Investigación inicial

PIET MONDRIAN (1872/1944)

Archivo:Composicion2rojo,azulyamarillo.jpg

Composición rojo, amarillo y azul, 1930

Pintor Holandés, comienza su mundo en el arte desde la representación pasando por el cubismo hasta sumergirse en la abstracción, creando una autolimitación al pintar trazos finos tanto verticales como horizontales.

Piet busca conocer la naturaleza en su máxima profundidad, alejándose de los medios empíricos que traen consigo solamente un conocimiento superficial y representativo de la misma. Es en esa búsqueda de la esencia que rechaza las cualidades sensoriales de la textura, la superficie y el color; junto con ello reduce su paleta al uso de colores primarios, el blanco (no color, presencia de todos los colores) y el negro (no color, ausencia de todos los colores); también se dedica a pintar solamente lineas y ángulos rectos.

Es a partir de esa abstracción geométrica que Mondrian busca encontrar la estructura básica del universo o grilla cósmica.

Neoplasicismo, es una de las formas de abstracción en las primeras década del siglo XX. Basada por la concepción analítica de la pintura, en la búsqueda de un arte que trascienda la realidad externa, material, reduciendo la pintura a formas geométricas y colores puros para hacerla universal.

EVOLUCIÓN DE LOS CONTROLES

Cuando hablamos de crear una "palanca de mano o joystick" es necesario establecer lo que conocemos como un mando de juego, ya que lo que deseamos lograr es un juego con la obra de Piet mediante un controlador capaz de modificar en base a las distintas dimensiones a trabajar.

Es en este sentido que la exploración previa a la construcción del mando viene dada por un estudio breve previo acerca de los manos.

Mando ATARI - 1977

La empresa Atari desarrolló en 1977, para su consola Atari 2600, un joystick digital de dos ejes que contaba con un solo botón de acción y que estaba conectado a través de un conector DE-9 de nueve pines.

Nintendo - 1985

El uso de dos nuevos botones (A Y B), 'select y start, además de la ya usada cruz para las cuatros direcciones de los mandos de Nintendo Entertainment System. Estos nuevos controles estandarizaron los botones de movimiento y dirección sobre la mitad izquierda y los de acción sobre la mitad derecha del mando.

Sega mega drive o Sega Genesis - 1988

La llegada del estilo 'hueso de perro', trae la incorporación de ocho direcciones, un botón start y un botón mas de acción (A,B y C), a los que con el paso del tiempo se le incorporarían tres nuevos botones en menor jerarquía (X, Y , Z), Lo que entregaba un total de seis botones, donde su uso estaba dado por el juego que se estuviera utilizando.

Super Nintendo - 1990 Este mando va en son de limpiar el diseño y crear una mayor amabilidad hacia el usuario, con la utilización de colores y el agregar los botones de acción left y right ubicados en la parte superior del mando, es desde este punto que es posible observar un lineamiento gráfico y constructivo en el total de los controles a través de los años.

PlayStation - 1994

Este mando es uno de los primeros en centrarse en un diseño ergonómico y los conceptos de los mandos anteriores, utilizando cuatro botones en forma de diamante con símbolos de colores, el uso de una cruz con cuatro direcciones y cuatro botones superiores (R1, R2, L1, y L2) correspondientes a la posición derecha e izquierda.

Nintendo 64 - 1996

El diseño en son del agarre de la mano y el uso de la cruz con las direcciones, además del uso de un stick de control en la parte inferior central y la incorporación de un gatillo trasero Z. El uso de vibraciones en el juego a través del mando.

• Atari1977.jpg

  Relación de una mano que sostiene el objeto, mientras la otra mano es la que interactua con el objeto

• Nintendo.jpg

  Nintendo 1985

• 

  Sega

• Nintendo01.jpg

  Super nintendo 1990

• 
• C77A 1024 42759.jpg

  Nintendo 64, primer control que crea una iteración mediante vibraciones con el usuario

Propuesta inicial

DIMENSIONES

• Grosor de línea

Al observar la obra es posible encontrar como punto clave y determinante de la obra el uso de lineas rectas y cómo estas construyen el espacio sin encuadrarlo por completo. Es por esto que plateamos como primera dimensión la interacción con la variación del grosor de la línea o el trazo, donde el mínimo esta dado por la no linea, mientras que el punto máximo esta dado por la ampliación de la linea en su máxima expresión, siendo capaz de consumir todo el cuadro en negro.

• Groso01.png
• Grosor02.png
• Grosor03.png
• Grosor 04.png

• Relación Diagonal

El cuadro se rige en una jerarquía de tres cuadros de color, donde dos de estos están unidos por una diagonal directa, en este sentido, la intervención esta dada por un juego que permite deconstruir la relación de ampliación entre los cuadros Rojo y Azul, donde los máximos están determinados por la amplitud máxima de uno de los dos cuadros en cuestión (si un cuadro se amplia el otro disminuye en la misma relación hacia el lado contrario) y los mínimos están dados por la apertura máxima del cuadro contrario. El resto del cuadro se deconstruye proporcionalmente en relación a la modificación de los cuadros azul y rojo.

• Diagonal01.png
• Diagonal02.png
• Diagonal03.png
• Diagonal04.png
• Diaginal05.png

• Deconstrucción del color

La composición del color por Piet esta dada por colores sólidos pero ¿qué sucede si se interviene este color solido uniforme y se deconstruye en base a un puntillismo? Esta es la variante que desea mostrar 'la dimensión, la cual esta sujeta en la exploración del color desde su descomposición y eliminación de patrones definidos sin afectar a la forma matriz de la obra.'

La creación de la imagen a través de la deconstrucción o construcción del color, donde el uso de una grilla es necesaria para la disminución del tamaño de los círculos

• Deconstrucción de los Vértices

Piet dentro de sus fundamentos establece la auto limitación del uso de lineas y ángulos rectos, sin embargo en este caso la interacción de la obra esta dada por dejar de lado esta limitación del artista y ser capaces de redondear los vértices opuestos hasta la máxima expresión (que sería un circulo), sin afectar al tamaño del área del cuadro original.

• Vertices01.png
• Vertices02.png
• Vertices03.png
• Vertices04.png

La lectura de la dimensión aplicada con el negro crea una inconcordancia cuando hablamos de la dimensión del grosor de la línea, donde el negro vendría hacer otra dimensión o esta en juego con otra dimensión.'

GÉNESIS FORMAL

Para partir este primer prototipo recogemos lo que puede rodear a la obra en el momento en que se origina, vale decir, al pintor, el pincel, su paleta y el cuadro mismo. Esa interacción entre el pintor y su obra está mediada a través de su pincel y la relación de éste con su paleta de colores. Éstos últimos son los que le otorgan al pintor un modo de moverse, un gesto con el cual se genera ese vínculo de interacción entre él y el lienzo.

Dado que nuestro proyecto versa en el sentido de interactuar con una obra específica de Piet Mondrian, y dado también que lo que buscamos es que el usuario pueda intervenirla y modificarla, es que consideramos que, en el fondo, el juego se dará a partir del re-pintar la obra, razón por la cual recogemos la paleta del pintor como forma esencial para comenzar a prototipar. Una paleta distinta, que mantiene su forma, que trae consigo un gesto de agarre e interacción, una paleta que en vez de acoger a los pigmentos, acogerá a los controladores que son los encargados de modificar los valores de cada dimensión.

Así llegamos a la forma de una paleta que es sostenida por la mano izquierda y que es intervenida por la mano derecha.

Corrección de las dimensiones

• DESCOMPOSICIÓN DEL COLOR

Como ya hemos establecido para Piet el color era un elemento solido y en este caso la intervención nace de la descomposición del color en círculos que van cambiando de tamaño gradual en son de una grilla ya establecida, Sin afectar a los bordes del cuadro.

• Colo01.png

  Descomposición del color

• Color02.png

  Descomposición del color

• Color03.png

  Descomposición del color

• Color04.png

  Descomposición del color

• Color05.png

  Descomposición del color

• Color06.png

  Descomposición del color

• EXPANCIÓN CIRCULAR

Piet se auto limita al uso de lineas y ángulos rectos dentro de sus obras, es por este motivo que la interacción realizada con esta dimensión va en son de romper con estos paradigmas y ser capaces de observar la transformación de la línea recta hasta llegar a el circulo.

Es necesario establecer que la linea recta negra no cambia ni se expande a través de la dimensión pictórica.

• Expansion01.png

  Expansión circular

• Expansion03.png

  Expansión circular

• Expansion04.png

  Expansión circular

• Expansion05.png

  Expansión circular

Combinatorias

• CombinacionpietGC.png

  COMBINATORIA: Expansión circular + grosor de línea

• Combinacionpiet04.png

  COMBINATORIA: Grosor de línea + Descomposición del color

• Combinatoriapiet03.png

  COMBINATORIA: Expansión circular + grosor de línea + Descomposición del color + Diagonal

• Combinatoriapiet02.png

  COMBINATORIA: Expansión circular + grosor de línea + Descomposición del color

PROTOTIPO 2: En busca de la utilización de ambas manos

Antecedentes

Archivo:Contro01.jpg

La mano maestra, útil es dada por la izquierda, mientras la derecha al ser utilizada cubría por completo el explorador y el total de los potenciadores

La primera aproximación al cuerpo (volumen o control) y su relación con el gesto lo tomamos en función a la paleta del pintor y el gesto de pintar.

De esta forma obtuvimos un agarre con una mano que dejaba libre la mano derecha, tal como ocurre con la paleta del pintor y su pincel; sin embargo, la mano izquierda estaba atada por completo sin poder modificar las dimensiones con los dedos. Junto con ello la forma de abordar los potencionemetros se realizaba con las manos cruzadas impidiendo ver el total de los controladores.

Vimos la necesidad de modificar dicha proposición en función de hacer de tener una visión limpia del volumen o cuerpo del control y poder liberar el pulgar izquierdo para que pudiese también intervenir las dimensiones pictóricas del cuadro.

Archivo:Control02.jpg

Interacción por parte de ambas manos, mediante reflejar el mango y la forma anterior del volumen.

Nueva Proposición

1. Disposición del agarre

Modificación a partir de la invención horizontal del mando, permitiendo la interacción con el pulgar izquierdo y la mano derecha, pudiendo modificar dos dimensiones a la vez mediante la liberación del pulgar que deja de ser el centro de agarre al control.

2. Disposición de los potenciómetros

Debido al cambio anterior se realizo la re-distribución de los potenciómetros en razón de no perder el gesto y lograr una interacción con ambas manos. Así, era mucho mas sencillo utilizar los pulgares para las dimensiones de la deconstrucción de los vértices y la relación diagonal.

Archivo:Potenciometros.jpg

Uso de los potenciometros en relación al uso de ambas manos y el volumen.

3. Modificación mecánica

Modificamos un potenciómetro circular para que funcionara de forma radial, logrando así una mejor y directa relación visual y gestual con la dimensión de deconstrucción de los vértices.

Junto con lo anterior, reemplazamos al potenciómetro deslizante que modificaba la dimensión del grosor de la línea por el uso de un potenciometro de presión en son de capturar el gesto del pintor al aplicar presión sobre el pincel, lo cual va generando una linea con mayor grosor y uno de menos grosor dependiendo de la presión que la mano le aplica al pincel, y éste al trazo. En este sentido, la Dimensión de grosor de linea jugará entre el engrosar la línea al presionar mas el sensor y el hacer desaparecer la misma al no presionarlo.

Mecanismo interno curva, dimensión Expansión circularGrosor de la linea en relación al grosor de linea por presión en el pincel

PROTOTIPO 3: Corrección de la línea coherente de relaciones

Antecedentes

En un paso anterior se pudo realizar la union entre el volumen (control) y las dimensiones que alberga. En ello existía un gesto dado por la relación visual de los potenciómetros y las dimensiones pictóricas, sin embargo, no lograba una relación con el cuerpo del usuario y el gesto, cortándose la línea correlacional.

Es decir, existían 3 tipos de relaciones, pero estaban separadas entre si.

1. Relación del usuario con el volumen o el cuerpo del control.
2. Relación del volumen con los potenciometros al albergarlos.
3. Y, por ultimo, la relación visual entre las dimensiones pictóricas y los potenciómetros.

En el intento de buscar la multidimencionalidad e interrelación como un proceso lineal y coherente entre el cuadro, los potenciómetros, el volumen, el gesto y el cuerpo, nace el volver a re-leer y re-pensar la Génesis Formal que nos llevo a un primer volumen, abstraído desde la paleta del pintor, buscando una nuevo volumen de trabajo, pero siempre teniendo en cuenta el paso ganado.

La primera búsqueda de la forma (volumen del control) nace desde la paleta del pintor y el gesto que realiza el pintor al pintar. Ésta se fue modificando en función de recibir a los potenciómetros de una forma más adecuada en cuanto a la relación con los dedos y la mano, éstos serían los determinantes de la forma.

Tras una primera aproximación al volumen, marcado por el agarre con la mano izquierda e interacción con la mano derecha, lo cual genera una interrupción en cuanto a la interacción con la interfaz y además anula el margen de acción de la mano izquierda y sus dedos, imposibilitando el poder modificar distintas dimensiones al mismo tiempo.

Es así como la existencia de la interacción de ambas manos se dio a partir del reflejar horizontalmente el volumen hacia la izquierda y configurar los potenciometros en función de buscar el accionar con ambas manos.

De este modo se busco volver a mirar lo ya estudiado en cuanto a la forma, observando que dentro de la segunda forma es posible encontrar una superficie mayor para el trabajo permitiendo pensar en la interacción del volumen del cuerpo.

Nueva proposición

La propuesta busca completar esa interrelación lineal y la coherencia entre los distintos elementos que configuran todo el sistema, lo cual se logra a partir de fusionar los potenciómetros con el mismo volumen de tal forma que éste último no recibe solamente a los potenciómetros, sino que los potenciómetros se incorporan en el volumen generando un sólo gesto.

De esta forma podemos establecer que las dimensiones pictóricas de relacionan con los potenciómetros en cuanto a la estética de la interfaz. Además, los potenciómetros se vinculan directamente con el volumen al ser éste el elemento que los modifica. Finalmente, se incluye al gesto de los dedos el de las manos y los brazos, en definitiva, al cuerpo del usuario, cuyos gestos responden y se relacionan también con las características propias de las dimensiones pictóricas, cerrando el círculo interrelacionado y coherente.

Ejemplo de esto ocurre con la dimensión de la deconstrucción de los vértices, en donde el controlador de la dimensión es la sección final a la derecha del volumen, la cual se "quiebra" o gira deslizándose hacia abajo, lo cual surge a partir del gesto común de pulir o lijar la madera para redondear sus cantos. Así, ésta sección se vincula directamente con un movimiento particular de la mano y el cuerpo que permiten la modificación de la dimensión, redondeando los vértices.

• Exploración05.jpg

  Multidimensionalidad de la forma, donde la interacción del volumen con el cuerpo y las dimensiones con el cuerpo interactuan de igual manera

• Exploracion04.jpg

  La no integración del total de las dimensiones

• Exploracion06.jpg

  La forma como volumen

Configuración electrónica

Fritzing

Simulación de conexiones entre el Arduíno, la Protoboard y los potenciómetros en Fritzing

Prueba de conexiones

Conexiones entre el Arduíno, la Protoboard y los potenciometros

Conexiones entre el Arduíno, la Protoboard y los potenciometros

Frezado de la placa de cobre

Trazados de las conexiones entre el Arduino, el Shield y los potenciómetros

Trazados de las conexiones finales entre el Arduino, el Shield y los potenciómetros

Shield frezado y cortado

Shield armado

Shield cortado y frezado, soldado a los jumpers y unido al arduino

Shield cortado y frezado, soldado a los jumpers y unido al arduino

Shield cortado y frezado, soldado a los jumpers y unido al arduino

Programación

Archivo:Vectorizacion.jpg

Valoración de coordenadas el rasgo gráfico del cuadro.

Valoración de coordenadas el rasgo gráfico del cuadro. Donde la construcción de los cuadros de color esta en base al uso de a la herramienta rect

• Programacion01.png

  Cuadro no intervenido

• Programacion02.png

  Grosor de línea (+)

• Programacion03.png

  Grosor de línea (-)

CODIGO FINAL

import processing.serial.*;

import cc.arduino.*;

Arduino arduino;

float sw= 100;  // Grosor de línea
float sw1= 0; //variación del grosor de línea
float h=0; //Declaración de la variante de movimiento de la diagonal dentro de las coordenadas vectoriales establecidas.
float j=0;
PImage mondrian;//Declaración del uso de la imagen como una de fondo para poder vectorizar la obra.
int count = 1;
int numero;
float trama =0; //Declaracion de trama como una variante igualada a 0 



void setup() {
  //fullScreen();
  size(1000, 1000); //tamaño de la pantalla de interacción
  //pixelDensity(2);
  mondrian = loadImage("mondrian.jpg");//Llamada a la imagen del cuadro
  rectMode(CORNERS);//Declaración de los cuadros construidos salgan desde las esquinas 
  strokeCap(SQUARE);
  defineData(); //Declaración de las variantes 
    println("/dev/cu.wchusbserial1420");//Llamado del puerto serial al arduino 
    arduino = new Arduino(this, "/dev/cu.wchusbserial1420", 57600);//Llamado del arduino como controlador
}

void draw() {
  if (mousePressed) {
    background(mondrian);
  } else {
    background(white);
    noStroke();
  }
  updateValues();//Declaración de comandos del arduino
  drawMondrian();
}  

void keyPressed() { //Relación de orden al presionar una tecla como un comando de acción para un primer nivel de programación, donde el arduino aun no era utilizado.
  if (keyPressed) {
    if (key == 'a') 
      sw += 20;
  } 

  if (key == 'z') { 
    sw -= 20;
  }
  sw = constrain(9, 50, 200);

  if (key == 'h') {
    h = h+2;
  }

  if (key == 'j') {
    h = h-2;
  }
}


void updateValues() {//Controladores y orden desde el arduino la división corresponde a la intensidad y rango que generan los potenciometros o el sensor de presión 
  sw = arduino.analogRead(1)/4;//Relacion del sensor de presión con el comando de grosor de linea
  if(sw > 20) {
     sw = arduino.analogRead(1)/4;

   } else {
    sw= 20;//Declaración de un grosor mínimo de linea para poder visualizar de mejor forma el cuadro
  
  h = arduino.analogRead(3)/2;/construcción de la H con el potenciometro
  vertices = arduino.analogRead(2);//Declaración de la variante vértices con el Arduino correspondiente al potenciometro 2
  trama = round(map(arduino.analogRead(0), 522, 1023, 1, 900));//construcción de los puntos blancos sobre la imagen en relación al máximo de la pantalla 
}
}

void drawMondrian() { //Construcción del total de coordenadas que construyen la interacción 
     //cuadros blancos
 // noStroke();
  fill(white);
  rect(0, 0, x1+h, y1-h, vertices);
  rect(0, y2-h, x1+h, y1-h, vertices);
  rect(x2+h, height, x1+h, y2-h, vertices);
  rect(x2+h, y2, 1000, y3-h, vertices);
  //cuadros de color
  fill(red);
  //noStroke();
  rect(x1+h, 0, width, y2-h, vertices);
  fill(blue);
  //noStroke();
  rect(x1+h, height, 0, y2-h, vertices);
  fill(yellow);
 // noStroke();
  rect(x2+h, height, 1000, y3-h, vertices);
    
//puntos blancos
  int n = round(map(arduino.analogRead(0), 522, 1023, 1, 700))/10;
  noStroke();

  trama(x1+h, 0, width-x1, y2-h, n, trama/15,vertices, white);///rojo
  trama(0, y2-h, x1+h, 1506-y2, n, trama/50,vertices ,white);//azul
  trama(x2+h, y3, 1000, y3-h,  n, trama/30,vertices, white);//amarillo
  
  
  // lines
  stroke(black);
  strokeWeight(50);
  strokeWeight(sw);

  // verticals
  line(x1+h, 0, x1+h, height);
  line(x2+h+j, y2-h+j, x2+h-j, height);//x2

  // horizontals
  fill(black);
  stroke(sw1);
  line(0, y1-h, x1+h, y1-h);
  line(0, y2-h+j, width, y2-h+j);//y2
  line(x2+h-j, y3-h+j, 1000, y3-h+j);
  
  
  


}

void trama(float xpos, float ypos, float w, float h, int num, float diam, float vertices, color c) {
  float spH, spV;
  if (num > 1) {
    spH = (w - diam) / (num-1); 
    spV = (h - diam) / (num-1);
  } else {
    spH = spV = 1;
  }
  noStroke();
  fill(c);

  for (int y = 0; y < num; y++) {
    for (int x = 0; x < num; x++) {
      ellipse(xpos + diam/2 + x*spH, ypos + diam/2 + y*spV, diam, diam);
    }
  }
  
}

Registro Final

Archivo:Croquiscuerpofinal1.JPG

Archivo:Registrointerac1.JPG

Archivo:Registrointerac2.JPG Archivo:Registrointerac3.JPG Archivo:Registrointerac4.JPG