1

MANUAL PARA EL CURSO DE GRAFICACIN

Mtra. Ana Cecilia Ruiz Calvillo

Cd. Obregn Sonora, Enero 2008

2

DIRECTORIO Mtro. Sergio Pablo Mariscal Alvarado

Director General ITESCA

Lic. Clara E. Mark Corona Subdirectora

Mtro. Alejandro Faccinetto Ruiz Jefe de la Divisin Acadmica

Mtra. Lilia B. Navarro Fragoso Jefa del Departamento de Desarrollo Acadmico

Mtro. Leobardo Rodrguez Jefe de Carrera Ingeniera en Sistemas Computacionales

Mtra. Ana Cecilia Ruiz Calvillo Elaborador del Manual

ESTE MANUAL FUE REALIZADO PARA USO EXCLUSIVO DEL INSTITUTO TECNOLGICO

SUPERIOR DE CAJEME

D.R. ITESCA, Cd.Obregn, Sonora; Mxico. Carretera Internacional a Nogales Km. 2.

Tel. (644) 410-86-50

3

INDICE INTRODUCCIN 5 1. INTRODUCCIN A LA GRAFICACIN POR COMPUTADORA 1.1 Introduccin. 6

1.2 Evolucin de la programacin de grficos por computadora. 10

1.2.1 Nivel Hardware. 10

1.2.2 Nivel Sistema Operativo. 13

1.2.3 GKS y PHIGS. 16

1.2.4 OpenGL. 19

1.2.5 Java. 21

1.2.5.1 Java 2D. 24

1.2.5.2 Java 3D. 26

1.3 Campos relacionados con la graficacin. 28

2. TRANSFORMACIONES GEOMTRICAS 2.1 Transformaciones bidimensionales. 30

2.2 Coordenadas homogneas y representacin matricial. 32

2.3 Tipos de transformaciones bidimensionales. 36

2.4 Composicin de transformaciones bidimensionales. 45

2.5 Transformaciones de la composicin general. 49

2.6 Transformacin ventana-rea de vista. 53

2.7 Representacin matricial de transformaciones tridimensionales. 54

2.7.1 Transformaciones tridimensionales. 56

2.7.2 Matriz de transformacin. 56

2.7.3 Tipos de transformaciones tridimensionales. 61

2.8 Composicin de transformaciones tridimensionales 71

3. MODELADO GEOMTRICO 3.1 Modelos geomtricos. 76

4

3.2 Proyecciones. 90

3.2.1 El modelo de vistas. 94

3.2.2 Modo de Compatibilidad. 96

3.2.3 Configuracin de vista. 99

3.2.4 Creacin de una vista propia. 102

3.3 Representacin tridimensional de objetos. 105

3.3.1 Superficies de polgonos, curvas y cuadrticas. 105

3.3.2 Representaciones de spline y Curvas Bzier. 112

3.3.3 Superficies Bzier. 122

ANEXOS

Anexo 1. Preguntas y Ejercicios de Unidad 1. 126

Anexo 2. Preguntas y Ejercicios de Unidad 2. 128

Anexo 3. Preguntas y Ejercicios de Unidad 3. 132

Anexo 4. ndice de figuras. 137

Anexo 5. ndice de programas. 139 Anexo 6. ndice de tablas. 141

GLOSARIO

142

BIBLIOGRAFA

147

5

INTRODUCCIN El rpido desarrollo del hardware de computadora, las aplicaciones grficas y

tecnologas de red han hecho que la graficacin por computadora sea un tema

crucial en estos das. El modelado y renderizado de objetos grficos virtuales, son

los principales objetivos de la graficacin. Los tpicos involucrados con este

proceso abarcan una gran rama de disciplinas desde las matemticas y

tecnologas de informacin hasta psicologa, medicina, ingeniera y arte.

La materia de graficacin tiene por objetivo lograr que el estudiante aplique

tcnicas y algoritmos bsicos de representacin y visualizacin de objetos en dos

y tres dimensiones para desarrollar modelos de simulacin e interfaces hombre

mquina. El presente manual pretende ayudar a lograr dicho objetivo; ya que

contiene ejemplos de programas que ilustran cada concepto introducido. Cuenta

con un anexo de preguntas y programas a resolver por unidad, para reforzar el

aprendizaje adquirido; as como un glosario de terminolga relacionada con la

graficacin. Est dividido en tres secciones:

Introduccin a la graficacin por computadora: se presenta conceptos fundamentales de la graficacin, su objetivo y aplicaciones, as como la

evolucin de los lenguajes de programacin utilizados para su desarrollo.

Transformaciones geomtricas: se dan a conocer los principales conceptos y aplicaciones de transformaciones geomtricas en dos y tres

dimensiones, as como la representacin matricial de objetos grficos.

Modelado geomtrico: se dan a conocer las tcnicas para la representacin tridimensional de objetos y sus diferentes proyecciones en

el rea de vista.

Se ha utilizado el lenguaje de programacin Java ya que es un lenguaje de

programacin multiplataforma, es simple y orientado a objetos. Se emplean sus

aplicaciones en Java 2D y Java 3D debido a que son paquetes que proporcionan

grandes capacidades y poderosas interfaces para el modelado y programacin de

grficos.

6

1.1 Introduccin.

La graficacin por computadora estudia la teora y las tcnicas de modelado,

procesamiento y renderizado de objetos grficos en computadoras. El objetivo

bsico de la graficacin por computadora es construir un mundo virtual a partir de

objetos grficos y renderizar una escena del modelo virtual a un dispositivo grfico

a partir de vistas especficas.

INTRODUCCIN A LA GRAFICACIN POR COMPUTADORA

7

Figura 1.1 Tareas principales de la graficacin por computadora: modelando un mundo virtual y

renderizandolo a una escena

Un sistema grfico tpicamente consiste en dos componentes: un modelador y un

renderizador. El modelador es el responsable de la construccin de los modelos

del mundo virtual y el renderizador realiza el renderizado de la escena. Un

sistema de modo retenido mantiene un persistente modelo de los objetos grficos

y la funcin del modelador es explcita. Un sistema de modo inmediato renderiza

los objetos inmediatamente y el modelo es mas transitorio. Esta perspectiva del

paradigma de modelado-renderizado es conveniente para el estudio de sistemas

grficos, an cuando la separacin no es clara en algunos sistemas.

Tpicamente los objetos grficos a modelar estn en un espacio ya sea 2D o 3D.

Este espacio comn alberga todos los objetos grficos y es comnmente llamado

espacio del mundo, espacio mundo o mundo espacial. En una escena

renderizada del espacio mundo, la salida principal del sistema grfico, tiene

tpicamente en un formato en 2D. Consecuentemente las tcnicas involucradas en

grficos 2D y 3D son comnmente tratados en temas separados.

Los objetos grficos a ser modelados en el espacio mundo son usualmente

entidades geomtricas tales como lneas y superficies; pero tambin se incluyen

otros objetos especiales tales como iluminacin, textos e imgenes. Los objetos

grficos pueden poseer muchas caractersticas y propiedades tales como color,

trasparencia y texturas.

Para modelar objetos geomtricos se utilizan diversas representaciones

matemticas. Segmentos de lnea recta y mallas de polgonos simples

8

proporcionan representaciones simples y compactas. Solo los vrtices de las

estructuras necesitan almacenarse y son fciles de implementar. Las

representaciones ms sofisticadas incluyen curvas spline y Bzier y superficies

Bzier; stas son verstiles y requieren solo del almacenamiento de ciertos

puntos de control relativos.

Las transformaciones geomtricas son aplicadas a los objetos para alcanzar el

posicionamiento propio de los mismos en un espacio virtual. Las transformaciones

de este tipo son llamadas transformaciones de objetos. Las transformaciones

tambin se utilizan para las vistas; estas son conocidas como transformaciones

de visualizacin. Una familia de transformaciones geomtricas muy til es la

AffineTransforms, la cual incluye la mayora de las transformaciones comunes

tales como traslaciones, rotaciones, escalaciones y reflecciones. Un conjunto ms

general de transformaciones son las transformaciones proyectivas, que son muy

utilizadas para las vistas en 3D.

Una vista es empleada para ver el modelo en el mundo virtual desde una

perspectiva especfica. Un proceso de una vista en 2D es relativamente simple; la

transformacin de vistas es usualmente indistinguible de la transformacin del

objeto y las caractersticas de renderizado tales como reglas de composicin y

fragmentos de trayectoria pueden ser aplicadas. Una vista en 3D es mucho ms

complicada; tal como los ojos o las cmaras, las vistas en 3D involucran el

proceso de proyeccin que mapea los objetos 3D a un plano 2D. Muchos

parmetros tales como la proyeccin, la posicin de vista, orientacin y un campo

de vista pueden afectar el renderizado en 3D.

Para poder alcanzar el renderizado realstico del mundo virtual, existen muchos

temas de rendereizado que tienen que direccionarse; es decir las ubicaciones

relativas de los objetos tienen que reflejarse correctamente en las imgenes

renderizadas. Por ejemplo, un objeto puede estar detrs de otro, y la porcin

oculta no debe mostrarse en la imagen; las fuentes de iluminacin deben ser

consideradas ya que las propiedades de los materiales de los objetos afectarn

su apariencia.

9

Las posibilidades y caractersticas de los dispositivos de hardware tienen un gran

impacto en los sistemas grficos. Los dispositivos de salida ms comunes para

mostrar los resultados del renderizado de grficos son los monitores de video y

las impresoras. Otros dispositivos incluyen los plotters y los proyectores

hologrficos. En cuanto a los dispositivos de entrada se encuentran el ratn,

josticks y las tabletas digitalizadoras.

La animacin es tambin una parte importante de la graficacin por computadora.

En lugar de tener imgenes estticas, la animacin produce contenidos grficos

dinmicos y su renderizado. En las aplicaciones tales como renderizado de

escenas de pelculas y juegos, la animacin juega un papel muy importante. Otro

aspecto dinmico de la graficacin por computadora es la interaccin. En

respuesta a las entradas de usuario, el modelo de grficos puede cambiar acorde

a lo que se le indica. El fundamento principal de GUI (Interfaz Grfica de Usuario)

se basa en las interacciones del usuario con los sistemas grficos.

La graficacin por computadora tiene una amplia gama de aplicaciones. La

popularidad de los ambientes GUI ha hecho de los grficos una parte integral de

los programas de usuario. CAD (Diseo de Ayuda por Computadora) y otras

