La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

Título	Taller, 1er Trimestre 2011
Tipo de Proyecto	Proyecto de Taller
Período	2011-2011
Carreras	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.
Alumno(s)	Joaquín Martel
Profesor	Herbert Spencer

Encargo 02 - Estudio de Luz-Sombra

Dibujos

Dibujos realizados con pluma de pájaro y tinta china. Se abordan casos luminosos en la cantera para poder hacer una síntesis monocromática en el papel.

Fundamento

He descubierto que puedo hacer una especie de paralelismo entre los estudios realizados con la pluma y la cantera, con las cárceles de Piranesi. Se trata de cuatro criterios que definen mi punto de vista para poder definir la luz-sombra que se produce en el espacio anteriormente nombrado: Desde la Inmensidad o del todo, a la Unidad; El Caos; El Encuentro Fortuito; y El Trabajo de Estados.

Desde la Inmensidad o del todo, a la Unidad.En un momento primero nos hallamos ante la vastedad. Se ve la extensión sin trama aparente que la regule, un todo, casi como una sucesión de planos claros-oscuros. No obstante, cada unidad que conforma el total, en su dimensionalidad, es trabajada en profundidad y angulación. Entiendo, por tanto, que estos últimos dos conceptos son los que componen aquella unidad indivisible.
El Caos, o elementos y su repetición. Contabilizo una serie de elementos y en cómo la luz-angulada llega. Las curvas no predominan, no así la rectitud. En sucesiones de 45° (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315° y 360°) son las luces y sombras (estas últimas con mayor intensidad) aquellas que más prevalecen, pero no siendo, naturalmente, las únicas. Ahora bien, es un orden ‘sin-orden’, dado por la mano del hombre; su matematicidad del corte brinda la repetición en su plano general, permitiendo una lectura bajo una misma fórmula o ecuación.
Encuentro Fortuito, o el aparecer de los elementos. He de detenerme en la unidad. En su aparición, así como en los trabajos de Piranesi está gran parte del valor que se puede ver en el total. Cada piedra trabajada fue tratada en su particularidad, logrando un resultado inimitable. La roca, entonces, es como el perfil humano: tiene una sombra que penetra en mayor profundidad, o una arista extremadamente fina. Asimismo la riqueza se halla en el encuentro de estas partes, tal como lo decía Lautréamont con su máquina de coser, un paraguas y la mesa de operaciones.
Trabajo de Estados. Es desde el blanco donde se trabaja la sombra. La superposición de las tramas que conforman las luces y sombras anguladas es la que da forma al lenguaje. La pluma y la superposición de los trazos rectos dan un sin-borde, configurando sólo un espectro lumínico de capas. Así como Piranesi traía consigo el trabajo de estados, la matemática de los cortes en la roca permiten hacer propia la observación de continua autocorrección permanente.

Mapa Conceptual

Esquema Conceptual desde el Fundamento, Cmap

Encargo 03 - Síntesis de elementos lumínicos

Fundamento

Se dividen los criterios gráficos en cinco puntos bases: Longitud del trazo; Grosor del trazo; Angulación; Trabajo del Blanco; Desacoplamiento de trazos; y Capas.

Entendemos por Trazo a la siguiente fórmula: Longitud + Grosor + Angulación.

Longitudes del Trazo, en un ordenamiento <A, B, C y D>, donde A corresponde al trazo más largo.
Grosor del Trazo, en un ordenamiento <1, 2, 3 y 4>, donde 1 es el más grueso.
Angulación, donde se trabaja en un parámetro que se compone desde el 0° al 180°, no obstante, los que se observaron en los estudios realizados, preponderan los de 0°, 45°, 90°, 135° y 180°. Éstos, a su vez, se verán complementados, en una menor cantidad, por ángulos intermedios de 22,5°, 67,5°, 112,5° y 157°,5.
Trabajo del Blanco, configuración en base a un ‘borde angulado’, creado por los trazos.
Desacoplamiento de trazos, en un ordenamiento <A, B y C>, donde A corresponde a trazos unidos, B a levemente distanciados, y C a los que ya contienen una distancia considerable.
Capas, correspondiente a la superposición de trazos, creando una trama.

