Gráfica Digital 2010

De Casiopea


Asignatura(s)Gráfica Digital
Año2010
Tipo de CursoRamo Lectivo
TalleresDG 4º
ProfesoresHerbert Spencer
AyudantesDámaris Sepúlveda
AlumnosSofía Savoy, Waldo López, Gley Riquelme, Javiera Albornoz, Javiera Burgos, Paula Mancilla, Cristian Castro
Palabras ClaveVisualización
Carreras RelacionadasDiseño Gráfico
4º DG 2010 | Presentación del Diseño Gráfico 3 2010 | Seminario de Diseño | Alumnos 4º DG 2010 | Documentación | Modelos Visuales del Diseño | Gráfica Digital | Construcción


Por favor regístrense en la lista de correo ya que todas las comunicaciones oficiales del curso se realizarán por esta vía.

Proyectos Grafica Digital

  1. Situación del Agua en Chile, por Gley Riquelme
  2. Educación Nacional/Resultados Simce 2009, por Waldo López
  3. Visualización GD, por Javiera Burgos
  4. Visualización del VIH SIDA en Chile, por Sofía Savoy
  5. El Poder femenino en la Política Latinoamericana, por Paula Mancilla
  6. La Pobreza en Chile, por Francisco Vera
  7. Iniciación sexual en Chile, por Eleonora Aldea
  8. Visualización GD, por Valentina Pérez
  9. Transcurso de la Popularidad Musical, por Cristian Castro B.
  10. Visualización GD, por Paloma López
  11. Aumento obesidad en Chile, por Javiera Albornoz
  12. La Felicidad en el Mundo, por Alejandra Salinas

Clases

Clase 1

  • Fecha: Martes 28 de Junio de 2010.
  • Palabras Claves: Processing, DBN (design by numbers), John Maeda, Programa, Software, Lenguaje, Java.


Processing es un entorno de desarrollo escrito en Java. Es hijo/antecesor de DBN (design by numbers), proyecto creado por John Maeda, quien trabajó durante muchos años en Media Labs encargado de formar gente que provenían de distintas areas como las artes y la informática, la cual no necesariamente estaba familiarizada con la ingeniería y la programación.

Un programa es una máquina lógica que es ejecutado por un computador. Corresponde a un motor o un circuito lógico que corre (de manera NO FÍSICA) dentro de cualquier computador.

Los lenguajes compilan dentro de esta máquina lógica

Java es una máquina virtual que recive el lenguaje y es capaz de hacer puente entre el lenguaje y el sistema operativo, cualquiera que este sea: Mac, Windows, Linux, etc.

(Java no es lo mismo que Java Script)

Processing puede compilar algo en forma de:

  1. APPLET que son para web (sirve para previsualizar, hacer pruebas, algo no oficial)
  2. MAC
  3. WINDOWS
  4. LINUX

ProcessingJS (Java scrip) es un puerto para Java script.

Processing viene a ser la herramienta que simplifica un lenguaje y hace que se vuelva más próxima una disciplina o aprendizaje exclusivo o entendible para los ingenieros. Se simplifican las coordenadas altamente complejas (como lo tedioso de plotear punto por punto para conseguir una linea).

Modos de trabajo en processing

--Waldoignacio 04:19 30 jun 2010 (UTC)

Clase 2

  • Fecha: Lunes 5 de Julio de 2010.
  • Palabras Claves: Processing, Boolean, Lenguaje, Color, Grafía, RGB.


Para nuestras tareas, debemos no sólo saber ejecutar los programas, debemos tener un JUICIO PLÁSTICO, sobre el resultado que llevaremos a la clase. Debemos volvernos más críticos sobre la abstracción que permite construir las tramas y los ejercicios que realizaremos. Gobernar la superficie, tener un criterio visual, no sólo lograr que funcione. Construir la fineza del trazo para ese formato, ese papel. Reconocer un valor gráfico, con delicadeza y rigurosidad.

Hay 3 etapas que vamos a ir cubriendo: 1. La generación de un PDF a partir del programa 2. La generación de un PDF Multipágina 3. Que luego de que ocurran cosas en el programa, haya interacción o alguna acción, y que el programa pare y grabe el PDF.

(El programa tiene que "cerrarse" para que se genere el PDF)

Uso de color: debemos considerar que estamos en el espacio RGB, es decir son 3 canales de 8 bit cada uno. Por lo tanto son 256 valores de grises paraq cada canal. El 0 es un valor. Se puede definir el color con 1, 2, 3 o 4 valores. Si ponemos 1 valor, es en escala de grises, con 2 valores es escala de grises más un canal alfa (opacidad), con 3 valores es RGB, y con 4 valores es RGB más un canal alfa. Aparte se puede definir el espacio de color con el comando ColorMode. Por ejemplo: ColorMode(RGB,1) significa que todos los valores estarán entre 0 y 1, también podríamos usar HSB lo que significa "Hue, Saturarion, Brightness", si no se le pone número, toma entre 0 y 100.

