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

De Casiopea
 
(No se muestran 8 ediciones intermedias de otro usuario)
Línea 28: Línea 28:
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>
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.
Ambas magnitudes o variables son manipulables a la vez, logrando el juego de variables entre ambos.


<gallery>
<gallery>
Línea 134: Línea 136:


====Procesos constructivos ====
====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 =====
=====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>
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, su terminación debe ser suave al tacto y en vista sin quebraduras.  
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 155: Línea 182:


<div class="toccolours mw-collapsible mw-collapsed">
<div class="toccolours mw-collapsible mw-collapsed">
<b>Avance de código - Curvatura de líneas</b>
<b>Codigo Final</b>
<div class="mw-collapsible-content">
<div class="mw-collapsible-content">
<pre>
<pre>
<nowiki>
<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
import processing.serial.*;
float my;  
 
float posx;  
import cc.arduino.*;
float posy;
 
float posx2;  
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 179: 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();


  //lineas verticales
    beginShape();//a3 rojo
  curvabezierv (width*.08, height*.6);
    vertex(0, int(height*.55));
  curvabezierv (width*.3333, height);
    vertex(0, height*.6);
  curvabezierv (width*.45, height*.6);
    vertex(a[int(height*.99)].x, int(height*.6));
  curvabezierv (width*.6, height);
    vertex(a[int(height*.92)].x, int(height*.55));
  curvabezierv (width*.63, height);
    endShape();
  curvabezierv (width*.67, height*.96);
  curvabezierv (width*.73, height);
  curvabezierv (width*.96, height*.6);


  //lineas horizontales
    beginShape(); //h3 rojo
  curvabezierh (0, height*.1, width*.97);
    vertex(g[int(height*.5)].x, height*.5);
  curvabezierh (width*.08, height*.43, width*.96);
    vertex(g[int(height*.55)].x, int(height*.55));
   curvabezierh (0, height*.6, width);
    vertex(h[int(height*.55)].x, int(height*.55));
  curvabezierh (width*.6, height*.8, width);
    vertex(h[int(height*.5)].x, height*.5);
  curvabezierh (width*.3333, height*.96, width);
    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);


//función específica para líneas verticales
    beginShape(); // c1 rojo
void curvabezierv(float xpos, float ypos) {
    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);


  mx = constrain(mouseX, 0, xpos); // mx = constrain(mouseX - xpos, 0, xpos); tope de xpos para ordenar momentaneamente el dibujo
    beginShape();//c3 rojo
 
    vertex(b[int(height*.55)].x, int(height*.55));
  strokeWeight(width*.018);
    vertex(b[int(height*.6)].x, height*.6);
  stroke(0);
    vertex(c[int(height*.99)].x, int(height*.6));
    vertex(c[int(height*.92)].x, int(height*.55));  
    endShape();


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


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


  // dibujo los puntos de control con fines puramente didácticos
    fill(0, 0, 255);
  stroke(#FC5B2E);
  strokeWeight(5);
  point( mx, ypos*.3333);
  point( mx, ypos*.6666);  //dibuja los puntos de control a 1/3 de la altura del bezier
  strokeWeight(.5);
  line(xpos, 0, mx, ypos*.3333);
  line(xpos, ypos, mx, ypos*.6666);
}


void curvabezierh(float posx, float posy, float posx2) {
    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);


  my = constrain(mouseY, 0, posy);  
    beginShape(); // c6
   strokeWeight(width*.018);
    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
  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);
  }


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


   bezier(posx, posy, posx+ (posx2-posx)*.3333, my, posx+ (posx2-posx)*.6666, my, posx2, posy);
   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);
  }


   // dibujo los puntos de control con fines puramente didácticos
   for (int i = 0; i < g.length; i++) {
  stroke(#FC5B2E);
    g[i].calc();
  strokeWeight(5);
    vertex(g[i].x, g[i].y);
  point(posx+ (posx2-posx)*.3333, my);
   }
  point(posx+ (posx2-posx)*.6666, my);   //dibuja los puntos de control a 1/3 de la altura del bezier
  strokeWeight(.5);
  line(posx, posy, posx+ (posx2-posx)*.3333, my);
   line(posx2, posy, posx+ (posx2-posx)*.6666, my);
}  


</nowiki>
  for (int i = 0; i < h.length; i++) {
</pre>
    h[i].calc();
</div>
    vertex(h[i].x, h[i].y);
</div>
  }
  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);