aplicaciones de ingeniera dependen en gran parte de los sistemas grficos. La

visualizacin de datos y otras aplicaciones cientficas tambin hacen gran uso de

los grficos. Con el rpido desarrollo de la instrumentacin basada en

computadoras tal como el CT (Tomografa por Computadora), PET (Tomografa

de Emisin Positrnica) y MRI (Imagen de Resonancia Magntica), los sistemas

mdicos han abierto sus puertas a tecnlogos en graficacin por computadora.

Adems la graficacin por computadora es un ingrediente crucial para vdeo

juegos y otras aplicaciones en el mundo del entretenimiento.

Tradicionalmente la graficacin por computadora ha lidiado con detalles de

implementacin, utilizando algoritmos de bajo nivel para convertir figuras

primitivas tales como lneas a pixeles, para determinar superficies escondidas de

una vista, para calcular los valores de color de los puntos en una superficie, etc.

10

Estos algoritmos y mtodos han hecho que la graficacin por computadora sea un

tema considerado como tcnicamente difcil y complejo.

1.2 Evolucin de la programacin en grficos por computadora.

La programacin en grficos por computadora ha aparecido en casi todos los

niveles de la arquitectura de computadora. Hablando en trminos generales se ha

ido moviendo de un nivel bajo (al utilizar mtodos dependientes de la plataforma

utilizada) hasta ambientes abstractos, de alto nivel y portables.

La siguiente tabla nos muestra ejemplos de los ambientes de programacin

grfica en varios niveles de la arquitectura de computadora.

Plataforma independiente (Java 2D y Java 3D)

Estndares Grficos (GKS, PHIGS, OpenGL)

OS (WIN32, X, Mac OS)

Hardware (registro directo / programacin de buffer de video) Tabla 1.1 Programacin grfica en diferentes niveles

1.2.1 Nivel Hardware.

Los programas de grficos por computadoras dependen de dispositivos de salida

con capacidades grficas. Los dispositivos ms comunes en este caso son los

monitores CRT y paneles LCD. Estos son dispositivos de rasteo 2D que

proporcionan una superficie de pantalla consistente de un arreglo rectangular de

puntos discretos. Un dispositivo de pantalla de este tipo es comnmente

manejado por una tabla de grficos dedicados con su propio procesador y su

propia memoria.

Las aplicaciones grficas de bajo nivel comnmente programan los grficos

directamente al hardware. En computadoras personales con MSDOS, por

ejemplo, la mayora de las aplicaciones grficas accesan directamente a la

11

memoria de la pantalla. A pesar de que el BIOS y el DOS proporcionan cierto

soporte primitivo para funciones grficas, son considerados muy lentos para

programas grficos intensos. Tales programas estn tpicamente escritos en

lenguaje ensamblador y manipulan los registros del hardware y los bferes de

video de una manera muy dependiente del hardware.

El siguiente cdigo muestra un programa en ensamblador que demuestra la

programacin grfica a bajo nivel. Utiliza Microsoft Macro Assembler y puede ser

ejecutado en cualquier mquina compatible con IBM PC y con una tarjeta de

grficos VGA. El programa dibuja un crculo escribiendo directamente en las

localidades de memoria del bfer de video. .model small,stdcall .stack 100h .386 .data saveMode BYTE ? ; saved video mode xc WORD ? ; center x yc WORD ? ; center y x SWORD ? ; x coordinate y SWORD ? ; y coordinate dE SWORD ? ; east delta dSE SWORD ? ; southeast delta w WORD 320 ; screen width .code main PROC mov ax,@data mov ds,ax ;Set Video Mode 320X200 mov ah,0Fh ; get current video mode int 10h mov saveMode,al ; save mode mov ah,0 ; set new video mode mov al,13h ; mode 13h int 10h push 0A000h ; video segment address pop es ; ES = A000h (video segment). ;Set Background mov dx,3c8h ; video palette port (3C8h) mov al,0 ; set palette index out dx,al ;Set screen background color to dark blue. mov dx,3c9h ; port address 3C9h mov al,0 ; red out dx,al mov al,0 ; green out dx,al mov al,32 ; blue (32/63) out dx,al ; Draw Circle ; Change color at index 1 to yellow (63,63,0) mov dx,3c8h ; video palette port (3C8h) mov al,1 ; set palette index 1

12

out dx,al mov dx,3c9h ; port address 3C9h mov al,63 ; red out dx,al mov al,63 ; green out dx,al mov al,0 ; blue out dx,al mov xc,160 ; center of screen mov yc,100 ; Calculate coordinates mov x, 0 mov y, 50 ; radius 50 mov bx, -49 ; 1-radius mov dE, 3 mov dSE, -95 DRAW: call Draw_Pixels ; Draw 8 pixels cmp bx, 0 ; decide E or SE jns MVSE add bx, dE ; move east add dE, 2 add dSE, 2 inc x jmp NXT MVSE: add bx, dSE ; move southeast add dE, 2 add dSE, 4 inc x dec y NXT: mov cx, x ; continue if x < y cmp cx, y jb DRAW ; Restore Video Mode mov ah,10h ; wait for keystroke int 16h mov ah,0 ; reset video mode mov al,saveMode ; to saved mode int 10h .EXIT main ENDP ; Draw 8 pixels symmetrical about the center Draw_Pixels PROC ; Calculate the video buffer offset of the pixel. mov ax, yc add ax, y mul w add ax, xc add ax, x mov di, ax mov BYTE PTR es:[di],1 ; store color index ; Horizontal symmetrical pixel sub di, x sub di, x mov BYTE PTR es:[di],1 ; store color index ; Vertical symmetrical pixel mov ax, yc sub ax, y mul w add ax, xc add ax, x mov di, ax mov BYTE PTR es:[di],1 ; store color index

13

; Horizontal pixel sub di, x sub di, x mov BYTE PTR es:[di],1 ; store color index ; Switch x, y to get other 4 pixels mov ax, yc add ax, x mul w add ax, xc add ax, y mov di, ax mov BYTE PTR es:[di],1 ; store color index sub di, y sub di, y mov BYTE PTR es:[di],1 ; store color index mov ax, yc sub ax, x mul w add ax, xc add ax, y mov di, ax mov BYTE PTR es:[di],1 ; store color index sub di, y sub di, y mov BYTE PTR es:[di],1 ; store color index ret Draw_Pixels ENDP END main

Programa 1.1 Cdigo en ensamblador que muestra un crculo.

Figura 1.2 Crculo creado al ejecutar el cdigo en ensamblador.

1.2.2 Nivel a Sistema Operativo.

Las infraestructuras de grficos a bajo nivel proporcionan facilidades bsicas para

programar las pantallas. Sin embargo, la programacin directa a los buffers de

video y a los registros del hardware no es una forma efectiva para aplicaciones

generales de grficos. El programar a nivel de hardware requiere del

conocimiento a fondo de los dispositivos adems que es tedioso el hacer tareas

14

simples. Los programas escritos a este nivel no son portales aun para diferentes

dispositivos en la misma plataforma.

La programacin de interfaces a alto nivel es necesaria para facilitar la carga de la

programacin grfica. Debido a las inherentes complejidades de los problemas

grficos, es deseable proporcionar una capa de abstraccin para la programacin

de aplicaciones. Un lugar natural para agregar dicha abstraccin es el sistema

operativo.

Con el desarrollo y la expansin de aplicaciones de interfaces grficas de usuario

(GUI) en los sistemas modernos de computadora, los grficos soportados en los

sistemas operativos se han convertido cada vez en ms comunes y extensivos.

Las APIs proporcionadas al nivel de sistema operativo proporcionan una interfaz

uniforme para la programacin grfica en la misma plataforma. Normalmente las

diferencias de hardware son complacidas al utilizar drivers especficos para los

dispositivos. Un driver implementa una interface estndar con el sistema operativo

para un dispositivo particular. Los programas de aplicaciones solo necesitan

llamar a funciones grficas estndares proporcionadas por el sistema operativo y

se evitan la tarea de lidiar con las especificaciones del hardware.

Win32 es la API para el sistema operativo de 32 bits de Windows tal como

Windows 9x/ME/NT/2000/XP. El siguiente cdigo muestra un programa de WIN32

que dibuja un crculo. Este es un ejemplo simple de un programa en Windows

escrito en lenguaje C. El programa crea una ventana estndar y llama

directamente al API de WIN32 para dibujar el crculo en el rea del cliente de la

ventana principal del programa. El crculo est centrado en la ventana y el tamao

es ajustado automticamente si la ventana se ajusta. #include #include LRESULT CALLBACK MainWndProc (HWND hwnd, UINT nMsg, WPARAM wParam, LPARAM lParam) { HDC hdc; /* Device context used for drawing */ PAINTSTRUCT ps; /* Paint structure used during drawing */ RECT rc; /* Client area rectangle */ int cx; /* Center x-coordinate */ int cy; /* Center y-coordinate */ int r; /* Radius of circle */

15

