Está en la página 1de 74

MANUAL DE PRCTICAS

GRAFICACIN
SCC-1010

PLAN ISIC-2010-224

INGENIERA EN SISTEMAS COMPUTACIONALES

ndice
INTRODUCCIN ---------------------------------------------------------------------------------------------------------------1 PRCTICA 1 Primitivas de Graficacin ------------------------------------------------------------------------------------------------------2 PRCTICA 2 Grficos en mapas de bits ----------------------------------------------------------------------------------------------------8 PRCTICA 3 Grficos Vectoriales ------------------------------------------------------------------------------------------------------------17 PRCTICA 4 Transformacin ventana-rea de vista 1 ----------------------------------------------------------------------------------21 PRCTICA 5 Transformacin ventana-rea de vista 2 ----------------------------------------------------------------------------------28 PRCTICA 6 Transformaciones Geomtricas 2D ----------------------------------------------------------------------------------------34 PRCTICA 7 Transformaciones Geomtricas 3D ----------------------------------------------------------------------------------------40 PRCTICA 8 Curvas de Bzier ----------------------------------------------------------------------------------------------------------------44 PRCTICA 9 Superficies 3D -------------------------------------------------------------------------------------------------------------------52 PRCTICA 10 Caras Ocultas --------------------------------------------------------------------------------------------------------------------56 PRCTICA 11 Cmara Sinttica ----------------------------------------------------------------------------------------------------------------63

LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR -------------------------------------------------------71 LISTA DE BIBLIOGRAFA REQUERIDA --------------------------------------------------------------------------------71 CONTROL DE CAMBIOS DEL MANUAL DE PRCTICAS --------------------------------------------------------72

Graficacin [SCC-1010]

INTRODUCCIN
Se estudiara de manera global el mundo da la Graficacin por computadora, pero desde un punto de vista de la programacin, mas no del diseo grafico. Para ello empezaremos estudiando algunos conceptos bsicos, que seguramente muchos ya sabremos y en algn momento los hemos visto pero sin la intensin de analizarlos ni mucho menos cual ha sido el impacto que tiene la graficacin.

Nos detendremos con mayor profundidad para analizar los grficos en 2D y los grficos en 3D

Las prcticas descritas en este manual pretenden guiar al alumno en su proceso de aprendizaje en java para la programacin, manipulacin y modelado de grficos.

Fecha de Actualizacin 15/08/2013

Pgina 1

Graficacin [SCC-1010]

Prctica

PRIMITIVAS DE GRAFICACIN
Observaciones: Esta prctica incluye a la Prctica # 1 del temario de Graficacin que dice Primitivas de Graficacin.

1.- OBJETIVO Elaborar un programa que ilustre el uso de las principales primitivas de graficacin provistos por un Lenguaje de Programacin. (Para dibujar pxeles, lneas, rectngulos, valos, etc).

2.- MARCO TERICO Dentro del rea de cmputo grfico, existen elementos bsicos para el dibujado de formas, a stos elementos bsicos se les llama: Primitivas de Graficacin. Dentro de las primitivas de graficacin, tenemos:

Punto: es una figura adimensional, es decir, no tiene longitud, rea, volumen y ningn otro ngulo dimensional. Describe una posicin en el espacio, determinada respecto de un sistema de coordenadas preestablecidas. Es la ms bsica de las primitivas de dibujo. En computo, es el dibujo de un pixel de la pantalla definidos por su posicin y color (RGB).

En OpenGL: Para crear puntos independientes en nuestra ventana, usaremos la instruccin: glBegin(GL_POINTS); Y despus indicar las coordenadas del punto: glVertex2f(.5f,.5f); Por ltimo, indicar que hemos terminado: glEnd();

Lneas: es una sucesin continua e indefinida de puntos en la sola dimensin de la longitud, dependiendo de la forma de la lnea, as se define como recta, circular, etc. Existen diferentes algoritmos computacionales para trazado de lneas, algunos algoritmos son DDA (Digital Differential Analizer) Simple o simtrico y el algoritmo de punto medio, tambin llamado Bresenham.

Fecha de Actualizacin 15/08/2013

Pgina 2

Graficacin [SCC-1010]

En OpenGL: Para crear una lnea, la forma es muy similar a la de los puntos, la instruccin es la siguiente: glBegin(GL_LINES); Despus, debemos de indicar las coordenadas (en par de) de la lnea a crea: glVertex2f(0.75f,0.75f); glVertex2f(.5f,.5f) Por ltimo indicamos que hemos terminado: glEnd();

Circunferencias: es el lugar geomtrico de los puntos de un plano que equidistan de otro punto fijo y coplanario llamado centro en una cantidad constante llamada radio. Las circunferencias se pueden lograr trazando varios segmentos de lnea de tal forma que el inicio de la primer lnea este conectado con el final de la ltima lnea Polgonos: es una figura plana compuesta por una secuencia finita de segmentos rectos consecutivos que cierran una regin en el espacio. Estos segmentos son llamados lados, y los puntos en que se intersecan se llaman vrtices.

En OpenGL, podemos crear tringulos con la instruccin: glBegin(GL_TRIANGLES); Despus indicaremos la posicin de cada uno de los vrtices del tringulo y por ltimo, terminaremos. glVertex2f(.5f,.5f); glVertex2f(0.75f,0.75f); glVertex2f(0.5f,0.75f); glEnd();

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL Entorno de desarrollo NetBeans 7.3 o DevC

Fecha de Actualizacin 15/08/2013

Pgina 3

Graficacin [SCC-1010]

4.- COMPETENCIAS ESPECFICAS Configurar el lenguaje de programacin con las libreras de dibujo, una ves que este completamente configurado, escribir el siguiente programa:

/* Prctica: Creacin de puntos con JOGL * Nmero de Prctica: 1 * Nombre de la prctica: pr1_puntos */

//Librerias necesarias para el manejo de la libreria GL import javax.media.opengl.GL; import javax.media.opengl.GLAutoDrawable; import javax.media.opengl.GLCanvas; import javax.media.opengl.GLCapabilities; import javax.media.opengl.GLEventListener;

//Para el manejo de libreria GLU: import javax.media.opengl.glu.GLU;

//Necesaria para el manejo de ventanas en Java import javax.swing.JFrame;

public class pr1_puntos extends JFrame{

public pr1_puntos() { //Establece el ancho y alto de nuestra ventana de visualizacin this.setSize(600,600);

//Establece la posicin de la esquina superior izquierda de la ventana de visualizacin this.setLocation(350,150);

//Establece el nombre de la ventana this.setTitle("Prctica 1: Creacion de puntos");

//Creamos una instancia de la clase GraphicListener: GraphicListener listener = new GraphicListener();

//Agregamos los listener a nuestyro canvas GLCanvas canvas = new GLCanvas(new GLCapabilities());

Fecha de Actualizacin 15/08/2013

Pgina 4

Graficacin [SCC-1010]
canvas.addGLEventListener(listener); getContentPane().add(canvas); }// constructor

public static void main(String[] args) { pr1_puntos miVentana = new pr1_puntos(); miVentana.setVisible(true); miVentana.setDefaultCloseOperation(EXIT_ON_CLOSE); }// main

public class GraphicListener implements GLEventListener{ public void display (GLAutoDrawable arg0){ //inicializa la libreria GLU GLU glu = new GLU();

//inicializamos la libreria GL GL gl = arg0.getGL();

// Establece el color de fondo de la ventana de visualizacin en Negro // Recuerda que estamos trabajando en el modelo de color RGB. // En graficacin, al modelo RGB, se le aumenta un Canal, por lo que nos queda: // RGB-A, donde A es el canal Alpha, el cual nos permite manejar un nivel // de opacidad en la ventana. gl.glClearColor(0.0f, 0.0f, 0.0f,0.0f);

//Indicamos que hay una proyeccin gl.glMatrixMode(GL.GL_PROJECTION); // Indicamos el tipo de proyeccin, as como sus propiedades. // Las proyecciones las tomamos de la libreria GLU glu.gluOrtho2D(0.0f, 200.0f, 0.0f, 150.0f);

//Limpiamos el buffer de nuestra pantalla gl.glClear(GL.GL_COLOR_BUFFER_BIT);

// Establece el color a dibujar en rojo: gl.glColor3f(1.0f, 0.0f, 0.0f);

//Indicamos el tamao en pixeles de los puntos: gl.glPointSize(10);

Fecha de Actualizacin 15/08/2013

Pgina 5

Graficacin [SCC-1010]
// Indicamos que iniciamos a crear una lnea: gl.glBegin(GL.GL_POINTS); //Establecemos la posicin del primer punto gl.glVertex2i(180,15);

//Establecemos la posicin del segundo punto gl.glVertex2i(10,145);

//Indicamos que hemos terminado de dibujar puntos gl.glEnd();

//Mandamos a graficar a pantalla. gl.glFlush(); }//display...

public void displayChanged(GLAutoDrawable arg0, boolean arg1, boolean arg2){} public void init(GLAutoDrawable arg0){ GL gl =arg0.getGL(); gl.glEnable(GL.GL_BLEND); gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA); }// init.

public void reshape(GLAutoDrawable arg0, int arg1,int arg2, int arg3, int arg4){}

}//display... }// pr1_puntos

Una vez que se termine de pasar ste cdigo, hay que guardar la prctica, compilar y ejecutar el programa. Observa los resultados obtenidos. Cambia el tamao de los puntos, su ubicacin, el color de cada uno. Despus cambia las lneas de cdigo para crear dos lneas paralelas en el centro de la ventana, crea un polgono de cuatro lados que enmarque las dos lneas paralelas.

5.- RESULTADOS Al finalizar sta prctica el alumno deber generar un reporte electrnico donde explique los cambios que se fueron realizando junto con la impresin de las pantallas de cada cambio.

Fecha de Actualizacin 15/08/2013

Pgina 6

Graficacin [SCC-1010]

6.- CONCLUSIONES Con sta prctica, el alumno aprender a crear las formas bsicas (primitivas) de dibujo en 2D, como es un punto, una lnea, un polgono o una circunferencia.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 7

Graficacin [SCC-1010]

Prctica

GRFICOS EN MAPAS DE BITS


Observaciones: Esta prctica incluye a la Prctica # 2 del temario de Graficacin que dice Grficos en mapas de bits..

1.- OBJETIVO Elaborar un programa que lea y despliegue un grfico bitmap almacenado en un archivo binario con un formato predefinido.

2.- MARCO TERICO Bsicamente, los formatos grficos son archivos en los cuales se guarda informacin que conforma una imagen. Cada formato es independiente. Las posibilidades que ofrece cada formato con respecto a la gama de colores, a la compatibilidad, a la rapidez de carga, etc., merece ser explicada para determinar cul de ellos es el ms adecuado para la tarea que estamos realizando.

Con respecto a la estructura, la mayora posee un header que indica al programa que lo solicite, las caractersticas de la imagen que almacenan; por ejemplo su color, tipo, resolucin, etc.

Cada formato tiene una organizacin propia de su estructura.

Se pueden dividir en dos grandes grupos: los formatos vectoriales y los formatos bitmap.

En este caso trabajaremos con el formato PCX por su facilidad de manejo y estructura.

Antes de empezar debemos conocer los siguientes conceptos: Modos de vdeo Modo 13h Memoria de vdeo en el modo 13h Retraso Vertical Buffer para descompresin Paleta Pgina 8

Fecha de Actualizacin 15/08/2013

Graficacin [SCC-1010] Modos de vdeo Las tarjetas grficas soportan varios modos de vdeo. Pueden dividirse principalmente en dos grandes grupos: modo texto y modo grfico. El modo texto, como su propio nombre indica, slo permite mostrar caracteres; sin embargo, el modo grfico permite mostrar en pantalla pixels. Hay gran cantidad de

Modos grficos que se diferencian sobre todo en la resolucin, los colores que soporta y el modo de direccionamiento. En el ejemplo que vamos a ver se utiliza el modo 13h. Retrazo Vertical La imagen que vemos en nuestro monitor no es en s una imagen sino un conjunto de puntos muy prximos entre s que se van refrescando a una alta velocidad, tan alta que el ojo del ser humano no es capaz de distinguirlo. Es debido a esta limitacin que podemos ver las imgenes que nos muestran el monitor. El mtodo usado por los monitores para escribir la memoria de vdeo en la pantalla es el siguiente: se escribe en la pantalla pixel a pixel de izquierda a derecha; cuando se acaba la lnea se realiza el mismo proceso con la siguiente lnea (volviendo a escribir de izquierda a derecha). Esto se repite hasta que llegamos a la ltima lnea. Aqu no hay siguiente lnea para seguir por lo que la posicin donde escribir el nuevo pixel debe ser el primero (el de la izquierda) de la primera lnea. Esto supone un movimiento desde la esquina inferior derecha a la esquina superior izquierda). En el periodo que dura este movimiento no se produce ningn refresco. Este momento es muy til y vamos a explicar el porqu: Si modificamos la memoria de vdeo mientras que esta se est refrescando ocurrir un parpadeo porque se tendr parte de la imagen antigua en pantalla y parte de la nueva y despus se sustituir la parte antigua por la nueva (provocando el parpadeo). Es por ello que en la medida de lo posible esperaremos al retraso vertical para hacer cualquier actualizacin en la memoria de vdeo. Buffer para descompresin Cuando descomprimimos la imagen, los pixels que vamos hallando se van pintando uno a uno. Esto produce un efecto desagradable a ver en la pantalla como se forma la imagen. Para solucionar este problema reservaremos memoria en un buffer que representar una pantalla virtual y