Teniendo estos criterios, se plantea la idea de crear combinaciones entre los puntos. Por ejemplo, crear un trazo de longitud B, grosor 4 y con un ángulo de 45°. Asimismo, el cúmulo de éstos conforman tramas, que podrían desacoplarse en un ordenamiento C. Las capas son conformadas en base a dos o más tramas superpuestas, dando zonas de mayor penumbra.

Finalmente, el trabajo del blanco se realiza en base a las "áreas" donde se dispondrían las tramas.

Análisis Estructural

Análisis Primero

Dibujo Original
Primera etapa
Segunda etapa
Esquema Final

Análisis Segundo

Dibujo Original
Primera etapa
Segunda etapa
Tercera etapa
Esquema Final

Análisis Tercero

Dibujo Original
Primera etapa
Segunda etapa
Esquema Final

Análisis Cuarto

Dibujo Original
Primera etapa
Segunda etapa
Tercera etapa
Esquema Final

Grafías Componentes

Se estudian los elementos que componen al dibujo.

Archivo:Criterios graficos.pdf

Análisis de los estudios realizados en encargos anteriores

Encargo 04 - Síntesis desde Processing

Se trabaja en base a dos proyectos diferentes trabajados desde el código de Processing.

Aproximación Primera

Inicialmente se elabora una imagen a partir de una cita directa a los dibujos realizados en el Encargo 2, manteniendo los parámetros de longitud, grosor y desacoplamiento de trazos. Estas tres lineaturas nos permiten crear una combinación de los aspectos, estableciendo un dibujo diferente cada vez.

Criterios Gráficos

Longitud
Grosor
Desacoplamiento de trazos

Combinatoria


PImage cuadros[];  
PImage enmascarados[]; 

int nImagenes; 
int alAzar;

void setup() {
  size(1280, 800);
  cargaImagenes();
  azar();
  background(255);
}


void draw(){

}

void mouseReleased() {
  pushMatrix();
  translate(mouseX, mouseY);
  rotate((float)mouseX/(float)width * 360);
  azar();
  image(enmascarados[alAzar], -enmascarados[alAzar].width/2, -enmascarados[alAzar].height/2);
  popMatrix();
}

void azar() {
  int total = nImagenes;
  alAzar = (int)random(total);
}

void cargaImagenes() {
  

    File carpeta = new File(sketchPath, "criterios"); 
  

  String[] nombresDeArchivos = carpeta.list();

  if (nombresDeArchivos != null) {
    nImagenes = nombresDeArchivos.length;
    cuadros = new PImage[nImagenes];
    enmascarados = new PImage[nImagenes];


  }

  for (int i=0; i < nImagenes; i++) {
    String archivo = nombresDeArchivos[i];
    cuadros[i] = loadImage("criterios/"+archivo); 
   
  }
  

  for (int i=0; i < nImagenes; i++) {
    enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
    enmascarados[i].loadPixels();
    for (int j = 0; j < enmascarados[i].pixels.length; j++) {
      enmascarados[i].pixels[j] = color(0);
    }
    enmascarados[i].updatePixels();
    enmascarados[i].mask(cuadros[i]);
  }
}


void keyPressed(){
 String nombre = ""+month()+"-"+day()+"-"+hour()+"-"+minute()+"-"+second()+"-prueba.jpg";
 saveFrame("/fotos-generadas/"+ nombre);
 println("el archivo "+nombre+" ha sido guardado exitosamente");
}

Aproximación Segunda

En un segundo momento se anhela dejar a un lado el trabajo directo con las imágenes realizadas con pluma y tinta china, para acercarse a esta grafía desde el código del programa. Sin embargo, los parámetros que brindaban ciertas reglas en el dibujo análogo se quieren mantener.

De esta manera, la longitud, el grosor y el desacoplamiento de los trazos son los lineamientos a seguir para dar vida a la obra digital a partir de la definición sintética de las grafías desde el trazo original de la pluma.



//* s=Guardar imagen, r=Reinicio, click=trazo negro, i=trazo blanco *//

