Grupo A - Encargo 01 - Interfaz Mondrian
Título | Grupo A - Encargo 01 - Interfaz Mondrian |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | encargo 1 |
Período | 2016- |
Asignatura | Taller de Diseño de Interacción, |
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., 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) | Miguel Angel Adofacci, Monserrat Lucia Pacheco Sandoval, Cristián Zamora |
Profesor | Herbert Spencer, Pedro Garretón |
Encargo 1: Control de Variables
Primera Revisión: Composition in Red, Blue and Yellow
Las pinturas de Piet Mondrian buscan la pureza, un "arte puro" en cuanto a forma y color. Los parámetros controlables establecidos juegan con el rompimiento de la forma pura que define la obra de Mondrian, pero manteniendo parte de su esencia.
Curvatura del trazo
Separado en dos variables (trazos verticales y trazos horizontales), este control altera la curvatura de dichos trazos, con un máximo (100) de curvatura, que considera un arco con tope en la proyección del siguiente trazo, por lo que los arcos generados no son idénticos y dependen de la distancia entre los trazos.
La expresión del arco formado se traduce al gesto de los dedos en la interfaz, donde el tomar un trazo, un tramo elástico y tirarlo, pulsando, genera un arco. En este también, aparece la elasticidad que los trazos muestran, al mantenerse anclados en sus orígenes (extremos).
Ambas magnitudes o variables son manipulables a la vez, logrando el juego de variables entre ambos.
- Mondrian - curva001.png
Curva en sentido horizontal, +100%
- Mondrian - curva002.png
Curva en sentido horizontal, -100%
- Mondrian - curva003.png
Curva en sentido vertical, +100%
- Mondrian - curva004.png
Curva en sentido vertical, -100%
- Mondrian - curva005.png
Curva en sentido horizontal y vertical, ambas al +100%
Desplazamiento del color
Esta magnitud afecta el comportamiento de los colores en el cuadro, haciendo que cada color tome el espacio correspondiente a su cuadrante moviéndose un espacio a la vez sin modificar su alto sino que solo su ancho para que este quede a tope con el recuadro.
El máximo se deja aparecer cuando los colores llegan a la posición inicial.
Pasos de la magnitud:
- Mondrian - desp002.png
- Mondrian - desp003.png
- Mondrian - desp004.png
- Mondrian - desp005.png
- Mondrian - desp006.png
- Mondrian - desp007.png
- Mondrian - desp008.png
- Mondrian - desp009.png
Perspectiva
Desde la observación de la obra, se piensa en un valor que altere su ortogonalidad, agregando un valor de volumen a ésta desde la perspectiva. La idea detrás de esto es generar un punto de fuga en la obra, desde el cual ésta se desforme y de la impresión de profundidad, de modo que las líneas ortogonales de la obra deriven a dicho punto.
- Control Mondrian - Grupo A - 005.jpg
- Control Mondrian - Grupo A - 004.jpg
- Control Mondrian - Grupo A - 008.jpg
- Control Mondrian - Grupo A - 007.jpg
- Control Mondrian - Grupo A - 006.jpg
- Control Mondrian - Grupo A - 009.jpg
Controlador - Primera Revisión
La interfaz que interactúa con la curvatura de las líneas corresponde a dos cuerdas elásticas que se encuentran fijas en sus extremos. Estas, al pulsarlas a un lado o hacia el otro, evocan la curva, por lo que, mientras más fuerte se pulsen y más se estiren, más pronunciada será la curva creada.
La traslación de los cuadros de color se realiza a través de un pomo que se gira, entendiéndose la traslación como parte de un ciclo, donde al final, cada color vuelve a situarse en su punto de origen.
La perspectiva se logra a través de un control de presión; una tela que actúa como superficie táctil que, al presionarla (y por ende desformar su superficie) genera la deformación en la pintura que corresponde a un punto de fuga. Ésta interfaz contiene tres subvalores, correspondientes a las coordenadas en los ejes x, y, y el valor correspondiente a la fuerza ejercida sobre la superficie, que se traduce en la acentuación del efecto.
- Control Mondrian - Grupo A - 001.jpg
- Control Mondrian - Grupo A - 002.jpg
- Control Mondrian - Grupo A - 003.jpg
Segunda Revisión
Transparencia y superposición
Esta magnitud es una variación aplicada la traslacion de los colores de la obra. Su función es degradar los colores desde un 100% a un 0%, disminuyendo un 20% por “paso”. Los colores generan tonalidades nuevas al superponerse con otros. El limite de esta transparencia es al 20% del color.
La alteración de transparencia se aplica a a ambas transparencias (ejes X e Y).
- Mondrian - trans001.png
- Mondrian - trans002.png
- Mondrian - trans003.png
- Mondrian - trans004.png
Control - Segunda Revisión
En la segunda revisión se integran las piezas electrónicas respecto a los gestos propuestos en la primera versión. Al descartarse la dimensión de pespectiva y adoptar la traslación de transparencia, se consideran dos "pomos" que vienen a ser controles giratorios, usando potenciometros, éstos realizan la traslación horizontal y vertical mientras que, para realizar la transparencia, se mantiene un pulsador presionado a la vez que los pomos se giran. La curvatura de las líneas se interpreta como un vector con magnitud, sentido y dirección al cual las curvas se acentúan, y esto, a su vez, se interpreta con un movimiento de la mano, que es captado por una palanca análoga.
Control - Tercera Revisión
Se pulen aspectos de ergonomía respecto a la versión anterior, modelando con el uso de la herramienta de solevación. Se integra la placa - shield como parte del chasis del control.
Configuración Electrónica - Shield para arduino
- Esquema Protoboard - Shield + Arduino - Grupo A.jpg
Configuración interna en Protoboard, realizada en software Fritzing
- Shield Arduino - Control Mondrian Grupo A.png
Diseño de placa Shield para Arduino
Proceso de código - Lenguaje computacional a gestualidad gráfica
Avance de código - Curvatura de líneas
! The header |- | //declaro variables a usar para funcion vertical float mx; //valor x de los puntos de control float xpos; //valor en x del bezier float ypos; //altura del bezier //declaro variables a usar para funcion horizontal float my; float posx; float posy; float posx2; void setup() { size(500, 600); noFill(); } void draw() { background(255); //lineas verticales curvabezierv (width*.08, height*.6); curvabezierv (width*.3333, height); curvabezierv (width*.45, height*.6); curvabezierv (width*.6, height); curvabezierv (width*.63, height); curvabezierv (width*.67, height*.96); curvabezierv (width*.73, height); curvabezierv (width*.96, height*.6); //lineas horizontales curvabezierh (0, height*.1, width*.97); curvabezierh (width*.08, height*.43, width*.96); curvabezierh (0, height*.6, width); curvabezierh (width*.6, height*.8, width); curvabezierh (width*.3333, height*.96, width); } //función específica para líneas verticales void curvabezierv(float xpos, float ypos) { mx = constrain(mouseX, 0, xpos); // mx = constrain(mouseX - xpos, 0, xpos); tope de xpos para ordenar momentaneamente el dibujo strokeWeight(width*.018); stroke(0); // orden de valores de bezier x1, y1, cx1, cy1, cx2, cy2, x2, y2 bezier(xpos, 0, mx, ypos*.3333, mx, ypos*.6666, xpos, ypos); // dibujo los puntos de control con fines puramente didácticos stroke(#FC5B2E); strokeWeight(5); point( mx, ypos*.3333); point( mx, ypos*.6666); //dibuja los puntos de control a 1/3 de la altura del bezier strokeWeight(.5); line(xpos, 0, mx, ypos*.3333); line(xpos, ypos, mx, ypos*.6666); } void curvabezierh(float posx, float posy, float posx2) { my = constrain(mouseY, 0, posy); strokeWeight(width*.018); stroke(0); // orden de valores de bezier x1, y1, cx1, cy1, cx2, cy2, x2, y2 bezier(posx, posy, posx+ (posx2-posx)*.3333, my, posx+ (posx2-posx)*.6666, my, posx2, posy); // dibujo los puntos de control con fines puramente didácticos stroke(#FC5B2E); strokeWeight(5); point(posx+ (posx2-posx)*.3333, my); point(posx+ (posx2-posx)*.6666, my); //dibuja los puntos de control a 1/3 de la altura del bezier strokeWeight(.5); line(posx, posy, posx+ (posx2-posx)*.3333, my); line(posx2, posy, posx+ (posx2-posx)*.6666, my); }
Roles del Grupo
- Miguel Angel Adofacci: Documentación en Wiki Casiopea, código de processing para generar curvas, configuración electrónica y Esquema en Fritzing
- Monserrat Pacheco: Código de processing para generar traslación y transparencia, diseño y distribución de Shield
- Cristian Zamora Miranda: Diseño, Revisión y manufactura de prototipos, distribucion de funciones.