unidad i.- introducciÓn a la graficaciÓn …³n unidad i.- introducciÓn a la graficaciÓn por...

11
Graficación UNIDAD I.- INTRODUCCIÓN A LA GRAFICACIÓN POR COMPUTADORA ___________________________________________________________________ LECCIÓN 1.1.- Breve historia de la graficación ___________________________________________________________________ 1.1.3.- Evolución de la Programación para la Graficiación por Computadora Elementos de un sistema gráfico: Modelador: Responsable de la construcción de los modelos de mundo virtuales (conjunto de objetos gráficos) Renderer (Traductor): Ejecuta la interpretación del modelo a una escena. Objetos gráficos: Se modelan en 2D y 3D usando representaciones matemáticas (línea, poligono, curvas, superficies). Se forman de entidades geométricas básicas (líneas o superficies) y objetos especiales (luces, textos, imágenes). Tiene propiedades como color, transparencia y textura. Rafael Rivera López 1

Upload: vantu

Post on 21-Sep-2018

213 views

Category:

Documents


0 download

TRANSCRIPT

Graficación

UNIDAD I.- INTRODUCCIÓN A LA GRAFICACIÓN POR COMPUTADORA___________________________________________________________________

LECCIÓN 1.1.- Breve historia de la graficación___________________________________________________________________

1.1.3.- Evolución de la Programación para la Graficiación por Computadora

Elementos de un sistema gráfico:

– Modelador: Responsable de la construcción de los modelos de mundo virtuales (conjunto

de objetos gráficos)

– Renderer (Traductor): Ejecuta la interpretación del modelo a una escena.

Objetos gráficos:

– Se modelan en 2D y 3D usando representaciones matemáticas (línea, poligono, curvas,

superficies).

– Se forman de entidades geométricas básicas (líneas o superficies) y objetos especiales

(luces, textos, imágenes).

– Tiene propiedades como color, transparencia y textura.

Rafael Rivera López1

Graficación

Transformación geométrica: Se utiliza para lograr ubicar al objeto en la escena.

– Transformaciones de objetos: rotación, traslación, escalado (transformaciones afines).

– Transformaciones de vista: proyecciones.

Niveles de la Programación Gráfica

Independencia de plataforma (Java 2D y 3D)Estándares Gráficos (GKS, PHIGS, OpenGL)Sistemas Operativos (Win32, X, Mac OS)Hardware (programación directa sobre registros y buffer de video)

Nivel de HardwareSe programa directamente en el hardware de gráficos.

Los monitores son dispositivos representados como un arreglo rectangular de puntos.

El código genera un círculo escribiendo en la memoría del buffer de video.

El programa usa el modo de video 13h (320 por 200 pixeles y 256 colores).

1 .model small,stdcall 2 .stack 100h 3 .386 4 5 .data 6 saveMode BYTE ? ; saved video mode 7 xc WORD ? ; center x 8 yc WORD ? ; center y 9 x SWORD ? ; x coordinate 10 y SWORD ? ; y coordinate 11 dE SWORD ? ; east delta 12 dSE SWORD ? ; southeast delta 13 w WORD 320 ; screen width 14 15 .code 16 main PROC 17 mov ax,@data 18 mov ds,ax 19 20 ;Set Video Mode 320X200 21 mov ah,0Fh ; get current video mode 22 int 10h 23 mov saveMode,al ; save mode 24 25 mov ah,0 ; set new video mode

Rafael Rivera López2

Graficación

