Interfaz de Piet Mondrian Grupo LFF

De Casiopea


Lookalike-piet-mondrian.jpg


TítuloInterfaz de Piet Mondrian
Tipo de ProyectoProyecto de Taller
Palabras Clavepiet mondrian, mondrian, interfaz, trazo, color, trama, diseño, encargo 1
Período2016-
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2016
CarrerasDiseño, Diseño Gráfico, Diseño Industrial
Alumno(s)Luciano Aucan Lagomarsino, Francisca Manríquez Allendes, Francisca Rojas, Maithé Escobar
ProfesorHerbert Spencer, Pedro Garretón


Objetivo del encargo Traer a presencia la maqueta de un dispositivo que tiene como fin simulado de controlar ciertas dimensiones de un cuadro de Piet Mondian. Las dimensiones como tales fueron escogidas según las características más relevantes de la/s obra/s a juicio del grupo. Y a su vez que estas fueran calculables de una forma análoga sin necesidad de apoyo de software.

Piet Mondrian

Archivo:PIETmondrianFR.jpg
Texto de descripción de la imagen


Pintor vanguardista neerlandés fundador del neoplasticismo junto con Theo Van Doesburg

En el Neoplasticismo Mondrian preferia mostrar el mundo de una manera mas simple, ya que pensaba que lo que pintaban los otros parecian mucho mas complicadas que el diario vivir. Su lienzo se restringia basicamente lineas rectas con cantos vivos. Y las superficies las pintaba con los colores primarios (rojo, azul y amarillo o colores ausentes de color)

 “En Composición con rojo, amarillo y azul (1935) el artista traza sobre el blanco 
 de la tela líneas negras,horizontales y verticales, que determinan una trama de 
 cuadrados y rectángulos. Tres de ellos los ilumina con el rojo, el amarillo y el 
 azul. Busca representar el cuadro en dos dimensiones, evitando crear la ilusión de 
 profundidad. Por eso omite cualquier línea curva o diagonal ya que éstas dan la 
 sensación de perspectiva.”
Archivo:PropuestaFR.jpg
Texto de descripción de la imagen

Algunas de sus obras

  • 1925 - 53 años Cuadro nº 2
  • Composition with Red, Yellow and Blue, 1927
  • Composition B (No.II) with Red, 1935
  • Composition with Large Red Plane, Yellow, Black, Grey and Blue, 1921
  • Composition with Yellow, Blue and Red, 1937-1942
  • Composition with Blue, Yellow and Red, 1920–42

Desarrollo de las Dimensiones

Variación del Trazo

Una de las características más sobresalientes del las obras de Piet Mondrian es la presencia de trazos negros. En esta obra “lookalike” la presencia de los trazos no es excesiva ni pequeña, por lo que se puede jugar holgadamente ya sea con el tamaño, grosor, cantidad de estos. En la obra se acentúan con variados grosores pero no escapan de cierta ligereza. Estos trazos no solo conforman un límite sino que una imagen que como regla parece ser que siempre las lineas deben encontrarse con otra.


PROPUESTAS

GROSOR DE TRAZO

Toma la misma idea ligera que el autor pero la maximiza. La idea es ver la obra en un porcentaje de grosor alto para ver el impacto que provoca en ella

LARGO DEL TRAZO

Por otro lado más radical, el cambio en el largo del trazo puede cambiar rotundamente lo que es la esencia de esta obra, que en toda ocasión encierra o enmarca al menos dos lados de los colores.


Espesor del Trazo Negro

El espesor del trazo tiene un limite del 100%. El 100% es cuando se topan las lineas paralelas del menor espacio entre sí. Se tomo por preferencia la línea más gruesa de las paralelas mas cercanas. De acuerdo a esto la línea de la obra original queda de 17%. Las demás líneas o trazos de la obra, crecen proporcionalmente en función de la línea de preferencia.

Francisca Rojas

Relevancia del Color en la composición

