Interfaz de Piet Mondrian GRUPO C

De Casiopea



TítuloInterfaz de Piet Mondrian GRUPO C
Tipo de ProyectoProyecto de Taller
Palabras Clavepiet mondrian, mondrian, interfaz, encargo 1
Período2016-
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2016
Alumno(s)Barbara Madariaga, Camila Jeria, Maria Jesus Oliva Palma, Javiera Martínez
ProfesorHerbert Spencer, Pedro Garretón

Tabla de Contenidos

Encargo

Se busca crear un control de una obra de arte de Piet Mondrian a través de 3 a 6 dimensiones. Estas dimensiones fueron escogidas según algunos rasgos de la obra. Se da un enfoque en la propuesta de la interfaz de este control, y el juego con la obra y la viabilidad que tiene para pasarlo a un software.

Primera Entrega

Piet Mondrian

Pintor vanguardista neerlandés nació 7 de marzo de 1872, miembro de De Stijl y fundador del neoclasicismo. El arte de Mondrian siempre estaba íntimamente relacionado a sus estudios espirituales y filosóficos. Dedicándose a la abstracción geométrica, con el fin de encontrar la estructura básica del universo, la supuesta “retícula cósmica” que él intenta representar con el no-color blanco atravesado por una trama de líneas de no-color negro; y en tal trama planos geométricos de colores primarios, considerados por Mondrian como los colores elementales del universo. De este modo, repudiando las características sensoriales de la textura y la superficie, eliminando las curvas, y en general todo lo formal. Expresó que el arte no debe ser figurativo, no debe implicarse en la reproducción de objetos aparentemente reales, sino que el arte debe ser una especie de indagación de lo absoluto subyacente tras toda la realidad fenoménica.

Exploración de la Obra

Abstracción de "La Tableau Nº1, 1921"

En primera instancia se observa el cuadro como una pintura de abstracción geométrica que se simplifica a una elevación de horizontes y verticales, formas figurativas declaradas por los colores primarios, pareciendo que las figuras compuestas roturan en el plano del cuadro además, se dispersan de manera asimétrica, mostrando una especie de eclosión mientras se descomponen los pigmentos para retomar el color. Es por ello que los cambios observados los nombramos pigmentación, eclosión y rotación.

Abstracción de la Forma

Estudio de Movimientos ante los Conceptos

Se comienza por buscar movimientos que atrapan los conceptos y que sea una interfaz de fácil lectura para el usuario y logre tener integrado los tres movimientos en un sólo cuerpo, es por ello que en conjunto se estudian juguetes de niños que tengan un movimiento similar.


500px

1 ZOOTROPO Objeto que logra rotar en un mismo eje y hace parecer que las figuras dibujadas en el se mueven.

2 CUBO RUBIK Juguete de lógica que hace rotar los colores hasta completar un cuadrado del mismo color.

3 CAJA SORPRESA Juguete que a través de un resorte y dar cuerda manualmente libera un juguete.

Integración de los Conceptos a la Forma

Se piensa en una forma simple que cumpla con integrar ante movimientos los conceptos abstraídos del cuadro.

500px

(1) Primeramente se piensa en un cubo que permita que las piezas "salgan de él" a medida que cambie la eclosión.

( 2) Tubos que rota al ser manejado por dos maillas fijas que lo hacen girar en movimientos contrarios al cual también le sobresalen piezas y se le agrega un sistema de luz.

(3)

Tubo que desplaza sus partes, pensando en plástico para la muestra de pigmentación de color a través de luces.

Forma Final

La forma final se compone de dos cubos que se unen mediante un tubo el cual hace que estos tubos roten de manera libre. Cada cubo tiene la característica de eclosionarse individualmente esto a través de perillas que se encuentran en una de sus caras. El tubo central llevará una conexión eléctrica interna la cual a través de luces LED cambiarán la pigmentación de los tubos los cuales llevan parte de la abstracción gráfica con mica de colores permitiendo de esta manera que la luz salga bajando y subiendo la intensidad de colores.

300px

Funcionamiento del juego

Particularidades