26 mov al,13h ; mode 13h 27 int 10h 28 29 push 0A000h ; video segment address 30 pop es ; ES = A000h (video segment) 31 32 ;Set Background 33 mov dx,3c8h ; video palette port (3C8h) 34 mov al,0 ; set palette index 35 out dx,al 36 37 ;Set screen background color to dark blue 38 mov dx,3c9h ; port address 3C9h 39 mov al,0 ; red 40 out dx,al 41 mov al,0 ; green 42 out dx,al 43 mov al,32 ; blue (32/63) 44 out dx,al 45 46 ; Draw Circle 47 ; Change color at index 1 to yellow (63,63,0) 48 mov dx,3c8h ; video palette port (3C8h) 49 mov al,1 ; set palette index 1 50 out dx,al 51 52 mov dx,3c9h ; port address 3C9h 53 mov al,63 ; red 54 out dx,al 55 mov al,63 ; green 56 out dx,al 57 mov al,0 ; blue 58 out dx,al 59 60 mov xc,160 ; center of screen 61 mov yc,100 62 63 ; Calculate coordinates 64 mov x, 0 65 mov y, 50 ; radius 50 66 mov bx, -49 ; 1-radius 67 mov dE, 3 68 mov dSE, -95 69 70 DRAW: 71 call Draw_Pixels ; Draw 8 pixels 72 73 cmp bx, 0 ; decide E or SE 74 jns MVSE 75 76 add bx, dE ; move east 77 add dE, 2 78 add dSE, 2 79 inc x 80 jmp NXT 81 MVSE: 82 add bx, dSE ; move southeast

Rafael Rivera López3

Graficación

83 add dE, 2 84 add dSE, 4 85 inc x 86 dec y 87 NXT: 88 mov cx, x ; continue if x < y 89 cmp cx, y 90 jb DRAW 91 92 ; Restore Video Mode 93 mov ah,10h ; wait for keystroke 94 int 16h 95 mov ah,0 ; reset video mode 96 mov al,saveMode ; to saved mode 97 int 10h 98 99 .EXIT100 main ENDP101102 ; Draw 8 pixels symmetrical about the center103 Draw_Pixels PROC104 ; Calculate the video buffer offset of the pixel.105 mov ax, yc106 add ax, y107 mul w108 add ax, xc109 add ax, x110 mov di, ax111 mov BYTE PTR es:[di],1; store color index112 ; Horizontal symmetrical pixel113 sub di, x114 sub di, x115 mov BYTE PTR es:[di],1; store color index116 ; Vertical symmetrical pixel117 mov ax, yc118 sub ax, y119 mul w120 add ax, xc121 add ax, x122 mov di, ax123 mov BYTE PTR es:[di],1; store color index124 ; Horizontal pixel125 sub di, x126 sub di, x127 mov BYTE PTR es:[di],1; store color index128 ; Switch x, y to get other 4 pixels129 mov ax, yc130 add ax, x131 mul w132 add ax, xc133 add ax, y134 mov di, ax135 mov BYTE PTR es:[di],1; store color index136 sub di, y137 sub di, y138 mov BYTE PTR es:[di],1; store color index139 mov ax, yc

Rafael Rivera López4

Graficación

140 sub ax, x141 mul w142 add ax, xc143 add ax, y144 mov di, ax145 mov BYTE PTR es:[di],1; store color index146 sub di, y147 sub di, y148 mov BYTE PTR es:[di],1; store color index149150 ret151 Draw_Pixels ENDP152153 END main

Rafael Rivera López5

Graficación

Nivel de Sistema OperativoLos programas hechos a nivel de hardware no son portables. Los sistemas operativos

modernos tienen librerias para soporte de gráficos (API gráfica), a través de drivers en

