Interfaz de Piet Mondrian GRUPO C

Archivo:Tableau-i-1921.jpeg

Interfaz de Piet Mondrian GRUPO C

Título	Interfaz de Piet Mondrian GRUPO C
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	piet mondrian, mondrian, interfaz, encargo 1
Período	2016-
Asignatura	Taller de Diseño de Interacción,
Del Curso	Taller de Diseño de Interacción 2016,
Alumno(s)	Barbara Madariaga, Camila Jeria, Maria Jesus Oliva Palma, Javiera Martínez
Profesor	Herbert Spencer, Pedro Garretón

Encargo

Se busca crear un control de una obra de arte de Piet Mondrian a través de 3 a 6 dimensiones. Estas dimensiones fueron escogidas según algunos rasgos de la obra. Se da un enfoque en la propuesta de la interfaz de este control, y el juego con la obra y la viabilidad que tiene para pasarlo a un software.

Primera Entrega

Piet Mondrian

Pintor vanguardista neerlandés nació 7 de marzo de 1872, miembro de De Stijl y fundador del neoclasicismo. El arte de Mondrian siempre estaba íntimamente relacionado a sus estudios espirituales y filosóficos. Dedicándose a la abstracción geométrica, con el fin de encontrar la estructura básica del universo, la supuesta “retícula cósmica” que él intenta representar con el no-color blanco atravesado por una trama de líneas de no-color negro; y en tal trama planos geométricos de colores primarios, considerados por Mondrian como los colores elementales del universo. De este modo, repudiando las características sensoriales de la textura y la superficie, eliminando las curvas, y en general todo lo formal. Expresó que el arte no debe ser figurativo, no debe implicarse en la reproducción de objetos aparentemente reales, sino que el arte debe ser una especie de indagación de lo absoluto subyacente tras toda la realidad fenoménica.

Exploración de la Obra

Abstracción de "La Tableau Nº1, 1921"

En primera instancia se observa el cuadro como una pintura de abstracción geométrica que se simplifica a una elevación de horizontes y verticales, formas figurativas declaradas por los colores primarios, pareciendo que las figuras compuestas roturan en el plano del cuadro además, se dispersan de manera asimétrica, mostrando una especie de eclosión mientras se descomponen los pigmentos para retomar el color. Es por ello que los cambios observados los nombramos pigmentación, eclosión y rotación.

Abstracción de la Forma

Estudio de Movimientos ante los Conceptos

Se comienza por buscar movimientos que atrapan los conceptos y que sea una interfaz de fácil lectura para el usuario y logre tener integrado los tres movimientos en un sólo cuerpo, es por ello que en conjunto se estudian juguetes de niños que tengan un movimiento similar.

Archivo:1 jbc.jpeg

1 ZOOTROPO Objeto que logra rotar en un mismo eje y hace parecer que las figuras dibujadas en el se mueven.

2 CUBO RUBIK Juguete de lógica que hace rotar los colores hasta completar un cuadrado del mismo color.

3 CAJA SORPRESA Juguete que a través de un resorte y dar cuerda manualmente libera un juguete.

Integración de los Conceptos a la Forma

Se piensa en una forma simple que cumpla con integrar ante movimientos los conceptos abstraídos del cuadro.

(1) Primeramente se piensa en un cubo que permita que las piezas "salgan de él" a medida que cambie la eclosión.

( 2) Tubos que rota al ser manejado por dos maillas fijas que lo hacen girar en movimientos contrarios al cual también le sobresalen piezas y se le agrega un sistema de luz.

(3)

Tubo que desplaza sus partes, pensando en plástico para la muestra de pigmentación de color a través de luces.

Forma Final

La forma final se compone de dos cubos que se unen mediante un tubo el cual hace que estos tubos roten de manera libre. Cada cubo tiene la característica de eclosionarse individualmente esto a través de perillas que se encuentran en una de sus caras. El tubo central llevará una conexión eléctrica interna la cual a través de luces LED cambiarán la pigmentación de los tubos los cuales llevan parte de la abstracción gráfica con mica de colores permitiendo de esta manera que la luz salga bajando y subiendo la intensidad de colores.