Para que las tres dimensiones del juego se vean reflejadas en el objeto, es necesario crear un sistema de mecanismos para cada una (rotación-eclosión-pigmentación).

Para la rotación, se utiliza un tubo central que une a los dos movimientos contrarios y asi, un cambio visual al alternar las caras asimétricas de la obra plasmada en los cubos. En las caras laterales del juego, se adosan 2 semicirculos (uno a cada lado), para facilitar el agarre de la mano al giro.

GESTO LIGADO A LA FUNCIÓN

En las mismas manillas semicircunferencias, se insertan tres perillas por lado que van enganchadas a distintos alambres. Estos alambres tienen un circuito que pasa por las paredes internas de los cubos y afirman ciertas piezas para luego ser desplazados y lograr la ECLOSIÓN. En este objeto, la vista planta pasa a ser la misma que la vista frontal, ya que son cubos iguales que están en constante cambio. Las únicas variables son las lineas asimétricas del cuadro.

600px 500px

Detalles del tubo central

ROTACIÓN / LUMINOSIDAD Además de actuar como centro de giro, el tubo central contiene en su interior un circuito de luces LED (blanca,amarilla,roja y azul) que pueden ser encendida individual o aleatoriamente, iluminando así,a los fragmentos del cubo echo de mica. Cuando los colores primarios del cuadro de Piet Mondrian, son iluminados por luces de los mismos colores, pueden lograr visualizar tonalidades semejantes a los colores secundarios.

500px

Proyección de la Obra Intervenida

300px 300px 300px

Objeto

300px 300px 300px

Corrección

Error en el entendimiento del encargo, ya que no desarrollamos una abstracción de la imagen pictórica propiamente tal, pues las dimensiones las llevamos al objeto y este paso de ser un control a la obra misma.

Segunda Entrega

Dimensiones

Engranaje del Color

Se observan los planos geométricos de colores y se toman como el conjunto de franjas verticales que al estar juntas se logra ver el lleno de color. Con esto se establece un juego con su desencaje, haciendo una rotación de franjas, la cual superpone áreas rojas con amarillas, amarillas con azules y azules con rojas; trayendo presencia así nuevos colores.

Combinación de Fracciones

Se toma como rasgo la asimetría del cuadro y los ejes horizontales que presenta, la manera en que se juega con esto es dividiendo la imagen en cuatros franjas horizontales iguales, y que estas se desplacen de manera vertical, a través de esto logramos crear 24 combinaciones distintas, es decir 24 nuevas imágenes.

Desfase del Color

Se busca rescatar la manera en que se dan los límites del cuadro, estos no se dan en los contornos externos de la formas, por lo que da la impresión de un "sin fin". Por ello se plantea un desplazamiento del color hacia el exterior, llegando a una imagen del cuadro construida sólo con las líneas al centro.

300px 300px 300px 300px

Maqueta

Se plantea la forma ante los conceptos abstraídos desde el cuadro de Piet Mondrian de una manera metafórica y lúdica de ellos, ocupando los sensores correspondientes.

300px 300px 300px

Corrección

A pesar de haber mejorado en la abstracción de la gráfica, esta se deberá seguir trabajando ya que se pensó de una forma más plástica y no en la realidad de tener que traspasar estas coordenadas a un software, por ello se tendrá que ver la manera de que todas estas dimensiones hablen en un mismo lenguaje o mas bien que estén en una misma ley.

Tercera Entrega

Se corrigen las dimensiones, repensando la manera en que estas operan para que así puedan ser compatibles entre sí al momento de hacer la programación en processing.

Para ello se replanteó el concepto de rotación, esta vez sólo gira en un eje (eje y) y mostrando las caras del cuadro solo verticalmente, lo que produce cuatro variaciones del cuadro. Se piensa adaptar coordenadas a processing con la función box, para conseguir los vértices y armar planos rectangulares que al aplicar "box" se convierten en cajas flotantes, pero frontalmente conformarán el cuadro.

Proyección Dimensiones

Rotación

Intensidad de Color

Compatibilidad de las Dimensiones

Control