Uso de int/float: Cuando definimos una variable hay que decir qué clase de cosa es, para que el computador reserve memoria para esa variable. "Int" es una declaración, es una variable dinámica, se traduce en números enteros. Cuando se declara fuera de los loops, todos los bloques de código conocen esa variable. "Float", en cambio es un número, pero decimal.

String= Texto

Char=character

Hay que cuidar el código para leerlo bien, funciona igual aunque no tenga espacios, sin embargo conviene indentar y tabular el código para entenderlo cuando queramos descubrir errores o explicarlo.

Boolean: Es un switch, es verdadero o falso. Es el elemento más pequeño, sí o sí devuelve true o false (los que dicen void no devuelven nada)

ENCARGO Hacer tramas donde los elementos tengan pequeñas variaciones, pensar en un pincel: que cambie en las repeticiones, establecer una abstracción de la luz, que desaparezca la regularidad.

Enlaces

  • OpenProcessing - comunidad donde usuarios de Processing comparten sus sketches (En nuestro caso no sirve mucho ya que construiremos PDF y no Applets)

--Aldeapardo 21:11 9 jul 2010 (UTC)

Clase 3

  • Fecha: Lunes 12 de Julio de 2010.
  • Palabras Claves: Processing, Identidad circular, Coordenadas polares, Matrices, Arreglos y Clases.


El sistema de trabajo en códigos en general requiere de un pensamiento abstracto capaz de comprender el funcionamiento de las máquinas. Si queremos construir una visualización, primero debemos saber cuales son los datos necesarios para generarla, y cómo organizarlos. La idea es tomar diferentes valores (datos) y atribuirles una representación gráfica y visual, utilizando el diseño en nuestra forma de programar y en nuestra forma de mostrar lo que hacemos.

Para continuar con el trabajo en processing, utilizaremos la identidad circular, graficando ahora con coordenadas polares y no cartesianas. Al trabajar con la dimensión vertical y horizontal de un círculo hablamos de funciones asociadas al seno y coseno de un ángulo.

Códigos

  • radians() Para convertir una medida de grados en radianes. 2 * PI radianes equivalen a 360 grados en un círculo.
  • cos() y sin() para graficar seno y coseno, devuelven valores entre 1 y -1.

La identidad circular esta dada por:

  • x = cos(theta)* r
  • y = sin(theta)* r


Por ejemplo, comparemos dos tipos de movimiento. Primero, generamos movimiento a partir de un incremento aleatorio:

float x,y;

void setup(){
 size (700,700);
 background (0);
 x = width/2;   //ubicación inicial de
 y = height/2;  // 'x' e 'y'
}

void draw(){
 ellipse (x,y,3,3);  // dibujo elipse 
 x += random (-5,5); // genera movimiento aleatorio 
 y += random (-5,5); // en 'x' e 'y'
}

Por otro lado, si utilizamos las ecuaciones para generar identidad circular el movimiento obtenido es más armónico y menos aleatorio:

float x,y;
float t,r; // para el ángulo y el radio

void setup(){
 size (700,700);
 background (0);
 x = width/2;
 y = height/2;
 t = random(TWO_PI); // declaro variables a utilizar
 r = 2;
}

void draw(){
 ellipse (x,y,3,3);
 t += random(-0.5,0.5);
 x += cos(t) * r;       // identidad circular
 y += sin(t) * r;       // identidad circular
}


Utilizamos pushMatrix() y popMatrix() para 'empujar' la matriz actual o devolverla a su estado inicial. Nos permite realizar diferentes transformaciones como rotar, trasladar y escalar.

pushMatrix();

traslate (x,y);
rotate (t);
scale (sc); 

popMatrix();

Arreglos

Utilizamos arreglos para generar una colección de objetos, los cuales están declarados como una 'clase':

Clase = objeto / Arreglo = colección de objetos

Teóricamente

float[] fa;          // declaro 
fa = new float[100]; // inicializo el arreglo
fa[0] = ..           // le doy valores a cada módulo
fa[1] = .. 
class Fa {}          // declaro una clase (siempre las clases con Mayúsculas)


Un ejemplo concreto

Particula[] p; // declaro
int num;       

void setup(){
  size(700, 100);
  background(0);
  num = 90; // cantidad de particulas

  p = new Particula[num];  // iniciar arreglo 
  for(int i = 0; i < num; i++){ 
    p[i] = new Particula();     
 }
}

void draw(){
  stroke(255, 150);
  for(int i = 0; i < num; i++){ // ciclo for, de 0 a 89 particulas
    p[i].go();                  // realice 'go' (declarado en la clase particula)
 }
}

class Particula{
  float x, y;  
  float r, vel; // radio y velocidad
  float ang = 0.0; // ángulo

Particula(){
  x = 10;  // posición inicial en eje 'x'
  y = 10;  // e 'y'
} 
  
void go(){
  vel = 0.05; 
  ang += vel; // el ángulo más la vel
  r = cos(ang)+2;  
  x += cos(ang) * r;    // identidad circular
  y += sin(ang) * r;    // identidad circular 
  ellipse(x, y, 1, 1);  // crear elipse 
}
}

