Diferencia entre revisiones de «Grupo A - Encargo 01 - Interfaz Mondrian»

De Casiopea
Línea 140: Línea 140:


Luego del proceso en fabricación (impresión 3D), para darle un acabado al objeto en cuanto a su textura se le aplica masilla.<br>
Luego del proceso en fabricación (impresión 3D), para darle un acabado al objeto en cuanto a su textura se le aplica masilla.<br>
El proceso consta en aplicar una ligera capa de esta en el objeto para luego , cuanto esta seca lijar con grano 600 a 1200, su terminación debe ser suave al tacto y en vista sin quebraduras.  
El proceso consta en aplicar una ligera capa de esta en el objeto para luego , cuanto esta seca lijar con grano 600 a 1200,<br>su terminación debe ser suave al tacto y en vista sin quebraduras.
 
 


====Configuración Electrónica - Shield para arduino ====
====Configuración Electrónica - Shield para arduino ====

Revisión del 17:35 5 abr 2016


TítuloGrupo A - Encargo 01 - Interfaz Mondrian
Tipo de ProyectoProyecto de Taller
Palabras Claveencargo 1
Período2016-
AsignaturaTaller de Diseño de Interacción,
Del CursoTaller de Diseño de Interacción 2016,
CarrerasDiseñ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
ProfesorHerbert 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.


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:



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.




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.


Segunda Revisión

Transparencia y superposición

Esta magnitud es una variación aplicada la traslación 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).



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 perspectiva 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.

Procesos constructivos

Enmasillado y pintado

Luego del proceso en fabricación (impresión 3D), para darle un acabado al objeto en cuanto a su textura se le aplica masilla.
El proceso consta en aplicar una ligera capa de esta en el objeto para luego , cuanto esta seca lijar con grano 600 a 1200,
su terminación debe ser suave al tacto y en vista sin quebraduras.

Configuración Electrónica - Shield para arduino

Proceso de código - Lenguaje computacional a gestualidad gráfica

Avance de código - Curvatura de líneas


 //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);
} 


Avance de código - Traslación de color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in sem viverra magna pellentesque euismod. Integer rhoncus, ante ac imperdiet elementum, est enim vulputate nulla, id rutrum diam nunc vel metus. Mauris ut egestas purus. Curabitur sed mauris blandit, tempus turpis et, congue libero. Sed facilisis nisl eget odio tempor, a volutpat nibh volutpat. Vivamus tristique ipsum leo, quis convallis diam laoreet nec. Sed eget velit fringilla, sollicitudin velit suscipit, tincidunt arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi vel dui mauris. Vestibulum cursus mauris et laoreet malesuada. Donec consectetur ante non nulla viverra tempus.

Pellentesque id dictum ex. Sed ullamcorper sapien id mauris lobortis ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare vitae massa nec cursus. Nam eget sapien ligula. Aliquam erat volutpat. Nam eleifend dictum pharetra. Sed lectus mi, suscipit egestas lacus in, ultricies sagittis augue. Donec pulvinar ante metus, in varius quam porttitor ac. Nunc consequat tempus libero pharetra sollicitudin. Maecenas in porttitor erat. Integer facilisis purus enim, eu ultricies sem placerat non. Sed eros massa, faucibus ac purus vel, laoreet lacinia mi. Praesent tincidunt, erat a rutrum scelerisque, lacus sem molestie lacus, at laoreet est mauris luctus nibh. Curabitur suscipit sagittis orci, et accumsan lacus dictum rutrum. Nam orci turpis, accumsan quis justo et, ullamcorper efficitur purus.

Aenean pharetra nisl ut lectus viverra vehicula. Fusce ante leo, fringilla egestas ligula sed, lacinia consectetur dui. In eleifend sagittis sapien, sit amet suscipit felis imperdiet eu. Cras id semper augue, id venenatis urna. Mauris dignissim, neque nec blandit scelerisque, eros ante dapibus mauris, in pretium nulla purus at leo. Duis et ante eu tellus viverra placerat. Mauris non tincidunt erat. Sed egestas efficitur molestie. Duis tincidunt venenatis sem nec consequat. Proin sagittis tellus velit, pretium dapibus nisl tincidunt ut. Etiam vitae fermentum felis.

Avance de código - Transparencia de color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in sem viverra magna pellentesque euismod. Integer rhoncus, ante ac imperdiet elementum, est enim vulputate nulla, id rutrum diam nunc vel metus. Mauris ut egestas purus. Curabitur sed mauris blandit, tempus turpis et, congue libero. Sed facilisis nisl eget odio tempor, a volutpat nibh volutpat. Vivamus tristique ipsum leo, quis convallis diam laoreet nec. Sed eget velit fringilla, sollicitudin velit suscipit, tincidunt arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi vel dui mauris. Vestibulum cursus mauris et laoreet malesuada. Donec consectetur ante non nulla viverra tempus.

Pellentesque id dictum ex. Sed ullamcorper sapien id mauris lobortis ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare vitae massa nec cursus. Nam eget sapien ligula. Aliquam erat volutpat. Nam eleifend dictum pharetra. Sed lectus mi, suscipit egestas lacus in, ultricies sagittis augue. Donec pulvinar ante metus, in varius quam porttitor ac. Nunc consequat tempus libero pharetra sollicitudin. Maecenas in porttitor erat. Integer facilisis purus enim, eu ultricies sem placerat non. Sed eros massa, faucibus ac purus vel, laoreet lacinia mi. Praesent tincidunt, erat a rutrum scelerisque, lacus sem molestie lacus, at laoreet est mauris luctus nibh. Curabitur suscipit sagittis orci, et accumsan lacus dictum rutrum. Nam orci turpis, accumsan quis justo et, ullamcorper efficitur purus.

Aenean pharetra nisl ut lectus viverra vehicula. Fusce ante leo, fringilla egestas ligula sed, lacinia consectetur dui. In eleifend sagittis sapien, sit amet suscipit felis imperdiet eu. Cras id semper augue, id venenatis urna. Mauris dignissim, neque nec blandit scelerisque, eros ante dapibus mauris, in pretium nulla purus at leo. Duis et ante eu tellus viverra placerat. Mauris non tincidunt erat. Sed egestas efficitur molestie. Duis tincidunt venenatis sem nec consequat. Proin sagittis tellus velit, pretium dapibus nisl tincidunt ut. Etiam vitae fermentum felis.

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, terminaciones de carcasa (pasta, lijado y pintura)
  • Cristian Zamora Miranda: Diseño, Revisión y manufactura de prototipos, distribución de funciones, operación de fresado.