Planos

Simulación de material

Fotografías maqueta

300px 300px 300px

300px

Cuarta Entrega

Se decide cortar las aristas del cubo para tener un mejor manejo de los cubos con las manos, ya que de esta manera es mucho más comodo para la mano alcanzar los sensores introducidos en las caras del cubo.

Planimetría

300px Cubo A y Cubo B unidos.

300px Cubo A

300px Cubo B

Materialidad y contenido en los cubos

Rotación de los cubos unidos

Fotografias cuarta maqueta

Maqueta materializada en piezas de acrílico impresas en laser cut y piezas internas impresas en 3D

Quinta Entrega

Roles dentro del equipo

800px

Registro del gesto en su recorrido

Lámina grupal

300px 300px 300px

Ma Jesús O.

  • Faltan láminas por escanear

300px 300px 300px

Bárbara M.

300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px

Camila J.

300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px

Javiera M.

300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px


Dimensiones pictóricas

La obra pictórica se entiende como un cuerpo volumétrico, donde cada elemento (líneas y rectángulos) se prolongan en el eje z. Cada lleno de color se compone de franjas de 2 mm. de espesor que van una al lado de otra hasta lograr la totalidad de la figura de color.

Rotación en eje y

Cada cara del eje "y" del cuerpo volumétrico tiene la medida del cuadro original, por lo que el giro en este eje va cambiando las vistas de sus prolongaciones en "z".

Engranaje del color

Esta dimensión se relaciona con las franjas anteriormente mencionadas, donde cada una de éstas intercaladamente se desplazan 6 cm. en el eje "y" aleatoriamente desde su origen hasta el límite. Una vez finalizado el desplazamiento éstas vuelven a su posición inicial, proyectando una imagen de engrane y desengrane.

Intensidad del color

Al igual que el engranaje, esta dimensión trabaja mediante las franjas de color, las cuales aleatoriamente van cambiando en un rango de cuatro tonalidades.


Configuración electrónica

Fritzing

Prueba de conexiones

Frezado placa de cobre dibujo illustrator

Frezado placa de cobre final

Maqueta final

Sexta Entrega

Circuito Placa y Arduino

Integración del Rodamiento

Gráfica

Cubo A

Cubo B

Vista del cubo, superposición de la gráfica


Séptima Entrega

Control de rotación interactiva

Tomando como base la imagen pictórica de Piet Mondrian, La Tableau 1, 1921, se realiza un control para dominar ciertas dimensiones dentro de la obra. Estas se definen como Rotación en Y, Engranaje del color e Intensidad del color, con lo que se busca llegar a una interacción gestual/virtual, logrando controlar la imagen pictórica mediante las manos. Para el juego, la obra pasa de ser un plano a un volumen 3D. A partir de la comprensión de la obra como un volumen, se piensa la forma del control de una manera coherente a esto; es por ello que el objeto se compone de dos cubos que relacionan la gestualidad de las manos con la imagen virtual, otorgando la sensación al cuerpo de estar palpando el cuadro.

Juego

La interacción gestual/virtual, consiste en encontrar la composición original de la obra, ya que la primera imagen que se muestra al comenzar el juego, está espejada en el eje X. En el paso de esta descomposición a la composición, se van creando distintas visualizaciones que guardan una riqueza plástica al interrelacionarse las tres dimensiones, lo que va causando una satisfacción en el usuario.

Rotación en "y"

600px 600px

Engranaje del color

600px 600px

Intensidad del color

600px 600px

Objeto despiece

400px 400px 400px 400px 200px

Experiencia de diálogo con el objeto

500px 500px 500px 500px 400px 100px 500px 300px 500px 500px 500px 500px 500px 500px 500px 500px 500px 500px 500px 500px 500px 500px 500px

Interacción con el control


https://vimeo.com/163434010

Lámina de exposición

Archivo:Lamina cubo expo imag.png Archivo:Lamina cubo expo.pdf

Codificación de la interacción / Lenguaje gráfico

Extensión del código de interacción


import processing.serial.*;
import cc.arduino.*;
Arduino arduino;




