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

De Casiopea
 
(No se muestran 21 ediciones intermedias de 2 usuarios)
Línea 25: Línea 25:
====Curvatura del trazo====
====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.
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.


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.


<gallery>
<gallery>
Línea 38: Línea 38:
Archivo:Mondrian - curva005.png|Curva en sentido horizontal y vertical, ambas al +100%
Archivo:Mondrian - curva005.png|Curva en sentido horizontal y vertical, ambas al +100%
</gallery>
</gallery>


====Desplazamiento del color====
====Desplazamiento del color====
Línea 106: Línea 103:
====Transparencia y superposición====
====Transparencia y superposición====


Esta magnitud es una variación aplicada la traslacion 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.  
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).
La alteración de transparencia se aplica a a ambas transparencias (ejes X e Y).
Línea 121: Línea 118:
====Control - Segunda Revisión====
====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 pespectiva 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.
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.
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.


Línea 133: Línea 130:
====Control - Tercera Revisión====
====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.
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}}
{{#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 ====
====Configuración Electrónica - Shield para arduino ====
Línea 149: Línea 178:
====Proceso de código - Lenguaje computacional a gestualidad gráfica====
====Proceso de código - Lenguaje computacional a gestualidad gráfica====


Avance de código - Curvatura de líneas


{{hidden|Title text here|Body text line 1<br/>Body text line 2}}


<pre><nowiki>
//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
<div class="toccolours mw-collapsible mw-collapsed">
float my;   
<b>Codigo Final</b>
float posx;
<div class="mw-collapsible-content">
float posy; 
<pre>
float posx2;
<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() {
void setup() {
   size(500, 600);
   size(500, 600);
   noFill();
   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);
}
}


Línea 174: Línea 256:
void draw() {
void draw() {
   background(255);
   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);


  //lineas verticales
    beginShape(); // h6 azul
  curvabezierv (width*.08, height*.6);
    vertex(g[int(height*.96)].x, int(height*.96));  
  curvabezierv (width*.3333, height);
    vertex(g[int(height*.99)].x, int(height));
  curvabezierv (width*.45, height*.6);
    vertex(width, height);
  curvabezierv (width*.6, height);
    vertex(width, int(height*.96));
  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
    endShape(CLOSE);
    
 
  strokeWeight(width*.018);
    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);
   stroke(0);
  noFill();
  beginShape(POINTS); //dibujo de líneas verticales


   //  orden de valores de bezier  x1, y1, cx1, cy1, cx2, cy2, x2, y2
   for (int i = 0; i < a.length; i++) {
    a[i].calc();
    vertex(a[i].x, a[i].y*.6);
  }


   bezier(xpos, 0, mx, ypos*.3333, mx, ypos*.6666, xpos, ypos);
   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);
  }


   // dibujo los puntos de control con fines puramente didácticos
   for (int i = 0; i < d.length; i++) {
   stroke(#FC5B2E);
    d[i].calc();
   strokeWeight(5);
    vertex(d[i].x, d[i].y);
   point( mx, ypos*.3333);
  }
   point( mx, ypos*.6666);  //dibuja los puntos de control a 1/3 de la altura del bezier
 
   strokeWeight(.5);
   for (int i = 0; i < e.length; i++) {
   line(xpos, 0, mx, ypos*.3333);
    e[i].calc();
   line(xpos, ypos, mx, ypos*.6666);
    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);


void curvabezierh(float posx, float posy, float posx2) {


   my = constrain(mouseY, 0, posy);  
   w = round( map(arduino.analogRead(2), 0, 1023, -100, 100));
   strokeWeight(width*.018);
   numAnalog = round (map(arduino.analogRead(3), 0, 1023, 0, 3));
  stroke(0);
}


   // orden de valores de bezier  x1, y1, cx1, cy1, cx2, cy2, x2, y2
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;
}


  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
//numAnalog=(num Analog+1)%4;
  stroke(#FC5B2E);
</nowiki>
  strokeWeight(5);
</pre>
  point(posx+ (posx2-posx)*.3333, my);
</div>
  point(posx+ (posx2-posx)*.6666, my);  //dibuja los puntos de control a 1/3 de la altura del bezier
</div>
  strokeWeight(.5);
  line(posx, posy, posx+ (posx2-posx)*.3333, my);
  line(posx2, posy, posx+ (posx2-posx)*.6666, my);
} </nowiki></pre>


==Roles del Grupo ==
==Roles del Grupo ==
Línea 241: Línea 624:
*Miguel Angel Adofacci: Documentación en Wiki Casiopea, código de processing para generar curvas, configuración electrónica y Esquema en Fritzing
*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
*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, distribucion de funciones.
*Cristian Zamora Miranda: Diseño, Revisión y manufactura de prototipos, distribución de funciones, operación de fresado.

Revisión actual - 10:37 6 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

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.