software. Ejemplo: Win32 es la API para Windows 9x/MeE/NT/2000/XP. 1 #include <windows.h> 2 #include <string.h> 3 4 LRESULT CALLBACK 5 MainWndProc (HWND hwnd, UINT nMsg, WPARAM wParam, LPARAM lParam) { 6 HDC hdc; /* Device context used for drawing */ 7 PAINTSTRUCT ps; /* Paint structure used during drawing */ 8 RECT rc; /* Client area rectangle */ 9 int cx; /* Center x-coordinate */ 10 int cy; /* Center y-coordinate */ 11 int r; /* Radius of circle */ 12 13 /* Message processing.*/ 14 switch (nMsg) { 15 16 case WM_DESTROY: 17 /* The window is being destroyed, close the application */ 18 PostQuitMessage (0); 19 return 0; 20 21 case WM_PAINT: 22 /* The window needs to be redrawn. */ 23 hdc = BeginPaint (hwnd, &ps); 24 GetClientRect (hwnd, &rc); 25 /* Calculate center and radius */ 26 cx = (rc.left + rc.right)/2; 27 cy = (rc.top + rc.bottom)/2; 28 if (rc.bottom - rc.top < rc.right - rc.left) 29 r = (rc.bottom - rc.top) / 2 - 20; 30 else 31 r = (rc.right - rc.left) / 2 - 20; 32 33 Ellipse(hdc, cx-r, cy-r, cx+r, cy+r); 34 35 EndPaint (hwnd, &ps); 36 return 0; 37 38 } 39 40 return DefWindowProc (hwnd, nMsg, wParam, lParam); 41 } 42 43 int WINAPI 44 WinMain (HINSTANCE hInst, HINSTANCE hPrev, LPSTR lpCmd, int nShow) { 45 HWND hwndMain; /* Main window handle */ 46 MSG msg; /* Win32 message structure */ 47 WNDCLASSEX wndclass; /* Window class structure */ 48 char* szMainWndClass = "WinCircle"; /* The window class name */ 49

Rafael Rivera López6

Graficación

50 /* Create a window class */ 51 /* Initialize the entire structure to zero */ 52 memset (&wndclass, 0, sizeof(WNDCLASSEX)); 53 54 /* The class Name */ 55 wndclass.lpszClassName = szMainWndClass; 56 57 /* The size of the structure. */ 58 wndclass.cbSize = sizeof(WNDCLASSEX); 59 60 /* All windows of this class redraw when resized. */ 61 wndclass.style = CS_HREDRAW | CS_VREDRAW; 62 63 /* All windows of this class use the MainWndProc window function. */ 64 wndclass.lpfnWndProc = MainWndProc; 65 66 /* This class is used with the current program instance. */ 67 wndclass.hInstance = hInst; 68 69 /* Use standard application icon and arrow cursor */ 70 wndclass.hIcon = LoadIcon (NULL, IDI_APPLICATION); 71 wndclass.hIconSm = LoadIcon (NULL, IDI_APPLICATION); 72 wndclass.hCursor = LoadCursor (NULL, IDC_ARROW); 73 74 /* Color the background white */ 75 wndclass.hbrBackground = (HBRUSH) GetStockObject (WHITE_BRUSH); 76 77 /* Register the window class */ 78 RegisterClassEx (&wndclass); 79 80 /* Create a window using the window class */ 81 hwndMain = CreateWindow ( 82 szMainWndClass, /* Class name */ 83 "Circle", /* Caption */ 84 WS_OVERLAPPEDWINDOW, /* Style */ 85 CW_USEDEFAULT, /* Initial x (use default) */ 86 CW_USEDEFAULT, /* Initial y (use default) */ 87 CW_USEDEFAULT, /* Initial x size (use default) */ 88 CW_USEDEFAULT, /* Initial y size (use default) */ 89 NULL, /* No parent window */ 90 NULL, /* No menu */ 91 hInst, /* This program instance */ 92 NULL /* Creation parameters */ 93 ); 94 95 /* Display the window */ 96 ShowWindow (hwndMain, nShow); 97 UpdateWindow (hwndMain); 98 99 /* The message loop */100 while (GetMessage (&msg, NULL, 0, 0)) {101 TranslateMessage (&msg);102 DispatchMessage (&msg);103 }104 return msg.wParam;105 }

Rafael Rivera López7

Graficación

Estándares gráficos

Las soluciones basadas en las APIs del Sistema Operativo no son portables.

Un estándar gráfico proporciona un nivel de abstracción para independencia de plataforma y

