Ver el código de «Grupo A - Encargo 01 - Interfaz Mondrian»

{{Proyecto
|Título=Grupo A - Encargo 01 - Interfaz Mondrian
|Tipo de Proyecto=Proyecto de Taller
|Palabras Clave=encargo 1,
|Año de Inicio=2016
|Carreras Relacionadas=Diseño, Diseño Gráfico, Diseño Industrial
|Asignaturas Relacionadas=Taller de Diseño de Interacción,
|Cursos Relacionados=Taller de Diseño de Interacción 2016,
|Profesor=Herbert Spencer, Pedro Garretón,
|Alumnos=Miguel Angel Adofacci, Monserrat Lucia Pacheco Sandoval, Cristián Zamora,
}}


==Encargo 1: Control de Variables==

===Primera Revisión: Composition in Red, Blue and Yellow===

[[Archivo:Composition in red blue and yellow - mondrian001.jpg|thumb|200px]]
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.<br>
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).<br>
Ambas magnitudes o variables son manipulables a la vez, logrando el juego de variables entre ambos.



<gallery>
Archivo:Mondrian - curva001.png|Curva en sentido horizontal, +100%
Archivo:Mondrian - curva002.png|Curva en sentido horizontal, -100%
Archivo:Mondrian - curva003.png|Curva en sentido vertical, +100%
Archivo:Mondrian - curva004.png|Curva en sentido vertical, -100%
Archivo:Mondrian - curva005.png|Curva en sentido horizontal y vertical, ambas al +100%
</gallery>

====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:
<gallery>
Archivo:Mondrian - desp002.png
Archivo:Mondrian - desp003.png
Archivo:Mondrian - desp004.png
Archivo:Mondrian - desp005.png
Archivo:Mondrian - desp006.png
Archivo:Mondrian - desp007.png
Archivo:Mondrian - desp008.png
Archivo:Mondrian - desp009.png
</gallery>




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


<gallery>
Archivo: Control Mondrian - Grupo A - 005.jpg
Archivo: Control Mondrian - Grupo A - 004.jpg
Archivo: Control Mondrian - Grupo A - 008.jpg
Archivo: Control Mondrian - Grupo A - 007.jpg
Archivo: Control Mondrian - Grupo A - 006.jpg

Archivo: Control Mondrian - Grupo A - 009.jpg

</gallery>




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

<gallery class="pull-right">
Archivo:Control Mondrian - Grupo A - 001.jpg
Archivo:Control Mondrian - Grupo A - 002.jpg
Archivo:Control Mondrian - Grupo A - 003.jpg
</gallery>


{{#widget:Sketchfab|id=5d87cd8615f843f5bae650e6fd50317e}}

===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).
<gallery>
Archivo:Mondrian - trans001.png
Archivo:Mondrian - trans002.png
Archivo:Mondrian - trans003.png
Archivo:Mondrian - trans004.png
</gallery>




====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.<br>
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.

[[Archivo:Control mondrian grupo A - ver2 - 001.png|thumb|300px]]

{{#widget:Sketchfab|id=efc3381f57d840e0ada2283911524962}}




====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.<br>
Se integra la placa - shield como parte del chasis del control.

{{#widget:Sketchfab|id=f6a7c5b911a1437788ee97e0a57778e1}}

====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).

<gallery>
Archivo:Tester1mpch.jpg|Shield testeado
Archivo:Tester2mpch.jpg|
</gallery>

=====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.<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,<br>su terminación debe ser suave al tacto y en vista sin quebraduras.

<gallery>
Archivo:Masilla5mpch.jpg|Pieza con pequela cantidad de masilla
Archivo:Masilla6mpch.jpg|Proceso de aplicación
Archivo:Masilla1mpch.jpg|Pieza completamente enmasillada
Archivo:Masilla2mpch.jpg|Secado 
Archivo:Masilla4mpch.jpg|Lijado al agua
Archivo:Masilla3mpch.jpg|Seca lista para la pintura

</gallery>

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.


<gallery>
Archivo:Pintura1mpch.jpeg|Partes del objeto pintadas secándose.
</gallery>

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

<gallery>
Archivo: Esquema Protoboard - Shield + Arduino - Grupo A.jpg|Configuración interna en Protoboard, realizada en software Fritzing
Archivo: Shield Arduino - Control Mondrian Grupo A.png|Diseño de placa Shield para Arduino
</gallery>

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




<div class="toccolours mw-collapsible mw-collapsed">
<b>Codigo Final</b>
 <div class="mw-collapsible-content">
<pre>
<nowiki>

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;
</nowiki>
</pre>
</div>
</div>

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