/* Message processing.*/ switch (nMsg) { case WM_DESTROY: /* The window is being destroyed, close the application */ PostQuitMessage (0); return 0; break; case WM_PAINT: /* The window needs to be redrawn. */ hdc = BeginPaint (hwnd, &ps); GetClientRect (hwnd, &rc); /* Calculater center and radius */ cx = (rc.left + rc.right)/2; cy = (rc.top + rc.bottom)/2; if (rc.bottom - rc.top < rc.right - rc.left) r = (rc.bottom - rc.top) / 2 - 20; else r = (rc.right - rc.left) / 2 - 20; Ellipse(hdc, cx-r, cy-r, cx+r, cy+r); EndPaint (hwnd, &ps); return 0; break; } return DefWindowProc (hwnd, nMsg, wParam, lParam); } int WINAPI WinMain (HINSTANCE hInst, HINSTANCE hPrev, LPSTR lpCmd, int nShow) { HWND hwndMain; /* Main window handle */ MSG msg; /* Win32 message structure */ WNDCLASSEX wndclass; /* Window class structure */ char* szMainWndClass = "WinCircle"; /* The window class name */ /* Create a window class */ /* Initialize the entire structure to zero */ memset (&wndclass, 0, sizeof(WNDCLASSEX)); /* The class Name */ wndclass.lpszClassName = szMainWndClass; /* The size of the structure. */ wndclass.cbSize = sizeof(WNDCLASSEX); /* All windows of this class redraw when resized. */ wndclass.style = CS_HREDRAW | CS_VREDRAW; /* All windows of this class use the MainWndProc window function. */ wndclass.lpfnWndProc = MainWndProc; /* This class is used with the current program instance. */ wndclass.hInstance = hInst; /* Use standard application icon and arrow cursor */ wndclass.hIcon = LoadIcon (NULL, IDI_APPLICATION); wndclass.hIconSm = LoadIcon (NULL, IDI_APPLICATION); wndclass.hCursor = LoadCursor (NULL, IDC_ARROW); /* Color the background white */ wndclass.hbrBackground = (HBRUSH) GetStockObject (WHITE_BRUSH); /* Register the window class */ RegisterClassEx (&wndclass); /* Create a window using the window class */ hwndMain = CreateWindow ( szMainWndClass, /* Class name */

16

"Circle", /* Caption */ WS_OVERLAPPEDWINDOW, /* Style */ CW_USEDEFAULT, /* Initial x (use default) */ CW_USEDEFAULT, /* Initial y (use default) */ CW_USEDEFAULT, /* Initial x size (use default) */ CW_USEDEFAULT, /* Initial y size (use default) */ NULL, /* No parent window */ NULL, /* No menu */ hInst, /* This program instance */ NULL /* Creation parameters */ ); /* Display the window */ ShowWindow (hwndMain, nShow); UpdateWindow (hwndMain); /* The message loop */ while (GetMessage (&msg, NULL, 0, 0)) { TranslateMessage (&msg); DispatchMessage (&msg); } return msg.wParam; } Programa 1.2 Cdigo en C que muestra un crculo.

Figura 1.3 Crculo creado al ejecutar el cdigo en C.

1.2.3 GKS y PHIGS.

La programacin grfica basada en APIS de sistemas operativos es un paso

mayor desde el nivel de hardware en trminos de independencia y conveniencia

de dispositivos. Sin embargo, los programas grficos que dependen de funciones

de sistema operativo no son portables en diferentes plataformas. Por ejemplo

Microsoft Windows y Mac Os, ambos son sistemas operativos con interfaces de

usuario grficas (GUI). Sin embargo sus APIs son diferentes e incompatibles al

nivel de llamadas de sistema.

17

Es fcil ver las ventajas de una interface estndar para programacin grfica. Ya

que sta proporcionar una capa de abstraccin necesaria para dispositivos e

independencia de plataforma.

GKS (Graphics Kernel System) es el primer estndar internacional para

Graficacin por computadora. GKS (ISO 7942 1985) es un estndar para grficos

en 2D. Especifica funciones grficas bsicas independientes de las plataformas

de computadora. Algunos niveles estn definidos para acomodar diferentes

capacidades de sistemas de hardware. Una implementacin de GKS en un

lenguaje de programacin necesitar de una definicin apropiada de sintaxis para

el lenguaje. Un lenguaje cubierta es utilizado para definir el formato especfico del

GKS en el lenguaje de programacin. El lenguaje cubierta ms comn para GKS

es el FORTRAN. Aunque tambin se pueden utilizar otros lenguajes como Pascal

y C.

GKS-3D (ISO 8805 1988) es una extensin del GKS que soporta grficos en 3D.

GKS y GKS-3D estn diseados principalmente para dibujar objetos individuales

con ciertos atributos. Son tiles para primitivas grficas no estructuradas y

estticas, pero no soportan directamente modelos grficos ms complejos.

PHIGS (Programmers Hierarchical Interactive Graphics System, ISO 9592 1991)

es un estndar grfico similar al GKS. PHIGS y PHIGS+ incluyen las capacidades

de GKS. Tienen funcionalidades adicionales para organizaciones jerrquicas de

las primitivas grficas y de edicin dinmica.

El siguiente cdigo muestra la programacin en GKS en el lenguaje cubierta

FORTRAN. El programa dibuja un crculo rojo usando la primitiva polilnea de

GKS. Los puntos del crculo son calculados con funciones trigonomtricas de alto

nivel proporcionadas por FORTRAN.

PROGRAM CIRCLE C C Define error file, Fortran unit number, and workstation type, C and workstation ID. C PARAMETER (IERRF=6, LUNIT=2, IWTYPE=1, IWKID=1)

18

PARAMETER (ID=121) DIMENSION XP(ID),YP(ID) C C Open GKS, open and activate a workstation. C CALL GOPKS (IERRF,IDUM) CALL GOPWK (IWKID,LUNIT,IWTYPE) CALL GACWK (IWKID) C C Define colors. C CALL GSCR(IWKID,0, 1.0, 1.0, 1.0) CALL GSCR(IWKID,1, 1.0, 0.0, 0.0) C C Draw a circle. C X0 = .5 Y0 = .5 R = .3 JL = 120 RADINC = 2.*3.1415926/REAL(JL) DO 10 J=1,JL+1 X = X0+R*COS(REAL(J)*RADINC) Y = Y0+R*SIN(REAL(J)*RADINC) XP(J) = X YP(J) = Y 10 CONTINUE CALL GSPLI(1) CALL GSPLCI(1) CALL GPL(JL+1,XP,YP) C C Deactivate and close the workstation, close GKS. C CALL GDAWK (IWKID) CALL GCLWK (IWKID) CALL GCLKS C STOP END

Programa 1.3: Cdigo en FORTRAN que muestra un crculo.

Figura 1.4. Crculo creado al ejecutar el cdigo en FORTRAN.

19

1.2.4 OpenGL.

OpenGL es una API muy popular para grficos en 2D/3D derivada de GL

(Graphics Library) de Silicon Graphics Inc. GL es la interface de programacin

grfica usada en las estaciones de trabajo de SGI. OpenGL est diseado para

ser abierto y es un estndar neutral. Est disponible virtualmente en todas las

plataformas; de hecho muchos vendedores de hardware ofrecen interfaces

OpenGL para sus tarjetas grficas y dispositivos. Con ms de 200 funciones,

proporciona una API grfica ms poderosa que los estndares de GKS.

OpenGL es una API relativamente de bajo nivel con una interface orientada al

procedimiento y es posible utilizar diferentes lenguajes de programacin. Existe

un lenguaje FORTRAN oficial y actualmente se est desarrollando un lenguaje

cubierta en Java. Sin embargo, la raz de OpenGL es el lenguaje C.

OpenGL consiste en dos libreras: GL y GLU (OpenGL Utility Library). La librera

GL contiene las funciones bsicas de grficos, y la librera GLU contiene

funciones de ms alto nivel creadas a partir de las GL. OpenGL por s solo no

tiene funciones para construir una interfaz de usuario. Es necesario un paquete

portable llamado GLUT (OpenGL Utility Toolkit) que puede ser utilizado con

OpenGL para construir programas grficos completos.

El siguiente cdigo muestra un ejemplo que dibuja un crculo en OpenGL. El

programa utiliza GLUT para construir la interface de usuario y tambin funciones

GL y GLU para construir el display.

#include #include void display(void) { int i; int n = 80; float a = 2*3.1415926535/n; float x; float y; glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0,0,0); glBegin(GL_LINE_LOOP); for (i = 0; i < n; i++) {

20

x = cos(i*a); y = sin(i*a); glVertex2f(x, y); } glEnd(); glFlush(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutCreateWindow("Circle"); glutDisplayFunc(display); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.2, 1.2, -1.2, 1.2); glClearColor(1.0, 1.0, 1.0, 0.0); glutMainLoop(); }

Programa 1.4: Cdigo utilizando OpenGL que muestra un crculo.

Figura 1.5. Crculo creado al ejecutar el cdigo de OpenGL.

OpenGL como una API de 3D es mucho ms capaz que el dibujar un simple

circulo. A continuacin se muestra un ejemplo que presenta una esfera en 3D. #include GLUquadricObj* sphere; void display(void) { glClear(GL_COLOR_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glRotatef(0.2, 0.0, 0.0, 1.0); gluSphere(sphere, 1.8, 24, 24); glutSwapBuffers(); } void idle(void) { glutPostRedisplay(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB); glutCreateWindow("Spinning Sphere"); glutDisplayFunc(display); glMatrixMode(GL_PROJECTION);

21

glLoadIdentity(); glOrtho(-2.0, 2.0, -2.0, 2.0, -2.0, 2.0); glClearColor(1.0, 1.0, 1.0, 0.0); glColor3f(1.0, 0.5, 0.5); sphere = gluNewQuadric(); gluQuadricDrawStyle(sphere, GLU_LINE); glutIdleFunc(idle); glEnable(GL_CULL_FACE); glCullFace(GL_BACK); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); glutMainLoop(); }

Programa 1.5: Cdigo utilizando OpenGL que muestra una esfera 3D.

Figura 1.6. Esfera creada al ejecutar el cdigo de OpenGL.

1.2.5 Java.

A pesar de que OpenGL ofrece un nivel de abstraccin procedimental en C, no

est diseado para acomodar directamente el modelado grfico en el paradigma

orientado a objetos. Una API de nivel alto de grficos basados en POO puede

ofrecer grandes beneficios a aplicaciones.

Java 2D y Java 3D son APIs grficas asociadas con el lenguaje de programacin

Java. Son APIs orientadas a objetos de alto nivel con gran capacidad de

portabilidad. Java 3D est tpicamente implementada en la cima de otras APIs de

bajo nivel tal como OpenGL. La siguiente tabla muestra una representacin tpica

de las capas de un sistema grfico

22

Aplicacin grfica

Java APIs Java 3D

Java VM OpenGL

OS

Driver de Display

Tarjeta Grfica

Display Tabla 1.2 Capas de los sistemas grficos.

Java es un lenguaje de programacin de mltiples propsitos, capaz de

desarrollar aplicaciones robustas. En los aos recientes ha obtenido gran

popularidad y se ha convertido en el lenguaje de programacin por defecto de una

amplia gama de aplicaciones. En la actualidad no solo se usa para programacin

web, sino tambin para desarrollar aplicaciones multiplataforma en servidores,

computadoras de escritorio y aparatos mviles.

Un programa en Java es compilado en un formato estndar y es independiente de

cualquier plataforma, es conocido como cdigo byte El cdigo byte compilado

puede ser ejecutado sin tener que realizar algn cambio mientas que la

computadora cuente con el Java Virtual Machine. Esta independencia hace que

Java sea el lenguaje ideal para aplicaciones en internet.

Java est diseado para soportar la programacin orientada a objetos, consiste

en clases y la interaccin e instanciacin de objetos constituye una de las