de dispositivo. Estas librerias se utilizan con otros lenguajes de alto nivel (Fortran, Pascal, C).

GKS: Graphics Kernel System

PHIGS: Programmer's Hierarchical Interactive Graphics System

OpenGL: Open Graphics Library.

Ejemplo usando GKS 1 PROGRAM CIRCLE 2 C 3 C Define error file, Fortran unit number, and workstation type, 4 C and workstation ID. 5 C 6 PARAMETER (IERRF=6, LUNIT=2, IWTYPE=1, IWKID=1) 7 PARAMETER (ID=121) 8 DIMENSION XP(ID),YP(ID) 9 C10 C Open GKS, open and activate a workstation.11 C12 CALL GOPKS (IERRF,IDUM)13 CALL GOPWK (IWKID,LUNIT,IWTYPE)14 CALL GACWK (IWKID)15 C16 C Define colors.17 C18 CALL GSCR(IWKID,0, 1.0, 1.0, 1.0)19 CALL GSCR(IWKID,1, 1.0, 0.0, 0.0)20 C21 C Draw a circle.22 C23 X0 = .524 Y0 = .525 R = .326 JL = 12027 RADINC = 2.*3.1415926/REAL(JL)28 DO 10 J=1,JL+129 X = X0+R*COS(REAL(J)*RADINC)30 Y = Y0+R*SIN(REAL(J)*RADINC)31 XP(J) = X32 YP(J) = Y33 10 CONTINUE34 CALL GSPLI(1)

Rafael Rivera López8

Graficación

35 CALL GSPLCI(1)36 CALL GPL(JL+1,XP,YP)37 C38 C Deactivate and close the workstation, close GKS.39 C40 CALL GDAWK (IWKID)41 CALL GCLWK (IWKID)42 CALL GCLKS43 C44 STOP45 END

Ejemplo usando OpenGL 1 #include <GL/glut.h> 2 #include <math.h> 3 4 void display(void) { 5 int i; 6 int n = 80; 7 float a = 2*3.1415926535/n; 8 float x; 9 float y;1011 glClear(GL_COLOR_BUFFER_BIT);12 glColor3f(1.0,0,0);1314 glBegin(GL_LINE_LOOP);15 for (i = 0; i < n; i++) {16 x = cos(i*a);17 y = sin(i*a);18 glVertex2f(x, y);19 }20 glEnd();21 glFlush();22 }2324 int main(int argc, char** argv) {25 glutInit(&argc, argv);26 glutCreateWindow("Circle");27 glutDisplayFunc(display);28 glMatrixMode(GL_PROJECTION);29 glLoadIdentity();30 gluOrtho2D(-1.2, 1.2, -1.2, 1.2);31 glClearColor(1.0, 1.0, 1.0, 0.0);32 glutMainLoop();33 }

Rafael Rivera López9

Graficación

Independencia de Plataforma: JavaOpenGL no está diseñado para el paradigma orientado a objetos.

Java proporciona dos APIs: Java2D y Java3D.

Java con GUI (awt) import java.awt.*; import java.awt.event.*; public class AWTDemo extends Frame implements ActionListener{ private int x = 100; private int y = 100; private MenuItem mi; public AWTDemo() { setTitle("AWT Demo"); addMenu(); addEventos(); } public void addMenu(){ MenuBar mb = new MenuBar(); Menu menu = new Menu("Archivo"); mi = new MenuItem("Salir"); mb.add(menu); menu.add(mi); setMenuBar(mb); } public void addEventos(){ mi.addActionListener(this); addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent ev) { System.exit(0); } }); addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent ev) { x = ev.getX(); y = ev.getY(); repaint(); } }); } public void paint(Graphics g) { g.drawOval(x-50, y-50, 100, 100); } public void actionPerformed(ActionEvent ev) { System.exit(0); }}

Rafael Rivera López10

Graficación

Rafael Rivera López11