descomprimiremos en l el fichero (en lugar de hacerlo en la pantalla). Despus los que haremos ser copiar el buffer en la memoria de vdeo con unas instrucciones en ensamblador (para hacer la copia ms rpida) mientras que se est realizando el retraso vertical. Paleta En el modo 13h slo se pueden usar 256 colores. Esto sera un gran inconveniente si slo hubiera 256 colores predeterminados. Por suerte podemos elegir qu 256 colores queremos de entre una amplia gama de colores. Para hacer esta eleccin lo que se hace es elegir primero el nmero de color (por ejemplo 15) y despus le indicamos que componente de rojo, verde y azul queremos en ese color (en el

Fecha de Actualizacin 15/08/2013

Pgina 9

Graficacin [SCC-1010] intervalo 0 (min), 64 (max)). As, si queremos que el 15 sea de color blanco deberemos indicar R=G=B=64.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Utileria Debug Procesador de palabras Computadora Borland C

4.- COMPETENCIAS ESPECFICAS El formato PCX es admite muchas resoluciones y colores. Nosotros, sin embargo, nos centraremos en la resolucin 320*200 y en 256 colores para facilitar la explicacin.

Los pasos de los que consta el visualizador son los siguientes:

Abrir fichero y reservar memoria para el buffer Comprobar los posibles fallos en estas operaciones as como la validez del fichero PCX ledo. Seleccionar el modo grfico 13h. Establecer la paleta y descomprimir el fichero PCX en el buffer (se ver con ms detalle). Esperar el retrazo vertical. Copiar el buffer en la memoria de vdeo. Liberar la memoria y cerrar el fichero. Esperar la pulsacin de una tecla por parte del usuario. Volver a modo texto.

El formato de compresin PCX se basa en no repetir datos consecutivos con el mismo valor, sustituyndolos por un nmero que indica la cantidad de repeticiones seguido del dato a repetir. Tenemos por lo tanto dos clases de bytes: los que indican que hay repeticin y los que indican un pixel. Los bytes que indican repeticin tienen sus dos primeros bits puestos a 1, es decir, son de la forma 11xxxxxx donde xxxxxx representa el nmero de veces que se repite el byte que est a continuacin

Teclee el siguiente programa y grbelo como pcx.c

Fecha de Actualizacin 15/08/2013

Pgina 10

Graficacin [SCC-1010]

/* PCX es un programa que visualiza ficheros con formato grafico PCX de tipo 320*200 en 256 colores usando el modo 13h. Requiere como parmetro el nombre del fichero PCX a visualizar. Ejemplo: PCX EJEMPLO.PCX */ #ifdef __TINY__ #error Este programa no puede compilarse en modo TINY ( por farmalloc() ) #endif #include #include #include #include #include #include <stdio.h> <stdlib.h> <alloc.h> <dos.h> <conio.h> <string.h> /* /* /* /* /* /* por por por por por por printf() y operaciones con ficheros */ exit() */ farmalloc(), farfree() */ intr(), inportb() */ getch() */ strcmp() */

void ponpaleta(char *paleta, int colores); void palpcx2vga(char *paleta); void ponpcx(FILE *in, char far *pantalla); int ponpcxmemo(FILE *in); void video(char modo); void copiamem(char far *fuete, char far *destino); void EsperaRetrazo(void); main(int argc, char *argv[]) { char paleta[768]; /* 768 = 256 * 3 */ char far *buffer; FILE *in; /* si el primer argumento es /?, /H o /h o no se indica ningn

argumento se muestra esta ayuda */ if( !strcmp(argv[1], "/?") || !strcmp(argv[1], "/H") || !strcmp(argv[1], "/h") || argc<2) { printf("\nVISUALIZADOR DE FICHEROS .PCX CON FORMATO 320*200" "\nRealizado por Jose Antonio Martinez Heras" "\n" "\nIndique el fichero .PCX a visualizar" "\nSintaxis: %s FICHERO.PCX\n", argv[0]); exit(0); }

Fecha de Actualizacin 15/08/2013

Pgina 11

Graficacin [SCC-1010] buffer = (char far *) farmalloc(64000); if(buffer==NULL) { printf("\nNo hay memoria suficiente, faltan 64kb\n"); exit(-1); } in=fopen(argv[1],"rb"); /* Abre el fichero para lectura en modo binario */

if(in==NULL) { printf("\nError abriendo el fichero \"%s\"\n", argv[1]); exit(1); } /* comprobamos la autenticidad del fichero PCX */ /* para que sea un autentico PCX su primer byte debe valer 10 */ fseek(in, 0L, SEEK_SET); if(fgetc(in)!=10) { printf("\n%s no es un aut\'entico PCX\n", argv[1]); fclose(in); exit(2); } ponpcx(in, buffer); fclose(in); EsperaRetrazo(); parpadeos */ /* llama al procedimiento que pone en pantalla el fichero PCX */ /* cierra el fichero */ /* Espera retrazo vertical para evitar

/* Ahora copio la pantalla del buffer a la memoria de video */ copiamem(buffer, (char far *) 0xA0000000); farfree(buffer); /* libera la memoria del buffer */

fflush(stdin); getch(); video(3); return 0; }

/* limpia buffer de entrada */ /* espera a que se pulse una tecla */ /* vuelve a modo texto */ /* fin del programa */

/* Convierte la paleta PCX a paleta VGA */ void palpcx2vga( char *paleta ) { register int i;

Fecha de Actualizacin 15/08/2013

Pgina 12

Graficacin [SCC-1010]

for(i=0; i<768; i++) *(paleta+i)>>=2; */ }

/* 768 = 256*3 */ /* *(paleta+i) = *(paleta+i) >> 2 */ /* equivale a dividir por 4 cada elemento

/* Establece la paleta utilizado el servicio 0x10, subservicio 0x12 de la interrupcion 0x10 (video)*/ void ponpaleta(char *paleta, int colores) { struct REGPACK pal; pal.r_es=FP_SEG(paleta); pal.r_dx=FP_OFF(paleta); pal.r_ax=0x1012; pal.r_cx=colores; pal.r_bx=0; intr(0x10, &pal); } void ponpcx( FILE *in, char far *pantalla ) { unsigned pcxcont; unsigned register char byte, repetir; char paleta[768]; fseek(in, -768L, SEEK_END); fread(paleta, 768, 1, in); video(0x13); palpcx2vga(paleta); /* Es donde esta la paleta PCX */ /* Copio la paleta en memoria */

/* modo grafico 320*200 (13h) */ /* transformo la paleta del formato PCX a la paleta que admite la VGA */ ponpaleta(paleta, 256); /* establezco la paleta */ /* A partir del 128 byte empiece el

fseek(in, 128L, SEEK_SET); fichero PCX comprimido */ /* DECODIFICACION: --------------

Si hay algun byte con los dos primeros bits puestos a 1, es decir, 11xxxxxx, entonces en xxxxxx esta el numero de veces que se repite el byte que viene a continuacion */ pcxcont=0; dibujados */ /* pcxcont se encargara de contar los pixel que llevamos

Fecha de Actualizacin 15/08/2013

Pgina 13

Graficacin [SCC-1010] while(pcxcont<64000){ byte=fgetc(in); /* byte tiene la informacion del byte leido del fichero PCX*/ if(byte>=192) { de repetir */ byte=fgetc(in); while(repetir--) como indique */ /* se lee el siguiente byte */ /* y se escribe tantas veces /* tiene los dos bits a 1, 11xxxxxxx */ repetir=byte & 0x3F; pcxcont+=repetir; /* byte AND 00111111 */ /* se aade a pcxcont el valor

*(pantalla++)=byte; pantalla */ } else bits a 1 */ {

/* aumentando en 1 la siguiente posicion en la que se escribira en la /* si no tiene los dos primeros pcxcont++; *(pantalla++)=byte; /* se aade 1 a la pcxcont */ /* se escribe el byte tal cual aumentado en 1 la siguiente en la que se escribira en la

posicion pantalla */ } } } void video(char modo) { asm{ mov ah,0 mov al,modo int 10h } return; } /* Establece el modo de video en "modo" */ /* del while(pcxcont<64000) */

return;

void copiamem(char far *fuente, char far *destino) { /* copia una zona de memoria en otra */ asm{ push push push push es ds si di

Fecha de Actualizacin 15/08/2013

Pgina 14

Graficacin [SCC-1010]

lds les mov cld rep pop pop pop pop } return; }

si,fuente di,destino cx,32000 movsw di si ds es

void EsperaRetrazo(void) /* espera el retrazo vertical */ { while ( (inportb(0x3DA) & 8) != 0) ; while ( (inportb(0x3DA) & 8) == 0) ; return; }

Este formato tiene el problema de que para pintar un pixel cuyo valor sea superior o igual a 192 siempre debe utilizar el mtodo de las repeticiones (aunque slo haya un pixel del mismo valor consecutivo). Esto es debido a que estos nmeros, en binario, se corresponden con nmeros de la forma 11xxxxxx (el descompresor creera que le estamos indicando una repeticin). La solucin a este problema sera usar un nmero de la forma 11xxxxxx poniendo en xxxxxx = 000001 (si es que slo se repite una vez) y a continuacin el pixel mayor que 192 que queramos escribir (pues en el segundo pixel no se comprueban las repeticiones). De esto se deduce que en imgenes complejas, donde haya gran variedad de valores de pixels tendr que recurrirse a este mtodo para almacenar los pixels cuyos valores sean mayores a 191 repercutiendo esto gravemente en la compresin.

1. Compile el programa 2. Ejecute el programa tecleando lo siguiente: pcx eyes.pcx Lo que veremos a continuacin es lo siguiente:

Fecha de Actualizacin 15/08/2013

Pgina 15

Graficacin [SCC-1010]

5. RESULTADOS Al finalizar esta prctica, el alumno deber entregar un reporte de sta prctica en formato digital. En el cual incluya los comentarios de la realizacin de la prctica.

6. CONCLUSIONES El verificar los datos por medio de la utilera debug, nos da a conocer a una imagen parte por parte, lo que nos permitir posteriormente tener conciencia de que una imagen no es ms que la interpretacin numrica de un archivo que contiene informacin sobre colores, posicin, tipo de paleta, forma de compresin, etc.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 16

Graficacin [SCC-1010]

Prctica

GRFICOS VECTORIALES
Observaciones: Esta prctica incluye a la Prctica # 3 del temario de Graficacin que dice Grficos Vectoriales.

1.- OBJETIVO Elaborar un programa que permita generar un archivo PDF utilizando una API de programacin como iText de Bruno Lowagi para Java o la fpdf de PHP. El archivo debe contener lneas, crculos, rectngulos, imgenes y texto.

2.- MARCO TERICO Los grficos vectoriales, tambin conocidos como grficos orientados a objetos, son el segundo gran grupo de imgenes digitales. Son ms simples que los grficos de mapas de bits, ya que en ellos las imgenes se almacenan y representan por medio de trazos geomtricos controlados por clculos y frmulas matemticas, tomando algunos puntos de la imagen como referencia para construir el resto.

Por lo tanto, las imgenes en los grficos vectoriales no se construyen pxel a pxel, sino que se forman a partir de vectores, objetos formados por una serie de puntos y lneas rectas o curvas definidas matemticamente.

