Grupo A - Encargo 01 - Interfaz Mondrian

De Casiopea



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 Industrial
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

Shield y soldadura

Sobre la placa de cobre se fresa el dibujo del shield por una broca de 2mm en la Router cnc, pasado este proceso se lija y se comienza a soldar (cada conexión se comprueba mediante un tester).

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.

Terminado el desarrollo de secado de la masilla se aplica la pintura Poliuretano (blanco) y sintética(negro), estas dos son de probadas por su acabado brillante.


Configuración Electrónica - Shield para arduino

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

Codigo Final



import processing.serial.*;

import cc.arduino.*;

Arduino arduino;
//llamo las librerías de arduino

//Arreglos verticales
Punto [] a;
Punto [] b;
Punto [] c;
Punto [] d;
Punto [] e;
Punto [] f;
Punto [] g;
Punto [] h;

int numAnalog; //valor al girar rueda o presionar tecla en pc, para alterar rotación de colores
float  ardmap;  //valor mapeado del análogo
float w;  //valor de la rueda para trasladar líneas

void setup() {
  size(500, 600);
  frameRate(100);


  // Modify this line, by changing the "0" to the index of the serial
  // port corresponding to your Arduino board (as it appears in the list
  // printed by the line above).
  arduino = new Arduino(this, Arduino.list()[0], 57600);   //config. de arduino


  //declaro las posiciones en x de los arreglos de puntos
  a = new Punto[height];
  for (int i = 0; i < a.length; i++)
    a[i] = new Punto(int(width*.08)+w, i);

  b = new Punto[height];
  for (int i = 0; i < b.length; i++) // p.lenght el largo del arreglo
    b[i] = new Punto(int(width*.3333)+w, i);

  c = new Punto [height];
  for (int i = 0; i < c.length; i++) 
    c[i] = new Punto(int(width*.45)+w, i);

  d = new Punto [height];
  for (int i=0; i < d.length; i++)
    d[i] = new Punto(int(width*.6)+w, i);

  e = new Punto [height];
  for (int i=0; i < e.length; i++)
    e[i] = new Punto(int(width*.63)+w, i);

  f = new Punto [height];
  for (int i = 0; i < f.length; i++) 
    f[i] = new Punto(int(width*.67)+w, i);

  g = new Punto [height];
  for (int i=0; i < g.length; i++)
    g[i] = new Punto(int(width*.73)+w, i);

  h = new Punto[height];
  for (int i = 0; i < h.length; i++) 
    h[i] = new Punto(int(width*.96)+w, i);
}