Funcionamiento del juego

Particularidades

Para que las tres dimensiones del juego se vean reflejadas en el objeto, es necesario crear un sistema de mecanismos para cada una (rotación-eclosión-pigmentación).

Para la rotación, se utiliza un tubo central que une a los dos movimientos contrarios y asi, un cambio visual al alternar las caras asimétricas de la obra plasmada en los cubos. En las caras laterales del juego, se adosan 2 semicirculos (uno a cada lado), para facilitar el agarre de la mano al giro.

GESTO LIGADO A LA FUNCIÓN

En las mismas manillas semicircunferencias, se insertan tres perillas por lado que van enganchadas a distintos alambres. Estos alambres tienen un circuito que pasa por las paredes internas de los cubos y afirman ciertas piezas para luego ser desplazados y lograr la ECLOSIÓN. En este objeto, la vista planta pasa a ser la misma que la vista frontal, ya que son cubos iguales que están en constante cambio. Las únicas variables son las lineas asimétricas del cuadro.

Detalles del tubo central

ROTACIÓN / LUMINOSIDAD Además de actuar como centro de giro, el tubo central contiene en su interior un circuito de luces LED (blanca,amarilla,roja y azul) que pueden ser encendida individual o aleatoriamente, iluminando así,a los fragmentos del cubo echo de mica. Cuando los colores primarios del cuadro de Piet Mondrian, son iluminados por luces de los mismos colores, pueden lograr visualizar tonalidades semejantes a los colores secundarios.

Corrección

Error en el entendimiento del encargo, ya que no desarrollamos una abstracción de la imagen pictórica propiamente tal, pues las dimensiones las llevamos al objeto y este paso de ser un control a la obra misma.

Segunda Entrega

Dimensiones

Engranaje del Color

Se observan los planos geométricos de colores y se toman como el conjunto de franjas verticales que al estar juntas se logra ver el lleno de color. Con esto se establece un juego con su desencaje, haciendo una rotación de franjas, la cual superpone áreas rojas con amarillas, amarillas con azules y azules con rojas; trayendo presencia así nuevos colores.

• Engranajejbc.jpeg
• Engranajedosjbc.jpeg
• Engranajetresjbc.jpeg
• Engranaje4jbc.jpeg

Combinación de Fracciones

Se toma como rasgo la asimetría del cuadro y los ejes horizontales que presenta, la manera en que se juega con esto es dividiendo la imagen en cuatros franjas horizontales iguales, y que estas se desplacen de manera vertical, a través de esto logramos crear 24 combinaciones distintas, es decir 24 nuevas imágenes.

• Fraccionjbc.jpeg
• Fraccion2jbc.jpeg
• Fracción3jbc.jpeg
• Fracccionjbc4.jpeg

Desfase del Color

Se busca rescatar la manera en que se dan los límites del cuadro, estos no se dan en los contornos externos de la formas, por lo que da la impresión de un "sin fin". Por ello se plantea un desplazamiento del color hacia el exterior, llegando a una imagen del cuadro construida sólo con las líneas al centro.

Maqueta

Se plantea la forma ante los conceptos abstraídos desde el cuadro de Piet Mondrian de una manera metafórica y lúdica de ellos, ocupando los sensores correspondientes.

Corrección

A pesar de haber mejorado en la abstracción de la gráfica, esta se deberá seguir trabajando ya que se pensó de una forma más plástica y no en la realidad de tener que traspasar estas coordenadas a un software, por ello se tendrá que ver la manera de que todas estas dimensiones hablen en un mismo lenguaje o mas bien que estén en una misma ley.

Tercera Entrega

Se corrigen las dimensiones, repensando la manera en que estas operan para que así puedan ser compatibles entre sí al momento de hacer la programación en processing.