Por ejemplo, una lnea se define en un grfico de mapa de bits mediante las propiedades de cada uno de los pxeles que la forman, mientras que en un grfico vectorial se hace por la posicin de sus puntos

Fecha de Actualizacin 15/08/2013

Pgina 17

Graficacin [SCC-1010] inicial y final y por una funcin que describe el camino entre ellos. Anlogamente, un crculo se define vectorialmente por la posicin de su punto central (coordenadas x,y) y por su radio (r).

Cada vector en un grfico vectorial tiene una lnea de contorno, con un color y un grosor determinados, y est relleno de un color a elegir. Las caractersticas de contorno (o filete) y relleno se pueden cambiar en cualquier momento.

Las imgenes vectoriales se almacenan como una lista que describe cada uno de sus vectores componentes, su posicin y sus propiedades.

En cuanto a la resolucin, los grficos vectoriales son independientes de la resolucin, ya que no dependen de una retcula de pxeles dada. Por lo tanto, tienen la mxima resolucin que permite el formato en que se almacena. Curvas de Bzier Los principales elementos constituyentes de un vector son las denominadas curvas de Bzier, desarrolladas por Pierre Bzier por encargo de la empresa Renault, que buscaba una familia de curvas representables matemticamente (son curvas de tercer grado) que permitieran representar las curvaturas suaves que deseaban dar a sus automviles.

Fecha de Actualizacin 15/08/2013

Pgina 18

Graficacin [SCC-1010] Una curva Bzier queda totalmente definida por cuatro puntos caractersticos, los puntos inicial y final de la curva (nodos o puntos de anclaje) y dos puntos de control (puntos de control, manejadores o manecillas), invisibles en el grfico final, que definen su forma. Para modificar su forma, basta cambiar de posicin uno de sus nodos o uno de sus puntos de control.

Son curvas de manejo poco complejo y muy elegantes, con un desarrollo muy suave, capaces de adaptarse a casi cualquier forma imaginable, por lo que son muy usadas para disear logotipos e iconos y para copiar cualquier figura. Tambin son enormemente verstiles, pudiendo adoptar desde curvaturas muy suaves (casi lneas rectas) a curvaturas muy fuerte (curvas complejas), pasando por todos los valores intermedios. Pueden, incluso, cambiar de cncavas a convexas alrededor de un punto. Ventajas y limitaciones de los grficos vectoriales Las principales ventajas que ofrecen los grficos vectoriales, derivadas de su naturaleza matemtica, son: Almacenan las imgenes en archivos muy compactos, ya que slo se requiere la informacin (frmulas matemticas) necesaria para generar cada uno de los vectores. dado que no se ha de almacenar informacin para definir cada punto de la pantalla, sino una serie de frmulas matemticas. Permiten modificar el tamao de las imgenes y de sus objetos componentes sin que se produzca prdida de informacin, pues se actualizan de forma matemtica todas las nuevas relaciones y posiciones de los elementos geomtricos que las componen. Con ello, los cambios de tamao de las imgenes vectoriales no afectan a la calidad de las mismas, apareciendo siempre con la misma nitidez. Son muy tiles a la hora de imprimir imgenes, ya que no es necesario pasar a la impresora la informacin de cada punto. Basta con ir pasndole la informacin de los vectores que forman la imagen. Cada objeto viene definido por sus propias frmulas matemticas y se maneja

independientemente del resto, pudiendo escalarse, distorsionarse y cambiarse de forma o de posicin sin afectar para nada los otros elementos del dibujo. Es posible un control independiente del color, tanto del contorno como del relleno, admitiendo la aplicacin de texturas, degradados, transparencias, etc. Se puede controlar con gran precisin la forma, orientacin y ordenacin de los elementos. Cualquier efecto que se aplique a los objetos puede rectificarse en cualquier momento, ya que el dibujo es siempre editable. Esto no ocurre en las imgenes de mapas de bits, en las que una vez pintado un elemento ya no es posible modificarlo. Fecha de Actualizacin 15/08/2013 Pgina 19

Graficacin [SCC-1010] Es fcil reutilizar un dibujo o una parte del mismo en otros proyectos. Basta copiarlo y pegarlo en un nuevo fichero o en uno ya existente. Los objetos del grfico pueden fusionarse fcilmente entre s, creando una serie de formas intermedias. Por ejemplo, se puede pasar de un cuadrado a un tringulo en cinco formas interpoladas. Se puede relacionar de diferentes formas con el resto de objetos del grfico (agrupar, separar, recortar, intersectar, etc.). Se puede ordenar las formas de cualquier manera si est en superposicin unas con otras. Permiten un manejo de textos muy avanzado, ya que admiten fuentes TrueType, que tambin son objetos vectoriales. Adems, las letras se pueden convertir en contornos editables, descomponiendo un texto en los objetos vectoriales que lo constituyen. Una vez convertidas las letras en objetos, ya no har falta tener instalada la fuente para seguir editando los contornos, porque ya no sern letras, sino objetos dentro del grfico vectorial, pudiendo ser modificadas como tales. Se pueden incluir bitmaps en un dibujo vectorial, bien para rellenos de formas, bien como elementos separados. En el otro sentido, un vector puede exportarse a un formato de mapa de bits estndar, como GIF o JPG.

Hasta la aparicin de Macromedia Flash y los ficheros SWF la inclusin directa de grficos vectoriales en la web no era posible. Su introduccin en las pginas web supuso un considerable avance, ya que permiten incluir grficos de tamao modificable sin prdida de calidad, muy tiles en logotipos, planos, diagramas, etc. Como ejemplo, si pulsis sobre la imagen siguiente con el botn derecho del ratn y seleccionis "Aumentar" (Zoom In) o "Reducir" (Zoom Out), sta cambiar de tamao conservando sus caractersticas visuales. El principal inconveniente de las imgenes vectoriales es que tiene un aspecto ms fro que los grficos de mapa de bits, con su contorno demasiado perfecto, que los hace a veces poco naturales, aunque siempre es posible crear premeditadamente contornos un poco irregulares, para que se parezca algo ms al dibujo natural.

Fecha de Actualizacin 15/08/2013

Pgina 20

Graficacin [SCC-1010] Otros inconvenientes de este tipo de grficos son su falta de eficacia para representar imgenes de tipo fotogrfico, la dificultad que presenta para tratar algunas efectos (sombras, luces, etc...) y que cuando son muy grandes o muy complejas pueden volverse extremadamente difciles de manejar por los programas grficos y por los medios de impresin.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Libreras de dibujo OpenGL o JOGL iTex para Java Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Entorno de desarrollo NetBeans 7.3 o DevC

4.- COMPETENCIAS ESPECFICAS El alumno deber descargar el software de iTex para que lo instale y configure en el lenguaje de programacin Java. ste software nos permitir imprimir en formato pdf la salida a pantalla de nuestro grfico vectorial que se va a crear.

El grfico que deber crear el alumno es alguna de las siguientes imgenes con el uso de vectores de dibujo

Fecha de Actualizacin 15/08/2013

Pgina 21

Graficacin [SCC-1010] Al terminar de crear el programa que contenga grficos vectoriales, el alumno deber compilar y ejecutar el programa para que posteriormente pueda mandar a imprimir en formato pdf la salida de pantalla. 5. RESULTADOS Al finalizar, el alumno deber entregar en formato electrnico los procedimientos que utiliz para configurar el iTex con el compilador que este utilizando su IDE de programacin Java. Posteriormente, escribir cmo realiz el vector y finalizar con el archivo pdf adjunto de la salida de pantalla del programa realizado.

6. CONCLUSIONES sta prctica ayuda al alumno a crear grficos vectoriales y a mandar a imprimir su imagen en formato pdf con ayuda de la librera iTex

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 22

Graficacin [SCC-1010]

Prctica

TRANSFORMACIN DE VENTANA-REA DE VISTA 1


Observaciones: Esta prctica incluye a la Prctica # 4 del temario de Graficacin que dice Transformacin de ventana-rea de vista 1.

1.- OBJETIVO Elaborar un programa que dibuje las 6 funciones trigonomtricas en distintas reas de vista distribuidas en la pantalla de la computadora.

2.- MARCO TERICO Los programas de aplicaciones definen imgenes en un sistema de coordenadas mundiales. Este puede ser cualquier sistema de coordenadas Cartesianas que un usuario halle conveniente. Las imgenes definidas en coordenadas mundiales son procesadas por el sistema de graficas en coordenadas de dispositivo. Comnmente, un paquete de graficas permite a un usuario especificar qu rea de la definicin de la imagen se desplegara y donde se colocara en el dispositivo de despliegue. Podra elegirse una sola rea para el dispositivo de despliegue o bien podran seleccionarse varias reas. Estas reas pueden colocarse en localidades aparte del despliegue o bien un rea puede servir como una pequea insercin en un rea mayor. Este proceso de transformacin implica operaciones para trasladar y escalar reas seleccionadas y para borrar partes de la imagen que estn fuera de las reas. Estas operaciones se conocen como colocacin de ventanas y recorte.
CONCEPTOS DE COLOCACIN DE VENTANAS

Un rea rectangular que se especifica en coordenadas mundiales se denomina ventana. El rea rectangular en el dispositivo de despliegue en el cual se coloca la ventana se llama puerta de visin. La figura 1 ilustra el trazo o planimetra de la seleccin de una imagen que queda dentro del rea de ventana en una puerta de visin designada. Esta planimetra se llama transformacin de la visin o bien transformacin de normalizacin.

Fecha de Actualizacin 15/08/2013

Pgina 23

Graficacin [SCC-1010]

Los lmites de la ventana se especifican en coordenadas mundiales. Las coordenadas de dispositivo normalizadas se usan con mayor frecuencia para la especificacin de la puerta visin, aunque las coordenadas del dispositivo pueden emplearse si hay solamente un dispositivo de salida en el sistemas. Cuando se usan coordenadas de dispositivo normalizadas, el programador considera el dispositivo de salida como aquel que tiene valores coordenados dentro del intervalo de 0 a 1.

Figura 2

Planimetra de una ventana en puerta de visin en coordenadas de dispositivo normalizadas. Las posiciones de coordenadas que se expresan en coordenadas de dispositivo normalizadas deben convertirse a las coordenadas del dispositivo antes de que un dispositivo de salida especfico haga el despliegue. Una rutina especfica del dispositivo se incluye en paquetes de grficas con este fin. La ventaja de emplear coordenadas de dispositivo normalizadas es que el paquete de grficas es considerablemente independiente del dispositivo. Pueden utilizarse distintos dispositivos de salida ofreciendo los conductores adecuados del dispositivo.

Cambiando la posicin de la puerta de visin, los objetos pueden desplegarse en diferentes posiciones en un dispositivo de salida. Asimismo, variando el tamao de las puertas de visin, el tamao y las proporciones de los objetos pueden alterarse. Cuando se trazan en forma sucesiva ventanas de Fecha de Actualizacin 15/08/2013 Pgina 24

Graficacin [SCC-1010] diferentes tamaos en una puerta de visin, pueden lograrse efectos de acercamiento. Conforme las ventanas se hacen pequeas, un usuario puede lograr el acercamiento de alguna parte de una escena para visualizar detalles que no se muestran con las ventanas mayores.

Analgicamente, puede obtener un panorama general ms amplio realizando un acercamiento de una seccin de escena con ventanas cada vez ms mayores. Los efectos de toma panormica se producen moviendo o desplazando una ventana de tamao fijo a travs de una imagen grande.

Un ejemplo del uso de comandos mltiples de colocacin de ventanas y puertas de visin se da en el siguiente procedimiento. Se despliegan dos graficas en diferentes mitades de un dispositivo de despliegue (Figura 3).

Figura 3 Despliegue simultaneo de dos grficas, utilizando especificaciones mltiples de colocacin de ventanas y puertas de visin.

Otro mtodo de establecer mltiples reas para la colocacin de ventanas y puertas de visin en un paquete de grficas consiste en asignar un rotulo a cada especificacin. Esto podra hacerse incluyendo un quinto parmetro en los comandos de ventana y puertas de visin para identificar cada rea definida. El parmetro puede ser un ndice entero (0, 1, 2,) que numere la definicin de la ventana o puerta de visin. Entonces se necesita un comando adicional para indicar un conjunto de proporciones de salida. Este esquema de enumeracin podra utilizarse tambin para asociar una prioridad con cada puerta de visin de manera que la visibilidad de las puertas de visin superpuestas se decida sobre una base de prioridad. En la Figura 4 se muestran puertas de visin desplegadas segn su prioridad.