void setup(){
  size(800,1280);
  background(255);
  smooth();
}
void draw(){
  if(mousePressed==true){
   
    strokeWeight(random (2)); //grosor lineas, el parentesis equivale al máximo
    stroke(0);
    line(mouseX+random(0,0),mouseY+random(0,0), mouseX+random(1,90),mouseY+random(0,20));
     
  }
}
void keyPressed(){
   if (key == 's'){;
 String nombre = ""+day()+"-"+hour()+"-"+minute()+"-"+second()+"-prueba.jpg";
 saveFrame("/fotos/"+ nombre);
 println("el archivo "+nombre+" ha sido guardado exitosamente");
} 
  
  if(key == 'r'){
    setup(); 
  }
  
  if(key == 'i'){;
    strokeWeight(random (3)); 
    stroke(255); 
    line(mouseX+random(0,0),mouseY+random(0,0), mouseX+random(1,90),mouseY+random(0,20));

  }
}

Encargo 05 - Cuerpo Gráfico-Lumínico

Se trabaja desde un volumen estructurado por la rigidez angular, tal como se vio en la cantera. Primeramente se desea recoger la luz para luego, desde ella, proyectar la penumbra en diferentes zonas.

La dimensión del color es vista como una instancia también lumínica, de modo que las zonas que permanecen dibujadas por el trazo de la pluma rebote a un espacio donde la luz es recibida. La luz y la sombra, desde el color, pintan.

Código desde Processing



PImage cuadros[];  
PImage enmascarados[]; 
PImage img ; 
int nImagenes; 
int alAzar;

void setup() {
  size (1225,857);
  background (255);
  cargaImagenes();
  azar();
}


void draw(){
  img = loadImage("plano.png"); 
  image(img, 0, 0);
  endRecord();
}
  


void mouseReleased() {
 
   pushMatrix();
   translate(mouseX, mouseY);
   rotate((float)mouseX/(float)width * 45);
   azar();
   image(enmascarados[alAzar], -enmascarados[alAzar].width/2, -enmascarados[alAzar].height/2);
   popMatrix();
}

void azar() {
  int total = nImagenes;
  alAzar = (int)random(total);
}

void cargaImagenes() {
 
    File carpeta = new File(sketchPath, "criterios"); 
 
  String[] nombresDeArchivos = carpeta.list();

  if (nombresDeArchivos != null) {
    nImagenes = nombresDeArchivos.length;
    cuadros = new PImage[nImagenes];
    enmascarados = new PImage[nImagenes];
  
  }

  for (int i=0; i < nImagenes; i++) {
    String archivo = nombresDeArchivos[i];
    cuadros[i] = loadImage("criterios/"+archivo); 
   
  }
  
   for (int i=0; i < nImagenes; i++) {
    enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
    enmascarados[i].loadPixels();
    for (int j = 0; j < enmascarados[i].pixels.length; j++) {
    enmascarados[i].pixels[j] = color(0);
}
}  
}