<div class="toccolours mw-collapsible mw-collapsed">
<b>Avance de código - Traslación de color</b>
<div class="mw-collapsible-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in sem viverra magna pellentesque euismod. Integer rhoncus, ante ac imperdiet elementum, est enim vulputate nulla, id rutrum diam nunc vel metus. Mauris ut egestas purus. Curabitur sed mauris blandit, tempus turpis et, congue libero. Sed facilisis nisl eget odio tempor, a volutpat nibh volutpat. Vivamus tristique ipsum leo, quis convallis diam laoreet nec. Sed eget velit fringilla, sollicitudin velit suscipit, tincidunt arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi vel dui mauris. Vestibulum cursus mauris et laoreet malesuada. Donec consectetur ante non nulla viverra tempus.


Pellentesque id dictum ex. Sed ullamcorper sapien id mauris lobortis ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare vitae massa nec cursus. Nam eget sapien ligula. Aliquam erat volutpat. Nam eleifend dictum pharetra. Sed lectus mi, suscipit egestas lacus in, ultricies sagittis augue. Donec pulvinar ante metus, in varius quam porttitor ac. Nunc consequat tempus libero pharetra sollicitudin. Maecenas in porttitor erat. Integer facilisis purus enim, eu ultricies sem placerat non. Sed eros massa, faucibus ac purus vel, laoreet lacinia mi. Praesent tincidunt, erat a rutrum scelerisque, lacus sem molestie lacus, at laoreet est mauris luctus nibh. Curabitur suscipit sagittis orci, et accumsan lacus dictum rutrum. Nam orci turpis, accumsan quis justo et, ullamcorper efficitur purus.
  w = round( map(arduino.analogRead(2), 0, 1023, -100, 100));
  numAnalog = round (map(arduino.analogRead(3), 0, 1023, 0, 3));
}


Aenean pharetra nisl ut lectus viverra vehicula. Fusce ante leo, fringilla egestas ligula sed, lacinia consectetur dui. In eleifend sagittis sapien, sit amet suscipit felis imperdiet eu. Cras id semper augue, id venenatis urna. Mauris dignissim, neque nec blandit scelerisque, eros ante dapibus mauris, in pretium nulla purus at leo. Duis et ante eu tellus viverra placerat. Mauris non tincidunt erat. Sed egestas efficitur molestie. Duis tincidunt venenatis sem nec consequat. Proin sagittis tellus velit, pretium dapibus nisl tincidunt ut. Etiam vitae fermentum felis.
float sv(float y) {  //función de curva
</div>
  float my = map(y, 0, height, 0, PI);
</div>
  ardmap = map(arduino.analogRead(0), 0, 1023, -width/2, width*1.5);
  return sin(my)*(ardmap - width/2)/8;
}


<div class="toccolours mw-collapsible mw-collapsed">
<b>Avance de código - Transparencia de color</b>
<div class="mw-collapsible-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in sem viverra magna pellentesque euismod. Integer rhoncus, ante ac imperdiet elementum, est enim vulputate nulla, id rutrum diam nunc vel metus. Mauris ut egestas purus. Curabitur sed mauris blandit, tempus turpis et, congue libero. Sed facilisis nisl eget odio tempor, a volutpat nibh volutpat. Vivamus tristique ipsum leo, quis convallis diam laoreet nec. Sed eget velit fringilla, sollicitudin velit suscipit, tincidunt arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi vel dui mauris. Vestibulum cursus mauris et laoreet malesuada. Donec consectetur ante non nulla viverra tempus.


Pellentesque id dictum ex. Sed ullamcorper sapien id mauris lobortis ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare vitae massa nec cursus. Nam eget sapien ligula. Aliquam erat volutpat. Nam eleifend dictum pharetra. Sed lectus mi, suscipit egestas lacus in, ultricies sagittis augue. Donec pulvinar ante metus, in varius quam porttitor ac. Nunc consequat tempus libero pharetra sollicitudin. Maecenas in porttitor erat. Integer facilisis purus enim, eu ultricies sem placerat non. Sed eros massa, faucibus ac purus vel, laoreet lacinia mi. Praesent tincidunt, erat a rutrum scelerisque, lacus sem molestie lacus, at laoreet est mauris luctus nibh. Curabitur suscipit sagittis orci, et accumsan lacus dictum rutrum. Nam orci turpis, accumsan quis justo et, ullamcorper efficitur purus.


Aenean pharetra nisl ut lectus viverra vehicula. Fusce ante leo, fringilla egestas ligula sed, lacinia consectetur dui. In eleifend sagittis sapien, sit amet suscipit felis imperdiet eu. Cras id semper augue, id venenatis urna. Mauris dignissim, neque nec blandit scelerisque, eros ante dapibus mauris, in pretium nulla purus at leo. Duis et ante eu tellus viverra placerat. Mauris non tincidunt erat. Sed egestas efficitur molestie. Duis tincidunt venenatis sem nec consequat. Proin sagittis tellus velit, pretium dapibus nisl tincidunt ut. Etiam vitae fermentum felis.
//numAnalog=(num Analog+1)%4;
</nowiki>
</pre>
</div>
</div>
</div>
</div>

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.