La estructura que desglosaría la obra original de Mondrian (Lookalike) se puede describir como un entramado compuesto de trazos negros de grosor variable que se disponen en el plano de forma horizontal o vertical. Al encontrarse perpendicularmente, estos trazos generan intersticios de carácter recto (cuadrados y rectangulares). Es en algunos de ellos donde se deposita el color (de naturaleza primaria), apareciendo este delimitado por la trama en sus tres instancias dentro del espacio

PROPUESTA

Tomándose de referencia la característica anteriormente explicada sobre el color, proponiéndose el modificar su área de extensión en función de romper esta delimitación generada desde la trama, logrando entregar al color un mayor protagonismo dentro de la composición al desintegrar la inercia de este primer estado. Esto se pretende al ubicar un punto desde el que pueda extenderse o permitiendo que lo haga desde una medida uniforme.

Extensión espacial del color

Definiéndose un punto centro para cada elemento de color, de forma independiente, se le entrega un valor de crecimiento porcentual, por lo que se procede a entender la naturaleza del movimiento posible según los rangos que tendría permitido. Se da a comprender que el extremo inferior de este rango como la desaparición total del color y definiendo al extremo superior como el momento previo a que los 3 colores se superpongan y mezclen, se pudo definir el rango porcentual en el que se encuentra la obra en su estado original. Se consideró también la noción de capas donde el blanco funcionaba como fondo, el color primario como elemento intermedio y visualmente el trazo negro pasaba a un nivel superior, siendo que al aumentar o disminuir el área trabajada, se puede aprecia al desligarse de los contornos del trazo como un límite perimetral, sobre todo cuando el área de color desborda el entramado.

Luciano Aucan Lagomarsino

Entramado

Esta obra de Piet Mondrian se caracteriza por un entrecruzamiento de los trazos negros, conformando un perímetro contorneando del color. Construye una zona plana, con colores vivos y alternando las zonas blancas. La línea se establece como una imagen y no solo como un límite ya que entrega un orden rítmico a la superposición del trazo.

PROPUESTA


Se toma el carácter de entramado, y se propone intervenirlo, ya sea redistribuyendo su orden, número, inclinación, etcétera. La trama, presenta una versatilidad al construir el espacio, inclusive conformando un nuevo tono visual al entrelazarse (escala de grises). Sin perder su carácter equilibrado, se propone entregar protagonismo al entramado.


Entramado Fractal - Propuesta 1

A partir de la obra Lookalike se toman las áreas limitadas por los trazos como secciones enteras las cuales se pueden subdividir pasando a conformar un protagonismo en la obra. Considerando la obra como una composición con tres capas, iniciando con un blanco, para luego incorporar los colores primarios, para finalizar con trazos negros, según el orden de creación, se toma el mismo principio para modificar la dimensión por lo que el trazo negro siempre estará sobre el color. Además, el área limitada puede subdividirse con nuevos trazos, los cuales tendrán un espesor de la mitad del valor del espesor inicial. La subdivisión es exponencial por lo que cada vez será más pequeña el área limitada, tendiendo a conformar una trama densa. La variación de los colores de la dimensión se indica en porcentaje. El 0% de la dimensión es la trama original de la obra lookalike, mientras que el 100% es el oscurecimiento completo a negro de la obra. (Aunque teóricamente tenderá al infinito, se estandarizó por el calor de los lápices utilizados).


 Francisca Manríquez Allendes

Corrección a la configuración de la Dimensión Fractal

Fractal - Propuesta 2

Desarrollado el concepto del fractal, nos encontramos con una geometría que tiende a repetirse de forma infinita pero en una escala proporcionalmente menor. Es a partir de esta primera afirmación que se deside tomar como unidad a dividir los intersticios formados desde la trama/entramado irregular de trazos negros. Esta división se logra adaptando este entramado a una menor proporción , pero estirándose o alargándose, dependiendo de los contornos del intersticio particular en que se encuentren. Este procedimiento se repetiría cada vez en una menor escala para cada subdivisión.


Fractal - Propuesta 3