acciones principales de un programa en Java. Adems de esto, mantiene la

simplicidad, elegancia y eficiencia de su predecesor, el lenguaje C. Al mismo

tiempo, que evita las deficiencias y los riesgos de C y C++.

Mientras que el lenguaje en s es muy simple, la plataforma de Java proporciona

un conjunto de APIs que cubren un amplio rango de tareas y aplicaciones: de

archivos I/O, grficos, multimedia, bases de datos, red, seguridad, etc. Adems de

que facilita la programacin GUI a travs de AWT y Swing.

23

Una opcin para la programacin de grficos para Java es OpenGL. Hay varios

proyectos en marcha para desarrollar un lenguaje cubierta de Java para OpenGL.

JOGL es la implementacin de JSR 231: el lenguaje cubierta Java para OpenGL.

JOGL proporciona las clases GL y GLU para encapsular las funciones en GL y

GLU. Los dos componentes GLCanvas y GLJPanel proporcionan las superfices

de dibujo para las llamadas a OpenGL. El GLCanvas es un componente pesado

que utilizar la aceleracin del hardware. El GLJPanel es un componente ligero

implementado en memoria. La aceleracin del hardware no est disponible para

GLJPanel. A continuacin se muestra un ejemplo de JOGL que es el equivalente

del ejemplo visto con OpenGL. import java.awt.*; import java.awt.event.*; import javax.swing.*; import net.java.games.jogl.*; public class JOGLDemo { public static void main(String[] args) { Frame frame = new Frame("JOGL Demo"); GLCapabilities cap = new GLCapabilities(); GLCanvas canvas = GLDrawableFactory.getFactory().createGLCanvas(cap); canvas.setSize(300, 300); canvas.addGLEventListener(new Renderer()); frame.add(canvas); frame.pack(); frame.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }); frame.show(); } static class Renderer implements GLEventListener { private GL gl; private GLU glu; private GLDrawable gldrawable; public void init(GLDrawable drawable) { gl = drawable.getGL(); glu = drawable.getGLU(); this.gldrawable = drawable; gl.glMatrixMode(GL.GL_PROJECTION); gl.glLoadIdentity(); glu.gluOrtho2D(-1.2, 1.2, -1.2, 1.2); gl.glClearColor(1.0f, 1.0f, 1.0f, 0.0f); } public void display(GLDrawable drawable) { int i; int n = 80; float a = (float)(2*3.1415926535/n); float x; float y; gl.glClear(GL.GL_COLOR_BUFFER_BIT); gl.glColor3f(1.0f,0,0); gl.glBegin(GL.GL_LINE_LOOP); for (i = 0; i < n; i++) { x = (float)Math.cos(i*a); y = (float)Math.sin(i*a);

24

gl.glVertex2f(x, y); } gl.glEnd(); gl.glFlush(); } public void reshape(GLDrawable drawable, int x, int y, int width, int height) {} public void displayChanged(GLDrawable drawable, boolean modeChanged, boolean deviceChanged) {} } }

Programa 1.6: Cdigo utilizando JOGL que muestra una esfera 3D.

1.2.5.1 Java 2D.

La plataforma de Java 2 proporciona mejoras en capacidades grficas con la

introduccin de las APIs de Swing y Java 2D y 3D. Estas APIs proporcionan

soporte a muchas de las tareas de la graficacin por computadora. Juntas han

hecho muy atractiva la opcin de utilizar Java para la programacin grfica.

Java 2D proporciona un conjunto completo de funcionalidades para manipular y

renderizar grficos en 2D. Entre lo que se incluye:

Una jerarqua de clases para objetos geomtricos. El proceso de renderizacin es mucho ms refinado. Presenta mucha capacidad para el procesamiento de imgenes. Se proporcionan modelos, tipografas y otros soportes relacionados con

grficos.

La clase Graphics2D, una subclase de Graphics, es el motor de renderizdo para

Java 2D. Proporciona los mtodos para renderizar figuras geomtricas, imgenes

y texto. El proceso de renderizado puede ser controlado al seleccionar

transformaciones, pinturas, propiedades de lneas, composicin, fragmentos de

trayectoria y otras propiedades.

El siguiente cdigo muestra un ejemplo de Java 2D que utiliza ciertas

capacidades como transparencia, pintura gradual, transformacin y tipografa.

25