void setup() {
  size(1000, 700, P3D); 
  arduino = new Arduino(this, "COM10", 57600);
  rotx = 0;
}


void draw() {
  if (mousePressed) {
  }


  //Primero declaro todos los ángulos de rotacion en el centro de la pantalla (0,0)
  //float rotx = (mouseY/420.0)*2*PI-PI; // con solo "y" se obtiene el movimiento
  background(255);
  ortho(); 
  update();


  //Caja externa
  
  //ubicación del centro del dibujo, mitad del size en x,y
  //este sera mi punto 0,0 en las coordenadas del box
  translate(500, 400); 


  rotateX(rotx);  
  strokeWeight(2);

  noStroke();
  noFill();
  box(377, 548, 548); // marco de la caja, cambia el tamaño 

  
  //al color de cada box, se le agrega el valor alfa con variables de opacidad.
  //translate = (0, ancho, alto); 
  
  //Color amarillo
  //este color se compone de 10 box de 2mm de espesor
  noStroke();
  fill(#FFD500, alfa);
 
  pushMatrix();
  translate(-185.5, -170+h, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *6);
  popMatrix();

  pushMatrix();
  translate(-178, -170, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *11);
  popMatrix();

  pushMatrix();
  translate(-170.5, -170+h*2, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *12);
  popMatrix();

  pushMatrix();
  translate(-163, -170, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *8);
  popMatrix();

  pushMatrix();
  translate(-155.5, -170+h*3, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *4);
  popMatrix();

  pushMatrix();
  translate(-148, -170, 0); 
  box(7.5, 207, 548);
  fill(#FFD500, alfa *5);
  popMatrix();

  pushMatrix();
  translate(-140.5, -170+h*4, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *7);
  popMatrix();

  pushMatrix();
  translate(-133, -170, 0); 
  box(7.5, 207, 548);
  fill(#FFD500, alfa *3);
  popMatrix();

  pushMatrix();
  translate(-125.5, -170+h*5, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *9);
  popMatrix();

  pushMatrix();
  translate(-118, -170, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *10);
  popMatrix();

  //color azul

  noStroke();
  fill(#211FD8, alfa);
  
  pushMatrix();
  translate(184.75, -208+h, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *5);
  popMatrix();

  pushMatrix();
  translate(177.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *4);
  popMatrix();

  pushMatrix();
  translate(169.75, -208+h*2, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *15);
  popMatrix();

  pushMatrix();
  translate(162.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *10);
  popMatrix();

  pushMatrix();
  translate(154.75, -208+h*3, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *8);
  popMatrix();

  pushMatrix();
  translate(147.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *3);
  popMatrix();

  pushMatrix();
  translate(139.75, -208+h*4, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *6);
  popMatrix();

  pushMatrix();
  translate(132.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *12);
  popMatrix();

  pushMatrix();
  translate(124.75, -208+h*5, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *11);
  popMatrix();

  pushMatrix();
  translate(117.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *7);
  popMatrix();

  pushMatrix();
  translate(109.75, -208+h*6, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *9);
  popMatrix();

  pushMatrix();
  translate(102.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *14);
  popMatrix();

  pushMatrix();
  translate(94.75, -208+h*7, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *13);
  popMatrix();

  pushMatrix();
  translate(87.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *16);
  popMatrix();

  pushMatrix();
  translate(79.75, -208+h*8, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *17);
  popMatrix();

  //color rojo

  noStroke();
  fill(#FF0015, alfa);
  
  pushMatrix();
  translate(184.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *29);
  popMatrix();

  pushMatrix();
  translate(177.25, 180-h, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *3);
  popMatrix();

  pushMatrix();
  translate(169.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *6);
  popMatrix();

  pushMatrix();
  translate(162.25, 180-h*2, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *10);
  popMatrix();

  pushMatrix();
  translate(154.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *20);
  popMatrix();

  pushMatrix();
  translate(147.25, 180-h*3, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *24);
  popMatrix();

  pushMatrix();
  translate(139.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *15);
  popMatrix();

  pushMatrix();
  translate(132.25, 180-h*4, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *31);
  popMatrix();

  pushMatrix();
  translate(124.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *32);
  popMatrix();

  pushMatrix();
  translate(117.25, 180-h*5, 0);
  box(7.5, 188, 548);
  fill(#FF0015,alfa *27);
  popMatrix();

  pushMatrix();
  translate(109.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *19);
  popMatrix();

  pushMatrix();
  translate(102.25, 180-h*6, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *8 );
  popMatrix();

  pushMatrix();
  translate(94.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *7);
  popMatrix();

  pushMatrix();
  translate(87.25, 180-h*7, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *22);
  popMatrix();

  pushMatrix();
  translate(79.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *23);
  popMatrix();

  pushMatrix();
  translate(72.25, 180-h*8, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *25);
  popMatrix();

  pushMatrix();
  translate(64.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *4);
  popMatrix();

  pushMatrix();
  translate(57.25, 180-h*9, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *30);
  popMatrix();

  pushMatrix();
  translate(49.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *17);
  popMatrix();

  pushMatrix();
  translate(42.25, 180-h*10, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *28);
  popMatrix();

  pushMatrix();
  translate(34.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *11);
  popMatrix();

  pushMatrix();
  translate(27.25, 180-h*11, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *5);
  popMatrix();

  pushMatrix();
  translate(19.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *13);
  popMatrix();

  pushMatrix();
  translate(12.25, 180-h*12, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *14);
  popMatrix();

  pushMatrix();
  translate(4.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *18);
  popMatrix();

  pushMatrix();
  translate(-2.75, 180-h*13, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *16);
  popMatrix();

  pushMatrix();
  translate(-10.25, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *9);
  popMatrix();

  pushMatrix();
  translate(-17.75, 180-h*14, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *26);
  popMatrix();

  pushMatrix();
  translate(-25.3, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *12);
  popMatrix();

  //color negro 1

  noStroke();
  fill(#000000);
 
  pushMatrix();
  translate(-112.9, 244, 0);
  box(152.1, 60, 37);
  popMatrix();

  //color negro 2 chico

  noStroke();
  fill(#000000);
 
  pushMatrix();
  translate(-151.4, -48, 0);
  box(75, 37, 95);
  popMatrix();

  //linea vertical 1

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(-110.9, -152, 0);
  box(7.5, 245, 190);
  popMatrix();

  //linea vertical 2

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(-33, 0, 0);
  box(7.5, 548, 548);
  popMatrix();

  //linea vertical 3

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(169, -28, 0);
  box(7.5, 226, 85);
  popMatrix();

  //linea vertical 3

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(72.3, -208, 0);
  box(7.5, 132, 300);
  popMatrix();

  //linea horizontal 1

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(76, 82, 0);
  box(225, 7.5, 100);
  popMatrix();

  //linea horizontal 2

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(32, -33.3, 0);
  box(279, 7.5, 180);
  popMatrix();

  //linea horizontal 3

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(76, -140, 0);
  box(225, 7.5, 80);
  popMatrix();
}


Variables de rotación, engranaje y opacidad


//declaro variable que permite la rotación del cubo mediante potenciómetro circular 
float rotx;

//declaro variables para el "engranaje del color" mediante el joystick (eje x)
float h = 20.603204890111201;

//declaro variables para las dimensiones "opacidad del color" mediante el joistick (eje y)
float alfa = 255;



void update() { 
  float perilla = arduino.analogRead(0);
  rotx = map(perilla, 1, 1024, 0, TWO_PI*.75);

  float joisx = arduino.analogRead(1);
  // h = map(joisx, 0, 735, 1023, 226 );

  if (joisx > 1000) {
    h++;
  }

  if (joisx < 20) {
    h--;
  }

  println (joisx);


  float joisy = arduino.analogRead(2);
  //alfa = map(joisy, 0, 1023, 0, height);

  if (joisy > 1000) {
    alfa +=1;
  }

  if (joisy < 20) {
    alfa -=1;
  }

  alfa = constrain(alfa, 0, 255);

  println (joisy);
}