Tomando como en el caso anterior la unidad de los intersticios provenientes de la trama original, se procede a ubicar en cada intersticio el mismo entramado de carácter cuadrado acorde al respectivo tamaño delimitado por los trazos, sin embargo, esta vez se mantiene la proporción del entramado original, lo que genera espacios blancos en los laterales del recuadro o márgenes en parte superior e inferior, repitiéndose la figura de carácter cuadrado en dicho espacio en un menor tamaño que le permita insertarse en los límites de dichos márgenes.


Luciano Aucan Lagomarsino

Construcción del Comando

A partir de las dimensiones establecidas para intervenir la obra Lookalike de Piet Mondrian, es necesario construir un diálogo humano-dimensión a través de la construcción de un control que contenga la interpretación formal-gráfica de la dimensión a modificar, permitiendo al usuario el entender claramente qué modificará.

Interpretación forma–gráfica de las dimensiones

  • Espesor del trazo

Se concluye lo necesario de expresar lo cíclico del aumento del grosor del trazo. O sea debe ir en aumento del grosor conforme se mueva la forma.

  • Extensión espacial del colo

Al querer representar el aumento proporcional centrado del color, se dificulta realizar una forma que exprese la centralización del color.

  • Entramado Fractal

La expresión del fractal tiende al infinito, por lo que es necesario delimitarlo, y a la vez lo caracteriza una inclinación a obscurecer

Traducción de la Dimensión - Gestualidad

¿Cómo se lleva a cabo un movimiento continuo con aparición de material no existente a la vista?

A partir de las dimensiones establecidas para intervenir la obra, se hace necesario construir una interpretación formal-gráfica de las dimensiones, permitiendo al usuario traducir la modificacion fisica, a una modificacion virtual. Esto se proyecta en el objeto a través de dos consideraciones:

  • La tendencia a aumentar y disminuir, en cantidad o tamaño de las dimensiones
  • Un estudio sobre distintos objetos con carácter interáctivo entre la máquina y la persona.

Desde aquí se desarrolla una interfaz que traduce la noción de la expansión, concretándola en un deslizador que al moverse muestra un área que se “agranda” o “disminuye”, al menos visualmente, dependiendo de la dirección en la que le mueva el usuario/lector.


400px 400px

La Obra como Objeto

PROPUESTA 1

El Stij ha sido muchas veces reinterpretado y llevado a múltiples objetos alejados de su inicio artístico plástico. Se busca la manera de reinterpretar el carácter de la obra en el comando, para contextualizar y ambientar la traducción de las dimensiones, y tener un lenguaje directo de lo que sucede en la obra y como se refleja en el comando.


La forma final se obtiene de la construcción de un ancho gestualmente adecuado para abrir, mediante el control de un riel, y también se obtiene de las características utilizadas en las dimensiones, cuidando el sistema de capas construido.

Archivo:PerspectivaPiet1FMA.jpg Archivo:FrontalPier1.0FMA.jpg Archivo:FrontalPiet1FMA.jpg Archivo:FrontalUsoPiet1FMA.jpg Archivo:LateralPiet1FMA.jpg

Francisca Manríquez Allendes

Corrección Clase 3

Resolviendo las problemáticas vistas durante la corrección de la clase anterior se plantearon posibles soluciones a evaluar:

Componentes de la interfaz:

Para construir la interfaz de la obra Lookalike de Piet Mondrian, es relevante entender las piezas que conforman su hardware; entre estos elementos destaca la base o cuerpo firme (carcasa), un material flexible, otros muy rigidos y finos entre muchos otros.

400px

  • 0.-Potenciometro

Un potenciometro tiene la función de regular o limitar el paso de corriente eléctrica, similar a una resistencia. Trabaja con valores que varían según su expresión, teniendo un mínimo y un máximo.