Tarea

Elaborar a partir los ejemplos un programa con arreglo de partículas animado, que pueda ser guardado e impreso como pdf, controlando la cantidad de frames grabados en un archivo.

Proyecto

Pensar en una forma de visualizar el 'poder', ¿Qué herramienta podemos crear para la toma de desiciones? o ¿Qué herramienta para visualizar el poder podemos crear?. Como base tenemos estadísticas e información de la misma universidad y su organización como institución. ¿Podemos vincular a las personas con cierto grado de influencia o tipo de poder que poseen dentro de la institución?.

Enlaces


--Jabu 05:31 21 jul 2010 (UTC)

Clase 4

  • Fecha: Lunes 19 de Julio de 2010.
  • Palabras Claves: Processing, Proyecto Grafica Digital

Proponer por lo menos 2 temas con el cual se puede lograr una visualización construida en processing y que permite ver una postura sobre ello. Obtener los datos de el tema para comenzar a ver las variables que se pueden obtener

Pensar en una metáfora gráfica que tiene una representación de datos con:

  • Referencias
  • Bibliografía
  • Pensar que la visualización es impresa (evitar animaciones)

Al construir una visualización hay que plantearse la elegancia de Processing

Para no tener problemas con la tipografía en el momento de reproducir el arreglo declarar fuera del setup lo siguiente

textFont (...)
------------------------------
printIn(PFont list()); // Genera un listado de las Fuentes Instaladas

para declarar un arreglo de numeros:

int[]nums;// Declaro un arreglo de números con una coordenada, por tener un solo []
nums = new int [3600] // cantidad de arreglos

Ejemplo,Guarda lo siguiente:

nums[0]= 47
nums[1]= 12
nums[2]= 32
.
.
.
num[3599]=0


en cambio si digo lo siguiente:

int[][]cords; // Declaro coordenadas vidimencionales
cords = new int [100][2]

cords[0][0]= x
cords[0][1]= y


Tarea

  • Traer escrita la propuesta de Visualización (2 propuesta por lo menos)
  • Obtener los Datos de las propuestas
  • Subir a la Wiki la documentación de las propuestas

--Gcaro.rvan 21:40 23 jul 2010 (UTC)


Clase 5

  • Fecha: Lunes 26 de Julio de 2010.
  • Palabras Claves: Processing, Proyecto Grafica Digital

Clase 6

  • Fecha: Lunes 2 de Agosto de 2010.
  • Palabras Claves: Processing, Proyecto Grafica Digital


Para el desarrollo del proyecto, es importante comenzar a familiarizarse con ejemplos de visualizaciones, para esto, es bueno importar algunas de las bibliotecas que ofrece processing, en las que encontramos distintos elementos para usar según lo que queramos.

Algunos ejemplos son:

  • Video: interfaz (para QuickTime) para el uso de cámaras, visualización de archivos de películas y creación de estas
  • Network: envío y recibo de datos vía Internet, a través de la creación simple de clientes y servidores.
  • Serial: admite el envío de datos entre Processing y un hardware externo vía serial de comunicación (RS-232)
  • PDF Export: generar archivos PDF
  • Open GL: lenguaje que se comunica directamente con la tarjeta de video, para dibujos más acelerados
  • Minim: usa el JavaSound API para dar una bliblioteca de audio de uso fácil
  • DXF Export: creación de vértices en 3D que pueden ser enviados directamente a un archivo DXF
  • Arduino: permite el control directo en un tablero Arduino (micro processador) a través de Processing
  • Netscape-JavaScript: métodos para las interfaces entre JavaScript y los Applets de Java exportados desde Processing


Además de estas bibliotecas, existen muchas otras, como por ejemplo para "Importar/Exportar" (usada para que Processing haga distintas cosas e interfaces) y "Shapetween" (funciones normalizadas, es decir con valores entre 0 y 1, para pasar de un lado a otro). La biblioteca que puede ser muy útil para nosotros, es la de Datos/Protocolos, dentro de la cual se encuentra un elemento llamado XlsReader, que sirve para leer archivos .xls (OpenOffice o Microsoft Excel).


Para instalar esta biblioteca:

  1. Bajar la Version 0.0.10 de XlsReader
  2. Salir de Processing (si es que se encuentra funcionando)
  3. Mover el archivo XlsReader-0.0.10.zip a la carpeta libraries de Processing (si no existe, se crea una)
  4. Descomprimir el archivo zip y renombrarlo como XlsReader
  5. Abrir Processing y ver uno de los ejemplos de la biblioteca


El ejemplo europe en esta biblioteca, si bien es simple, muestra un modo de construir una visualización de datos a partir de determinadas varibles, como ciudad, longitud, latitud y año, presentes en una tabla excel.

Para el proyecto se deben construir objetos a partir de la tabla de datos que tengamos y saber el espacio en que estos se visualizarán, y para esto es necesario comenzar pronto a ver el código.

Enlaces


--Sofia savoy 04:51 3 ago 2010 (UTC)

Herramientas