import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.font.*; import java.awt.geom.*; public class Demo2D extends JApplet{ public static void main(String args[]){ JFrame frame = new JFrame(); frame.setTitle ("Demo Java 2D"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new Demo2D(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init(){ JPanel panel = new Panel2D(); getContentPane().add(panel); } } class Panel2D extends JPanel{ public Panel2D(){ setPreferredSize(new Dimension(500, 400)); setBackground(Color.white); } public void paintComponent(Graphics g){ super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; //dibujar elipse Shape ellipse = new Ellipse2D.Double(150, 100, 200, 200); GradientPaint paint = new GradientPaint(100, 100, Color.white, 400, 400, Color.gray); g2.setPaint(paint); g2.fill(ellipse); //establecer transparencia AlphaComposite ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.4f); g2.setComposite(ac); g2.setColor(Color.blue); //dibujar el texto transparente Font font = new Font("Serif", Font.BOLD, 120); g2.setFont(font); g2.drawString("Java", 120, 200); //obtener el outline del texto en glyph FontRenderContext frc = g2.getFontRenderContext(); GlyphVector gv = font.createGlyphVector(frc, "2D"); Shape glyph = gv.getOutline(150, 300); //dibujar el glyph rotado g2.rotate(Math.PI/6, 200, 300); g2.fill(glyph); } }

Programa 1.7: Cdigo utilizando Java2D que muestra un crculo y texto.

26

Figura 1.7. Grfico creado al ejecutar el cdigo de Java2D..

1.2.5.2 Java 3D.

Java 3D proporciona un rea de trabajo para grficos en 3D, incluyendo opciones

adicionales como animacin, interaccin 3D y vistas sofisticadas; adems

proporciona una interface de programacin relativamente simple e intuitiva. El

paradigma de programacin de Java 3D es muy diferente al de Java 2D. Un

modelo abstracto conocido como escena grfica es utilizado para organizar y

retener los objetos visuales y los comportamientos en la escena virtual. La escena

grfica contiene la informacin completa del mundo virtual de grficos. El motor

de renderizacin de Java 3D renderiza automticamente la escena grfica; esto

lo hace con un objeto Canvas 3D. Canvas 3D es un componente pesado que no

funciona adecuadamente con los componentes Swing.

A continuacin se muestra el cdigo de una aplicacin en Java 3D. Se presenta

un globo terrqueo en rotacin y un cadena de texto en 3D Java 3D situado

frente al globo. import javax.vecmath.*; import java.awt.*; import java.applet.*; import java.awt.event.*; import java.net.URL; import javax.media.j3d.*; import com.sun.j3d.utils.universe.*; import com.sun.j3d.utils.geometry.*; import com.sun.j3d.utils.image.*; import com.sun.j3d.utils.applet.MainFrame; public class Demo3D extends Applet{ public static void main(String[] args){ new MainFrame(new Demo3D(), 480, 480); } private SimpleUniverse su;

27

public void init(){ GraphicsConfiguration gc = SimpleUniverse.getPreferredConfiguration(); Canvas3D cv = new Canvas3D(gc); setLayout(new BorderLayout()); add(cv); BranchGroup bg = createSceneGraph(); bg.compile(); su = new SimpleUniverse(cv); su.getViewingPlatform().setNominalViewingTransform(); su.addBranchGraph(bg); } public void destroy(){ su.cleanup(); } private BranchGroup createSceneGraph(){ BranchGroup root = new BranchGroup(); TransformGroup spin = new TransformGroup(); spin.setCapability(TransformGroup.ALLOW_TRANSFORM_WRITE); root.addChild(spin); //texto 3D Appearance ap = new Appearance(); ap.setMaterial(new Material()); Font3D font = new Font3D(new Font("Helvetica", Font.PLAIN, 1), new FontExtrusion()); Text3D text = new Text3D(font, "Java 3D"); Shape3D shape = new Shape3D(text, ap); //transformacin del texto Transform3D tr = new Transform3D(); tr.setScale(0.2); tr.setTranslation(new Vector3d(-0.35, -0.15, 0.75)); TransformGroup tg = new TransformGroup(tr); root.addChild(tg); tg.addChild(shape); //globo ap = createAppearance(); spin.addChild(new Sphere(0.7f, Primitive.GENERATE_TEXTURE_COORDS, 50, ap)); //rotacin Alpha alpha = new Alpha(-1, 6000); RotationInterpolator rotator = new RotationInterpolator(alpha, spin); BoundingSphere bounds = new BoundingSphere(); rotator.setSchedulingBounds(bounds); spin.addChild(rotator); //fondo y luces Background background = new Background(1.0f, 1.0f, 1.0f); background.setApplicationBounds(bounds); root.addChild(background); AmbientLight light = new AmbientLight(true, new Color3f(Color.red)); light.setInfluencingBounds(bounds); root.addChild(light); PointLight ptlight = new PointLight(new Color3f(Color.white), new Point3f(3f,3f,3f), new Point3f(1f,0f,0f)); ptlight.setInfluencingBounds(bounds); root.addChild(ptlight); return root; } private Appearance createAppearance(){ Appearance ap = new Appearance(); URL filename = getClass().getClassLoader().getResource("earth.jpg"); TextureLoader loader = new TextureLoader(filename, this); ImageComponent2D image = loader.getImage(); Texture2D texture = new Texture2D(Texture.BASE_LEVEL, Texture.RGBA, image.getWidth(), image.getHeight()); texture.setImage(0, image); texture.setEnable(true); texture.setMagFilter(Texture.BASE_LEVEL_LINEAR); texture.setMinFilter(Texture.BASE_LEVEL_LINEAR); ap.setTexture(texture); return ap; } }

Programa 1.8: Cdigo utilizando Java3D que muestra un globo terrqueo en rotacin y texto.

28

Figura 1.8. Grfico creado al ejecutar el cdigo de Java3D.

1.3 Campos relacionados con la Graficacin.

La Graficacin por computadora, el procesamiento de imgenes y la visin por

computadora son campos relacionados con los objetos grficos. Son diferentes en

cuanto a sus objetivos y tcnicas; sin embargo, existe una relacin cercana y las

lneas divisorias entre ellas han ido desapareciendo con el paso de los aos.

El procesamiento de imgenes concierne a las tcnicas de procesar imgenes

digitales rasterizadas. Usualmente lidea los problemas de mejoramiento de

imagen, reduccin de ruido, compresin de imagen y deteccin de bordes. El

procesamiento de imgenes toma como entrada una imagen existente y realiza

acciones apropiadas en ella. La Graficacin por computadora, por otro lado,

genera imgenes sintticas de un mundo virtual. El procesamiento de imgenes

est cercanamente relacionado con la Graficacin por computadora, el resultado

del renderizado de grficos es normalmente imgenes. Las imgenes

rasterizadas son usadas comnmente en grficos por computadora como grficos

primitivos, adems de que son utilizadas como texturas para mejorar el

renderizado grfico.

La visin por computadora tiene la tarea de tratar de entender las imgenes del

mundo real; visto de cierta manera, un sistema de visin por computadora es lo

inverso a un sistema de graficacin por computadora. Su principal objetivo es

29

reconstruir un mundo virtual de imgenes de un mundo real. Por lo tanto la visin

por computadora y la Graficacin por computadora se complementan una con

otra; ambas proporcionan diferentes perspectivas de un sistema comn.

La teora y la prctica de la Graficacin por computadora dependen mayormente

de ciertos conceptos matemticos importantes. Las reas de las matemticas que

se relacionan son la geometra analtica y el algebra lineal. La geometra analtica

proporciona representaciones numricas de objetos grficos. Y el algebra lineal

estudia las operaciones y transformaciones de espacios vectoriales, los cuales

son importantes en muchos problemas fundamentales de la graficacin por

computadora.

30

2.1 Transformaciones bidimensionales.

Un sistema de grficos 2D modela un mundo virtual en dos dimensiones.

Comparado con los grficos 3D, los grficos en 2D son ms simples en cuanto a

modelado y renderizado. Los objetos 2D son ms fciles de crear y manipular. El

renderizado en 2D normalmente no involucra proyecciones complicadas como las

de los grficos en 3D. A pesar de que un modelo en 2D no puede capturar

completamente la naturaleza de un espacio en 3D, los grficos en 2D son

aplicados debido a su simplicidad y eficiencia. Esto es un ingrediente esencial de

los programas modernos basados en GUI.

TRANSFORMACIONES GEOMTRICAS

31

Los conceptos claves de los grficos 2D incluyen el renderizar por un conducto, el

espacio del objeto, el espacio del mundo, el espacio del dispositivo, los sistemas

de coordenadas, las primitivas grficas, las transformaciones geomtricas, los

colores, fragmentos, reglas de composicin y otros temas. Java 2D proporciona

soporte para grficos 2D.

En los grficos 2D, el espacio del mundo virtual y el espacio de vistas son

bidimensionales. El renderizar involucra la composicin de varios objetos a travs

de transformaciones relativas. Frecuentemente un espacio del mundo no se

necesita cuando se modelan explcitamente las relaciones entre objetos grficos.

Sin embargo, para alcanzar la claridad de las estructuras de los sistemas y para

mantener la analoga con los grficos 3D, la nocin de un mundo virtual es

fundamental.

Conceptualmente un objeto grfico puede definirse en su propio espacio y puede

colocarse en un espacio de un mundo 2D a travs de una transformacin del

mismo. El renderizado 2D toma una foto del mundo y produce una imagen

representndola en una vista particular en el espacio del dispositivo.

Figura 2.1 Un objeto grfico en 2D es procesado para su transformacin y su vista.

Los componentes esenciales de un sistema grfico en 2D incluyen la

renderizacin modelo del objeto en 2D, la aplicacin de transformaciones

geomtricas al objeto, y una vista particular del mundo virtual en un dispositivo de

display. Los pasos para renderizar un grfico en un programa de grficos 2D son:

1. Construir los objetos en 2D.

2. Aplicar las transformaciones a los objetos.

3. Aplicar color y otras propiedades de renderizado.

4. Renderizar la escena en un dispositivo para grficos.

Transformacin Vista

32

Los objetos grficos en el modelo son de dos dimensiones. Adems de los

objetos geomtricos construidos de primitivas bsicas como lneas, polgonos y

elipses, el modelo puede incluir objetos tales como texto e imgenes.

La transformacin involucrada en los grficos 2D forma parte de una Affine

Transformation. Las transformaciones cambian la forma y ubicacin de los

objetos visuales a los cuales se les aplica dicha transformacin. Las vistas de

transformacin no cambian el modelo del mundo virtual, pero cambian las vistas

de la escena completa en el espacio mundo. Por ejemplo, si en un modelo virtual

con un crculo y un tringulo, se aplica una traslacin al crculo, (transformacin

de objeto) solo se mover el crculo sin afectar el tringulo. La traslacin como

una transformacin de vista, por otro lado, mover la vista completa.

Adems de la geometra, muchos otros atributos pueden afectar el renderizado de

una escena como colores, transparencia, texturizado y estilos de lnea. Un

sistema de grficos 2D renderizar una escena basada en la informacin

geomtrica, transformacin y el contexto grfico involucrando todos los atributos.

2.2 Coordenadas homogneas y representacin matricial.

Los componentes fundamentales en un modelo grfico son los objetos

geomtricos. Para poder representarlos de manera precisa y eficiente se tiene

que utilizar un sistema de coordenadas. El sistema de coordenadas ms utilizado

en 2D emplea las coordenadas cartesianas como se muestra en la siguiente

figura:

33

Figura 2.2 Sistema de coordenadas en 2D con el ejes (x, y)

Dos ejes perpendiculares son colocados en el plano. Cada eje est etiquetado por

un conjunto de nmeros reales. El eje horizontal se denomina eje y el vertical

eje . La interseccin de los ejes se identifica con el nmero 0, y se denomina

punto de origen. Cada punto en el plano est asociado a un par de nmeros

reales conocidos como coordenada y coordenada . Las coordenadas

miden la posicin horizontal y vertical de un punto relativo en los ejes.

Un objeto geomtrico en 2D es un conjunto de puntos en el plano. El nmero de

puntos en el conjunto que constituye el objeto geomtrico es usualmente infinito.

Para representar efectivamente tal objeto, se utiliza una ecuacin para definir la

relacin de las coordenadas y que un punto del objeto debe satisfacer.

Por ejemplo una lnea se puede representar a travs de una ecuacin polinomial

de grado 1 o ecuacin lineal:

Figura 2.3 Lnea que pude ser representada por una ecuacin lineal.

34

Un crculo centrado en el origen con un radio se representa con la siguiente

ecuacin:

Una elipse centrada en ( , ) presenta la siguiente ecuacin:

Otro tipo comn de ecuacin que se utiliza para representar una curva es la

ecuacin paramtrica. En lugar de una ecuacin que relacione nicamente a y

, se utiliza una tercera variable . Ambas y son expresadas en funcin de .

La ventaja de las ecuaciones paramtricas es que proporcionan formas

funcionales explcitas para evaluar las coordenadas. La siguiente figura muestra

una elipse que tambin se puede expresar utilizando la ecuacin paramtrica:

Figura 2.4 Una elipse representada por una ecuacin cuadrtica.

La coleccin de todos los puntos o coordenadas tambin se conoce como

espacio. Tres tipos de espacios estn normalmente relacionados con un sistema

grfico: el espacio del objeto, el espacio del mundo, y el espacio del dispositivo.

35

Cada espacio es caracterizado por su propio sistema de coordenadas. Los

objetos geomtricos en un espacio pueden ser mapeados en otro a travs de

transformaciones.

Un sistema de coordenadas de un objeto, tambin conocido como sistema de

coordenadas de modelado o sistema de coordenadas local, est asociado con la

definicin de un objeto grfico particular o primitivo. Al construir tal objeto, es

conveniente elegir un sistema de coordenadas que sea natural al objeto sin

preocuparse por su destino final y apariencia en el espacio mundo. Por ejemplo,

cuando se define un crculo primitivo, se puede elegir el tener el origen del

sistema de coordenadas en el centro del crculo o simplemente definir una unidad

de crculo (un crculo de radio 1). El crculo posteriormente puede ser colocado en

cualquier parte del espacio mundo a travs de una transformacin llamada

traslacin. Su radio puede cambiar a cualquier valor al efectuar una escalacin.

Tambin se puede transformar en una elipse al utilizar una escalacin no

uniforme.

El sistema de coordenadas del mundo, o sistema de coordenadas del usuario,

define una referencia comn de todos los objetos en un modelo grfico.

Representa el mundo virtual compartido por los subsistemas modelados y

renderizados. Los objetos geomtricos son colocados en este espacio a travs de

transformaciones de objetos. El sistema de renderizacin toma una foto del

espacio y produce una imagen renderizada a travs de un dispositivo de salida.

El sistema de coordenadas del dispositivo representa el espacio del display de un

dispositivo de salida tal como una pantalla o una impresora. La siguiente figura

muestra un ejemplo tpico de tal sistema de coordenadas. El origen est

localizado en la esquina superior izquierda, las posiciones positivas del eje de las

apuntan hacia la derecha y las posiciones positivas del eje de las apuntan

hacia abajo. Los valores de las coordenadas son valores enteros. Esta opcin

obviamente es diferente a cualquier representacin matemtica, pero es ms

natural para la mayora de los dispositivos de pantalla.

36

Figura 2.5 Sistema de coordenadas de Java 2D, con el eje x aumentando hacia la derecha y el eje

y hacia abajo.

Por default las coordenadas del mundo de Java 2D coinciden con las

coordenadas de los dispositivos. Con las transformaciones disponibles en un

sistema de grficos, es fcil definir diferentes espacios mundo que pueden ser los

ms apropiados para aplicaciones particulares.

2.3 Tipos de transformaciones bidimensionales.

Los objetos geomtricos atraviesan un estado de transformacin antes de ser

renderizados. Una familia general de transformaciones geomtricas comnmente

utilizadas en grficos por computadora se denomina Affine Transformation. Una

transformacin afin preserva las lneas paralelas; adems las que tambin

preservan la distancia se conocen como isomtricas, movimientos euclidean o

movimientos rigidos. Las transformaciones afines ms comunes son:

Traslacin Rotacin Refleccin Escalacin Sesgar

Una traslacin mueve todos los puntos de un objeto a una cantidad establecida.

La cual est especificada por la cantidad de movimientos en las direcciones y .

Una traslacin es isomtrica ya que no cambia las longitudes ni los ngulos. La

(0,0) x

y

37

siguiente figura muestra la traslacin de un objeto de (3, -1). Es decir el objeto es

movido tres unidades a la derecha y una hacia arriba.

Figura 2.6 Una traslacin (3, -1)

Una rotacin mueve un objeto aproximadamente un punto por ngulo; es decir

est determinado por el punto y el anglo. Tambin es isomtrico, ya que cambia la

orientacin de la forma. La siguiente figura muestra una rotacin de 45 grados del

orgen.

Figura 2.7 Una rotacin sobre el origen

Una refleccin mapea el objeto a su imagen espejo sobre una lnea; es decir es

determinado por una lnea. La refleccin es isomtrica, ya que cambia la

orientacin del angulo. La siguiente figura muestra una refleccin de una lnea de

45 grados entre los ejes y .

38

Figura 2.8 Una refleccin sobre una lnea diagonal.

La escalacin redimensiona el objeto por ciertos factores fijados en las

direcciones y . La escalacin no es isomtrica, ya que cambia las distancias y

los ngulos. Sin embargo, preserva el paralelismo. La siguiente figura muestra

una escalacin de factores (1.5, 2).

Figura 2.9 Escalacin por los factores (1.5, 2).

El sesgar sobre una lnea es mover un punto una cantidad proporcional a la

distancia indicada por la lnea. Los movimientos de los puntos son paralelos a la

lnea; es decir, los puntos en la lnea no se mueven; sin embargo los puntos en el

lado opuesto de la lnea se mueven en direccin opuesta. Este tipo de

trasnformacin no es isomtrica, pero preserva el paralelismo. La siguiente figura

muestra el sesgar por el factor 1.0 sobre la lnea horizontal y =2

39

Figura 2.10 Sesgar por el factor 1 sobre la lnea horizontal punteada.

Matemticamente una transformacin afn puede ser representada por una matriz

3 x 3. Una transformacin afn requiere una matriz de 3 x 3 en lugar de una de 2

x 2, debido a que las transformaciones tales como las traslaciones no son lineales

en un espacio 2D. Utilizando el concepto de coordenadas homogneas, es

posible tratar todas las transformaciones afines en un ambiente lineal al agregar

una dimensin al vector de representacin de los puntos.

Para transformaciones bsicas, es comnmente ms sencillo encontrar las

matrices de transformacin directamente. Una rotacin del angulo sobre el

origen es representado con la matriz:

La traslacin por la cantidad tiene la matriz:

La escalacin por los factores tiene la matriz de representacin:

40

La refleccin en la lnea es representada por la matriz:

El sesgar sobre el eje por el factor se da por la matriz:

Java 2D utiliza una clase llamada AffineTransform para definir una transformacin

afn. Ofrece mtodos para establecer la mayora de las transformaciones afines

bsicas definidas anteriormente. Los siguientes mtodos de AffineTransform

establecen las transformaciones nombradas:

void setToIdentity() void setToRotation(double theta) void setToRotation(double theta, double x, double y) void setToScale(double sx, double sy) void setToShear(double shx, double shy) void setToTranslation(double tx, double ty)

Una transformacin que no se encuentra entre los mtodos listados es el de

refleccin. Sin embargo, se puede definir una refleccin al establecer su matriz.

La siguiente matriz define una refleccin sobre el eje :

La clase AffineTransform tiene constructores y mtodos que establecen

directamente las primeras dos filas de la matriz de transformacion:

41

AffineTransform(double m00, double m10, double m01, double m11, double m02, double m12)

AffineTransform(float m00, float m10, float m01, float m11, float m02, float m12)

AffineTransform(double[ ] flatmatrix) AffineTransform(float[ ] flatmatrix) void setTransform(double m00, double m10, double m01, double m11,

double m02, double m12)

Debido a que la ltima fila de una matriz de transformacin afin siempre es (001),

se omite en la lista de parmetros. La matriz de refleccin definida anteriormente

puede establecerse por el siguiente mtodo:

transform.setTranform(-1, 0, 0, 1, 0, 0);

Debido a que la clase de AffineTransform permite la escalacin con factores

negativos, la refleccin tambin puede definirse como un tipo especial de

escalacin:

transform.setToScale(-1, 1);

Un objeto AffineTransform puede ser utilizado por ambas transformaciones: de

objeto y de vista. Los siguientes mtodos de la clase se aplican a la

transformacin de objetos geomtricos.

Shape createTransformedShape(Shape shape) void transform(double[ ] src, int src0ff, double[ ] dst, int dst0ff, int numPts) void transform(double[ ] src, int src0ff, float[ ] dst, int dst0ff, int numPts) void transform(float[ ] src, int src0ff, double[ ] dst, int dst0ff, int numPts) void transform(float[ ] src, int src0ff, float[ ] dst, int dst0ff, int numPts) Point2D transform(Point2D src, Point2D dst) Point2D transform(Point2D[ ] src, int src0ff, Point2D[ ] dst, int dst0ff, int

numPts)

void deltaTransform(double[ ] src, int src0ff, double[ ] dst, int dst0ff, int numPts)

42

Point2D deltaTransform(Point2D src, Point2D dst)

El mtodo createTransformedShape transforma una figura completa. Los mtodos

de Transform realizan una transformacin de un conjunto de puntos. El mtodo

deltaTransform realiza una transformacin de un conjunto de vectores.

Una transformacin de vista puede realizarse con la transformacin en un objeto

Graphics2D. La clase Graphics2D tiene los siguientes mtodos para manipular

sus transformaciones:

void setTansform(AffineTransform tx) void transform(AffineTransform tx)

El mtodo setTransform reemplaza la transformacin actual con el objeto

AffineTransform dado. El mtodo transform concatena la actual transformacin

con el objeto AffineTransform de la derecha.

El siguiente ejemplo muestra los efectos de las transformaciones afines. El

usuario puede realizar una transformacin de un objeto grfico usando el mouse.

Las transformaciones affines son seleccionadas a travs de un men que incluye

la traslacin, rotacin, escalacin, sesgar y refleccin. import java.awt.*; import java.awt.geom.*; import java.awt.event.*; import java.util.*; import javax.swing.*; public class Transformations extends JApplet implements ActionListener { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Affine Transforms"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new Transformations(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } TransformPanel panel = null; public void init() { JMenuBar mb = new JMenuBar(); setJMenuBar(mb); JMenu menu = new JMenu("Transforms"); mb.add(menu); JMenuItem mi = new JMenuItem("Translation"); mi.addActionListener(this); menu.add(mi); mi = new JMenuItem("Rotation");

43

mi.addActionListener(this); menu.add(mi); mi = new JMenuItem("Scaling"); mi.addActionListener(this); menu.add(mi); mi = new JMenuItem("Shearing"); mi.addActionListener(this); menu.add(mi); mi = new JMenuItem("Reflection"); mi.addActionListener(this); menu.add(mi); panel = new TransformPanel(); getContentPane().add(panel); } public void actionPerformed(ActionEvent ev) { String command = ev.getActionCommand(); if ("Translation".equals(command)) { panel.transformType = panel.TRANSLATION; } else if ("Rotation".equals(command)) { panel.transformType = panel.ROTATION; } else if ("Scaling".equals(command)) { panel.transformType = panel.SCALING; } else if ("Shearing".equals(command)) { panel.transformType = panel.SHEARING; } else if ("Reflection".equals(command)) { panel.transformType = panel.REFLECTION; } } } class TransformPanel extends JPanel implements MouseListener, MouseMotionListener { static final int NONE = 0; static final int TRANSLATION = 1; static final int ROTATION = 2; static final int SCALING = 3; static final int SHEARING = 4; static final int REFLECTION = 5; int transformType = NONE; Shape drawShape = null; Shape tempShape = null; Point p = null; int x0 = 400; int y0 = 300; public TransformPanel() { super(); setPreferredSize(new Dimension(800, 600)); setBackground(Color.white); drawShape = new Rectangle(-50,-50,100,100); addMouseListener(this); addMouseMotionListener(this); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.translate(x0, y0); g2.drawLine(-200,0,200,0); g2.drawLine(0,-200,0,200); g2.draw(drawShape); } public void mouseClicked(MouseEvent ev) { } public void mouseEntered(MouseEvent ev) { } public void mouseExited(MouseEvent ev) { }

44

public void mousePressed(MouseEvent ev) { p = ev.getPoint(); } public void mouseReleased(MouseEvent ev) { Graphics g = getGraphics(); Point p1 = ev.getPoint(); AffineTransform tr = new AffineTransform(); switch (transformType) { case TRANSLATION: tr.setToTranslation(p1.x-p.x, p1.y-p.y); break; case ROTATION: double a = Math.atan2(p1.y-y0, p1.x-x0) - Math.atan2(p.y-y0, p.x-x0); tr.setToRotation(a); break; case SCALING: double sx = Math.abs((double)(p1.x-x0)/(p.x-x0)); double sy = Math.abs((double)(p1.y-y0)/(p.y-y0)); tr.setToScale(sx, sy); break; case SHEARING: double shx = ((double)(p1.x-x0)/(p.x-x0))-1; double shy = ((double)(p1.y-y0)/(p.y-y0))-1; tr.setToShear(shx, shy); break; case REFLECTION: tr.setTransform(-1,0,0,1,0,0); break; } drawShape = tr.createTransformedShape(drawShape); repaint(); } public void mouseMoved(MouseEvent ev) { } public void mouseDragged(MouseEvent ev) { Point p1 = ev.getPoint(); AffineTransform tr = new AffineTransform(); switch (transformType) { case TRANSLATION: tr.setToTranslation(p1.x-p.x, p1.y-p.y); break; case ROTATION: double a = Math.atan2(p1.y-y0, p1.x-x0) - Math.atan2(p.y-y0, p.x-x0); tr.setToRotation(a); break; case SCALING: double sx = Math.abs((double)(p1.x-x0)/(p.x-x0)); double sy = Math.abs((double)(p1.y-y0)/(p.y-y0)); tr.setToScale(sx, sy); break; case SHEARING: double shx = ((double)(p1.x-x0)/(p.x-x0))-1; double shy = ((double)(p1.y-y0)/(p.y-y0))-1; tr.setToShear(shx, shy); break; case REFLECTION: tr.setTransform(-1,0,0,1,0,0); break; } Graphics2D g = (Graphics2D)getGraphics(); g.setXORMode(Color.white); g.translate(x0, y0); if (tempShape != null) g.draw(tempShape); tempShape = tr.createTransformedShape(drawShape); g.draw(tempShape); } }

Programa 2.1: Cdigo que muestra efectos de las transformaciones afines.

45

Figura 2.11 Salida de la ejecucin del programa 2.1.

2.4 Composicin de transformaciones bidimensionales.

Las transformaciones pueden combinarse para formar nuevas transformaciones.

Por ejemplo, se puede aplicar una traslacin seguida de una rotacin y esta a su

vez seguida por otra traslacin. Cualquier composicin de transformaciones afines

sigue siendo una transformacin afin. Cualquier composicin de movimiento rgido

sigue siendo un movimiento rgido. Por lo contrario, una transformacin puede

descomponerse en una serie (normalmente ms simples) de transformaciones.

La matriz de transformacin de una transformacin compuesta es el producto de

las matrices de las transformaciones individuales. Por ejemplo, si son

matrices de las transformaciones afines , respectivamente, entonces la

matriz de la composicin , es . Cabe mencionar que la

operacin de la composicin de la transformacin es no conmutativa, por lo que el

orden al aplicar las transformaciones es significativo. En esta notacin, las

transformaciones de una transformacin compuesta son aplicadas de derecha a

izquierda. Por ejemplo, cuando una transformacin compuesta es

aplicada a un punto , el orden de las transformaciones es :

46

Las transformaciones compuestas son utilies cuando se desean construir

transformaciones complejas a partir de transformaciones simples. Si se necesita

una rotacin sobre el punto (3, 4) a 30 grados, primero se realiza la traslacin

para mover el punto (3, 4) del origen. Despus se realiza una rotacin de 30

grados sobre el origen. Finalmente se puede trasladar el origen de regreso al

punto (3, 4). Al combinar las tres tranformaciones, obtendremos la transformacin

requerida. En una matriz, la traslacin que mueve de (3, 4) al origen est dada

por: 1 0 -3

0 1 -4

0 0 1

La rotacin de 30 grados sobre el origen:

3/2 -1/2 0

1/2 3/2 0

0 0 1

La segunda traslacin sera:

1 0 3

0 1 4

0 0 1

Combinando las tres transformaciones, la rotacin final tendra la matriz de

transformacin:

En Java 2D, la clase AffineTransform proporciona los siguientes mtodos que

soportan las tranformaciones compuestas:

1 0 3 3/2 -1/2 0 1 0 -3

0 1 4 3/2 0 0 1 -4

0 0 1 0 0 1 0 0 1

47

void rotate(double theta) void rotate(double theta, double x, double y) void scale(double sx, double sy) void shear(double shx, double shy) void translate(double tx, double ty)

Estos mtodos no limpian las transformaciones existentes en los objetos actuales,

sino que combinan las transformaciones actuales con las nuevas especificadas.

Las nuevas transformaciones son aadidas a la derecha de las actuales. Adems

de las transformaciones simples listadas, es posible combinar las

transformaciones actuales con otro objeto de AffineTransform:

void concatenate(AffineTransform tx) void preConcatenate(AffineTransform tx)

El primer mtodo concatena la segunda transformacin a la derecha de la actual.

El segundo mtodo concatena la segunda transformacin a la izquierda de la

actual.

Cabe notar que el orden de la composicin de la transformacin es de izquierda a

derecha, y los mtodos anteriores, excepto el de preConcatenate, concatena la

transformacin a la derecha. Si se crea una transformacin de composicin al

llamar a los mtodos mencionados anteriormente, las transformaciones son

aplicadas en el orden opuesto a la secuencia del llamado. Por ejemplo:

AffineTransform transform = new AffineTransform();

transform.rotate(Math.PI/3);

transform.scale(2, 0.3);

transform.translate(100, 200);

La primera transformacin a aplicar es la traslacin y la ltima es la rotacin. El

siguiente cdigo muestra el uso de las composiciones en transformaciones. El

ejemplo trata de rotar una elipse sobre su centro que no est localizado en el

origen, por lo que lo primero que traslada el objeto al origen, luego lo rota en el

origen y finalmente trasladar la elipse rotada a su punto original.

48

import javax.swing.*; import java.awt.*; import java.awt.geom.*; public class Composition extends JApplet { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Transformation Composition"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new Composition(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init() { JPanel panel = new CompositionPanel(); getContentPane().add(panel); } } class CompositionPanel extends JPanel { public CompositionPanel() { setPreferredSize(new Dimension(640, 480)); this.setBackground(Color.white); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.translate(100,100); Shape e = new Ellipse2D.Double(300, 200, 200, 100); g2.setColor(new Color(160,160,160)); g2.fill(e); AffineTransform transform = new AffineTransform(); transform.translate(-400,-250); e = transform.createTransformedShape(e); g2.setColor(new Color(220,220,220)); g2.fill(e); g2.setColor(Color.black); g2.drawLine(0, 0, 150, 0); g2.drawLine(0, 0, 0, 150); transform.setToRotation(Math.PI / 6.0); e = transform.createTransformedShape(e); g2.setColor(new Color(100,100,100)); g2.draw(e); transform.setToTranslation(400, 250); e = transform.createTransformedShape(e); g2.setColor(new Color(0,0,0)); g2.draw(e); } }

Programa 2.2: Cdigo que aplica la composicin de transformaciones.

Figura 2.12 Salida de la ejecucin del programa 2.2.

49

2.5 Transformaciones de la composicin general.

Las reglas de composicin determinan los resultados de objetos renderizados

superpuestos. Al elegir reglas de composicin se pueden obtener varios efectos

visuales, como diferentes grados de transparencia.

Para establecer las reglas de composicin, el concepto de un canal es

necesario. El canal puede ser visto como parte de las propiedades del color que

especifican la transparencia. Un valor es un nmero entre 0.0 y 1.0, siendo el

0.0 la transparencia completa y el 1.0 la opacidad completa.

Dando la fuente y destino del pixel de color y los valores , las reglas Porter-Duff

definen el resultado del color y los valores como una combinacin lineal de la

fuente y los valores de destino:

Frecuentemente los components de color deben tener valores premultiplicados

para acelerar el clculo. Las diferentes elecciones de los dos coeficientes y

en la equacin definen las diferentes reglas de composicin. Existen 12 reglas

Porter Duff, que tienen los coeficientes mostrados en la tabla 2.1.

Las reglas Porter-Duff pueden derivarse sistemticamente de un modelo

probabilstico. El valor de un color puede ser interpretado como la probabilidad

de que el color se mostrar, o ms concretamente como la porcin del rea del

pixel cubierto por un color especfico. Al combinar el cdigo y los colores destinos

con sus respectivos valores , se deben considerar cuatro diferentes casos: solo

se presenta el color fuente, solo se presenta el color destino, ambos colores se

presentan o ningn color se presenta. La figura 2.13 muestra los cuatro eventos,

los cuales ocurren con una probabilidad de s(1- d), d(1- ), s d, y (1- s)(1-

d), respectivamente. Una regla de composicin simplemente decide si retiene el

color cuando este ocurra. En el evento de solo cdigo fuente, una regla puede

50

elegir el matener el color fuente u omitirlo. En el evento solo color destino, el color

destino puede ser seleccionado u omitido, en el evento de ambos colores, una

regla puede elegir el color fuente, el color destino o ninguno de ellos. En el evento

ningn color, una regla solo puede no elegir color. Por lo tanto el nmero total de

reglas basado en este modelo es 2 x 2 x 3 x 1 = 12.

Figura 2.13 Cuatro eventos diferentes de color que pueden ocurrir en el modelo probabilstico de

composicin.

Por ejemplo, la regla SrcOver elige el color fuente en el evento de solo color

fuente y el evento de ambos colores. Elige el color destino en el evento solo color

destino. No debe elegir ningn color en el evento de ninguno. Por consecuencia la

probabilidad de que ocurra el color fuente en el color es s(1- d), + s d = s y la

probabilidad del color destino es d(1- s). Esto lleva a la seleccin del coeficiente

como se muestra en la tabla:

Regla Porter-Duff Clear 0 0

SrcOver 1 1 - s

DstOver 1- d 1

SrcIn d 0

DstIn 0 s

SrcOut 1- d 0

DstOut 0 1- s

Src 1 0

Dst 0 1

Ninguno

Fuente Ambos Destino

51

SrcAtop d 1- s

DstAtop 1- d s

Xor 1- d 1- s

Tabla 2.1 Las 12 reglas de composicin Porter Duff

En las versiones anteriores de Java 2D se soportan las primeras ocho reglas. A

partir de J2SDK 1.4, las 12 reglas son soportadas. La clase AlphaComposite

encapsula dichas reglas. Una instancia para una regla de AlphaComposite puede

obtenerse por un campo esttico de AlphaComposite con el nombre mostrado en

la tabla. Para aplicar las reglas de composicin un objeto Graphics2D

siemplemente llama al mtodo setComposite. Por ejemplo, los siguientes

comandos establecen una regla de composicin de SrcIn:

Graphics2D g2 = (Graphics2D)g;

g2.setComposite(AlphaComposite.SrcIn);

El siguiente cdigo muestra una aplicacin de la clase AlphaComposite que

implementa las reglas Porter-Duff. El ejemplo muestra ciertos objetos visuales

renderizados con las 12 reglas de composicin. Las reglas son seleccionadas al

dar click con el mouse en el panel de display.

import java.awt.*; import java.awt.event.*; import java.awt.image.*; import javax.swing.*; import java.awt.font.*; import java.awt.geom.*; import java.io.*; import java.net.URL; import javax.imageio.*; public class Compositing extends JApplet { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Compositing Rules"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new Compositing(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init() { JPanel panel = new CompositPanel(); getContentPane().add(panel); } } class CompositPanel extends JPanel implements MouseListener { BufferedImage image;

52

int[] rules = {AlphaComposite.CLEAR, AlphaComposite.SRC_OVER, AlphaComposite.DST_OVER, AlphaComposite.SRC_IN, AlphaComposite.DST_IN, AlphaComposite.SRC_OUT, AlphaComposite.DST_OUT, AlphaComposite.SRC, AlphaComposite.DST, AlphaComposite.SRC_ATOP, AlphaComposite.DST_ATOP, AlphaComposite.XOR}; int ruleIndex = 0; public CompositPanel() { setPreferredSize(new Dimension(500, 400)); setBackground(Color.white); URL url = getClass().getClassLoader().getResource("images/earth.jpg"); try { image = ImageIO.read(url); } catch (IOException ex) { ex.printStackTrace(); } addMouseListener(this); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.drawImage(image, 100, 100, this); AlphaComposite ac = AlphaComposite.getInstance(rules[ruleIndex], 0.4f); g2.setComposite(ac); Shape ellipse = new Ellipse2D.Double(50, 50, 120, 120); g2.setColor(Color.red); g2.fill(ellipse); g2.setColor(Color.orange); Font font = new Font("Serif", Font.BOLD, 144); g2.setFont(font); g2.drawString("Java", 90, 240); } public void mouseClicked(MouseEvent e) { ruleIndex++; ruleIndex %= 12; repaint(); } public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } }

Programa 2.3: Objetos renderizados con las 12 reglas de composicin.

Figura 2.14 Salida de la ejecucin del programa 2.3.

53

2.6 Transformacin ventana-rea de vista.

Una trayectoria de recorte define una regin en la cual los objetos pueden ser

visibles. Graphics2D mantiene una regin actual para el recorte. Cuando se dibuja

objeto, este es entrecortado por la trayectoria de recorte. Las porciones del objeto

que se encuentran fuera de la trayectoria no se dibujarn. El siguiente segmento

de cdigo muestra una elipse como la forma del recorte y dibuja una imagen; solo

la porcin de la imagen que se encuentra dentro de la elipse ser visible.

Graphics2D g2 = (Graphics2D)g;

Shape ellipse = new Ellipse2D.Double(0,0,300,200);

g2.setClip(ellipse);

g2.drawImage(image, 0, 0, this);

Otro metodo de Graphics2D que cambia la regin de recorte es:

void clip(Shape path)

El mtodo cortar la regin actual de recorte con la figura especificada. El

siguiente ejemplo demuestra el uso de la trayectoria de recorte. En el programa

se crea una figura y la cual es utilizada como la trayectoria de recorte para un

objeto Graphics2D. El dibujo es entrecortado por la figura.

import java.awt.*; import javax.swing.*; import java.awt.geom.*; public class TestClip extends JApplet { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Clip Path"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new TestClip(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init() { JPanel panel = new ClipPanel(); getContentPane().add(panel); } } class ClipPanel extends JPanel { public ClipPanel() { setPreferredSize(new Dimension(500, 500)); setBackground(Color.white); }

54

public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; GeneralPath path = new GeneralPath(GeneralPath.WIND_EVEN_ODD); path.moveTo(100,200); path.quadTo(250, 50, 400, 200); path.lineTo(400,400); path.quadTo(250,250,100,400); path.closePath(); g2.clip(path); g2.setColor(new Color(200,200,200)); g2.fill(path); g2.setColor(Color.black); g2.setFont(new Font("Serif", Font.BOLD, 60)); g2.drawString("Clip Path Demo",80,200); g2.drawOval(50, 250, 400, 100); } }

Programa 2.4: Cdigo que presenta un ejemplo de trayectoria de recorte.

Figura 2.15 Salida de la ejecucin del programa 2.4.

2.7 Representacin matricial de transformaciones tridimensionales.

Las transformaciones juegan un papel importante en los grficos por

computadora. A travs de transformaciones geomtricas apropiadas, los objetos

grficos pueden cambiar en forma, tamao y ubicacin. Las transformaciones

afines son utilizadas frecuentemente en el modelado del mundo virtual. Un tipo

especial de transformacin es la perspectiva o proyeccin ortogonal, que

comnmente se utiliza en las vistas para constuir el mapeo de un espacio 3D a

una imagen 2D. La animacin frecuentemente involucra la aplicacin de

transformaciones geomtricas para alcanzar los movimientos en una escena.

Java 3D proporciona soporte para transformaciones en diversos niveles. Las

clases de matrices tal como Matrix4d ofrecen la representacin de datos de bajo

55

nivel de las transformaciones. La clase Transform3D encapsula las

transformaciones 3D con las facilidades necesarias para establecer y componer

las transormaciones y para aplicarlas a puntos y vectores. La clase

TransformGroup representa el nivel alto de los nodos de transformacin en las

grficas de la escena.

Con el uso de las coordenadas homogenas, todas las transformaciones

proyectivas en 3D (incluyendo las transformaciones affines) estn completamente

determinadas por transformaciones matriciales 4 x 4. Las transformaciones con

interpretaciones geomtricas directas tales como las rotaciones y las traslaciones

pueden ser expresadas con matrices. Sin embargo, la construccin de matrices

explcitas de ciertas transformaciones tales como rotaciones generales en 3D

pueden ser complicadas. Otras representaciones, como la de un vector de cuatro

dimensiones para presentar una rotacin 3D, pueden proporcionar formas

intermedias ms convenientes para construcciones y manipulaciones de objetos.

Las transformaciones pueden combinarse para formar nuevas transformaciones.

Una manera poderosa para construir y manipular transformaciones complejas es

la composicin de transformaciones simples. En Java 3D la composicin puede

ocurrir en el nivel mas bajo de una matriz o de un objeto Transform3D a travs de

la multiplicacin de las transformaciones. Aunque tambin puede ocurrir en un

nivel alto de una escena grfica, donde la cadena de los nodos de

transformaciones crea el efecto de una transformacin compuesta.

La aplicacin principal de las transformaciones es cambiar las caractersticas

geomtricas de los objetos. En Java 3D los nodos de TransformGroup

representan las transformaciones y aplican a su hijo la transformacin definida en

el nodo. Otra aplicacin de las transformaciones es el ayudar a la construccin de

figuras geometricas. La clase Transform3D ofrece mtodos convenientes para

aplicar los puntos o vectores de transformacin. Para construir figuras

geometricas que tienen diversas propiedades simtricas, se puede tomar la

ventaja de las capacidades de la transformacin al generar muchos puntos de la

figura a travs de transformaciones de un conjunto de puntos base.

56

2.7.1 Transformaciones tridimensionales.

Una transformacin es un mapeo de un espacio de un vector a si mismo o a otro

espacio de vector. Ciertas familias de transformaciones que preservan algunas

propiedades goemtricas tienen un significado muy especial para la graficacin

por computadora. Por ejemplo, las transformaciones proyectivas son cruciales en

las vistas en 3D. Las transformaciones afines, son un subconjunto de las

transformaciones proyectivas, y son utilizadas extensamente en el modelado

visual de los objetos.

Una transformacin afin mapea lneas a lneas y preserva el paralelismo. Por

ejemplo, una transformacin afin puede no mapear un rectagulo a un rectngulo,

pero siempre mapear un rectngulo a un paralelograma. As como en el caso de

2D, las transformaciones afines 3D incluyen traslaciones, rotaciones,

escalaciones, sesgaciones y reflecciones. Sin embargo, las versiones de las

trasnformaciones en 3D son frecuentemente ms complejas, especialmente las

rotaciones.

Las transformaciones afines que adems preservan las distancias son conocidas

como movimientos rgidos, movimientos Euclidean o movimientos isomtricos.

Las traslaciones, rotaciones y reflecciones son ejemplos de movimientos rgidos.

2.7.2 Matriz de transformacin.

Las transformaciones afines pueden representarse en forma de matriz. Si un

punto en un espacio en 3D es representado por tres coordenadas:

Entonces la transformacin afin puede ser representada como una equacin

matriz:

57

Las rotaciones, escalaciones y sesgaciones relativas al origen pueden ser

representados por la matriz de multiplicacin sola. La adicin de la columna vector

representa una traslacin. Debido a que se requiere de un tratamiento especial

para las traslaciones, la transformacin descrita arriba no es lineal en el espacio

. Sin embargo, al utilizar coordenadas homogneas para representar puntos

3D, todas las transformaciones afines y las transformaciones proyectivas pueden

ser representadas como matriz de multiplicaciones. Las coordenadas

homogneas de un punto 3D tiene cuatro componentes: . Cuando no

es 0, corresponde a una coordenada regular 3D . Con las

coordenadas homogneas, las mismas transformaciones afines dadas en la parte

superior pueden ser representadas equivalentemente como una transformacin

lineal en el espacio .

La matriz de transformacin 4 x 4 en la equacin determina completamente una

transformacin afin. Las operaciones involucradas en la transformacin pueden

ser representadas como su correspondiente matriz de operaciones. El combinar

diversas transformaciones afines produce otra transformacin afin. La matriz de

una transformacin de composicin es el producto de las matrices de

trasnformaciones correspondientes. La matriz inversa de una transformacin

corresponde a la misma transformacin inversa. Una trasformacin proyectiva

puede ser representada con una equacin de matriz similar a:

Java 3D ofrece diversas clases que soportan las transformaciones. Adems de

clases de vector, el paquete javax.vecmath contiene clases de matrices que

58

representan matrices de 3 x 3, y de 4 x 4, y matrices generales como: Matrix3f,

Matrix3d, Matrix4f, Matrix4d, GMatrix. El siguiente segmento de cdigo contruye

un objeto Matrix4d:

double[ ] array = { 1.0, 2.0, 3.0, 1.0,

0.0, 1.0, -1.0, 2.0,

4.0, 0.0, 0.5, -1.0,

0.0, 0.0, 0.0, 1.0 };

Matrix4d matrix = new Matrix4d(array);

La clase GMatrix puede ser utilizada para representar una matriz de tamaos

arbitrarios con elementos del tipo double. Por ejemplo el siguiente cdigo crea

una matriz de 3 x 4:

double[ ] array = {1.0, 2.0, 3.0, 1.0,

0.0, 1.0, -1.0, 2.0,

4.0, 0.0, 0.5, -1.0};

GMatrix matrix = new GMatrix(3, 4, array);

Las operaciones bsicasde las matrices tales como la suma, multiplicacin, e

inversin son posibles de realizar. La siguiente es una lista parcial de mtodos de

la clase Matrix4d para operaciones con matrices. Otras clases contienen mtodos

similares:

void add(Matrix4d m1): suma una matriz m1 a la matriz actual. void sub(Matrix4d m1): resta una matriz m1 a la matriz actual. void mul(Matrix4d m1): multiplica una matriz m1 a la matriz actual. void invert(): invierte la matriz actual. void add(Matrix4d m1, Matrix4d m2): establece la matriz actual a la suma

de las matrices m1 y m2.

void sub(Matrix4d m1, Matrix4d m2): establece la matriz actual a la resta de las matrices m1 y m2.

void mul(Matrix4d m1, Matrix4d m2): establece la matriz