En cuanto a su forma, posee un eje central, que actúa como riel, en el caso de un potenciometro deslizable, este regula según su posición la resistencia emitida. En cuanto a las conexiones con el circuito, consta de tres terminales: a, b y c. La resistencia entre a y c, es la misma, por lo que no variara, pero al realizar conexiones entre a-y-b o b-y-c, y b al ser una resistencia variable, permitirá trabajar con el aumento de un valor, mientras que el otro disminuye, manteniendo una constancia en el valor de la resistencia.

right]Simbolo utilizado para un potenciómetro

  • 1.-Elemento plástico movible

El interfaz se compone por 3 elemento plásticos, que tienen la función de representar la dimensión a variar Material: mica + color


  • 2.-Elemento que recibe el gesto y mecanismo

Para vincular la extensión dela corredera es necesario construir una forma que reciba a través de un eje el movimiento. a la vez, esta sujeta el elemento movible y recibe el gesto de la mano.

  • 3.-Extención corredera cental

Extensión que vincula eje cental con laterales del gesto.


  • 4.-Carcasa

Material: Acrílico


  • 5.-Ubicadorde potenciómetro

Material: Cartón piedra Construido para dar lugar a los potenciómetros

Desarrollo del Cache

Segunda Maqueta

Archivo:FMAmondrian2.0encargo.jpg Archivo:FMAmondrian2encargo.jpg


Francisca Rojas

Prototipo

200px 200px 200px 200px 150px



500px


Gestualidad Propuesta Interfaz Lookalike FMA


Archivo:DesarrolloFormaCasisLookalikeFMA.jpg

Dibujo del Shield


 Francisca Manríquez Allendes

Conexiones protoboard con arduino

Primera conexión

Maithé Escobar Calderon

Conexión final

Maithé Escobar Calderon

Controlador Lookalike Prototipo 1

Francisca Rojas

Controlador Lookalike Prototipo 2


Proceso Constructivo

Carcasa

Archivo:DobladoDeAcrilicoFMA.jpg


DESPIECE Archivo:DespieceLookalike1FMA.jpg

Francisca Manríquez Allendes

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

Código Construido - Presentacion Obra Lookalike


  import processing.serial.*;

  import cc.arduino.*;

  Arduino arduino;

  float sw =11;//strokeWeight (ancho del trazo o de las lineas)
  float sa = 2;//strokeAmp (amplitud, variable que se multiplica al sw aumentando o disminuyendo su grosor)
  int l = 0;//niveles de caracter entero, definirán la cantidad de veces que el fractal podrá amplificarse)   

  void setup() {
    size(550, 550);
    rectMode(CENTER);//permite crear los rectángulos a partir de su centro
    strokeCap(SQUARE);//determina que los bordes de las lineas sean de caracter recto y no redondeadas por el defaul
    println(Arduino.list());//determina la lista de arduinos disponibles y las muestra en screen
   arduino = new Arduino(this, "COM4", 57600);//el puerto que se conectará al arduino.
  }
 
  void draw() {
    input();
    background(blanco);
    dibujoFractalLookalike(0, 0, width, height, l);
  }

Código Construido - Datos

 float x1, x2, x3, y1, y2, y3, y4, a1, a2, a3, b1, b2;
 float sc = 1; // escala de la superficie de los rectángulos de color;
 color  amarillo = #FEFF03;
 color  rojo = #F22222;
 color  azul = #36348E;
 color  negro = #000000;
 color  blanco = #FFFFFF;
 void defineData(float w, float h){ //variables en forma de paréntesis, que definen el ancho y el largo. 
   //verticales
   x1 = w * 0.428125;
   x2 = w * 0.56875;
   x3 = w * 0.803125;
   //horizontales
   y1 = h * 0.35625;
   y2 = h * 0.528125;
   y3 = h * 0.7625;
   y4 = h * 0.90625;
   //sintesis de los factores
   a1 = x1;
   a2 = x2-x1;
   a3 = w -x3;
   b1 = y1;
   b2 = y3-y2;
 }