Para ello se replanteó el concepto de rotación, esta vez sólo gira en un eje (eje y) y mostrando las caras del cuadro solo verticalmente, lo que produce cuatro variaciones del cuadro. Se piensa adaptar coordenadas a processing con la función box, para conseguir los vértices y armar planos rectangulares que al aplicar "box" se convierten en cajas flotantes, pero frontalmente conformarán el cuadro.

Proyección Dimensiones

Rotación

• 1-3.jbc.jpeg

  Frente

• 2-3.jbc.jpeg

  Parte Trasera

• 3-3.jbc.jpeg

  Parte Posterior

• 4-3.jbc.jpeg

  Parte Superior

• 5-3.jbccinco.jpeg

  Vista Axonometrica 1

• 6-3.jbc.jpeg

  Vista Axonometrica 2

Intensidad de Color

1 Cuadro original y gama de intensidades; 2 Cambio intensidad franjas móviles; 3 Cambio de intensidad franjas fijas

Compatibilidad de las Dimensiones

• 8-3.jbc.jpeg

  Cambio de intensidad franjas móviles + engranaje del color

• 9-3.jbc.jpeg

  Cambio de intensidad franjas móviles + engranaje del color

• 10-3.jbc.jpeg

  Cambio de intensidad franjas fijas + engranaje del color

• 11-3.jbc.jpeg

  Cambio de intensidad franjas fijas + engranaje del color

• 12-3.jbc.jpeg

  Rotación + cambio de intensidad + engranaje del color

Control

Planos

Vista Planta y Axonométrica

Movimiento del Control

Simulación de material

• Captura de pantalla 2016-03-13 a las 13.49.26.png
• Captura de pantalla 2016-03-13 a las 13.49.44.png
• Captura de pantalla 2016-03-13 a las 13.49.58.png
• Captura de pantalla 2016-03-13 a las 13.50.20.png

Cuarta Entrega

Se decide cortar las aristas del cubo para tener un mejor manejo de los cubos con las manos, ya que de esta manera es mucho más comodo para la mano alcanzar los sensores introducidos en las caras del cubo.

Planimetría

Archivo:Subir cubo1.png Cubo A y Cubo B unidos.

Archivo:Subir cubo3.png Cubo A

Archivo:Subir cubo2.png Cubo B

Materialidad y contenido en los cubos

Rotación de los cubos unidos

• Subir cubo4.png

  Cara A

• Subir cubo5.png

  Cara B

• Subir cubo6.png

  Cara C

• Subir cubo7.png

  Cara D

Fotografias cuarta maqueta

Maqueta materializada en piezas de acrílico impresas en laser cut y piezas internas impresas en 3D

• Camilauno.jpg

  Cara A

• Barbarauno.jpg

  Cara B

• Barbara dos.jpg

  Cara C

• Barabracuatro.jpg

  Cara D

• Bárbara cinco.jpg

  Rotación en y del cliker analogo

• Bárbaraseis.jpg

  Rotacion en X del cliker analogo

Quinta Entrega

Registro del gesto en su recorrido

Ma Jesús O.

• Faltan láminas por escanear

Dimensiones pictóricas

La obra pictórica se entiende como un cuerpo volumétrico, donde cada elemento (líneas y rectángulos) se prolongan en el eje z. Cada lleno de color se compone de franjas de 2 mm. de espesor que van una al lado de otra hasta lograr la totalidad de la figura de color.

Rotación en eje y

Cada cara del eje "y" del cuerpo volumétrico tiene la medida del cuadro original, por lo que el giro en este eje va cambiando las vistas de sus prolongaciones en "z".

• 1111maxminjmjmjm.png

  Cara uno cubo / Valor: 0

• 2222maxminjmjm.png

  Cara dos cubo / Valor: 90

• 33333maxminjmjm.png

  Cara tres cubo / Valor: 180

• 44444maxminjmjm.png

  Cara cuatro cubo / Valor: 270

Engranaje del color