//*COLORES Y TECLAS: C=CAFÉ / G=GRIS / A=AZUL METÁLICO / N=NEGRO / V=VERDE /R=CAFE ROJIZO*//
//*G=GUARDAR*//

  void keyPressed(){
    
  if (key == 'g') {
  String nombre = ""+month()+"-"+day()+"-"+hour()+"-"+minute()+"-"+second()+"-prueba.jpg";
  saveFrame("/FOTOS/"+ nombre);
  println("el archivo "+nombre+" ha sido guardado exitosamente");
    
}
  
  if (key == 'c') {
  for (int i=0; i < nImagenes; i++) {
  enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
  enmascarados[i].loadPixels();
  for (int j = 0; j < enmascarados[i].pixels.length; j++) {
  enmascarados[i].pixels[j] = color(#896732);
}
  enmascarados[i].updatePixels();
  enmascarados[i].mask(cuadros[i]);
 }
 }
  if (key == 'g') {
  for (int i=0; i < nImagenes; i++) {
  enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
  enmascarados[i].loadPixels();
  for (int j = 0; j < enmascarados[i].pixels.length; j++) {
  enmascarados[i].pixels[j] = color(#B6B7B9);
 }
  enmascarados[i].updatePixels();
  enmascarados[i].mask(cuadros[i]);
 }
  
 }
  
  if (key == 'a') {
  for (int i=0; i < nImagenes; i++) {
  enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
  enmascarados[i].loadPixels();
  for (int j = 0; j < enmascarados[i].pixels.length; j++) {
  enmascarados[i].pixels[j] = color(#67809D);
  }
  enmascarados[i].updatePixels();
  enmascarados[i].mask(cuadros[i]);
  
  }
  }
   
  if (key == 'n') {
  for (int i=0; i < nImagenes; i++) {
  enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
  enmascarados[i].loadPixels();
  for (int j = 0; j < enmascarados[i].pixels.length; j++) {
  enmascarados[i].pixels[j] = color(0);
  }
  enmascarados[i].updatePixels();
  enmascarados[i].mask(cuadros[i]);
   
  }
  }
   
  if (key == 'v') {
  for (int i=0; i < nImagenes; i++) {
  enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
  enmascarados[i].loadPixels();
  for (int j = 0; j < enmascarados[i].pixels.length; j++) {
  enmascarados[i].pixels[j] = color(#46814D);
  }
  enmascarados[i].updatePixels();
  enmascarados[i].mask(cuadros[i]);
  }
  }  

  if (key == 'r') {
  for (int i=0; i < nImagenes; i++) {
  enmascarados[i] = createImage(cuadros[i].width, cuadros[i].height, ARGB);
  enmascarados[i].loadPixels();
  for (int j = 0; j < enmascarados[i].pixels.length; j++) {
  enmascarados[i].pixels[j] = color(#ED612D);
  }
  enmascarados[i].updatePixels();
  enmascarados[i].mask(cuadros[i]);
    
  }
  }
  }

Planos generados desde Processing

Plano
Dibujo Primero
Dibujo Segundo

Fotografías

Volumen lumínico processing 1.jpg
Volumen lumínico processing 2.jpg
Volumen lumínico processing 3.jpg
Volumen lumínico processing 4.jpg
Volumen lumínico processing 5.jpg

Encargo 06 - Portafolio, Aproximación Primera

Los presentes wireframes esbozan un modo de presentar un esquema en la idea de un futuro portafolio. Se busca hacer la navegación intuitiva y simple. La imagen será la protagonista -se confiará en ella como vehículo comunicador con respecto al potencial usuario-.

Con respecto a los enlaces, se mantendrán en estado permanente las redes sociales (twitter, flickr, y facebook personal), además del correo electrónico, un buscador de contenidos y datos de contactos.

Por otra parte, el sitio se divide en 6 criterios:

Diseño Gráfico: Contiene trabajos con respecto al área, específicamente logotipos y afiches trabajados en base a encargos por clientes particulares.
Proyectos Académicos: Estudios hechos en la e[ad], que comprenden trabajos editoriales y sitios web.
Experimental: Espacio de libertad creativa, donde se exponen tanto trabajos digitales y análogos.
Fotografía: Galería de fotos.
Notas: Una dimensión donde la palabra adquiere relevancia. Se mostrarán observaciones desde el croquis, o notas con respecto a algún tema en particular.
JMartel: En este enlace se muestran datos personales y recorrido académico. Se aborda este espacio como una instancia de intimidad con el usuario.

Mapa de Navegación

Mapa de Navegación para portafolio personal

Wireframes

Inicio
Wireframe portafolio martel diseñografico.png

Inicio>Diseño Gráfico>Logotipos
Inicio>Diseño Gráfico>Logotipos>Imagen
Inicio>Proyectos Académicos>Sitios Web
Inicio>Experimental>Análogo
Inicio>Fotografía
Inicio>Notas
Inicio>jmartel
Inicio>Buscador

Encargo 07 - Portafolio, Aproximación Segunda

Con respecto al mapa de navegación anterior, se busca simplificar la estructura.

Se mantienen fijos todos los enlaces -incluso los de segundo orden, como por ejemplo experimental>fotografía- de modo que el recorrido del usuario por el sitio sea de mayor velocidad, y más precisa. Con esta incorporación se elimina el buscador, ya que al estar mejor organizados los contenidos, es innecesario.

A diferencia del anterior esquema, la Arquitectura se divide en cuatro aristas principales: Diseño Gráfico, Experimental, Notas y JMartel.

En la primera se encuentran tanto trabajos para clientes como los del ámbito académico. En Experimental, se añade el criterio de fotografía, mientras que en Notas y JMartel mantienen la estructura pensada en un primer momento, pero el diseño de los contenidos dispuestos en la pantalla varían, como se puede apreciar en los siguientes Wireframes de alta intensidad.

Mapa de Navegación

Wireframes

Inicio
Inicio>Diseño Gráfico>Afiches
Inicio>Notas

Capturas de Pantalla

Se realizan screen shots para poder obtener un panorama de lo que se produce en los distintos navegadores y las resoluciones de pantalla de diferentes computadores.

1024x768, Internet Explorer
1024x768, Firefox
1280x800, Chrome
1280x800, Firefox
Iphone-Ipod (Vertical)
Iphone-Ipod (Horizontal)

Enlaces

Encargo 08

Capturas de pantalla

1024x768, Google Chrome
1024x768, Internet Explorer
1024x768, Firefox
1280x800, Google Chrome
1280x800, Internet Explorer
1280x800, Firefox
Iphone, Ipod (vetical)
Iphone, Ipod (horizontal)

Enlaces

Encargo 09

Capturas de pantalla

1024x768, Internet Explorer
1024x768, Firefox
1024x768, Google Chrome
1280x800, Internet Explorer
1280x800, Firefox
1280x800, Google Chrome
Iphone-Ipod (Horizontal)
Iphone-Ipod (Vertical)

Enlaces

Encargo 10

Enlaces

Modelo Visual: ¿Qué es el Diseño?

Primera Aproximación

Esquema Conceptual, Visión del Diseño, Cmap

Archivo:Modelo visual que es el diseño 01 joaquin martel.jpg

Propuesta Final - Teoría del Diseño: Conformador y Modificador del Ser Humano

Entiendo, guiado por la lectura de "Diseñar para un Mundo Real", de Victor Papanek, que el diseño es la base de toda actividad humana.

Base de toda actividad humana porque todo hombre es creativo y todo lo que hace se cimienta en el diseño.

En el modelo se hallan cuatro nodos, conformados por 'el hombre' (Ser Humano y (r)Evolución), los que nos presentan las características de él y dan paso a la 'vida en diseño' desde la cual los nodos Academia y Praxis plantean soluciones o respuesas a inquietudes a circunstancias con el el hombre puede encontraste.

De este modo, el diseño es conformador y a posterior modificador del ser humano, desde donde las soluciones específicas que propone. Así, vinculando estas 'respuestas puntuales' se puede lograr facilitar la vida de gran cantidad de individuos.

Cita

“El diseñador tiene que ser consciente de su responsabilidad moral y social. Porque el diseño es el arma más poderosa que ha recibido el hombre para configurar lo que produce, su medio ambiente, y, por extensión, a sí mismo; con ella debe analizar las consecuencias de sus actos, tanto del pasado como del futuro predecible.”

Victor Papanek, Diseñar para el Mundo Real.

Módulos

Tipografía

Archivo:Tipografía modelo joaquin martel.png

Fotografías

Portada
Doble Página Extendida
Vista Lateral
Contraportada

Joaquín Martel: 1er Trimestre 2011

Tabla de Contenidos

Encargo 02 - Estudio de Luz-Sombra

Dibujos

Fundamento

Mapa Conceptual

Encargo 03 - Síntesis de elementos lumínicos

Fundamento

Análisis Estructural

Grafías Componentes

Encargo 04 - Síntesis desde Processing

Aproximación Primera

Aproximación Segunda

Encargo 05 - Cuerpo Gráfico-Lumínico

Código desde Processing

Planos generados desde Processing

Fotografías

Encargo 06 - Portafolio, Aproximación Primera

Mapa de Navegación

Wireframes

Encargo 07 - Portafolio, Aproximación Segunda

Mapa de Navegación

Wireframes

Capturas de Pantalla

Enlaces

Encargo 08

Capturas de pantalla

Enlaces

Encargo 09

Capturas de pantalla

Enlaces

Encargo 10

Enlaces

Modelo Visual: ¿Qué es el Diseño?

Primera Aproximación

Propuesta Final - Teoría del Diseño: Conformador y Modificador del Ser Humano

Cita

Módulos

Tipografía

Fotografías