manual graficacion
Post on 10-Mar-2016
220 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
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
top related