Esta dimensión se relaciona con las franjas anteriormente mencionadas, donde cada una de éstas intercaladamente se desplazan 6 cm. en el eje "y" aleatoriamente desde su origen hasta el límite. Una vez finalizado el desplazamiento éstas vuelven a su posición inicial, proyectando una imagen de engrane y desengrane.

• Engrane1jmjm.jpeg

  / Valor: 100

• Engrane2jmjm.jpeg

  / Valor: -100

Intensidad del color

Al igual que el engranaje, esta dimensión trabaja mediante las franjas de color, las cuales aleatoriamente van cambiando en un rango de cuatro tonalidades.

• Color1JMJM.jpeg

  / Valor: 100

• Color2jmjm.jpeg

  / Valor: -100

Configuración electrónica

Fritzing

Simulación de conexiones entre el Arduíno, la Protoboard y los potenciómetros en Fritzing

Prueba de conexiones

Conexiones entre el Arduíno, Protoboard y potenciometros

Frezado placa de cobre dibujo illustrator

Trazados de las conexiones entre el Arduino, el Shield y los potenciómetros

Frezado placa de cobre final

Trazados de las conexiones entre el Arduino, el Shield y los potenciómetros

Sexta Entrega

Circuito Placa y Arduino

• Arduinoje.jpg
• Arduino2je.jpg
• Arduino3je.jpg

Integración del Rodamiento

Archivo:Cuboje.jpg

Archivo:Cuboje2.jpg

Archivo:Rodamientojeria.jpg

Gráfica

Cubo A

• Cuboclicker1jesu.jpg

  Cara 1

• Clicker2jesu.jpg

  Cara 2

• Clicker3jesu.jpg

  Cara 3

• Clicker4jesu.jpg

  Cara 4

Archivo:Clicker5jesu.jpg

Archivo:Clicker6jesu.jpg

Cubo B

Vista del cubo, superposición de la gráfica

Archivo:Escanear 15.jpg

Archivo:Escanear 16.jpg

• Escanear 19.jpg

  Cara 2

• Escanear 18.jpg

  Cara 3

• Escanear 17.jpg

  Cara 4

Archivo:Otrocubojesu.jpg

Archivo:Otrocubojesu1.jpg

Séptima Entrega

Control de rotación interactiva

Tomando como base la imagen pictórica de Piet Mondrian, La Tableau 1, 1921, se realiza un control para dominar ciertas dimensiones dentro de la obra. Estas se definen como Rotación en Y, Engranaje del color e Intensidad del color, con lo que se busca llegar a una interacción gestual/virtual, logrando controlar la imagen pictórica mediante las manos. Para el juego, la obra pasa de ser un plano a un volumen 3D. A partir de la comprensión de la obra como un volumen, se piensa la forma del control de una manera coherente a esto; es por ello que el objeto se compone de dos cubos que relacionan la gestualidad de las manos con la imagen virtual, otorgando la sensación al cuerpo de estar palpando el cuadro.

Archivo:Nuevo doc 61 2jmjmjm.jpg

Juego

La interacción gestual/virtual, consiste en encontrar la composición original de la obra, ya que la primera imagen que se muestra al comenzar el juego, está espejada en el eje X. En el paso de esta descomposición a la composición, se van creando distintas visualizaciones que guardan una riqueza plástica al interrelacionarse las tres dimensiones, lo que va causando una satisfacción en el usuario.

Archivo:Nuevo doc 61 3jmjmjm.jpg

Interacción con el control

https://vimeo.com/163434010

Codificación de la interacción / Lenguaje gráfico

Extensión del código de interacción

import processing.serial.*;
import cc.arduino.*;
Arduino arduino;




void setup() {
  size(1000, 700, P3D); 
  arduino = new Arduino(this, "COM10", 57600);
  rotx = 0;
}