Fecha de Actualizacin 15/08/2013

Pgina 25

Graficacin [SCC-1010]

Figura 4

Despliegue de puertas de vision en orden de prioridad. A las puertas de vision con numeracin inferior se les da mayor prioridad.

Para implantaciones que incluyen estaciones de trabajo mltiples, podra definirse un conjunto adicional de comandos de colocacin de ventanas y puertas de visin. Estos comandos incluyen un nmero de estacin de trabajo para establecer diferentes reas de ventana y puertas de visin en diferentes estaciones de trabajo. Esto permitir a un usuario desplegar varias partes de la imagen final en diferentes dispositivos de salida. Por ejemplo, un arquitecto podra desplegar la totalidad de un plano de una casa en un monitor y solamente el segundo piso en un segundo monitor.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

4.- COMPETENCIAS ESPECFICAS Mediante la instruccin glViewport se debern crear 6 puertos de visin equitativos y en cada uno de ellos, graficar las siguientes funciones: seno, coseno, tangente, cotangente, secante y cosecante . Para cada funcin se deber graficar en un rango especfico, por ejemplo: [-5,5] y cada grfica de un color diferente. En la parte superior de cada viewport colocar el nombre de la funcin graficada.

Fecha de Actualizacin 15/08/2013

Pgina 26

Graficacin [SCC-1010] 5. RESULTADOS Al finalizar la prctica, el alumno deber entregar un reporte electrnico de cmo realiz cada grfica, las herramientas necesarias para creacin de puertos de visin y la importancia de utilizar viewport. En el reporte se deber incluir las instrucciones precisas y las capturas de pantalla de las funciones trigonomtricas.

6. CONCLUSIONES Cuando el alumno haya terminado de realizar esta prctica, podr aplicar a su proyecto diferentes puertos de visin para que pueda observar un escenario de diferentes formas.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 27

Graficacin [SCC-1010]

Prctica

TRANSFORMACIN DE VENTANA-REA DE VISTA 2


Observaciones: Esta prctica incluye a la Prctica # 5 del temario de Graficacin que dice Transformacin de ventana-rea de vista 2.

1.- OBJETIVO Definir un objeto 2D en un archivo de texto que contenga la informacin de nmero de vrtices, nmero de aristas, vrtices y aristas. Y elabore un programa que lea el archivo y despliegue el objeto dada una ventana y un rea de vista.

2.- MARCO TERICO Los sistemas de archivos o ficheros (en ingls:filesystem), estructuran la informacin guardada en una unidad de almacenamiento (normalmente un disco duro de una computadora), que luego ser representada ya sea textual o grficamente utilizando un gestor de archivos. La mayora de los sistemas operativos manejan su propio sistema de archivos.

Lo habitual es utilizar dispositivos de almacenamiento de datos que permiten el acceso a los datos como una cadena de bloques de un mismo tamao, a veces llamados sectores, usualmente de 512 bytes de longitud (Tambin denominados clsters). El software del sistema de archivos es responsable de la organizacin de estos sectores en archivos y directorios y mantiene un registro de qu sectores pertenecen a qu archivos y cules no han sido utilizados. En la prctica, un sistema de archivos tambin puede ser utilizado para acceder a datos generados dinmicamente, como los recibidos a travs de una conexin de red (sin la intervencin de un dispositivo de almacenamiento).

Los sistemas de archivos tradicionales proveen mtodos para crear, mover, renombrar y eliminar tanto archivos como directorios, pero carecen de mtodos para crear, por ejemplo, enlaces adicionales a un directorio o archivo (enlace duro en Unix) o renombrar enlaces padres (".." en Unix).

El acceso seguro a sistemas de archivos bsicos puede estar basado en los esquemas de lista de control de acceso o capacidades. Las listas de control de acceso hace dcadas que demostraron ser

Fecha de Actualizacin 15/08/2013

Pgina 28

Graficacin [SCC-1010] inseguras, por lo que los sistemas operativos experimentales utilizan el acceso por capacidades. Los sistemas operativos comerciales an funcionan con listas de control de acceso.

Rutas y nombre de archivos La estructura de directorios suele ser jerrquica, ramificada o "en rbol", aunque en algn caso podra ser plana. En algunos sistemas de archivos los nombres de archivos son estructurados, con sintaxis especiales para extensiones de archivos y nmeros de versin. En otros, los nombres de archivos son simplemente cadenas de texto y los metadatos de cada archivo son alojados separadamente.

