Interfaz Piet Mondrian, Grupo H
| Título | Interfaz Piet Mondrian |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | interfaz, encargo 1 |
| 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) | Sebastián Cubillos, Víctor Espinoza, Remy Bender, Bárbara Quiroz |
| Profesor | Herbert Spencer, Pedro Garretón |
sintesis encargo
Analizar las referencias plasticas de una obra pictorica del artista Piet Mondrian, considerando seis de estas dimensciones como gestos de acción e interacción. En base a los cuales prototipar un joystick (controlador) que permita una interacción directa con los elementos plasticos de la obra; o dicho de otro modo, que una interacción analoga se ejecute como una interacción digital.
Contexto histórico
Neoplasticismo,movimiento artístico impulsado por el artista Piet Mondrian, que dice o propone las bases conceptuales para el arte abstracto. Busca despojar al arte de todo movimiento, elemento o accesorio; con el fin de llegar a una escencia natural a través del lenguaje plástico.Reagrupa la unidad de la naturaleza, que en apariencia es cambiante y caótica, pero que sin embargo; posee una regularidad absoluta en su construcción. Destilando, finalmente, en un arte geométrico duro y rígido, sin características sensoriales formales mas que el color, pero evocando una idea que encuentra una imagen pura y simple.
Generalidades formales de la obra
Abarcando las características plásticas de la obra New york New york, damos paso a la concepción inicial de las propuestas pictoricas y factores sensoriales presentes, que no darán pie para ejecutar los valores de modificación y control posibles en nuestro controlador.
.-Abstracción geométrica en busca de una estructura básica de un universo, utilizando principalmente los "no colores" (blanco y negro) y los colores primarios (rojo, azul, amarillo), buscando con ello eliminar las concepciones formales.
.-Abstracción geométrica por medio de su expresión mínima; lo lineal. El color juega un rol demostrativo, caracteriza a la obra y le da una nueva intención.
Configuraciones plásticas
- Profundidad y juego de planos
- Luz, contraste y exposición
- Ampliación (zoom), movimiento/ sección
- Reorganización de los colores, formas
Luminosidad
Capacidad de un color para reflejar la luz blanca. Hace referencia a la claridad u oscuridad de un tono.
Variación del color -----> Fondo de la imagen (cambios que ocurren en la densidad de un color)
Temperatura del color
Fuentes que iluminan la escena dependerá de la naturaleza de la luz, los colores a los que pueda variar.
Más cálido ----> Rojo
Más frío ------> Azul
Composición y recomposición
Disposición de elementos de la imagen que se ordenan para expresar sensaciones favorables en un espacio determinado.
Representación volumétrica
Representación visual de un objeto en tres dimensiones. Los despliegues volumétricos producen movimientos tridimensionales que llena volumenes.
Dimensiones de la obra
Traslación de elementos
La primera dimensión se basa en el movimiento en el plano cartesiano, ejes X e Y, donde los elementos de la obra se trasladan. Esta traslación ocurre en base del color negro, donde estas franjas se mueven (arriba/abajo, izquierda/derecha) y los colores se trasladan en dirección opuesta; el rojo tiene un movimiento contrario al negro en el eje "y" mientras que el azul y el amarillo tienen movimientos opuestos en el eje "x".
Esta dimensión modifica el acercamiento de la obra, de manera que se pueda navegar por ella haciendo un enfoque en algún punto determinado.
Filtro de color
Se observa la dimensión del blanco en la obra, donde la modificación del color logra vincular el fondo con los elementos que conviven en él. De esta forma se aplica un filtro de color, que va de cálido (rojo) a frío (azul), donde el traspaso entre colores va interactuando con los colores básicos de la obra.
Interacción 3D
Esta dimensión va más allá del plano de la obra, realizando de ésta un cuerpo cúbico en el que se pueda interactuar en su totalidad. Se proyectan los trazos de la obra, dándole profundidad al espacio, de manera que se logre la visión tridimensonal.
Desarrollo de la forma
La visión del gesto es la del juego con el objeto. Se observa la manipulación desde el cubo rubik en la manera de la interacción con el objeto, en base a tres partes donde las manos poseen libertad de movimiento en el giro.
El objeto de interfaz posee la voluntad en el gesto de girar, presionar, deslizar y golpear. Se manifiesta la manipulación con ambas manos, posando cada una a un extremo independiente, para el juego de la forma.
Primer acercamiento a la forma
El objeto consta de una pieza central donde se ubican los comandos de botones, y dos extremos rotables. Los distintos paneles crean el juego de la interacción total con el objeto, ya que cada cara de la pieza central representa una dimensión distinta de la obra.
- Intgesto2.jpg
Modelo del objeto
- Intgesto3.jpg
Gesto deslizar, se considera un potenciometro lineal
- Intgesto4.jpg
Gesto presionar, se consideran dos botones de presión
- Intgesto5.jpg
Gesto de golpear, se considera un sensor de proximidad
Notas finales
En este primer modelo se consideraron mas dimensiones de las soportadas por el programa de arduino, por lo que el grupo debió replantear el enfoque a una sola dimensión principal y otra secundaria. En cuanto a la forma se decide volver a observar el gesto (igualmente basandose en la interacción total del objeto), para decidir los sensores correctos hacia el objeto.
Dimensiones de la obra (2° parte)
Para la segunda instancia, el grupo decide por enfocarse en la interacción 3D de la obra, tomando como segunda instancia el movimiento de traslación de los elementos de la pintura.
- MondrianMov-02.jpg
- MondrianMov-03.jpg
- MondrianMov-04.jpg
- MondrianMov-05.jpg
Gestualidad de la mano / Movimiento de la obra
- Mano2.jpg
- Mano3.jpg
- Mano4.jpg
- LaminaGestualidadPrint-09.jpg
- LaminaGestualidadPrint-10.jpg
- LaminaGestualidadPrint-11.jpg
- LaminaGestualidadPrint-12.jpg
- LaminaGestualidadPrint-05.jpg
- LaminaGestualidadPrint-06.jpg
- LaminaGestualidadPrint-07.jpg
- LaminaGestualidadPrint-08.jpg
- BMondriangesto7.jpg
- BMondriangesto6.jpg
- BMondriangesto5.jpg
- BMondriangesto8.jpg
- BMondriangesto12.jpg
- BMondriangesto4.jpg
- BMondriangesto11.jpg
- BMondriangesto3.jpeg
- BMondriangesto2.jpeg
- BMondriangestoobjeto.jpeg
- BMondriangesto9.jpg
- BMondriangesto10.jpg
Diseño en Processing
Codigo consola principal
//Declaración de variables
PFont font; //Tipografía para textos
color[] C; //Arreglo de color
int currentColor; //Selección de color
Liston[] li; //Arreglo de listones a dibujar en el programa
int l = 100; //Variable velocidad del tránsito (adddead/removedead)
int t = 60; //Variable posición del texto en eje Y
//Inicio del programa. Se genera el tamaño de programa, junto con el detalle de los arreglos de color y de listones.
void setup() {
size(1100, 850, P3D); //P3D es la renderización del dibujo 3D
//Se llama al comando color c, dándole 4 valores. Se le dice al programa que currentColor comienza en el arreglo 0
C = new color[4];
C[0] = color(#FF0000); // rojo
C[1] = color(#000000); // negro
C[2] = color(#FFD500); // amarillo
C[3] = color(#0028FF); // azul
currentColor = 0;
//Se llama a la clase "Liston", dándole 16 valores (número de elementos a dibujar)
li = new Liston[16];
li[0] = new Liston(-265, 185, 200, 490, 14, 30, l, 1, #FF0000); // rojo 1 (arriba)
li[1] = new Liston(-265, -208, 200, 490, 14, 30, l, 1, #FF0000); // rojo 2 (abajo)
li[2] = new Liston(-265, -99, -206.5, 490, 24, 13, l, 3, #FF0000); // rojo 3 (superior)
li[3] = new Liston(-265, 215, -78, 490, 30, 17, l, 3, #FF0000); // rojo 4 (inferior)
li[4] = new Liston(-215, -166, 150, 490, 14, 30, l, 2, #FF0000); // rojo 5 (vertical)
//
li[5] = new Liston(-265, -245, -200, 490, 14, 14, l, 1, #000000); // negro 1 (arriba)
li[6] = new Liston(-265, 74, -200, 490, 14, 14, l, 1, #000000); // negro 2 (medio)
li[7] = new Liston(-227, 115, -200, 430, 14, 14, l, 1, #000000); // negro 3 (abajo)
li[8] = new Liston(-215, -231, -150, 490, 14, 30, l, 2, #000000); // negro 4 (vertical izquierdo)
li[9] = new Liston(-215, 206.5, -150, 490, 14, 30, l, 2, #000000); // negro 5 (vertical derecho)
//
li[10] = new Liston(-265, -102, 269, 490, 30, 24, l, 3, #FFD500); // amarillo 1 (izq. a der.)
li[11] = new Liston(-265, 215, 45, 490, 30, 17, l, 3, #FFD500); // amarillo 2
li[12] = new Liston(-265, 215, -148, 490, 30, 17, l, 3, #FFD500); // amarillo 3
li[13] = new Liston(-265, 32, -206.5, 490, 26, 13, l, 3, #FFD500); // amarillo 4
//
li[14] = new Liston(-265, 215, 140, 490, 30, 20, l, 3, #0028FF); // azul 1 (izq. a der.)
li[15] = new Liston(-265, 215, -5, 490, 30, 17, l, 3, #0028FF); // azul 2
}
//Dibujo en el programa
void draw() {
if (keyPressed) {
checkKeyboard(); //llama al comando checkKeyboard en pestaña "input"
}
println(currentColor); //muestra en la consola el número correspondiente al arreglo de color
//Declaración de las variables de rotación según el movimiento del mouse
float rotx = (mouseY/360.0)*-2*PI+PI;
float roty = (mouseX/420.0)*2*PI-PI;
if (key == 'i') { //reset hacia la pintura original
rotx = 0.0;
roty = 0.0;
}
background(255);
fill(0);
ortho(); //comando de visión de planos paralelos
lights(); //genera luces y sombras en los elementos dibujados
//Comando para el punto de inicio de los dibujos en el programa, se le da un traslado al centro del lienzo como punto (0,0)
pushMatrix();
translate(width/2, height/2, 0);
rotateX(rotx); //rotación en X
rotateY(roty); //rotación en Y
{
for (int i = 0; i < li.length; i++) {
li[i].render();
}
}
popMatrix();
//Creación del layout del programa, se generan los textos
fill(0);
noStroke();
font = createFont("NeuzeSBooHea.otf", 30);
textFont(font);
textSize(12);
text ("Tránsito New York", 10, t+60);
textSize(8);
text ("X " + rotx +" pi "+" \nY "+roty/PI+" pi", 10, t+112);
textSize(8);
text ("Sebastián Cubillos\nVíctor Espinoza\nBárbara Quiroz\nRémy Bender \nTaller de Diseño de Interacción 2016, ead 2016", 8, t+200);
rect(10, t+86, 85, 2);
rect(10, t+40, 85, 2);
//Se dibuja un circulo para indicar el color seleccionado
noStroke();
fill(C[currentColor]);
ellipse(15, t+140, 10, 10);
}
void customBox(float x, float y, float z, float w, float h, float d) {
pushMatrix();
translate(x - w/2.0, y - h/2.0, z - d/2.0);
box(w, h, d);
popMatrix();
}
Codigo clase Bloque
//Se genera una clase para los bloques que conforman los listones
class Block {
float x, y, z; //Variables de posición en los ejes
float w, h, d; //Variables de largo (w), alto (h) y profundidad (d)
boolean alive; //alive significa que estará con color
Block(float x, float y, float z, float w, float h, float d) { //cada bloque tendrá tales variables
this.x = x;
this.y = y;
this.z = z;
this.w = w;
this.h = h;
this.d = d;
alive = true; //estado del color del bloque, inicializará con color
}
void render() {
customBox(x, y, z, w, h, d);
}
}
Codigo clase Liston
//Se genera una clase para el elemento listón
class Liston {
float x, y, z; //Variables de posición en los ejes
float w, h, d, anchoBlock; //Variables de largo (w), alto (h) y profundidad (d). Además se considera el ancho de los bloques que conformarán el liston
color c; //Declaración de color
int numBlocks, numDead; //Variables de número de bloques en el liston, y numero de elementos "muertos" (sin color)
int caso; /* 1 = x, 2 = y, 3 = z*/
Block[] b; //llama a la clase "Block"
Liston(float x, float y, float z, float w, float h, float d, int num, int caso, color c) { //cada liston tendra tales variables
this.x = x;
this.y = y;
this.z = z;
this.w = w;
this.h = h;
this.d = d;
this.c = c;
this.caso = caso;
numBlocks = num;
numDead = 0; //el programa comienza con 0 bloques "muertos" (sin color)
b = new Block[numBlocks]; //dibuja el elemento de la clase "Block"
anchoBlock = w/num; //el ancho del bloque es igual al largo del liston dividido por la cantidad de bloques
for (int i = 0; i < numBlocks; i++) {
b[i] = new Block(x + i * anchoBlock, y, z, anchoBlock, h, d);
}
}
//Configuración de los listones en el espacio. Se utiliza switch del caso para rotar los elementos según los ejes
void render() {
noStroke();
fill(c);
pushMatrix();
switch(caso) {
case 1: //el liston se dibuja en el eje X
break;
case 2:
rotateZ(-HALF_PI); //el liston rotara 90° en Z
translate(anchoBlock, 0, 0);
break;
case 3:
rotateY(-HALF_PI); //el liston rotara 90° en Y
}
//Comando para configurar el movimiento de los bloques en los listones
for (int i = 0; i < numBlocks; i++) {
// customBlock(b[i].x, b[i].y, b[i].z, b[i].w, b[i].h, b[i].d, b[i].t);
if (b[i].alive) {
b[i].render();
}
}
popMatrix();
if (frameCount % 1 == 0) {
moveDead();
}
}
void moveDead() {
for (int i = 1; i < numBlocks; i++) {
b[i-1].alive = b[i].alive;
}
b[numBlocks-1].alive = b[0].alive;
}
//Configuracion de los bloques "muertos" (sin color) según el color seleccionado
void addDead() {
if (c == C[currentColor]) { //solo se aplicará addDead al color que este indicado
int max = 0;
for (int i = 0; i > numBlocks; i++) {
if (b[i].alive == false && i < max) { // b = Block
max = i;
}
}
b[(max+1)%numBlocks].alive = false;
}
}
//Configuración de los bloques restaurados a su color. Se remueven los bloques "muertos"
void removeDead() {
if (c == C[currentColor]) { //solo se aplicará removeDead al color que este indicado
int max = 0;
for (int i = 0; i > numBlocks; i++) {
if (b[i].alive == true && i < max) { // b = Block
max = i;
}
}
b[(max+1)%numBlocks].alive = true;
}
}
}
Codigo comandos input teclado
//Se realiza el input de comandos para el teclado
void checkKeyboard() { //si la tecla "a" es presionada, se ejecuta el comando addDead (el liston comenzara a desaparecer)
if (key == 'a') {
for (int i = 0; i < li.length; i++) {
li[i].addDead();
}
}
if (key == 'z') { //se la tecla "z" es presionada, se ejecuta el comando removeDead (el liston se restaura a su color)
for (int i = 0; i < li.length; i++) {
li[i].removeDead();
}
}
}
void keyPressed() { //comando para el indicador de color, si se apreta la tecla "," se indica otro color a transformar
if (key ==',') {
currentColor++;
}
currentColor %= C.length;
}
- Newy1.jpg
- Newy3.jpg
- Newy4.jpg
Shield
Prototipado Placa
.
Joystick / Prototipo 2.2.0