void draw() {
  if (mousePressed) {
  }


  //Primero declaro todos los ángulos de rotacion en el centro de la pantalla (0,0)
  //float rotx = (mouseY/420.0)*2*PI-PI; // con solo "y" se obtiene el movimiento
  background(255);
  ortho(); 
  update();


  //Caja externa
  
  //ubicación del centro del dibujo, mitad del size en x,y
  //este sera mi punto 0,0 en las coordenadas del box
  translate(500, 400); 


  rotateX(rotx);  
  strokeWeight(2);

  noStroke();
  noFill();
  box(377, 548, 548); // marco de la caja, cambia el tamaño 

  
  //al color de cada box, se le agrega el valor alfa con variables de opacidad.
  //translate = (0, ancho, alto); 
  
  //Color amarillo
  //este color se compone de 10 box de 2mm de espesor
  noStroke();
  fill(#FFD500, alfa);
 
  pushMatrix();
  translate(-185.5, -170+h, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *6);
  popMatrix();

  pushMatrix();
  translate(-178, -170, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *11);
  popMatrix();

  pushMatrix();
  translate(-170.5, -170+h*2, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *12);
  popMatrix();

  pushMatrix();
  translate(-163, -170, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *8);
  popMatrix();

  pushMatrix();
  translate(-155.5, -170+h*3, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *4);
  popMatrix();

  pushMatrix();
  translate(-148, -170, 0); 
  box(7.5, 207, 548);
  fill(#FFD500, alfa *5);
  popMatrix();

  pushMatrix();
  translate(-140.5, -170+h*4, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *7);
  popMatrix();

  pushMatrix();
  translate(-133, -170, 0); 
  box(7.5, 207, 548);
  fill(#FFD500, alfa *3);
  popMatrix();

  pushMatrix();
  translate(-125.5, -170+h*5, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *9);
  popMatrix();

  pushMatrix();
  translate(-118, -170, 0); 
  box(7.5, 207, 548); 
  fill(#FFD500, alfa *10);
  popMatrix();

  //color azul

  noStroke();
  fill(#211FD8, alfa);
  
  pushMatrix();
  translate(184.75, -208+h, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *5);
  popMatrix();

  pushMatrix();
  translate(177.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *4);
  popMatrix();

  pushMatrix();
  translate(169.75, -208+h*2, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *15);
  popMatrix();

  pushMatrix();
  translate(162.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *10);
  popMatrix();

  pushMatrix();
  translate(154.75, -208+h*3, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *8);
  popMatrix();

  pushMatrix();
  translate(147.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *3);
  popMatrix();

  pushMatrix();
  translate(139.75, -208+h*4, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *6);
  popMatrix();

  pushMatrix();
  translate(132.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *12);
  popMatrix();

  pushMatrix();
  translate(124.75, -208+h*5, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *11);
  popMatrix();

  pushMatrix();
  translate(117.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *7);
  popMatrix();

  pushMatrix();
  translate(109.75, -208+h*6, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *9);
  popMatrix();

  pushMatrix();
  translate(102.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *14);
  popMatrix();

  pushMatrix();
  translate(94.75, -208+h*7, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *13);
  popMatrix();

  pushMatrix();
  translate(87.25, -208, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *16);
  popMatrix();

  pushMatrix();
  translate(79.75, -208+h*8, 0);
  box(7.5, 132, 548);
  fill(#211FD8, alfa *17);
  popMatrix();

  //color rojo

  noStroke();
  fill(#FF0015, alfa);
  
  pushMatrix();
  translate(184.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *29);
  popMatrix();

  pushMatrix();
  translate(177.25, 180-h, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *3);
  popMatrix();

  pushMatrix();
  translate(169.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *6);
  popMatrix();

  pushMatrix();
  translate(162.25, 180-h*2, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *10);
  popMatrix();

  pushMatrix();
  translate(154.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *20);
  popMatrix();

  pushMatrix();
  translate(147.25, 180-h*3, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *24);
  popMatrix();

  pushMatrix();
  translate(139.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *15);
  popMatrix();

  pushMatrix();
  translate(132.25, 180-h*4, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *31);
  popMatrix();

  pushMatrix();
  translate(124.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *32);
  popMatrix();

  pushMatrix();
  translate(117.25, 180-h*5, 0);
  box(7.5, 188, 548);
  fill(#FF0015,alfa *27);
  popMatrix();

  pushMatrix();
  translate(109.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *19);
  popMatrix();

  pushMatrix();
  translate(102.25, 180-h*6, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *8 );
  popMatrix();

  pushMatrix();
  translate(94.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *7);
  popMatrix();

  pushMatrix();
  translate(87.25, 180-h*7, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *22);
  popMatrix();

  pushMatrix();
  translate(79.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *23);
  popMatrix();

  pushMatrix();
  translate(72.25, 180-h*8, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *25);
  popMatrix();

  pushMatrix();
  translate(64.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *4);
  popMatrix();

  pushMatrix();
  translate(57.25, 180-h*9, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *30);
  popMatrix();

  pushMatrix();
  translate(49.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *17);
  popMatrix();

  pushMatrix();
  translate(42.25, 180-h*10, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *28);
  popMatrix();

  pushMatrix();
  translate(34.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *11);
  popMatrix();

  pushMatrix();
  translate(27.25, 180-h*11, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *5);
  popMatrix();

  pushMatrix();
  translate(19.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *13);
  popMatrix();

  pushMatrix();
  translate(12.25, 180-h*12, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *14);
  popMatrix();

  pushMatrix();
  translate(4.75, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *18);
  popMatrix();

  pushMatrix();
  translate(-2.75, 180-h*13, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *16);
  popMatrix();

  pushMatrix();
  translate(-10.25, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *9);
  popMatrix();

  pushMatrix();
  translate(-17.75, 180-h*14, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *26);
  popMatrix();

  pushMatrix();
  translate(-25.3, 180, 0);
  box(7.5, 188, 548);
  fill(#FF0015, alfa *12);
  popMatrix();

  //color negro 1

  noStroke();
  fill(#000000);
 
  pushMatrix();
  translate(-112.9, 244, 0);
  box(152.1, 60, 37);
  popMatrix();

  //color negro 2 chico

  noStroke();
  fill(#000000);
 
  pushMatrix();
  translate(-151.4, -48, 0);
  box(75, 37, 95);
  popMatrix();

  //linea vertical 1

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(-110.9, -152, 0);
  box(7.5, 245, 190);
  popMatrix();

  //linea vertical 2

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(-33, 0, 0);
  box(7.5, 548, 548);
  popMatrix();

  //linea vertical 3

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(169, -28, 0);
  box(7.5, 226, 85);
  popMatrix();

  //linea vertical 3

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(72.3, -208, 0);
  box(7.5, 132, 300);
  popMatrix();

  //linea horizontal 1

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(76, 82, 0);
  box(225, 7.5, 100);
  popMatrix();

  //linea horizontal 2

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(32, -33.3, 0);
  box(279, 7.5, 180);
  popMatrix();

  //linea horizontal 3

  noStroke();
  fill(#000000);

  pushMatrix();
  translate(76, -140, 0);
  box(225, 7.5, 80);
  popMatrix();
}

Variables de rotación, engranaje y opacidad

//declaro variable que permite la rotación del cubo mediante potenciómetro circular 
float rotx;

//declaro variables para el "engranaje del color" mediante el joystick (eje x)
float h = 20.603204890111201;

//declaro variables para las dimensiones "opacidad del color" mediante el joistick (eje y)
float alfa = 255;



void update() { 
  float perilla = arduino.analogRead(0);
  rotx = map(perilla, 1, 1024, 0, TWO_PI*.75);

  float joisx = arduino.analogRead(1);
  // h = map(joisx, 0, 735, 1023, 226 );

  if (joisx > 1000) {
    h++;
  }

  if (joisx < 20) {
    h--;
  }

  println (joisx);


  float joisy = arduino.analogRead(2);
  //alfa = map(joisy, 0, 1023, 0, height);

  if (joisy > 1000) {
    alfa +=1;
  }

  if (joisy < 20) {
    alfa -=1;
  }

  alfa = constrain(alfa, 0, 255);

  println (joisy);
}