En los sistemas de archivos jerrquicos, usualmente, se declara la ubicacin precisa de un archivo con una cadena de texto llamada "ruta" o path en ingls. La nomenclatura para rutas vara ligeramente de sistema en sistema, pero mantienen por lo general una misma estructura. Una ruta viene dada por una sucesin de nombres de directorios y subdirectorios, ordenados jerrquicamente de izquierda a derecha y separados por algn carcter especial que suele ser una diagonal ('/') o diagonal invertida ('\') y puede terminar en el nombre de un archivo presente en la ltima rama de directorios especificada.

Ejemplo de 'ruta' en un sistema Windows Un ejemplo anlogo en un sistema de archivos de Windows (especficamente en Windows XP) se vera como:

C:\Users\RafaSan\Documents\Visual Studio 2010\Projects

Lectura de un fichero de texto en java Podemos abrir un fichero de texto para leer usando la clase FileReader. Esta clase tiene mtodos que nos permiten leer caracteres. Sin embargo, suele ser habitual querer las lneas completas, bien porque nos interesa la lnea completa, bien para poder analizarla luego y extraer campos de ella. FileReader no contiene mtodos que nos permitan leer lneas completas, pero s BufferedReader. Afortunadamente, podemos construir un BufferedReader a partir del FileReader de la siguiente forma: File archivo = new File ("C:\\archivo.txt"); FileReader fr = new FileReader (archivo); BufferedReader br = new BufferedReader(fr); ... String linea = br.readLine();

Fecha de Actualizacin 15/08/2013

Pgina 29

Graficacin [SCC-1010] La apertura del fichero y su posterior lectura pueden lanzar excepciones que debemos capturar. Por ello, la apertura del fichero y la lectura debe meterse en un bloque try-catch.

Adems, el fichero hay que cerrarlo cuando terminemos con l, tanto si todo ha ido bien como si ha habido algn error en la lectura despus de haberlo abierto. Por ello, se suele poner al try-catch un bloque finally y dentro de l, el close() del fichero.

El siguiente es un cdigo completo con todo lo mencionado. import java.io.*; class LeeFichero { public static void main(String [] arg) { File archivo = null; FileReader fr = null; BufferedReader br = null; try { // Apertura del fichero y creacion de BufferedReader para poder // hacer una lectura comoda (disponer del metodo readLine()). archivo = new File ("C:\\archivo.txt"); fr = new FileReader (archivo); br = new BufferedReader(fr); // Lectura del fichero String linea; while((linea=br.readLine())!=null) System.out.println(linea); } catch(Exception e){ e.printStackTrace(); }finally{ // En el finally cerramos el fichero, para asegurarnos // que se cierra tanto si todo va bien como si salta // una excepcion. try{ if( null != fr ){ fr.close(); } }catch (Exception e2){ e2.printStackTrace(); } } } } Escritura de un fichero de texto en java El siguiente cdigo escribe un fichero de texto desde cero. Pone en l 10 lneas Fecha de Actualizacin 15/08/2013 Pgina 30

Graficacin [SCC-1010]

import java.io.*; public class EscribeFichero { public static void main(String[] args) { FileWriter fichero = null; PrintWriter pw = null; try { fichero = new FileWriter("c:/prueba.txt"); pw = new PrintWriter(fichero); for (int i = 0; i < 10; i++) pw.println("Linea " + i); } catch (Exception e) { e.printStackTrace(); } finally { try { // Nuevamente aprovechamos el finally para // asegurarnos que se cierra el fichero. if (null != fichero) fichero.close(); } catch (Exception e2) { e2.printStackTrace(); } } } } Si queremos aadir al final de un fichero ya existente, simplemente debemos poner un flag a true como segundo parmetro del constructor de FileWriter. FileWriter fichero = new FileWriter("c:/prueba.txt",true);

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

Fecha de Actualizacin 15/08/2013

Pgina 31

Graficacin [SCC-1010] 4.- COMPETENCIAS ESPECFICAS El alumno deber generar un archivo de texto plano en el cual indique el nmero de vrtices a leer deber especificar los vrtices que unen a la figura en 2D

Datos de entrada del archivo de texto:

4 2.0 0.0 3.0 0.0 2.0 1.0 3.0 1.0 5 01 12 23 43 41

Donde 4 indica el nmero de vrtices a leer y los siguientes nmeros, indican las coordenadas de los puntos a dibujar. El 5 representa las aristas que van a unir los puntos y las siguientes lneas, el nmero de vrtices que se van a unir.

Posterior a eso, se deber crear un programa en Java o C el cul permita leer esos puntos y desplegarlos en pantalla creando una figura en 2D (a este proceso se le llama lectura de mallas).

Posterior a eso, se deber colocar dentro de dos puertos de visin para que se pueda ver de distintos ngulos de visualizacin.

5. RESULTADOS Definir un objeto 2D en un archivo de texto que contenga la informacin de nmero de vrtices, nmero de aristas, vrtices y aristas. Y elabore un programa que lea el archivo y despliegue el objeto dada una ventana y dos reas de vista.

Fecha de Actualizacin 15/08/2013

Pgina 32

Graficacin [SCC-1010] 6. CONCLUSIONES sta prctica ayuda el estudiante a manejar la lectura de mallas desde un archivo de texto plano y a presentarla en dos diferentes puertos de visin para poder manipular el objeto con algunas transformaciones que se podrn aplicar al concluir la siguiente prctica.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 33

Graficacin [SCC-1010]

Prctica

TRANSFORMACIONES GEOMTRICAS 2D
Observaciones: Esta prctica incluye a la Prctica # 6 del temario de Graficacin que dice Aplicacin de transformaciones geomtricas en 2D.

1.- OBJETIVO Elaborar un programa que aplique transformaciones geomtricas al objeto definido en la prctica 5.

Sugerencias:

Rote el objeto en torno al origen con incrementos de 10 grados, hasta completar una revolucin completa. Escale el objeto al doble o triple de su tamao original y redzcalo a la mitad y a la tercera parte del tamao original. Rote el objeto en incrementos de 10 grados pero ahora en torno a un punto arbitrario. Traslade el objeto de una posicin a otra Refleje el objeto respecto a los ejes cartesianos X y Y.

2.- MARCO TERICO En el procesamiento de seales e imgenes se utilizan algunas tcnicas sustentadas en el conocimiento de los operadores lineales y no lineales. El avance de las tecnologas de comunicacin e informacin permiten hoy en da la aplicacin de imgenes (matrices) y transformaciones del lgebra lineal a diversas reas de las ciencias puras y aplicadas as como de la ingeniera

Los conceptos de espacio vectorial y algebra lineal resultan ser muy naturales en el procesamiento de seales. Y ms aun en el procesamiento de imgenes digitales, ya que una imagen digital es una matriz. Las operaciones matriciales juegan un papel importante en el procesamiento de imgenes digitales. Una nocin fundamental en el desarrollo de este estudio tiene que ver con que una imagen puede visualizarse de diferentes formas, y la manipulacin de su representacin es una de las ms poderosas herramientas disponibles. Las manipulaciones tiles pueden ser lineales (ejemplo, las transformaciones) o no lineales (ejemplo, la cuantificacin). Fecha de Actualizacin 15/08/2013 Pgina 34

Graficacin [SCC-1010]

Transformaciones de diverso tipo son aplicadas a las imgenes con diferentes propsitos produciendo as el desarrollo de nuevos y revolucionarios algoritmos a travs de la matemtica, que son soportados por poderosas aplicaciones de software, unificando las distintas reas de las ciencias puras y aplicadas. Es importante resaltar, que lo significativo es el germen o la ciencia que hay detrs de los mtodos y no los algoritmos en s. TRANSFORMACIONES GEOMTRICAS Las transformaciones Geomtricas modifican la relacin espacial entre pxeles. En trminos del procesamiento de imgenes digitales una transformacin geomtrica consiste de dos operaciones bsicas:

Una transformacin espacial que define la reubicacin de los pxeles en el plano imagen. Interpolacin de los niveles de grises, los cuales tienen que ver con la asignacin de los valores de intensidad de los pxeles en la imagen transformada.

En trminos Matemticos las transformaciones a fines son las ms usadas en imgenes digitales 2D por su representacin y manejo matricial Una Transformacin afn es aquella (transformac in) en la que las coordenadas (x,y) del punto imagen son expresadas linealmente en trminos de las del punto original (x,y). es decir, la transformacin viene dada por las ecuaciones:

Cuando m = n = 0, las ecuaciones anteriores se convierten en el prototipo de una transformacin lineal multiplicacin por una matriz a la izquierda, esto es:

( )

)( )

Tenemos tres transformaciones bsicas: traslacin, escalamiento y rotacin:

Traslacin:

Fecha de Actualizacin 15/08/2013

Pgina 35

Graficacin [SCC-1010] Donde Tx o Ty representan las unidades que se van a trasladar en el eje de las x y de las y

Escalamiento:

Donde Sx y Sy representan las unidades en las que deseamos escalar nuestros objetos. Cuando el valor de Sx o Sy es 1, el objeto mantiene su tamao.

Rotacin:

Donde

representa el nmero de grados a rotar. La rotacin solo se efecta en sentido antihorario.

En OpenGL, las funciones para realizar estas acciones son:

glTranslatef(x,y) para trasladar glScalef(s,y) para escalar glRotatef(angulos,x,y)

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

4.- COMPETENCIAS ESPECFICAS Ya que se haya cargado una figura 2D en nuestro programa, realizar procedimientos para que a esa figura, mediante el uso de teclado y/o ratn se le puedan aplicar tres tipos de transformaciones: trasladar, escalar y rotar. Si es con el uso del teclado, las funciones sern las siguientes:

Fecha de Actualizacin 15/08/2013

Pgina 36

Graficacin [SCC-1010]

Tecla A B C D E F G H I J ESC

Funcin trasladar en x positivo trasladar en x negativo trasladar en y positivo trasladar en y negativo escalar en x positivo escalar en x negativo escalar en y positivo escalar en y negativo rotar en x rotar en y Regresar la figura a su estado original.

Las siguientes lneas de cdigo son de ayuda para realizar sta prctica. //Escalamos nuestos objetos a la mitad de su tamao original gl.glScalef(.5f,0.5f,.0f); /* Trasladamos nuestros objetos el valor que tenga la variable * trasladaX y trasladaY, esos valores los daran los calculan los * mtodos que tenemos mas abajo para el uso del teclado.. */ gl.glTranslatef(trasladaX,trasladaY,0); /* De igual forma, escalamos nuestros objetos dependiendo de los valores que * les sea asignado en cada tecla... */ gl.glScalef(escalaX,escalaY,0); // Indicamos que vamos a rotar "x" grados sobre el eje X gl.glRotatef(rotarX,1,0,0); // Indicamos que vamos a rotar "y" grados sobre el eje Y gl.glRotatef(rotarY,0,1,0); // Indicamos que vamos a rotar "Z" grados sobre el eje Z Fecha de Actualizacin 15/08/2013 Pgina 37

Graficacin [SCC-1010] gl.glRotatef(rotarZ,0,0,1); gl.glColor3f(0.0f,0.0f,1.0f); gl.glBegin(GL.GL_TRIANGLES); gl.glVertex2f(0f,0f); gl.glVertex2f(1f,-1f); gl.glVertex2f(1f,1f); gl.glEnd(); gl.glLoadIdentity(); gl.glScalef(.5f,0.5f,.0f); gl.glColor3f(0.0f,1.0f,0.0f); gl.glBegin(GL.GL_TRIANGLES); gl.glVertex2f(0f,0f); gl.glVertex2f(-1f,-1f); gl.glVertex2f(1f,-1f); gl.glEnd();

public void keyPressed(KeyEvent arg0){ // Si obtenemos el codigo de la tecla de flecha izquierda, // trasladaremos el objeto sobre el eje x hacia la izquierda... if (arg0.getKeyCode()==KeyEvent.VK_LEFT){ trasladaX-=.1; System.out.println("El valor de X en la traslacion: "+trasladaX); }

5. RESULTADOS Cuando el alumno haya terminado la prctica, entregar un reporte electrnico donde indique qu propiedades tiene cada instruccin para crear las transformaciones, tambin crear una sntesis donde explique por qu las instrucciones ya predefinidas por OpenGL son ms fciles para implementar las transformaciones que aplicar las matrices de transformacin.

Dentro del reporte de la prctica deber colocar las capturas de pantalla de cmo se van moviendo las figuras

Fecha de Actualizacin 15/08/2013

Pgina 38

Graficacin [SCC-1010] 6. CONCLUSIONES Con sta prctica el alumno aprender a manipular las transformaciones geomtricas a figuras particulares de una escena o a todas las figuras en conjunto de la escena, ya sea que las transformaciones las aplique cuando cierta condicin se cumpla o que se reproduzcan durante todo el ciclo de la animacin.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 39

Graficacin [SCC-1010]

Prctica

TRANSFORMACIONES GEOMTRICAS 3D
Observaciones: Esta prctica incluye a la Prctica # 7 del temario de Graficacin que dice Aplicacin de transformaciones geomtricas de 3D.

1.- OBJETIVO Definir un objeto 3D en un archivo de texto que contenga la informacin de nmero de vrtices, nmero de aristas, vrtices y aristas. Elabore un programa que utilice el API para representacin en 3D propuesto en clase y aplique transformaciones geomtricas en 3D al objeto definido.

Sugerencias:

Rote el objeto en incrementos de 10 grados en torno a cada uno de los ejes cartesianos (X, Y) y Z. Escale el objeto al doble o triple de su tamao original y redzcalo a la mitad o la tercera parte del tamao original. Traslade el objeto de una posicin a otra Refleje el objeto respecto a los planos cartesianos XY, YZ y XZ.

2.- MARCO TERICO TRANSFORMACIONES GEOMTRICAS Las transformaciones Geomtricas modifican la relacin espacial entre pxeles. En trminos del procesamiento de imgenes digitales una transformacin geomtrica consiste de dos operaciones bsicas:

Una transformacin espacial que define la reubicacin de los pxeles en el plano imagen. Interpolacin de los niveles de grises, los cuales tienen que ver con la asignacin de los valores de intensidad de los pxeles en la imagen transformada.

Tenemos tres transformaciones bsicas: traslacin, escalamiento y rotacin:

Fecha de Actualizacin 15/08/2013

Pgina 40

Graficacin [SCC-1010] Traslacin:

Escalamiento:

Rotacin en el eje X:

Rotacin en el eje Y:

Rotacin en el eje Z:

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

Fecha de Actualizacin 15/08/2013

Pgina 41

Graficacin [SCC-1010] 4.- COMPETENCIAS ESPECFICAS El alumno deber crear una figura geomtrica en 3D, por ejemplo un cubo o un prisma, en nuestro programa, realizar procedimientos para que a esa figura, mediante el uso de teclado y/o ratn se le puedan aplicar tres tipos de transformaciones: trasladar, escalar y rotar. Si es con el uso del teclado, las funciones sern las siguientes:

Tecla A B C D 1 2 E F G H 3 4 I J 7 8 ESC

Funcin trasladar en x positivo trasladar en x negativo trasladar en y positivo trasladar en y negativo Trasladar en z positivo Trasladar en z negativo escalar en x positivo escalar en x negativo escalar en y positivo escalar en y negativo Escalar en z positivo Escalar en z negativo rotar en x rotar en y Rotar en z positivo Rotar en z negativo Regresar la figura a su estado original.

Las siguientes lneas de cdigo son de ayuda para realizar sta prctica.
//Trasladamos en diferentes ejes: gl.glTranslatef(trasladaX,trasladaY, trasladaZ); gl.glScalef(escalaX,escalaY,escalaZ); gl.glRotatef(rotarX,1,0,0); gl.glRotatef(rotarY,0,1,0);

Fecha de Actualizacin 15/08/2013

Pgina 42

Graficacin [SCC-1010]
gl.glRotatef(rotarZ,0,0,1); public void keyPressed(KeyEvent arg0){ // Si obtenemos el codigo de la tecla de flecha izquierda, // trasladaremos el objeto sobre el eje x hacia la izquierda... if (arg0.getKeyCode()==KeyEvent.VK_1){ trasladaX-=.1; System.out.println("El valor de X en la traslacion: "+trasladaX);

5. RESULTADOS Cuando el alumno haya terminado la prctica, entregar un reporte electrnico donde indique qu propiedades tiene cada instruccin para crear las transformaciones, tambin crear una sntesis donde explique por qu las instrucciones ya predefinidas por OpenGL son ms fciles para implementar las transformaciones que aplicar las matrices de transformacin de objetos 3D.

Dentro del reporte de la prctica deber colocar las capturas de pantalla de cmo se va moviendo la figura creada en 3D

6. CONCLUSIONES Con sta prctica el alumno aprender a manipular las transformaciones geomtricas 3D a figuras particulares de una escena o a todas las figuras en conjunto de la escena, ya sea que las transformaciones las aplique cuando cierta condicin se cumpla o que se reproduzcan durante todo el ciclo de la animacin.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 43

Graficacin [SCC-1010]

Prctica

CURVAS DE BZIER
Observaciones: Esta prctica incluye a la Prctica # 8 del temario de Graficacin que dice Generacin de un objeto 3D con curvas de Bzier.

1.- OBJETIVO Definir una curva de Bezier en el plano XY que defina el perfil de un objeto 3D. Elabore un programa que dibuje el perfil definido en incrementos de 10 grados en torno al eje Y. Pruebe tambin la rotacin en torno a los ejes X y Z.

2.- MARCO TERICO Se denomina curvas de Bzier a un sistema que se desarroll hacia los aos 1960 para el trazado de dibujos tcnicos, en el diseo aeronutico y en el de automviles. Su denominacin es en honor a Pierre Bzier, quien ide un mtodo de descripcin matemtica de las curvas que se comenz a utilizar con xito en los programas de CAD.

Las curvas de Bzier fueron publicadas por primera vez en 1962 por el ingeniero francs Pierre Bzier, que las us posteriormente con profusin en el diseo de las diferentes partes de los cuerpos de un automvil, en sus aos de trabajo en la Renault. Las curvas fueron desarrolladas por Paul de Casteljau usando el algoritmo que lleva su nombre. Se trata de un mtodo numricamente estable para evaluar las curvas de Bzier.

Posteriormente, los inventores del PostScript, lenguaje que permiti el desarrollo de sistemas de impresin de alta calidad desde el ordenador, introdujeron en ese cdigo el mtodo de Bzier para la generacin del cdigo de las curvas y los trazados. El lenguaje PostScript sigue emplendose ampliamente y se ha convertido en un estndar de calidad universal; por ello, los programas de diseo vectorial como Adobe Illustrator, el extinto Macromedia FreeHand y Corel Draw, tres de los ms importantes programas de dibujo vectorial y otros como Inkscape, denominan bzier a algunas de sus herramientas de dibujo, y se habla de trazados bzier, pluma bzier, lpiz bzier, etc. Su facilidad de uso la ha estandarizado en el diseo grfico, extendindose tambin a programas de

Fecha de Actualizacin 15/08/2013

Pgina 44

Graficacin [SCC-1010] animacin vectorial, como Adobe Flash, y retoque fotogrfico (bitmap), como Photoshop y Gimp, donde se usa para crear formas cerradas o selecciones.

La idea de definir geomtricamente las formas no es demasiado compleja: un punto del plano puede definirse por coordenadas. Por ejemplo, un punto A tiene unas coordenadas (x1, y1) y a un punto B le corresponde (x2,y2). Para trazar una recta entre ambos basta con conocer su posicin.

Si en lugar de unir dos puntos con una recta se unen con una curva, surgen los elementos esenciales de una curva Bzier; los puntos se denominan puntos de anclaje o nodos. La forma de la curva se define por unos puntos invisibles en el dibujo, denominados puntos de control, manejadores o manecillas. Curvas Lineales de Bzier Dados los puntos P0 y P1, una curva lineal de Bzier es una lnea recta entre los dos puntos. La curva viene dada por la expresin:

Curvas Cuadrticas de Bzier Una curva cuadrtica de Bzier es el camino trazado por la funcin B(t), dados los puntos: P0, P1, y P2,

Las fuentes de letras TrueType usan curvas de Bzier desdobladas compuestas por curvas cuadrticas de Bzier.

Generalizacin: La curva de Bzier de grado n puede ser generalizada de la siguiente manera. Dados los puntos P0, P1,..., Pn, la curva de Bzier es del tipo:

Fecha de Actualizacin 15/08/2013

Pgina 45

Graficacin [SCC-1010] Por ejemplo, una curva de orden cinco (n = 5) quedara como:

Esta ecuacin puede ser expresada de manera recursiva como sigue: sea la expresin BP0P1Pn que denota la curva de Bzier determinada por los puntos P0, P1,..., Pn. Entonces

En otras palabras, el grado n de la curva de Bzier es una interpolacin entre los dos grados n 1 de las curvas de Bzier.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

4.- COMPETENCIAS ESPECFICAS Se crear un crculo el cual siga una trayectoria generada por una curva de Bzier, cuando se pulse la tecla de la barra espaciadora, se deber cerrar o abrir la trayectoria siguiente cdigo a Java: para lo cual pasaremos el

package tutorials6; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import javax.media.opengl.GL; import javax.media.opengl.GLAutoDrawable; import javax.media.opengl.GLCanvas; import javax.media.opengl.GLCapabilities; import javax.media.opengl.GLEventListener;

Fecha de Actualizacin 15/08/2013

Pgina 46

Graficacin [SCC-1010] import javax.media.opengl.glu.GLU; import javax.media.opengl.glu.GLUquadric; import javax.swing.JFrame; import objLoader.SimpleObjFile; import math.Vertex3f; import com.sun.opengl.util.GLUT; import com.sun.opengl.util.Animator; public class Practice01Trajectories private static float deltaZ=0; private static float t=0; private float w=1,h=1; private boolean closed=false; public static void main(String[] args) { Practice01Trajectories frame=new Practice01Trajectories(); frame.setDefaultCloseOperation(EXIT_ON_CLOSE); frame.setVisible(true); } public Practice01Trajectories(){ setSize(600,600); setTitle("Trajectiries"); GraphicListener listener=new GraphicListener(); GLCanvas canvas = new GLCanvas(new GLCapabilities()); canvas.addGLEventListener(listener); getContentPane().add(canvas); Animator animator = new Animator(canvas); animator.start(); addKeyListener(this); } public class GraphicListener implements GLEventListener{ TrajectoryBezierSpline traiettoriaBezierSpline=new TrajectoryBezierSpline(1); SimpleObjFile file=new SimpleObjFile(); extends JFrame implements KeyListener{

Fecha de Actualizacin 15/08/2013

Pgina 47

Graficacin [SCC-1010]

public void display(GLAutoDrawable arg0) { GL gl=arg0.getGL(); gl.glClear(GL.GL_COLOR_BUFFER_BIT GL.GL_DEPTH_BUFFER_BIT); GLUT glut = new GLUT(); gl.glEnable(GL.GL_DEPTH_TEST); gl.glCullFace(GL.GL_FRONT); gl.glEnable(GL.GL_CULL_FACE); gl.glFrontFace(GL.GL_CW); gl.glMatrixMode(GL.GL_PROJECTION); gl.glLoadIdentity(); gl.glScalef(600/w, 600/h, 0.2f); GLU glu=new GLU(); glu.gluPerspective(50.0f, 1, 1.0, 20.0); gl.glTranslatef(0, 0, -2); gl.glRotatef(20,1,0,0); gl.glScalef(0.2f,0.2f,0.2f); gl.glMatrixMode(GL.GL_MODELVIEW); gl.glLoadIdentity(); gl.glDisable(GL.GL_LIGHTING); traiettoriaBezierSpline.draw(gl,closed); gl.glEnable(GL.GL_LIGHTING); traiettoriaBezierSpline.applayIstant(gl, t*0.01f,closed); glut.glutSolidSphere(.5,100,50); t++; if(t*0.01f>traiettoriaBezierSpline.getTMax()){ t=0; } } public boolean arg2) { } void displayChanged(GLAutoDrawable arg0, boolean arg1, |

Fecha de Actualizacin 15/08/2013

Pgina 48

Graficacin [SCC-1010] public void init(GLAutoDrawable arg0) { GL gl=arg0.getGL(); gl.glEnable(GL.GL_LIGHTING); float ambient[]= {0.2f,0.2f,0.2f,1}; gl.glLightModelfv(GL.GL_LIGHT_MODEL_AMBIENT , ambient,0); gl.glEnable(GL.GL_LIGHT0); float position[]= {-0.4f,0.5f,0.7f,1}; gl.glLightfv(GL.GL_LIGHT0, GL.GL_POSITION, position, 0); float intensity[]= {1,1,1,1}; gl.glLightfv(GL.GL_LIGHT0, GL.GL_DIFFUSE, intensity, 0); gl.glEnable(GL.GL_LIGHT1); float position2[]= {0,-0.8f,0.3f,1}; gl.glLightfv(GL.GL_LIGHT1, GL.GL_POSITION, position2, 0); float intensity2[]= {1,0,0,0}; gl.glLightfv(GL.GL_LIGHT1, GL.GL_DIFFUSE, intensity2, 0); float specIntensity2[]= {1,1,1,1};
gl.glLightfv(GL.GL_LIGHT1, GL.GL_SPECULAR, specIntensity2, 0);

gl.glEnable(GL.GL_COLOR_MATERIAL);
gl.glColorMaterial(GL.GL_FRONT_AND_BACK, GL.GL_AMBIENT_AND_DIFFUSE);

float specColor[]= {1,1,1,1};


gl.glMaterialfv(GL.GL_FRONT_AND_BACK,GL.GL_SPECULAR, specColor,0);

gl.glMaterialf(GL.GL_FRONT_AND_BACK,GL.GL_SHININESS, 80);
traiettoriaBezierSpline.add(new Vertex3f(0,0,0), new Vertex3f(0,1,0)); traiettoriaBezierSpline.add(new Vertex3f(4,0,0), new Vertex3f(4,1,0)); traiettoriaBezierSpline.add(new Vertex3f(4,0,-8), new Vertex3f(4,1,-8)); traiettoriaBezierSpline.add(new Vertex3f(-4,2,-8), new Vertex3f(-4,3,-8)); traiettoriaBezierSpline.add(new Vertex3f(-4,-3,0), new Vertex3f(-4,-2,0)); traiettoriaBezierSpline.add(new Vertex3f(0,-2,0), new Vertex3f(0,1,0)); traiettoriaBezierSpline.add(new Vertex3f(3,2,0), new Vertex3f(0,2,0)); traiettoriaBezierSpline.add(new Vertex3f(0,6,0), new Vertex3f(0,2,0)); traiettoriaBezierSpline.add(new Vertex3f(-4,2,0), new Vertex3f(0,2,0));

file=SimpleObjFile.getFromFile("Vagone.obj"); }
public void reshape(GLAutoDrawable arg0, int arg1, int arg2, int arg3, int arg4) {

w=arg3; h=arg4; }

Fecha de Actualizacin 15/08/2013

Pgina 49

Graficacin [SCC-1010] } public void keyPressed(KeyEvent arg0) { if(arg0.getKeyCode()==KeyEvent.VK_A){ deltaZ+=0.05; } if(arg0.getKeyCode()==KeyEvent.VK_B){ deltaZ-=0.05; } if(arg0.getKeyCode()==KeyEvent.VK_SPACE){ closed=!closed; } } public void keyReleased(KeyEvent arg0) { } public void keyTyped(KeyEvent arg0) { } static final long serialVersionUID=100; }

La prctica deber ser guardada como Practice01Trajectories.java posteriormente compilar la prctica y ejecutarla, pulsa la barra espaciadora para ver las modificaciones en tiempo de ejecucin.

5. RESULTADOS Cuando el alumno haya terminado la prctica, entregar un reporte electrnico donde indique qu caractersticas debe cumplir una curva de Bzier y el grado de la curva. Indicar tambin la forma en que el objeto recorre la trayectoria formada por la curva de Bzier.

Dentro del reporte de la prctica deber colocar las capturas de pantalla de cmo va haciendo el recorrido la esfera creada.

Fecha de Actualizacin 15/08/2013

Pgina 50

Graficacin [SCC-1010] 6. CONCLUSIONES Con sta prctica el alumno aprender a crear curvas de Bzier y que un objeto pueda seguir la trayectoria de la curva.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 51

Graficacin [SCC-1010]

Prctica
Superficies 3D

Observaciones: Esta prctica incluye a la Prctica # 9 del temario de Graficacin que dice Superficies en 3D con funciones de dos variables.

1.- OBJETIVO Elaborar un programa que dibuje en forma de malla una funcin de dos variables de la forma y=f(x,z).

2.- MARCO TERICO Grfica de funciones de dos variables.

Definicin (grfica de funciones de dos variables).

La grfica de una funcin y . Es decir,

es el conjunto de puntos (x,y,z) tales que

{(

)|

Observacin: La grfica de una funcin de dos variables puede interpretarse geomtricamente como una superficie en el espacio de forma tal que su proyeccin sobre el plano xy es D, el dominio de f.En consecuencia, a cada punto (x,y) en D le corresponde un punto (x,y,z) en la superficie y, a la inversa, a cada punto (x,y,z) en la superficie le corresponde un punto (x,y) en D (figura 1)

Figura 1

Fecha de Actualizacin 15/08/2013

Pgina 52

Graficacin [SCC-1010]

Ejemplo: Trace la grfica de la funcin

Solucin La grfica de esta tipo funciones es muy comn y se conocen como paraboloide (figura 2).

Figura 2

Observacin: el paraboloide anterior de esperar que un paraboloide como


Superficies.

tiene su eje de simetra paralelo al eje z, es tenga su eje de simetra paralelo al eje y.

Debido a que muchas de las superficies S con las que trabajaremos no provienen de una funcin z = f(x,y), es necesario extender la definicin de grfica.
Definicin (superficie).

La grfica de la ecuacin

es el conjunto de puntos

tales que satisfacen sta

ecuacin. Usualmente nos referimos a la grfica de una ecuacin como una superficie S

Definicin (traza de una superficie).

La traza de una superficie S en el plano P, es la curva que resulta de la insercin entre ambos.

Ejemplo.

Compruebe que la traza de la esfera sobre el plano elipse.

sobre el plano

es una

Fecha de Actualizacin 15/08/2013

Pgina 53

Graficacin [SCC-1010] Solucin.

Para hallar la ecuacin de la traza, debemos resolver el siguiente sistema:

Que resulta ser una elipse:

No se acostumbra escribir una curva en la forma anterior pues es difcil de manejar, resulta mucho ms cmodo y provechoso trabajar con curvas planas o en el espacio, dadas en forma paramtrica. En este caso la curva se puede escribir paramtricamente como:

Con

. La curva y las superficies se muestran en la figura siguiente:

Figura 3

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Software de cmputo cientfico Scilab (opensource)

Fecha de Actualizacin 15/08/2013

Pgina 54

Graficacin [SCC-1010]

4.- COMPETENCIAS ESPECFICAS Instalar el software de libre licencia Scilab, en scliab deber colocar la siguiente funcin para dibujar las trazas del parabolide

sobre los planos

, para cada

5. RESULTADOS Al finalizar, deber mostrar el resultado obtenido por esa curva y superficie. Como se muestra a continuacin:

Posteriormente, deber cambiar los valores de c, en el intervalo [-5,5]. Generar un reporte con los resultados obtenidos.

6. CONCLUSIONES Al concluir sta prctica el alumno aprender a construir curvas paramtricas y dibujar su superficie.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 55

Graficacin [SCC-1010]

Prctica
CARAS OCULTAS

10

Observaciones: Esta prctica incluye a la Prctica # 10 del temario de Graficacin que dice Eliminacin de caras ocultas.

1.- OBJETIVO Definir en un archivo de texto la informacin tridimensional de un objeto en 3D cncavo, como por ejemplo un cubo, un octaedro, un prisma o una pirmide. Elabore un programa que permita rotar el objeto en torno al eje Y desplegndolo sin mostrar las caras ocultas, aplicando el algoritmo de deteccin de caras ocultas basado en el vector normal.

2.- MARCO TERICO En grficos por computadoras la determinacin de las caras ocultas (HSR por sus siglas en ingls), tambin conocida como determinacin de las superficies visibles (VSD), es el proceso usado para determinar que superficies y partes de superficies son visibles o no desde algn punto de observacin.

Desde el inicio de los grficos por computadora, muchas investigaciones se han enfocado en la obtencin de realismo fsico en la imagen generada. Sin embargo generar imgenes realistas tiene un precio. Los algoritmos para alcanzar estos resultados son costosos en el sentido computacional, razn por la que hasta hace unos pocos aos solo podan incluirse en supercomputadoras o computadoras con hardware grfico de carcter muy especfico. Durante mucho tiempo las simulaciones tridimensionales, o se hacan en las computadoras antes mencionadas, o los programadores y diseadores tenan que hacer un esfuerzo extraordinario para lograr que quien emplease la tecnologa sobre una computadora de prestaciones comunes, no se sintiese defraudado por el bajo nivel de los grficos.

Hoy da existe una situacin diferente. Los resultados tecnolgicos se han incrementado y la posibilidad de presentar grficos en tiempo real es una realidad para las computadoras personales. Un resultado importante, ha sido la aparicin de tarjetas aceleradoras grficas. Estos dispositivos descargan, de manera considerable, el trabajo que hasta este momento se realizaba en el microprocesador de la computadora (CPU) a travs de procesos grficos implementados en software (software rendering).

Fecha de Actualizacin 15/08/2013

Pgina 56

Graficacin [SCC-1010] La seleccin por visibilidad ha sido un problema esencial en grficos por computadora desde sus inicios. Una variedad de algoritmos de HSR fueron desarrollados en los aos 70, para resolver el problema de la determinacin de secciones visibles de los objetos en la imagen final. El problema en la actualidad se considera resuelto y para la mayora de las aplicaciones interactivas el algoritmo de seleccin es el: z buffer.

En la actualidad el tema es retomado por la imposibilidad de representar grandes bases de datos 3D en tiempo real. Las mejoras que se han realizado al hardware, no resuelven este problema, ya que el aporte nunca ser suficiente ante el crecimiento de las bases de datos 3D. La solucin a este problema es tener un gasto de clculo solo para lo que ser finalmente representado y no en dependencia de todos los datos de entrada. Lo anterior es conocido como sensibilidad a la salida (output sensitivity). De esta forma, es posible, representar escenas con alto nmero de polgonos, cumpliendo con las exigencias de tiempo real.

Tcnicas para eliminacin de caras ocultas. La seleccin por visibilidad puede ser dividida en: seleccin de objetos que se encuentran dentro del prisma de visin (view frustum culling), seleccin por caras ocultas (back face culling), variacin del nivel de detalle (detail culling) y seleccin por oclusin (occlusion culling), encargada de eliminar objetos ocultados por otros objetos para el observador. En casos de interiores es utilizada una restriccin del campo de observacin al dirigirse la visin a travs de una puerta o una ventana. Esta restriccin se denomina tcnica de portales, (portal culling).

Seleccin por prisma de visin La seleccin por prisma es una representacin geomtrica del campo de visibilidad de la cmara. Naturalmente los objetos fuera de este prisma no sern visibles en la imagen final, por tanto sern descartados.

Seleccin de caras visibles En la seleccin de caras visibles se tiene en cuenta que algunas caras de los objetos o polgonos de la malla no son visibles desde la cmara por lo que no hay razn para que sean dibujadas. Esta es la razn por la que algunos videojuegos si acercamos la cmara dentro de algn objeto de la escena este desaparece.

Fecha de Actualizacin 15/08/2013

Pgina 57

Graficacin [SCC-1010] Seleccin por oclusin. Los objetos que se encuentran ocultados totalmente por otros objetos opacos pueden ser excluidos de la imagen final. Este es un mecanismo muy popular para aumentar el rendimiento del rendering de grandes escenas. Debido a su importancia y aplicacin de esta ltima categora, se profundizar un poco ms en la siguiente seccin. Algoritmos de espacio imagen Vs Algoritmos de espacio objeto. La idea de un algoritmo de visibilidad es realizar una eliminacin rpida y conservativa de aquellas partes de la escena que no son visibles. Los algoritmos de espacio objeto son aquellos que realizan clculos geomtricos en la escena y determinan cuando un objeto es visible o no. Este tipo de algoritmo es muy utilizado para realizar pruebas de visibilidad en entornos urbanos. Es muy comn seleccionar polgonos que realizarn funcin de oclusores.

Para reducir los clculos se realiza una aproximacin de los oclusores utilizando bounding volumes que no son ms que objetos con geometras simples como prismas o esferas que contienen al objeto real. En muchas ocasiones el entorno donde ser usado el algoritmo influye en la manera en que este es diseado. Los mtodos de espacio objeto pueden ser considerados sensibles a la salida, que no son ms que aquellos que su costo temporal depende solo del tamao de la salida no del tamao de la entrada. En el caso de los algoritmos de espacio imagen, la idea fundamental es realizar el clculo de visibilidad para cada frame. Estos, tienen la ventaja de actuar en un arreglo de resolucin finita lo que ofrece mayor facilidad de implementacin y robustez que los algoritmos de espacio objeto.

Otra gran ventaja de estos mtodos es que no tienen limitaciones en cuanto a la forma de los bloqueadores, cualquier objeto puede ser representado y utilizado para la oclusin. Una de las primeras tcnicas de espacio imagen fue el algoritmo de z buffer jerrquico. Esta solucin, se basa en el z buffer comn, pero utiliza dos estructuras de datos jerrquicas: Un octree y una pirmide de valores z. En los grficos por computadora, el z-buffering es la parte de la memoria de un adaptador de video encargada de gestionar las coordenadas de profundidad de las imgenes en los grficos en tres dimensiones (3-D), normalmente calculados por hardware y algunas veces por software. Es una de las soluciones al problema de visibilidad, que es el problema de decidir qu elementos de una escena renderizada son visibles y cuales ocultos. El algoritmo del pintor es otra solucin comn, aunque menos eficiente, tambin puede manejar escenas con elementos no opacos. El Z-buffering tambin se conoce como buffering de profundidad.

Fecha de Actualizacin 15/08/2013

Pgina 58

Graficacin [SCC-1010] Cuando un objeto es dibujado por una Tarjeta grfica 3D, la profundidad del pxel generado (coordenada z) se almacena en un buffer de datos (el z-buffer). Este buffer se suele distribuir como un array de 2 dimensiones (x-y) con un elemento por cada pixel de la pantalla. Si algn otro objeto de la escena se tiene que renderizar en el mismo pixel, la tarjeta grfica compara las dos profundidades y elige el ms cercano al observador. La profundidad elegida es entonces salvada en el z-buffer, reemplazando a la antigua. Al final, el z-buffer permitir a la tarjeta grfica reproducir correctamente la percepcin de la profundidad normal: los objetos cercanos ocultan a los ms lejanos. Este efecto se denomina Z-Culling.

La granuralidad de un z-buffer tiene una gran influencia en la calidad de la escena: un z-buffer de 16 bits puede producir un Artefacto (llamado "Z-fighting") cuando dos objetos estn muy prximos. Un zbuffer de 24 bits o 32 bits se comporta mucho mejor. Un z-buffer de 8 bits no se utiliza casi nunca ya que tiene muy poca precisin.

El rango de los valores de profundidad en el espacio de referencias de la cmara (Proyeccin 3D) a ser renderizado est normalmente definido entre un valor cercano, near y otro lejano far de . Despus de una transformacin de perspectiva, el nuevo valor de , o z, est definido por:

Donde z es el valor antiguo de

en el espacio de la cmara y a veces llamado w o w.

Los valores resultantes de z estn normalizados entre los valores -1 y 1, donde el plano cercano (near) est en -1 y el lejano (far) en 1. Los valores fuera de este rango corresponden a puntos que no estn en el frustum de visin y no sern pintados. Para implementar un z-buffer, los valores de z son interpolados linealmente a lo largo del espacio de la pantalla entre los vrtices de los polgonos. Estos valores intermedios se suelen almacenar en el zbuffer en coma flotante. Los valores de zse agrupan ms densamente cerca del plano cercano ( near) y ms esparcidos en el resto de la escena, resultando una precisin mayor cerca de la cmara. Cuanto ms cerca est el plano cercano a la cmara, menor precisin hay en el resto de la escena.

Fecha de Actualizacin 15/08/2013

Pgina 59

Graficacin [SCC-1010] 3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

4.- COMPETENCIAS ESPECFICAS Se deber crear un cubo en el centro de la pantalla, con primitivas de dibujo, un prisma rectangular que se encuentre detrs del cubo. Deber tener la opcin de poder ir rotando y trasladando cada uno de los objetos que se encuentren en la escena. Despus de creados y aplicndoles las transformaciones, aplicar el buffer de profundidad (Depth Buffer Bit) para observar que efectivamente, se han ocultado las caras.

Al siguiente programa, hay que modificarlo para crear el cubo y el prisma, ya estn creados un cuadrado y un tringulo. Tambin contiene las instrucciones del buffer de profundidad necesarias.
import javax.media.opengl.GL; import javax.media.opengl.GLAutoDrawable; import javax.media.opengl.GLCanvas; import javax.media.opengl.GLCapabilities; import javax.media.opengl.GLEventListener; import javax.media.opengl.glu.GLU; import javax.media.opengl.glu.GLUquadric; import javax.swing.JFrame; public class proyecciones_2 extends JFrame{ public static void main (String[] args) { proyecciones_2 myFrame = new proyecciones_2(); myFrame.setVisible(true); myFrame.setDefaultCloseOperation(EXIT_ON_CLOSE); } public proyecciones_2() { setSize(700,600); setLocation(10,50); setTitle("Caras Ocultas"); GraphicListener listener=new GraphicListener();

Fecha de Actualizacin 15/08/2013

Pgina 60

Graficacin [SCC-1010]
GLCanvas canvas = new GLCanvas(new GLCapabilities()); canvas.addGLEventListener(listener); getContentPane().add(canvas); } public class GraphicListener implements GLEventListener{ public void display(GLAutoDrawable arg0) { GL gl = arg0.getGL(); GLU glu = new GLU(); gl.glClear(GL.GL_COLOR_BUFFER_BIT|GL.GL_DEPTH_BUFFER_BIT); glu.gluPerspective(60.0,1.0,1.0,100.0); gl.glDepthFunc(GL.GL_LEQUAL); gl.glEnable(GL.GL_DEPTH_TEST); gl.glClearDepth(1.0); gl.glTranslatef(0,0,-2f); //Alejamos el cuadro del observador dos unidades en el eje Z gl.glBegin(GL.GL_QUADS); gl.glColor3f(1.0F,0.0F,0.0F); gl.glVertex3f(-0.5F,0.5F,-0.5F); gl.glVertex3f(-0.5F,-0.5F,0.5F); gl.glVertex3f(0.5F,-0.5F,0.5F); gl.glVertex3f(0.5F,0.5F,-0.5F); gl.glEnd(); gl.glBegin(GL.GL_TRIANGLES); gl.glColor3f(0.0F,0.0F,1.0F); gl.glVertex3f(0.0F,0.5F,0.F); gl.glVertex3f(-0.7F,-0.5F,0.0F); gl.glVertex3f(0.7F,-0.5F,0.0F); gl.glEnd(); gl.glFlush(); } public void displayChanged(GLAutoDrawable arg0, boolean arg1, boolean arg2) { }//displayChanged public void init(GLAutoDrawable arg0) { GL gl=arg0.getGL();

Fecha de Actualizacin 15/08/2013

Pgina 61

Graficacin [SCC-1010]
gl.glEnable(GL.GL_BLEND); gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE_MINUS_SRC_ALPHA); }//Init public void reshape(GLAutoDrawable arg0, int arg1, int arg2, int arg3, int arg4) { }//reshape... }//GraphicListener }

5. RESULTADOS Al finalizar esta prctica, deber entregar el alumno un reporte electrnico sobre la importancia de aplicar correctamente el buffer de profundidad a sus escenarios. Deber capturar la pantalla donde aun no se aplica el Z-Buffer y cuando se ha aplicado para verificar los cambios realizados.

6. CONCLUSIONES El alumno comprender el uso del Buffer de profundidad (Z-Buffer) para ocultar caras de objetos en una escena 2D y 3D. As podr aplicar esta tcnica a su proyecto final de materia.

7.- BIBLIOGRAFA

1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 62

Graficacin [SCC-1010]

Prctica

11

CMARA SINTTICA
Observaciones: Esta prctica incluye a la Prctica # 11 del temario de Graficacin que dice Cmara sinttica.

1.- OBJETIVO Escribir un programa que permita desplegar el objeto definido en la prctica 7, bajo el esquema de visualizacin de la cmara sinttica, para distintos valores de los vectores N, V y U (que definen el sistema de coordenadas de visin). Sin perspectiva y con perspectiva. Usar la API propuesta en clase.

2.- MARCO TERICO La cmara son nuestros ojos virtuales. Todo lo que ella vea ser proyectado, discretizado y finalmente mostrado en nuestra ventana del sistema operativo. Podemos imaginar que de la cmara emana el volumen de visualizacin de forma que se traslada con ella. Los parmetros a definir en cuanto a la cmara son:

Posicin XYZ: En el mundo 3D, al igual que cualquier objeto, la cmara debe posicionarse.

Orientacin: Una vez situada, debe orientarse. Direccin de AT: Define hacia donde estoy mirando, a qu punto concretamente.

En OpenGL, la instruccin es la siguiente:

gluLookAt(eyeX, eyeY, eyeZ, ATX, ATY, ATZ, upX, upY, upZ);

Fecha de Actualizacin 15/08/2013

Pgina 63

Graficacin [SCC-1010] Donde: Coordenadas del eye: Es la posicin XYZ donde se colocar la cmara dentro del mundo. Coordenadas de AT: Es el valor XYZ del punto al que queremos que mire la cmara. Coordenadas del vector up: Este es un vector y NO un punto. Con l regularemos la orientacin de la cmara. ste es el vector que mira hacia arriba. Si entendemos que el vector que mira hacia delante es el que va del eye hasta la mirada. Variando up, variamos la orientacin,

Esta es la funcin que determina dnde y cmo est dispuesta la cmara. La posicin de la cmara no tiene nada que ver con la proyeccin que se haya especificado.

La proyeccin se declara solo una vez, por lo regular, al principio del programa en una funcin inicializadora, mientras que la cmara se mueve continuamente segn nos interese.

Fecha de Actualizacin 15/08/2013

Pgina 64

Graficacin [SCC-1010] Aadir a esto que la matriz que se modifica al llamar a sta funcin no tiene que ser GL_PROJECTION, sino GL_MODELVIEW. OpenGL calcular todas las transformaciones que aplicar al mundo 3D para que manteniendo la cmara en el origen de coordenadas y enfocada en la direccin negativa de las Zs nos de la sensacin de que lo que estamos viendo todo desde un cierto lugar. Recordar siempre activar la matriz antes de llamar a glLookAt de esta forma:

gl.glMatrixMode(GL.GL_MODELVIEW);

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Computadora Procesador de palabras Lenguaje de programacin Java JDK 1.7 o Borland C Libreras de dibujo OpenGL 4.0 o JOGL

4.- COMPETENCIAS ESPECFICAS El alumno deber cargar el siguiente cdigo:


import javax.media.opengl.GL; import javax.media.opengl.glu.GLUquadric; import javax.media.opengl.GLAutoDrawable; import javax.media.opengl.GLCanvas; import javax.media.opengl.GLCapabilities; import javax.media.opengl.GLEventListener; import javax.media.opengl.glu.GLU; //import javax.media.opengl.glu.GLUquadric; import javax.swing.JFrame; import com.sun.opengl.util.GLUT; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import com.sun.opengl.util.*;

public class camara_primitivas extends JFrame implements KeyListener{

Fecha de Actualizacin 15/08/2013

Pgina 65

Graficacin [SCC-1010]

static GL gl; static GLU glu; static GLUT glut; static GLCanvas canvas; static int ancho = 1000; static int alto = 600; private static float rotarX=0; private static float rotarY=0; private static float rotarZ=0; private static float trasladaX =0; private static float trasladaY =0; private static float trasladaZ =0; public static void main (String[] args) { camara_primitivas myFrame = new camara_primitivas(); myFrame.setVisible(true); myFrame.setDefaultCloseOperation(EXIT_ON_CLOSE); } public camara_primitivas() { setSize(ancho,alto); setLocation(10,50); setTitle("Viewport"); GraphicListener listener=new GraphicListener(); ancho = this.getWidth(); alto = this.getHeight(); System.out.println("Ancho: "+ancho+" , Alto: "+alto); canvas = new GLCanvas(); gl = canvas.getGL(); glu = new GLU(); glut = new GLUT(); canvas.addGLEventListener(listener); getContentPane().add(canvas); Animator animator = new Animator(canvas); animator.start(); addKeyListener(this);

Fecha de Actualizacin 15/08/2013

Pgina 66

Graficacin [SCC-1010]
} public class GraphicListener implements GLEventListener{ public void display(GLAutoDrawable arg0) { gl = arg0.getGL(); gl.glClear(GL.GL_COLOR_BUFFER_BIT); gl.glColor3f(.92f,.625f,.12f); gl.glMatrixMode(GL.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(-5.0,5.0,-5.0,5.0,-5.0,5.0); //tetera superior izquierda gl.glViewport(0,alto/2,ancho/2,alto/2); gl.glLoadIdentity(); gl.glOrtho(-5.0,5.0,-5.0,5.0,-5.0,5.0); gl.glRotatef(rotarX,1f,0f,0f); gl.glRotatef(rotarY,0f,1f,0f); gl.glRotatef(rotarZ,0f,0f,1f); glu.gluLookAt(0,0,1,0,0,0,0,1,0+trasladaZ); glut.glutWireTeapot(2.0); //tetera superior derecha gl.glViewport(ancho/2,alto/2,ancho/2,alto/2); gl.glLoadIdentity(); gl.glOrtho(-5.0,5.0,-5.0,5.0,-5.0,5.0); glu.gluLookAt(3,0,1,0,0,1+trasladaZ,0,1,1+trasladaZ); gl.glRotatef(rotarX,1f,0f,0f); gl.glRotatef(rotarY,0f,1f,0f); gl.glRotatef(rotarZ,0f,0f,1f); gl.glColor3f(0.12f,.625f,0.92f); glut.glutWireTeapot(2.0); //Tetera inferior izquierda gl.glViewport(0,0,ancho/2,alto/2); gl.glMatrixMode(GL.GL_PROJECTION);

Fecha de Actualizacin 15/08/2013

Pgina 67

Graficacin [SCC-1010]
gl.glLoadIdentity(); gl.glOrtho(-5.0, 5.0, -5.0, 5.0, -5.0, 5.0); glu.gluLookAt(0,-3,0,0,0,0,0,0,.5+trasladaZ); gl.glRotatef(rotarX,1f,0f,0f); gl.glRotatef(rotarY,0f,1f,0f); gl.glRotatef(rotarZ,0f,0f,1f); gl.glColor3f(0.12f,.92f,0.625f); glut.glutWireTeapot(2.0f); //tetera inferior derecha gl.glViewport(ancho/2,0,ancho/2,alto/2); gl.glLoadIdentity(); gl.glOrtho(-5.0,5.0,-5.0,5.0,-5.0,5.0); glu.gluLookAt(0,3,0,0,0,0,0,0,-.5+trasladaZ); gl.glRotatef(rotarX,1f,0f,0f); gl.glRotatef(rotarY,0f,1f,0f); gl.glRotatef(rotarZ,0f,0f,1f); gl.glColor3f(0.625f,.12f,0.92f); glut.glutWireTeapot(2.0f); gl.glFlush(); }//display public void displayChanged(GLAutoDrawable arg0, boolean arg1, boolean arg2) { }//displayChanged public void init(GLAutoDrawable arg0) { gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); }//Init
public void reshape(GLAutoDrawable arg0, int arg1, int arg2, int arg3, int arg4){

gl.glViewport(0,alto/2,ancho/2,alto/2); gl.glMatrixMode(GL.GL_PROJECTION); gl.glLoadIdentity(); glu.gluPerspective(40,-1,5,50); gl.glOrtho(-5.0, 5.0, -5.0, 5.0, -5.0, 5.0);

Fecha de Actualizacin 15/08/2013

Pgina 68

Graficacin [SCC-1010]
canvas.repaint(); }//reshape... }//GraphicListener //Creamos el metodo que detecte que teclas se estan pulsando... public void keyPressed(KeyEvent arg0){ if(arg0.getKeyCode()==KeyEvent.VK_X){ rotarX+=1.0f; System.out.println("El valor de X en la rotacion: "+rotarX); } if(arg0.getKeyCode()==KeyEvent.VK_A){ rotarX-=1.0f; System.out.println("El valor de X en la rotacion: "+rotarX); } if(arg0.getKeyCode()==KeyEvent.VK_Y){ rotarY+=1.0f; System.out.println("El valor de Y:"+rotarY); } if(arg0.getKeyCode()==KeyEvent.VK_B){ rotarY-=1.0f; System.out.println("El valor de Y:"+rotarY); } if(arg0.getKeyCode()==KeyEvent.VK_Z){ rotarZ+=1.0f; System.out.println("El valor de Z:"+rotarZ); } if(arg0.getKeyCode()==KeyEvent.VK_C){ rotarZ-=1.0f; System.out.println("El valor de Z:"+rotarZ); } if (arg0.getKeyCode() == KeyEvent.VK_RIGHT){ trasladaZ+=.10f; System.out.println("El valor de Z:"+trasladaZ); } if(arg0.getKeyCode()==KeyEvent.VK_LEFT){ trasladaZ-=.10f; System.out.println("El valor de Z:"+trasladaZ); }

Fecha de Actualizacin 15/08/2013

Pgina 69

Graficacin [SCC-1010]
if(arg0.getKeyCode() == KeyEvent.VK_ESCAPE){ rotarX=0; rotarY=0; rotarZ=0; trasladaZ=0; } }//keyPressed(KeyEvent arg0) public void keyReleased(KeyEvent arg0) { } public void keyTyped(KeyEvent arg0) { } }//camara_primitivas

Despus de compilarlo y ejecutarlo, observar cmo se va manipulando la cmara en la escena en cada uno de los puertos de visin. Despus deber cambiar la posicin de la cmara en cada una de las figuras creadas. Para verlas con un ngulo de 30 grados.

5. RESULTADOS Al finalizar esta prctica, deber entregar el alumno un reporte electrnico sobre la manipulacin de la cmara, las instrucciones que se necesitan y los parmetros de esas instrucciones. Deber capturar la pantalla donde se vea los cambios de posicin o de visin de la cmara.

6. CONCLUSIONES Con sta prctica, el alumno podr desplazarse a travs del escenario de una escena, tal como si fuese una persona la que se esta moviendo. Esto lo podr aplicar a su proyecto final de materia.

7.- BIBLIOGRAFA 1. HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico 2. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 3. HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall.

Fecha de Actualizacin 15/08/2013

Pgina 70

Graficacin [SCC-1010]

LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR


FOLIO 1 2 3 4 5 6 NOMBRE DEL MATERIAL, EQUIPO O REACTIVO Procesador de palabras Computadora Entorno de desarrollo NetBeans 7.3 o DevC iTex para Java Libreras de dibujo OpenGL 4.0 o JOGL Lenguaje de programacin Java JDK 1.7 o Borland C CANT. UNIDAD

LISTA DE BIBLIOGRAFA REQUERIDA


FOLIO 1 2 3 4 5 6 BIBLIOGRAFIA
HEARN, Donald & M. Pauline Baker, Grficas por computadora 2 edicin, Ed. Prentice Hall Hispanoamericana. Mxico GONZLEZ, Rafael C. & Richard E. Woods, Tratamiento digital de imgenes (2. Edicin), Addison- Wesley Longman, Mxico, 1996. FOLEY, James & Andries Van Dam, Introduccin a la graficacin por computador, Ed. Addison Wesley Iberoamericana, 1996 ROGERS, David .F., Procedural Elements of Computer Graphics, 2nd Edition, Ed. McGraw Hill HILL Jr., F. S., Computer Graphics Using Open Gl., Ed. Prentice-Hall. WATT, Alan H. & Watt, Mark, Advance animation and rendering techniques: theory and practice, 1st Edition Ed. Addison-Wesley Professional,1992, ISBN 0201544121

CANT

Fecha de Actualizacin 15/08/2013

Pgina 71

Graficacin [SCC-1010]

CONTROL DE CAMBIOS DEL MANUAL DE PRCTICAS

DATOS GENERALES
FECHA DE ACTUALIZACION
15/08/2013

ELABOR Y/O ACTUALIZ


LIC. IVAN RAFAEL SNCHEZ JUREZ

DESCRIPCIN DE LA ACTUALIZACIN
SE ELABOR POR PRIMERA VEZ ESTE MANUAL DE PRCTICAS EN EL MES DE AGISTO DE 2013

Fecha de Actualizacin 15/08/2013

Pgina 72