void draw() {
  background(255);
  //creo un switch que me permite variar entre x cantidad de estados del programa, en este caso, 9 o 10?
  switch(numAnalog) {

  case 0:  //en verdad caso 1
  default:
    noStroke();

    /*    fill(colors[3]); //blanco
     
     
     
     beginShape(); // e1 blanco
     
     vertex(d[int(height*.0)].x, 0) ;
     vertex(e[int(height*.0)].x, 0);
     vertex(e[int(height*.1)].x, int(height*.1));
     vertex(d[int(height*.1)].x, int(height*.1));
     endShape(CLOSE);
     
     
     beginShape(); // d6
     vertex(d[int(height*.96)].x, int(height*.96));
     vertex(e[int(height*.96)].x, int(height*.96));
     vertex(e[int(height*.99)].x, height);
     vertex(d[int(height*.99)].x, height);
     endShape(CLOSE);
     
     
     
     
     
     
     beginShape(); // i6
     
     vertex(h[int(height*.96)].x, int(height*.96)) ;
     vertex(width, int(height*.96));
     vertex(width, height);
     vertex(h[int(height*.99)].x, height);
     endShape(CLOSE);
     
     beginShape(); // f6
     vertex(e[int(height*.96)].x, int(height*.96));
     vertex(g[int(height*.96)].x, int(height*.96)); 
     vertex(g[int(height*.99)].x, height);
     vertex(e[int(height*.99)].x, height);
     endShape(CLOSE);
     
     
     beginShape(); // b3
     vertex(a[int(height*.28)].x, int(height*.43));
     vertex(a[int(height*.99)].x, int(height*.6));
     vertex(b[int(height*.6)].x, int(height*.6));
     vertex(b[int(height*.43)].x, int(height*.43));
     endShape(CLOSE);
     
     beginShape(); // d3 amarillo ok esquina falla
     vertex(c[int(height*.70)].x, int(height*.43));
     vertex(c[int(height*.99)].x, int(height*.6));
     vertex(d[int(width*0.5)].x, int(height*.6));
     vertex(d[int(width*.6)].x, int(height*.515));
     vertex(d[int(width*.6)].x, int(height*.43));
     endShape(CLOSE);
     
     beginShape(); // e3 amarillo ok
     
     vertex(d[int(width*.6)].x, int(height*.43));
     vertex(d[int(width*0.5)].x, int(height*.6));
     vertex(e[int(width*0.5)].x, int(height*.6));
     vertex(e[int(width*.6)].x, int(height*.515));
     vertex(e[int(width*.6)].x, int(height*.43));
     endShape(CLOSE);
     
     beginShape(); // f3 amarillo ok
     
     vertex(e[int(width*.6)].x, int(height*.43));
     vertex(e[int(width*0.5)].x, int(height*.6));
     vertex(f[int(width*0.5)].x, int(height*.6));
     vertex(f[int(width*.6)].x, int(height*.515));
     vertex(f[int(width*.6)].x, int(height*.43));
     endShape(CLOSE);
     
     beginShape(); // g3 amarillo ok
     
     vertex(f[int(width*.6)].x, int(height*.43));
     vertex(f[int(width*0.5)].x, int(height*.6));
     vertex(g[int(width*0.5)].x, int(height*.6));
     vertex(g[int(width*.6)].x, int(height*.515));
     vertex(g[int(width*.6)].x, int(height*.43));
     endShape(CLOSE);
     
     beginShape(); // h3 amarillo ok
     
     vertex(g[int(width*.6)].x, int(height*.43));
     vertex(g[int(width*0.5)].x, int(height*.6));
     vertex(h[int(width*0.5)].x, int(height*.6));
     vertex(h[int(width*.6)].x, int(height*.515));
     vertex(h[int(width*.6)].x, int(height*.43));
     endShape(CLOSE);
     
     
     beginShape(); // i3 amarillo ok
     
     vertex(h[int(width*.6)].x, int(height*.43));
     vertex(h[int(width*0.5)].x, int(height*.6));
     vertex(int(width), int(height*.6));
     vertex(int(width), int(height*.515));
     vertex(int(width), int(height*.43));
     endShape(CLOSE);
     
     beginShape(); // a3 amarillo
     
     vertex(0, int(height*.43));
     vertex(0, int(height*.6));
     vertex(a[int(height*.01)].x, int(height*.6));
     vertex(a[int(height*.15)].x, int(height*.515));
     vertex(a[int(height*.28)].x, int(height*.43));
     endShape(CLOSE);      
     
     
     
     
     */
    break;

  case 1:
    noStroke();
    fill(255, 0, 0);

    beginShape(); // a1
    vertex(0, 0);
    vertex(a[0].x, 0);
    vertex(a[int(height*.06)].x, int(height*.03333));
    vertex(a[int(height*.11)].x, int(height*.06666));
    vertex(a[int(height*.17)].x, int(height*.1));
    vertex(a[int(height*.34)].x, int(height*.20));
    vertex(0, int(height*.2));
    endShape();

    beginShape();//a3 rojo
    vertex(0, int(height*.55));
    vertex(0, height*.6);
    vertex(a[int(height*.99)].x, int(height*.6));
    vertex(a[int(height*.92)].x, int(height*.55));
    endShape();

    beginShape(); //h3 rojo
    vertex(g[int(height*.5)].x, height*.5);
    vertex(g[int(height*.55)].x, int(height*.55));
    vertex(h[int(height*.55)].x, int(height*.55));
    vertex(h[int(height*.5)].x, height*.5);
    endShape();

    fill(0, 0, 255);

    beginShape(); // c1 azul
    vertex(b[int(height*.0)].x, 0) ;
    vertex(c[int(height*.0)].x, 0);
    vertex(c[int(height*.06)].x, int(height*.03333));
    vertex(c[int(height*.11)].x, int(height*.06666));
    vertex(c[int(height*.17)].x, int(height*.1));
    vertex(b[int(height*.10)].x, int(height*.1)) ;
    vertex(b[int(height*.05)].x, int(height*.05)) ;
    endShape(CLOSE);

    beginShape(); // h6 azul 
    vertex(g[int(height*.96)].x, int(height*.96)); 
    vertex(g[int(height*.99)].x, int(height));
    vertex(width, height);
    vertex(width, int(height*.96));



    endShape(CLOSE);

    fill(255, 255, 0);
    beginShape(); // c3 amarillo
    vertex(b[int(height*.43)].x, int(height*.43));
    vertex(b[int(height*.6)].x, int(height*.6));
    vertex(c[int(height*.99)].x, int(height*.6));
    vertex(c[int(height*.875)].x, int(height*.515));
    vertex(c[int(height*.72)].x, int(height*.43));
    endShape(CLOSE);

    break;

  case 2:
    noStroke();
    fill(255, 0, 0);

    beginShape(); // b1
    vertex(a[0].x, 0) ;
    vertex(a[int(height*.34)].x, int(height*.20));
    vertex(b[int(height*.2)].x, int(height*.2));
    vertex(b[0].x, 0);
    endShape(CLOSE);

    beginShape(); //i3 
    vertex(h[int(height*.5)].x, height*.5);
    vertex(h[int(height*.55)].x, int(height*.55));
    vertex(width, height*.55);
    vertex(width, height*.5);
    endShape();

    beginShape(); // b3 rojo
    vertex(a[int(height*.92)].x, int(height*.55));
    vertex(a[int(height*.99)].x, int(height*.6));
    vertex(b[int(height*.6)].x, int(height*.6));
    vertex(b[int(height*.55)].x, int(height*.55));
    endShape(CLOSE);

    fill(255, 255, 0);
    beginShape(); // d3 amarillo ok esquina falla
    vertex(c[int(height*.70)].x, int(height*.43));
    vertex(c[int(height*.99)].x, int(height*.6));
    vertex(d[int(width*0.5)].x, int(height*.6));
    vertex(d[int(width*.6)].x, int(height*.515));
    vertex(d[int(width*.6)].x, int(height*.43));
    endShape(CLOSE);

    fill(0, 0, 255);

    beginShape(); // d1 blanco
    vertex(c[int(height*.0)].x, 0) ;
    vertex(d[int(height*.0)].x, 0);
    vertex(d[int(height*.1)].x, int(height*.1)) ;
    vertex(c[int(height*.17)].x, int(height*.1));
    vertex(c[int(height*.11)].x, int(height*.06666));
    endShape(CLOSE);

    beginShape(); //a6
    vertex(0, int(height*.96));
    vertex(0, int(height*.96));
    vertex(b[int(height*.96)].x, int(height*.96));
    vertex(b[int(height*.99)].x, int(height*.98));
    vertex(b[int(height*.97)].x, int(height*99));
    vertex(b[int(height*.99)].x, int(height));
    vertex(0, int(height)); 
    endShape(CLOSE);

    break;

  case 3:
    noStroke();
    fill (255, 0, 0);

    beginShape(); // c1 rojo
    vertex(b[0].x, 0);
    vertex(b[int(height*.2)].x, int(height*.2));
    vertex(c[int(height*.34)].x, int(height*.20));
    vertex(c[0].x, 0) ;
    endShape(CLOSE);

    beginShape();//c3 rojo
    vertex(b[int(height*.55)].x, int(height*.55));
    vertex(b[int(height*.6)].x, height*.6);
    vertex(c[int(height*.99)].x, int(height*.6));
    vertex(c[int(height*.92)].x, int(height*.55)); 
    endShape();

    beginShape(); //i3 
    vertex(0, height*.5);
    vertex(0, height*.55);
    vertex(a[int(height*.92)].x, int(height*.55));
    vertex(a[int(height*.85)].x, height*.5);
    endShape();

    fill(255, 255, 0);

    beginShape(); // e3 amarillo ok
    vertex(d[int(width*.6)].x, int(height*.43));
    vertex(d[int(width*0.5)].x, int(height*.6));
    vertex(e[int(width*0.5)].x, int(height*.6));
    vertex(e[int(width*.6)].x, int(height*.515));
    vertex(e[int(width*.6)].x, int(height*.43));
    endShape(CLOSE);

    fill(0, 0, 255);

    beginShape(); // e1 blanco
    vertex(d[int(height*.0)].x, 0) ;
    vertex(e[int(height*.0)].x, 0);
    vertex(e[int(height*.1)].x, int(height*.1));
    vertex(d[int(height*.1)].x, int(height*.1));
    endShape(CLOSE);

    beginShape(); // c6
    vertex(b[int(height*.96)].x, int(height*.96));
    vertex(b[int(height*.99)].x, height); 
    vertex(d[int(height*.99)].x, height);
    vertex(d[int(height*.96)].x, int(height*.96));
    endShape(CLOSE);
  }
  strokeWeight(6);
  stroke(0);
  noFill();

  beginShape(POINTS); //dibujo de líneas verticales

  for (int i = 0; i < a.length; i++) {
    a[i].calc();
    vertex(a[i].x, a[i].y*.6);
  }

  for (int i = 0; i < b.length; i++) {
    b[i].calc();
    vertex(b[i].x, b[i].y);
  }

  for (int i = 0; i < c.length; i++) {
    c[i].calc();
    vertex(c[i].x, c[i].y*.6);
  }

  for (int i = 0; i < d.length; i++) {
    d[i].calc();
    vertex(d[i].x, d[i].y);
  }

  for (int i = 0; i < e.length; i++) {
    e[i].calc();
    vertex(e[i].x, e[i].y);
  }

  for (int i = 0; i < f.length; i++) {
    f[i].calc();
    vertex(f[i].x, f[i].y*0.96);
  }

  for (int i = 0; i < g.length; i++) {
    g[i].calc();
    vertex(g[i].x, g[i].y);
  }

  for (int i = 0; i < h.length; i++) {
    h[i].calc();
    vertex(h[i].x, h[i].y);
  }
  endShape();
  //horizontales
  line(0, int(height*.1), h[int(height*.1)].x, height*.1);
  line(a[int(height*.72)].x, int(height*.43), h[int(height*.43)].x, int(height*.43));
  line(0, int(height*.6), width, int(height*.6));
  line(d[int(height*.8)].x, height*.8, width, height*.8);
  line(b[int(height*.96)].x, height*.96, width, height*.96);


  w = round( map(arduino.analogRead(2), 0, 1023, -100, 100));
  numAnalog = round (map(arduino.analogRead(3), 0, 1023, 0, 3));
}

float sv(float y) {   //función de curva
  float my = map(y, 0, height, 0, PI);
  ardmap = map(arduino.analogRead(0), 0, 1023, -width/2, width*1.5);
  return sin(my)*(ardmap - width/2)/8;
}



//numAnalog=(num Analog+1)%4;

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.