Interfaz Piet Mondrian, Grupo H

De Casiopea



TítuloInterfaz Piet Mondrian
Tipo de ProyectoProyecto de Taller
Palabras Claveinterfaz, encargo 1
AsignaturaTaller de Diseño de Interacción 2016
Del CursoTaller de Diseño de Interacción 2016
CarrerasDiseño Gráfico, Diseño Industrial
Alumno(s)Sebastián Cubillos, Víctor Espinoza, Remy Bender, Bárbara Quiroz
ProfesorHerbert 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.


Archivo:Saltz5-30-4.jpg
"New York New York" Piet Mondrian, 1941-42

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

  1. Profundidad y juego de planos
  2. Luz, contraste y exposición
  3. Ampliación (zoom), movimiento/ sección
  4. 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".

Ampliación y navegación

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.

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.



Gestualidad de la mano / Movimiento de la obra



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




Shield

Prototipado Placa

Archivo:Final fritzing copia.jpg
prototipo de conexiones (protoboard / arduino)

.



Joystick / Prototipo 2.2.0