Código Construido - Dimensiones y Fractal

 void dibujoFractalLookalike(float xpos, float ypos, float w, float h, int levels) {
 // Recursion
 /*A continuación se determinan las áreas del lienzo que contendrán una réplica de la composición 
 original, estas se ubicarán en los rectángulos blancos (interpretados como un fondo inicialmente) que 
 pasarán a ser un lienzo en miniatura. Se determina con una posicion x e y con origen en 
 corner, para luego determinar el area intervenida, cerrando el parentesis con el nivel que tendra en ese 
 espacio*/ 
   if (levels > 0) {
     defineData(w, h);
     dibujoFractalLookalike(xpos+x1, ypos, x2-x1, y1, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x2, ypos, w-x2, y1, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos, ypos+y1, x1, y2-y1, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x1, ypos+y1, x2-x1, y2-y1, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x2, ypos+y1, w-x2, y2-y1, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos, ypos+y2, x1, y3-y2, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x2, ypos+y2, x3-x2, y3-y2, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos, ypos+y3, x1, h-y3, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x1, ypos+y3, x2-x1, y4-y3, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x2, ypos+y3, x3-x2, y4-y3, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x1, ypos+y4, x2-x1, h-y4, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x2, ypos+y4, x3-x2, h-y4, levels-1);
     defineData(w, h);
     dibujoFractalLookalike(xpos+x3, ypos+y3, w-x3, h-y3, levels-1);
 }
  defineData(w, h);
    float sw = map(w, 0, width, 0 , 11); //escaneo a base del ancho del lienzo, permite sacar la variable  
 grosor del trazo en base a un sistema de porcentaje que va desde 0 a 1 (0% a 100%)
   //cuadro de colores
   noStroke();
   fill(rojo);
   rect(xpos+(x1/2), ypos+(y1/2), a1 * sc, b1 * sc);
   fill(amarillo);
   rect(xpos+(x1+((x2-x1)/2)), ypos+( y2+((y3-y2)/2)), a2 * sc, b2 * sc);
   fill(azul);
   rect(xpos+(x3+((w -x3)/2)), ypos+( y2+((y3-y2)/2)), a3 * sc, b2 * sc);
   //lineas
   stroke(negro);
   strokeWeight(sw * sa); //sa viene a usarse como la variable que multiplica al grosor
   //lineas verticales
   line(xpos+x1, ypos, xpos+ x1, ypos + h);
   strokeWeight(sw*.6 * sa);
   line(xpos+x2, ypos, xpos+x2, ypos + h);
   line(xpos+x3, ypos+ y2, xpos+x3, ypos + h);
   //lineas horizontales
   line(xpos, ypos+y1, xpos+ w, ypos+ y1);
   line(xpos, ypos+ y2, xpos+w, ypos+y2);
   line(xpos, ypos+y3, xpos+ w, ypos+ y3);
   line(xpos+x1, ypos+y4, xpos+x3, ypos+ y4);
 }

Código Construido - Input

 void input (){
   float deslisadorlinea = arduino.analogRead(1);//fractal
   float deslisadorlinea2 = arduino.analogRead(2);//linea
   float deslisadorlinea3 = arduino.analogRead(0);//color
   //Espesor Linea
   sa = constrain(sa, 0, 8.81);//límite del grosor de casi 9 veces el tamaño 
   sa=(map(deslisadorlinea,0,1023,0,8.81));
   //println(deslisadorlinea); 
   //FRACTAL
   l = constrain(l, 0, 4);//límite que determina la reproducciòn y reiteraciòn del fractal en 4 veces
   l=round(map(deslisadorlinea2,0,1023,0,4));
   //println(deslisadorlinea2); 
   //COLOR
   sc = constrain(sc, 0, 2.4);//delimitaciòn maxima a 2.4 veces el tamaño original de los rectàngulos de 
 color (que mantienen su proporciòn y crecen desde un centro)
   sc=(map(deslisadorlinea3,0,1023,0,2.4));
   //println(deslisadorlinea3); 
 }
Luciano Aucan Lagomarsino


Archivo:ExposicionInterfazfinalFMA.jpg