Graficacion

Instituto Tecnolgico de MoreliaJos Mara Morelos y Pavn

GRAFICACINMartha Azucena Fernndez Saucedo Asesor: Rogelio Ferreira Escutia

Trabajo realizado para obtener el ttulo de:

Ing. en Sistemas Computacionales

Morelia, Mich.

Agosto de 2007

I n s t i t u t o T e c n o l g i c o d e M o r e l i a

A mi familia

Graficacin II


ndicendice ndice de figuras Introduccin CAPTULO 1. Introduccin a la graficacin por computadora 1.1. Breve historia de la graficacin Las bases Los 1960s Los 1970s Los 1980s Los 1990s 2000 - a la fecha 1.2. Aplicaciones Diseo Asistido por Computadora Arte digital Entretenimiento Educacin y capacitacin Visualizacin Procesamiento de imgenes Interfaces grficas de usuario 1.3. Formatos grficos de almacenamiento AI, Adobe Ilustrator III VIII XV 1 1 1 2 6 8 12 15 16 16 19 22 27 28 29 31 33 38

Graficacin III


BMP, BitMaP CDR, Corel Draw CIN, Cineon CPT, Corel PhotoPaint DPX, Digital Picture eXchange DRW, Draw DXF, Drawing Interchange Format EMF, Enhanced MetaFile EPS, Encapsulated PostScript EXR, Extended Dynamic Range Image File Format FLA, Macromedia Flash Document FHx, Macromedia FreeHand File GIF, Graphics Interchange Format JPEG, Joint Photographic Experts Group JP2, Joint Photographic Experts Group 2000 MNG, Multiple-image Network Graphics PBM, Portable Bitmap Format PCX, PiCture eXchange PDF, Portable Document Format PGM, Portable Graymap Format PIC, Picture PNG , Portable Network Graphic PPM, Portable Pixmap Format PSD (Photoshop Digital Format) PSP, Documento de Paint Shop ProGraficacin IV

39 40 40 41 41 42 42 43 43 44 44 45 45 47 56 58 59 59 60 61 61 62 68 68 69


SVG, Scalable Vector Graphics SWF, ShockWave Flash TGA, Truevision TGA TIFF, Tagged Image File Format WMF, Windows MetaFile Format XBM, X BitMap XCF, eXperimental Computing Facility X-Pixmap (.xpm) Resumen CAPTULO 2. Transformaciones geomtricas 2.1. Transformaciones bidimensionales Traslacin Rotacin Escalacin 2.2. Coordenadas homogneas y representacin matricial 2.3. Composicin de transformaciones bidimensionales Traslaciones, rotaciones y escalaciones Rotacin del punto pivote general Escalacin del punto fijo general Propiedades de concatenacin 2.4. Transformacin ventana-rea de vista 2.5. Transformaciones de composicin general y de eficiencia computacional 2.6. Representacin matricial de transformaciones tridimensionales 2.7. Composicin de transformaciones tridimensionales Resumen

69 70 71 71 74 74 74 74 75 78 79 79 80 84 87 90 91 92 94 95 96 101

107 112 120

Graficacin V


CAPTULO 3. Modelado Geomtrico 3.1. Modelado de Superficie Superficies de Bezier Superficies B-Spline Modelado de slido 3.2. Proyecciones Proyeccin de perspectiva Proyecciones paralelas Proyeccin isomtrica Identificacin de superficies y lnea visible 3.3. Representacin tridimensional de objetos Superficies de polgonos Lneas y superficies curvas Superficies cuadrticas (cudricas) Representaciones de Spline Curvas y Superficies de Bezier Resumen Bibliografa Apndice A Introduccin a OpenGL A.1. Sintaxis bsica de OpenGL A.2. Bibliotecas relacionadas A.3. Archivos de cabecera A.4. Gestin de la ventana de visualizacin empleando GLUT A.5. Un programa OpenGL completo A.6. Instalacin de OpenGLGraficacin VI

122 123 125 132 136 171 173 175 178 179 180 180 190 191 195 205 218 221 223 223 224 225 226 228 233


Apndice B Matemticas para Graficacin B.1. Sistemas de coordenadas Coordenadas de pantalla bidimensionales Sistemas de referencia cartesianos bidimensionales estndar Coordenadas polares en el plano xy Sistema de referencia cartesianos tridimensionales estndar Coordenadas de pantalla cartesianas tridimensionales B.2. Puntos y vectores Propiedades de los puntos Propiedades de los vectores Suma de vectores y multiplicacin escalar Producto escalar de dos vectores Producto vectorial de dos vectores B.3. Matrices Multiplicacin por un escalar y suma de matrices Multiplicacin de matrices Transpuesta de una matriz Determinante de una matriz Inversa de una matriz B.4. Representaciones no paramtricas B.5. Representaciones paramtricas Apndice C Manual de Prcticas

240 240 240 241 242 244 245 246 246 246 249 250 252 253 255 255 257 257 258 259 260 262

Graficacin VII


ndice de figurasCaptulo 1 1.1. Computadora de uso militar SAGE 1.2. Tarjeta perforada de Hollerit 1.3. Ivan Sutherland trabajando en el MIT 1.4. Primer mouse 1.5. iPod con juego Pong 1.6. Consola Atari 2600 1.7. Computadora Altair 8800 1.8. Computadora Apple I 1.9. Primera computadora personal IBM 1.10. Jim Blinn 1.11. John Warnok 1.12. Ventana en la primera versin de Microsoft Windows 1.13. Programa Adobe Photoshop 1.14. Primer navegador grfico Mosaic 1.15. Super Mario 64 1.16. Shigeru Miyamoto 1.17. Computadora PowerMac 1.18. Cmara digital 1.19. Vista del programa Autocad 1.20. Tren en AutocadGraficacin VIII

3 3 4 5 6 7 7 8 9 10 10 11 12 13 14 14 15 16 17 18


1.21. Modelo de un tornillo 1.22. Vista modelo de un edificio 1.23. Tableta Digitalizadora 1.24. Pintura digital tridimensional 1.25. Tcnica de morphing 1.26. Montaje de un perro con la cabeza de ave 1.27. Escena de la pelcula Toy Story 1.28. Escena de la caricatura South Park 1.29. Imagen de una animacin en Maya 1.30. Lara Croft 1.31. Consola de videojuegos Xbox 1.32. Escena de Los increbles 1.33. Escena de Matrix 1.34. Simulador de vuelo de la NASA 1.35. Colonoscopa asistida 1.36. Imagen va satlite 1.37. Tomografa computarizada 1.38. Ciruga asistida por computadora 1.39. Interfaz tipo ventana 1.40. El estilo aqua de Mac OS 1.41. Interface web 1.42. Cdigo de un archivo grfico 1.43. Detalle de una imagen de mapa de bits 1.44. Imagen de un tren vectorizada 1.45. Imagen de un tren en mapa de bitsGraficacin IX

18 19 20 20 21 21 23 23 24 24 25 26 26 27 28 30 30 31 32 32 33 34 35 37 37


1.46. Logotipo en formato AI 1.47. Detalle de imagen en formato BMP 1.48. Diseo en formato CDR 1.49. Plano almacenado en formato DXF 1.50. Uso del algoritmo JPEG en una imagen 1.51. Rango de color soportados por PNG 1.52. Una imagen PNG con un canal alfa de 8 bits 1.53. Una imagen PNG con fondo transparente Captulo 2 2.1. Movimiento de un polgono 2.2. Rotacin de un objeto 2.3. Rotacin de un punto 2.4. Rotacin de un punto 2.5. Conversin de un cuadrado en un rectngulo 2.6. Escalacin con respecto de un punto fijo 2.7. Secuencia de transformacin para girar un objeto 2.8. Secuencia de transformacin para escalar un objeto 2.9. Inversin de secuencia de transformaciones 2.10. Coordenadas de mundo y rea de vista 2.11. Primitivas de salida con dos reas de vista 2.12. Transformacin de una ventana 2.13. Primitivas de salida en coordenadas mundiales 2.14. Rotacin de un objeto 2.15. Transformacin de un polgono 2.16. Sistema de coordenadas de mano derechaGraficacin X

38 39 40 42 50 65 65 65

80 81 82 83 85 86 93 94 96 97 98 99 101 104 106 108


2.17. Sistema de coordenadas de mano izquierda 2.18. Transformacin de primitivas 2.19. Rotacin sobre el eje y 2.20. Rotacin sobre el eje x 2.21. Rotacin sobre el eje y 2.22. Transformacin de los vectores unidad 2.23. Un aeroplano 2.24. Aeroplano en el punto P Captulo 3 3.1. Superficie con puntos de Bzier 3.2. Superficies no adaptadas 3.3. Interpretacin grfica de las derivadas 3.4. Singularidades en una derivada parcial 3.5. Parches de Bzier 3.6. Superficie B-spline bicbica 3.7. Ejemplo de caminos cerrados 3.8. Suma de ngulos en un camino cerrado simple 3.9. Suma de ngulos en un camino cerrado no simple 3.10. Deformacin conservadora 3.11. Concepto de ngulo de exceso 3.12. Objetos de Euler 3.13. Ejemplos de objetos de Euler 3.14. Objetos eulerianos de grado 1 y 0 3.15. Figura plana 3.16. Interseccin que presenta un resultado degeneradoGraficacin XI

108 113 114 115 116 118 118 119

126 127 130 131 134 135 138 138 139 140 141 143 143 144 145 145


3.17. Operaciones booleanas 3.18. Interseccin booleana 3.19. Tabla de operaciones booleanas regularizadas 3.20. Operaciones booleanas ordinarias 3.21. Engrane parametrizado 3.22. Dos barridos simples de objetos tridimensionales 3.23. Caras de un objeto 3.24. Disco topolgico 3.25. Poliedros simples 3.26. Poliedro 3.27. Construccin de un objeto con celdas 3.28. Toro 3.29. Objeto representado en dos formas 3.30. Estructura de rbol de cuadrantes 3.31. Numeracin de rbol de octantes 3.32. Operaciones booleanas de conjuntos 3.33. Representacin de rbol BSP 3.34. Objeto definido por CSG 3.35. Objeto representado en operaciones CSG 3.36. Dos proyecciones diferentes de la misma lnea 3.37. Proyecciones de perspectiva 3.38. Construccin de una proyeccin de perspectiva 3.39. Proyeccin de perspectiva de dos puntos 3.40. Construccin de tres proyecciones ortogrficas. 3.41. Construccin de una proyeccin oblicuaGraficacin XII

146 148 150 150 152 153 154 155 156 157 160 161 162 163 164 166 168 169 171 172 174 174 175 176 177


3.42. Subclases de las proyecciones geomtricas planas 3.43. Proyeccin isomtrica de un cubo 3.44. Armazn de un pirmide 3.45. Estructura de alambre de un cilindro 3.46. Superficies de polgonos adyacentes 3.47. Tabla de aristas 3.48. Superficie con ecuacin del plano 3.49. Hilera de tringulos 3.50. Enlace cuadriteral 3.51. Posicin de las coordenadas paramtricas sobre superficie 3.52. Parmetros de coordenadas esfricas 3.53. Elipsoide 3.54. Toro con corte transversal circular 3.55. Puntos de control interpolados con secciones polinmicas 3.56. Puntos de control interpolados con secciones polinmicas 3.57. Formas de casco convexo 3.58. Formas de grfica de control 3.59. Construccin por piezas de una curva 3.60. Secciones de curva unidas 3.61. Dos curvas de Bezier bidimensionales 3.62. Curva de Bzier cerrada 3.63. Curva Bzier con mltiples puntos 3.64. Curva con continuidad de primer orden 3.65. Funciones de combinacin de Bzier 3.66. Superficies de BzierGraficacin XIII

178 179 180 181 183 184 187 189 189 192 193 193 195 196 197 198 199 201 203 208 210 211 212 214 216


3.67. Superficie de Bzier compuesta Apndice B B.1. Coordenadas de pantalla cartesianas B.2. Sistema de referencia en coordenadas polares B.3. Relacin entre coordenadas polares y cartesianas B.4. Tringulo B.5. ngulo B.6. Coordenadas de un punto P B.7. Sistema de coordenadas cartesianas B.8. Punto P en dos sistemas de referencia B.9. Vector bidimensional B.10. ngulos directores B.11. Un vector de fuerza gravitatoria F B.12. Suma de dos vectores B.13. Producto escalar de dos vectores B.14. Producto vectorial de dos vectores

217

241 242 242 243 243 244 245 246 247 248 249 250 251 252

Graficacin XIV


IntroduccinLa infografa, es decir, los grficos por computadora, continua siendo una de las reas ms excitantes y de ms rpido crecimiento de la tecnologa moderna. Los mtodos infogrficos se aplican de forma rutinaria en el diseo y la mayora los productos, en los simuladores para actividades de programacin, en la produccin de pelculas, anuncios de televisin, vdeos musicales, en el anlisis de los datos, en los estudios cientficos, en las intervenciones mdicas, los vdeo juegos y en muchsimas otras aplicaciones. En la actualidad, se utiliza una gran variedad de tcnicas y de dispositivos de

hardware en diversas reas de aplicacin y existen muchas tcnicas y hardware en proceso de desarrollo tambin. Buena parte de las investigaciones actuales en el campo de la informtica estn relacionadas con la mejora de la efectividad, el realismo y la velocidad de generacin de imgenes. La tendencia actual en los grficos por computadora consiste en incorporar mejores aproximaciones de los principios fsicos dentro de los algoritmos grficos a fin de simular mejor las complejas interacciones existentes entre los objetos y el entorno. El objetivo del texto presente es introducir al estudiante a los conceptos bsicos, en teora y prctica, de la graficacin mediante la explicacin detallada de los principios de esta.

Graficacin XV


Capitulo 1. Introduccin a la graficacin

1. Introduccin a la graficacin por computadoraObjetivo.El estudiante conocer los antecedentes de la graficacin as como los principales formatos de almacenamiento. Los grficos por computadora se han convertido en una potente herramienta para la produccin rpida y econmica de imgenes. Prcticamente no existe ninguna tarea en la que la representacin grfica de la informacin no pueda aportar alguna ventaja y por tanto, no sorprende encontrar grficos por computadora en muchos sectores. Aunque las primeras aplicaciones de ciencia e ingeniera requeran equipos caras y aparatosos, los avances en la tecnologa informtica han hecho los grficos interactivos una herramienta muy til. Actualmente los grficos por computadora se usan en campos tan diversos como las ciencias, las artes, la ingeniera, los negocios, la industria, la medicina, las administraciones pblicas, el entretenimiento, la publicidad, la educacin, la formacin y en aplicaciones caseras.

1.1.Breve historia de la graficacinLas bases1.Correccin nmeros figuras

A lo largo de la historia han sucedido importantes eventos que han sentado las bases para las grficas por computadora. Estos descubrimientos merecen ser como sus autores:Graficacin 1

mencionados as



Euclides (300- 250 A.C.), su frmula de geometra provee una base para los conceptos grficos. Filippo Brunelleschi (1377 - 1446), arquitecto y escultor, es reconocido por su uso de la perspectiva.

Rene Descartes (1596-1650), hizo aportaciones a la geometra analtica, en particular, el sistema de eje coordenado que provee una base para describir la localizacin y forma de objetos en el espacio. Gottfried Wilhelm Leibniz (1646 - 1716) e Issac Newton (1642 - 1727), inventaron el calculo que permite la descripcin de sistemas dinmicos.

James Joseph Sylvester (1814 - 1897), invent la notacin matricial. Los grficos son hechos con matrices. I. Schoenberg, descubri los splines, un tipo fundamental de curva. J. Presper Mauchly (1919 - 1995) y John William Mauchly (1907 - 1980), construyeron la computadora ENIAC

Alexander S. Douglas desarrolla en 1952 Nought and crosses. El juego era una versin computerizada del tres en raya que se ejecutaba sobre el EDSAC.

Los 1960sSe puede decir que la historia comienza con el Proyecto Whirlwind y el Whirlwind inici como un esfuerzo para construir un sistema computacional SAGE que fue diseado para apoyar el estado de alerta militar. El Proyecto simulador de vuelo y SAGE para proveer un sistema de defensa areo en los Estados Unidos como proteccin contra un ataque nuclear. La estacin de trabajo SAGE tena un monitor vectorial y lpiz luminoso que los operadores usaban para dibujar planes de vuelo sobre las regiones de los Estados Unidos. En la actualidad, el Museo de Computacin de Boston (Boston Computer Museum) exhibe una estacin de trabajo SAGE. El monitor es una pantalla de radar con un recuadro alrededor de la regin que esta siendo escaneada. Los lpices luminosos son como los viejos taladros de metal. En la exhibicin Hollywood and Vine de IBM en Kingston New York se muestra una computadora SAGE.

Graficacin 2



Figura 1.1.Computadora de uso militar SAGE

Adems de el inicio de la era de las primeras computadoras de tubos de vaco, los 1940s vieron nacer el transistor en los Laboratorios Bell (Bell Labs) en 1947. En 1956 la primera computadora de transistores se construyo en el MIT. IBM, Sperry-Rand, Burroughs y otras pocas compaas de computadoras principios de los 1960s. Las computadoras tenan unos pocos kilobytes hablar de sistemas operativos o monitores que desplegaran grficos. Los perifricos eran tarjetas perforadas de Hollerit, impresoras de lneas y plotters de papel en rollo. Los nicos lenguajes de programacin eran ensamblador, FORTRAN y Algol. Las funciones grficas y los calendarios Snoopy eran los nicos grficos hechos hasta entonces. existan a

de memoria, ni

Fig. 1.2.Tarjeta perforada de HolleritGraficacin 3



En 1963 Ivan Sutherland present su artculo Sketchpad en el Summer Joint Computer Conference. Sketchpad permita el diseo interactivo en un monitor de grficos de vectores con un lpiz luminoso como dispositivo de entrada. La mayora de la gente ubica este hecho en la historia como el origen de las grficas por computadora. Sketchpad se considera el abuelo de los programas CAD actuales y era muy avanzado para su poca al usar una interfaz grfica de usuario, GUI.

Fig. 1.3.Ivan Sutherland trabajando en el MIT

El sistema Sketchpad fue creado en el Laboratorio Lincoln del MIT sobre un ordenador TX-2, una de las mejores mquinas de entonces pues contaba con 320Kb de memoria base y 8Mb de memoria externa en forma de cintas grficos, estaba dotado con un monitor de puntero ptico y un remedo de ratn. Jack Bresenham nos ense como dibujar lineas en un dispositivo raster a mediados de los 1960s. Despus extendi su mtodo para dibujar crculos. Larry Roberts seal la utilidad de las coordenadas homogneas, las matrices 4 x 4 y los algoritmos de deteccin de lneas ocultas. Stevens Coons introdujo las superficies paramtricas y desarroll los primeros conceptos de diseo geomtrico asistido por computadora. El trabajo de Pierre Bzier en curvas paramtricas tambin se hizo pblico. Andrew Appel desarroll en IBM algoritmos para superficies ocultas y sombras que fueron precursoras de el trazado de rayos (ray tracing). La transformada rpida de Fourier fue descubierta por Cooley y Tukey. Este algoritmo nos permite entender mejor las seales y es fundamental para el desarrollo de tcnicas de anti-alisado. magnticas. En cuanto a dispositivos siete pulgadas 10241024, adems de un

Graficacin 4



En 1963, Douglas Englebart invent el Mouse en los laboratorios de Xerox PARC. Este mouse usaba dos ruedas perpendiculares entre ellas: la rotacin de trasladada en movimiento a lo largo de un eje en el plano. cada rueda era

Fig. 1.4.Primer mouse sujetado por su inventor, Douglas Englebart

Aos ms tarde, la corporacin Evans & Sutherland y General Electric comenzaron a construir simuladores de vuelo con grficos rasterizados de tiempo real. En 1966 Ralph Baer empez a desarrollar junto a Bob Tremblay y Ted Dabney un

proyecto de videojuego llamado Fox and Hounds dando inicio al videojuego domstico. Este proyecto evolucionara hasta convertirse en la Odyssey, el primer sistema domstico de videojuegos lanzado en 1972. El algoritmo de sombreado fue creado por Gouraud y Phong en la Universidad de Utah (University of Utah) cuando en 1968 la universidad le pidi a David Evans que dirigiera un programa de investigacin en grficos por computadora; adems del sombreado, otros algoritmos se desarrollaron tales como el de iluminacin. Phong tambin introdujo un modelo de reflexin que inclua rayos de luz especulares. Se hicieron demostraciones de animacin basada en cuadros clave para grficos en 3D . Xeroc PARC desarroll un programa de dibujo o editor de mapa de bits llamado Markup para la computadora Alto. Ed Catmull introdujo el rendereo paramtrico, el algoritmo de z-buffer y mapeo de textura. En esa misma poca BASIC, C y Unix fueron desarrollados en Dartmouth y Bell.Graficacin 5

los laboratorios



Los 1970sA principios de los 1970s el Sistema de Imgenes de Evans & Sutherland era una computadora 80186, etc. Los videojuegos como arcade nacieron en 1971 cuando Nolan Bushnell comenz a comercializar Computer Space, una versin de Space War, en Estados Unidos, aunque es posible que se le adelantara Galaxy War otra versin arcade de Space principios de los 70 en el campus de la universidad de Stanford. La eclosin de los videojuegos lleg con Pong, un videojuego muy similar Tennis for Two y diseador por Al Alcorn para Bushnell. El juego se present en 1972 y fue la piedra angular del videojuego como industria. Durante los aos siguientes se implantaron numerosos avances tcnicos en los videojuegos (destacando los microprocesadores y los chips de memoria), se pusieron a la venta juegos como Space Invaders (Taito) o Asteroids (Atari) y sistemas como el Atari 2600. War aparecida a high-end de grficos. El primer microprocesador para computadoras fu creado en Intel en 1971, este era de 8 bits e inicio la serie de los 8: 8088, 8086,

Fig. 1.5.Ipod con el juego Pong

Graficacin 6



Fig. 1.6.Consola de video juegos Atari 2600

La Altair 8800 de MITS fue un microcomputador diseado desde 1975, basado en el CPU Intel 8080A. Vendido como un kit a travs del la revista diseadores proyectaron vender solamente algunos la Altair es ampliamente Popular Electronics, los cientos a los aficionados, y fueron

sorprendidos cuando vendieron sobre diez veces esa cantidad en el primer mes. Hoy en da, reconocida como la chispa que condujo a la revolucin del computador personal de los aos siguientes: El bus de computador diseado para la Altair se convirti en un estndar de facto conocido como el bus S-100. El primer lenguaje de programacin para la mquina fue el Altair BASIC, escrito por Bill Gates y Paul Allen, quienes inmediatamente despus fundaran Microsoft.

Fig. 1.7.Computadora Altair 8800

En 1976 la computadora Apple I fue el primer xito comercial de la computacin personal. El Apple I fue uno de los primeros computadores personales, y elGraficacin 7

primero en



combinar un teclado con un microprocesador y una conexin a un monitor. El Apple I fue diseado por Steve Wozniak originalmente para uso personal. Un amigo de Steve Wozniak, Steve Jobs, tuvo la idea de vender el computador. Fue vendido como el primer producto de Apple, comenzando en abril de 1976. Su precio al por menor era US$666.66. Cerca de 200 unidades fueron producidas.

Fig. 1.8.Computadora Apple I

Es comn pensar que el primer filme que us grficas por computadora es 2001: Una odisea en el espacio (1968), la cual pretenda mostrar cmo las volveran ms grficas en el futuro. Sin embargo, los efectos con ptica y efectos convencionales. Quiz el primer uso de las grficas por computadora, especficamente la ilustracin de grficas por computadora fue en Futureworld (1976), que (University of Utah). incluy la animacin de un rostro y mano humanos producida por Ed Catmull y Fred Parke en la Universidad de Utah computadoras se por computadora en esa

pelcula fueron animados a mano y las secuencias de efectos especiales fueron producidas

Los 1980sLa IBM PC comenz a ser vendida en agosto de 1981. La frase "computadora personal" era de uso corriente antes de 1981, y fue usada por primera vez en 1972 para denominar al Xerox PARC's Alto. Sin embargo, debido al xito del IBM PC, lo que haba sidoGraficacin 8



un trmino genrico lleg a significar especficamente una computadora compatible con las especificaciones de IBM. La PC original fue un intento de IBM para entrar en el mercado de los ordenadores domsticos, entonces dominado por el Apple II de Apple Computer y varias mquinas con CP/M. En lugar de utilizar el proceso de diseo normal de IBM, el cual ya haba fallado en el diseo de una computadora econmica (como el IBM 5100), se reuni a un equipo especial para descartar las restricciones de la compaa e ingresar rpidamente al mercado. Al proyecto se le dio el nombre cdigo de Project Chess (proyecto ajedrez).

Fig. 1.9.Primera computadora personal IBM

Las computadoras con Mouse, monitores rasterizados y red ethernet se estndar en el rea acadmica, las ciencias y la ingeniera.

hicieron

Cerca de 1983,Jim Blinn introdujo los conceptos de mapeo de textura tales como el bump mapping. El bump mapping (Correlacin de relieve), una tcnica arrugadas y con relieve. de perturbacin normal(la direccin hacia donde apunta un polgono) sola simular superficies desiguales o

Graficacin 9



Fig. 1.10.Jim Blinn

Se introdujeron los Binary space partitioning o Particionado Binario del Espacio (BSP), que es un mtodo para subdividir recursivamente un espacio en mediante un rbol conocido como rbol BSP. aplicaciones CAD. Loren Carpenter comenz a explorar fractales en grficos por computadora a elementos convexos empleando hiperplanos. Esta subdivisin permite obtener una representacin de la escena Estos se utilizan en renderizados y en las

principios de los 1980s. El es un cofundador de los Estudios de Animacin Pixar. En 1982 John Warnock desarroll el Postcript aunque Warnock es ms conocido por ser cofundador de Adobe Systems Inc., se retir en el 2001 de la direccin de Adobe.

Fig. 1.11.John Warnok, cofundador de Adobe

En 1982 se lanz la tarjeta Hrcules, la primera tarjeta de video. Esta tarjeta se podaGraficacin 10



visualizar grficos y textos simultneamente. En modo texto, soportaba una resolucin de 80x25 puntos. En tanto que en los grficos lo haca con 720x350 puntos, dicha tarjeta serva slo para grficos de un solo color. La tarjeta Hrcules tena una capacidad total de 64k de memoria video RAM. Posea una frecuencia de refresco de la pantalla de 50HZ. En 1983 Jobs se dio cuenta de que el futuro eran los iconos y los entornos agradables, y los patrocin creando el Apple Lisa, primer ordenador comercial con interfaz grfica y ratn, y posteriormente en 1984 el primer Apple Macintosh. El 28 de junio de 1985, un par de aos despus del primer aviso de Windows en noviembre de 1983 se lanzo Microsoft Wndows 1.0. En la caja azul Microsoft para Windows era proporcionar un nuevo se anunciaba una interface grfica de Windows con las ventanas embaldosadas. La estrategia de venta de ambiente de desarrollo y un nuevo entorno de software en el que se utilizan imgenes de mapa de bits y un ratn.

Fig. 1.12.Ventana en la primera versin de Microsoft Windows

El aloritmo radiosity fue creado por Donald Greenberg y sus colegas en la Universidad de Cornell. Radiosity una tcnica para la iluminacin global que usa superficies difusas. En 1989 Adobe Photoshop comenz a ser comercializado siendo hoy una de aplicaciones clsicas para el manejo de imgenes. Aunque en su primera Adobe quien recientemente compr a Macromedia. las la teora de transferencia de radiacin para simular la iluminacin (reflejada) indirecta en escenas con

versin, solo

estaba disponible para Macintosh. Photoshop es uno de los productos ms vendidos por

Graficacin 11



Fig. 1.13.Programa Adobe Photoshop

Unix y X window eran las plataformas de eleccin para la programacin en C y C++, pero MS-DOS comenz a crecer. La tarjeta VGA (Video Graphics Array) fue creada en 1987 por IBM. Las estaciones de trabajo de Silicon Graphics que soportaban rasterizado de dibujo de lneas en tiempo real se convirtieron en el deseo de los desarrolladores de grficas. Los circuitos VLSI (Very Large Scale Integration) para procesadores grficos y procesamiento paralelo se convirtieron en reas de investigacin importantes a finales de los 1980s.

Los 1990sUnix, X y Silicon Graphics Gl eran el sistema operativo, sistema de ventanas y la Interfaz de Programacin de Aplicaciones (API, Application Programming Interface) que los desarrolladores de grficos utilizaban a principios de los 1990s. En 1991 las computadoras Hand-held se inventaron en HP (HewlettPackard). En 1992 OpenGL se convirti en un estndar de APIs grficas. OpenGL es una biblioteca grfica desarrollada originalmente por Silicon Graphics Incorporated (SGI). OpenGL significa Open Graphics Library, cuya traduccin es biblioteca de grficos abierta. Las grficas rasterizadas sombreadas comenzaron a introducirse en las pelculas. Las computadoras an no soportaban grficos 3D y la mayora de los programadores escriba software para ser convertidos por escaneo o rasterizados y utilizaban algoritmos de remocin de superficies ocultas as como trucos de animacin de tiempo real.Graficacin 12



Mosaic fue creado en 1993 por Marc Andressen en la Universidad de (University of Illinois) en el Centro Nacional para Aplicaciones Cientficas primer navegador grfico disponible para visualizar pginas web.

Illinois

(NCSA). ue el

Fig. 1.14.Imagen del primer navegador grfico Mosaic

Con el surgimiento de Mosaic, se populariz el uso de la Web a pesar de

que fue

creada aos antes. La Web naci alrededor de 1989 a partir de un proyecto del CERN, en el que Tim Berners-Lee construy el prototipo que dio lugar al ncleo de lo que hoy es la World Wide Web. La intencin original era investigacin entre cientficos y permitir al mientras lo fuera leyendo. En esta poca, se comenzaron a utilizar los estndares de MPEG para la compresin de video. Los sistemas dinmicos que permiten animacin con colisiones, gravedad, friccin y causa y efecto tambin comenzaron a usarse En 1996 sale al mercado Nintendo 64; en su primera semana de ventas en Japn, Nintendo 64 vendi 500.000 consolas y durante su periodo de vida 30.000.000.000 consolas. Tambin fueron lanzados varios perifricos: un micrfono que permita jugar un juego con funciones de reconocimiento de voz, uno que permita leer cartuchos de Game Boy,Graficacin 13

hacer ms fcil el compartir textos de lector revisar las referencias de un articulo

alrededor de



una unidad de Disquetes y un cartucho que permita capturar audio y video a los disquetes. Sin embargo el mayor problema de estos perifricos fue el poco soporte que tuvieron.

Fig. 1.15.Super Mario 64, popular videojuego para la consola Nintendo 64

Super Mario 64 programado por Shigeru Miyamoto (para Nintendo 64) es considerado por muchos el mejor juego de plataformas de todos los tiempos y su sistema de juego es la base de la mayor parte de los juegos de plataformas 3D de hoy en da. Este juego cre el primer sistema de control de cmaras en un juego en 3 dimensiones.

Fig. 1.16.Shigeru Miyamoto, creador de Supermario 64

Las tarjetas grficas tales como la 3DFX de Nvidia se comenzaron a popularizar en 1995. Las tarjetas Nvidia utilizan el puerto AGP inventado por Intel en 1996 como solucin a los cuellos de botella que se producan en las tarjetas grficas que usaban el bus PCI. El formato de DVD se anuncio en septiembre de 1995; la especificacin oficial fue desarrollado por un consorcio de 10 compaas: Hitachi, JVC, Matsushita, Mitsubishi, Philips,Graficacin 14



Pioneer, Sony, Thomson, Time Warner, y Toshiba . Al inicio, existan varias propuestas de diferentes compaas y debido a la incompatibilidad se realiz el estndar. La realidad virtual y el VRML (Virtual Reality Modeling Language) se convirtieron reas de investigacin importante. Los PDAS, Palms y los flat panel se introdujeron al final de los 1990s con gran xito.

2000 - a la fechaEn la actualidad la mayora de las personas que trabajan con grficos computadoras de grandes capacidades: discos duros de terabytes, utilizan tarjetas grficas

aceleradoras de video con memoria en gigabytes, mouse ptico y memoria RAM en el orden de los gigas. Tambin son muy utilizadas las computadoras Macintosh especialmente en lo relacionado a efectos especiales y grficos de animacin.

Fig. 1.17.La computadora PowerMac es popular para las aplicaciones de animacin

Los procesadores ahora tienen ncleo doble que dota a las aplicaciones de recursos que permiten hacerlas ms sofisticadas. Aunque las cmaras digitales aparecieron en los 1990s, es hasta ahora que comienzan a popularizarse, existiendo una gran variedad en cuanto a marcas, precios y caractersticas.

Graficacin 15



Fig. 1.18.Cmara digital

Los PDAs son ahora un cliente importante en cuanto aplicaciones de video, etc.

software. Es

ahora comn el uso de agendas electrnicas, juegos en los telfonos celulares, llamadas de

En general, el hardware y software utilizado en lo que va de esta dcada es difundido, eran costosas o no estandarizadas.

la

popularizacin de tecnologas creadas anteriormente pero que en el pasado no se haban

1.2.AplicacionesDiseo Asistido por ComputadoraEn los procesos de diseo se hace un uso importante de las grficas por computadora, en particular, para sistemas de ingeniera y arquitectura, sin embargo, en la actualidad casi todos los productos se disean por computadora. Los mtodos CAD se utilizan diariamente en el diseo de automviles, aeronaves, embarcaciones, naves espaciales, computadoras, telas, construcciones, software y otros muchos productos. El diseo asistido por computadora, abreviado DAO pero ms conocido por las siglas inglesas CAD (Computer Aided Design), se trata bsicamente de una una interfaz grfica. Permite disear en dos o tres modelo numrico de un objeto o conjunto de ellos. base de datos de entidades geomtricas (puntos, lneas, arcos, etc) con la que se puede operar a travs de dimensiones mediante geometra almbrica, esto es, puntos, lneas, arcos, splines, superficies y slidos para obtener un

Graficacin 16



La base de datos asocia a cada entidad una serie de propiedades como color, capa, estilo de lnea, nombre, definicin geomtrica, etc., que permiten manejar la informacin de forma lgica. Adems pueden asociarse a las entidades o conjuntos de estas otro tipo de propiedades como el costo, material, etc., que permiten enlazar el CAD a los sistemas de gestin y produccin. En el caso de algunas aplicaciones de diseo, los objetos se despliegan primero en forma de armazn que muestra la forma general y sus caractersticas despliegues del armazn permiten que los diseadores vean con ajustes interactivos para disear formas. Las siguientes figuras diseadas en un programa CAD. internas. Los rapidez los efectos de

figuras muestran armazones de

Fig. 1.19.Vista del programa Autocad

Con frecuencia, se usan las animaciones en las aplicaciones CAD. Las animaciones de tiempo real que utilizan armazones son tiles para probar el comportamiento de un vehculo o un sistema.

Graficacin 17



Fig. 1.20.Diseo frontal de un tren en Autocad

Existen paquetes para el diseo de circuitos electrnicos, los cuales permiten disear un sistema colocando sucesivamente los componentes en el esquema y conectando estos componentes. Esto permite que el diseador experimente con esquemas de circuitos alternativos para reducir al mnimo el nmero de componentes o el espacio requerido para el sistema. Cuando los diseos de objetos estn completos, o casi completos, se aplican modelos de iluminacin realista y presentaciones de superficie para mostrar la apariencia del producto final. Tambin se crean vistas realistas para la publicidad de automviles y otros vehculos mediante efectos especiales de iluminacin y escenas de fondo.

Fig. 1.21.Modelo de un tornillo

Graficacin 18



Fig. 1.22.Vista modelo de un edificio

Los arquitectos utilizan mtodos grficos interactivos para proyectar

plantas

arquitectnicas como la de la figura anterior, que muestran la disposicin de habitaciones, ventanas, escaleras, anaqueles, barras de cocina y otras caractersticas de la construccin. Esto hace posible que los arquitectos y sus clientes estudien la apariencia de una construccin. En algunas ocasiones es diseo. posible simular un recorrido virtual por las habitaciones o alrededor de las construcciones para apreciar mejor el efecto general de un

Arte digitalLos mtodos de grficas por computadora se utilizan en forma forma generalizada tanto en aplicaciones de bellas artes como en aplicaciones de arte comercial. Los artistas o autores utilizan una variedad de mtodos computacionales, incluyendo hardware de propsito especial como tabletas digitalizadoras, software desarrollado para este propsito, tales como Adobe Photoshop o Macromedia FreeHand y paquetes CAD.

Graficacin 19



Fig. 1.23.Tableta Digitalizadora

El artista puede dibujar utilizando la tableta digitalizadora o inclusive el Mouse o ratn para crear un dibujo simple o muy detallado. Herramientas como brochas, incluidos en la mayora de los programas de dibujo, pinten imgenes con distintas brochas, las cuales textura, tamao y presin de trazo. Con el propsito de crear pinturas tridimensionales, los artistas hacen uso software CAD, algunas veces, un solo paquete contiene todas estas herramientas. de los paintbrush o permiten que los artistas

tienen propiedades como color,

paquetes de modelado tridimensional, diagramacin de la textura, programas de dibujo y

Fig. 1.24.Pintura digital tridimensional

Existe tambin el arte digital matemtico en el que los artistas utilizan una combinacin de funciones matemticas, procedimientos fractales con el fin de crear una variedad de formas tridimensionales y bidimensionales , al igual que estereoscpicas. pares de imgenes

Graficacin 20



De igual manera, estas tcnicas y programas se utilizan para crear diseos con fines comerciales o personales. Entre los usos comerciales se encuentra la creacin de logotipos, pginas de revistas, anuncios publicitarios, peridicos, etc. En lo que respecta al uso personal, los usuarios suelen modificar las propiedades de las imgenes (modificar su brillo, contraste, saturacin), modificarlas (rotarlas, fotomontajes. Un mtodo comn que se utiliza en los comerciales es el morphing o transformacin, donde un objeto se transforma en otro; podemos ver una lata de aceite convertirse en un automvil o el rostro de una persona transformase a un rostro diferente. escalarlas, recortarlas) y hacer

Fig. 1.25.Tcnica de morphing aplicada a la MonaLisa

Fig. 1.26.Montaje de un perro con la cabeza de ave

Una ventaja que ofrece el arte digital es que a diferencia del convencional, el primero permite el uso de layers o capas, las cuales permiten aadir profundidad a las imgenes. De igual manera, el arte digital no se desgasta con el tiempo ni las condiciones normales a las que se somete el arteGraficacin 21

grfico comn.

Algunos artistas y sociedades puristas no



consideran al arte digital como un arte

debido a la ausencia de contacto con las

herramientas tradicionales tales como brochas y lienzos.

EntretenimientoEn la actualidad, se utilizan comnmente mtodos de grficas por computadora para producir pelculas, videos musicales y programas de televisin. En ocasiones se despliegan solo imgenes grficas y otras veces se combinan objetos (creados en la computadora) con actores u objetos reales.

Animacin por computadoraLa animacin pertenece al mbito del cine y la televisin aunque est en relacin directa con las artes visuales clsicas, dibujo, pintura y escultura, as como con la

fotografa. Para realizar animaciones existen numerosas tcnicas que van ms all de los familiares dibujos animados. Una tcnica muy utilizada en la actualidad es la animacin por computadora, esta permite reducir los costos de produccin y edicin. La animacin por computadora es para la mayora de la gente un sinnimo de grandes eventos de la pantalla grande tales como Star Wars, Toy Story y Titanic. Pero no todas las animaciones, o al menos la mayora, son hechas en Hollywood. No es inusual que las caricaturas sean hechas enteramente en computadora. Los juegos de computadora son un adelanto al estado del arte de las tcnicas de grficas de computadora. La animacin de escritorio es posible ahora a un precio razonable. La animacin en el web, hoy, es cosa de rutina. Los simuladores digitales para entrenar pilotos, equipos SWAT y operadores de reactores nucleares son cosa de todos los das.

Graficacin 22



Fig. 1.27.Escena de la pelcula Toy Story

La animacin de escritorio ha tenido auge en los ltimos cinco aos, an cuando el GIF animado surgi hace mucho tiempo, no fue sino hasta la popularizacin de Internet, que fue posible poner al alcance de todos la animacin. Paquetes de software como Macromedia Flash, Moho y algunos otros, han permitido que casi cualquier persona pueda hacer una animacin fcilmente. como Maya, calidad. Otras aplicaciones permiten hacer animaciones ms sofisticadas en 2D y 3D y con una gran

Fig. 1.28.Escena de la caricatura South Park generada en Flash

Graficacin 23



Fig. 1.29.Imagen de una animacin en Maya

Las secuencias de animacin son por lo general creadas en plataformas Macintosh. Los estudios de animacin tales como Pixar, han creado enormes computadoras Mac para crear sus pelculas. La inversin en los alcanza las cifras de millones de dlares y va en crecimiento. laboratorios de proyectos de animacin

VideojuegosUn videojuego (llamado tambin juego de vdeo) es un programa informtico, creado expresamente para divertir, formando parte del sector audiovisual. Los videojuegos estn basados en la interaccin entre una persona y videojuegos recrean entornos virtuales en los personaje o cualquier otro elemento de objetivos por medio de unas reglas determinadas. una computadora (ordenador). Los cuales el jugador puede controlar a un

dicho entorno, y as conseguir uno o varios

Fig. 1.30.Lara Croft, herona de el video juego Tomb RaiderGraficacin 24



Los videojuegos son programados como un software, siendo grabados en algn medio de almacenamiento (como un cartucho, una tarjeta, un disquette, un CD, etc.) El hardware que ejecuta los videojuegos puede ser una computadora, o un artefacto especialmente creado para ello, las videoconsolas, divididas a su vez en arcade (de uso pblico), caseras (que se acoplan en un televisor), porttiles o de bolsillo (de pequeo tamao y que poseen pantalla propia) y ms recientemente los telfonos mviles (celulares).

Fig. 1.31.Consola de video juegos Xbox

La

programacin

de

videojuegos

est

involucrada

con

la

animacin

y

se

complementan. La industria de los videojuegos ha crecido tanto, que algunas universidades ofrecen programas acadmicos de programacin de videojuegos, GameBoy, XBox, Nintendo, y PlayStation. es decir, que existen ingenieros especialistas en videojuegos. Entre las consolas mas populares se encuentran

PelculasLas grficas por computadora se utilizan en diversas etapas de la creacin especiales lo que mas llama la atencin entre los consumidores. Como se haba mencionado anteriormente, en las pelculas o series de televisin es comn que se combinen objetos animados y objetos o actores reales, estas tcnicas son incluso utilizadas en los noticieros cuando el anunciador del clima es filmado sobre una pantalla azul y digitalmente se agregan los mapas e informacin del clima. de pelculas. Se puede utilizar la animacin, edicin y efectos especiales, siendo los efectos

Graficacin 25



Fig. 1.32.Escena de la pelcula creada por computadora Los Increbles

Utilizando programas de edicin, un productor puede mezclar, dividir,

cortar o

modificar escenas de una pelcula con relativa facilidad. Los efectos especiales, son por lo general la ltima fase de edicin de una pelcula, estos pueden hacer volar a un actor, hacer explotar un submarino o crear una tormenta de arena solo por mencionar algunos ejemplos.

Fig. 1.33.Escena de la pelcula Matrix, famosa por sus efectos especiales

La digitalizacin ha logrado reducir el costo en la filmacin de pelculas; el formato digital en lugar del convencional.

muchos

productores, por lo general independientes, pueden llevar a cabo sus proyectos utilizando

Graficacin 26



Educacin y capacitacinA menudo, se utilizan como instrumentos de ayuda educativa modelos de sistemas fsicos, financieros y econmicos, los cuales se generan por computadora. Modelos de sistemas fsicos, fisiolgicos, tendencias de poblacin, pueden ayudar a los estudiantes a comprender la operacin del sistema. En el caso de algunas aplicaciones de capacitacin, se disean sistemas especiales. Como ejemplos de tales sistemas especializados, podemos mencionar los simuladores para sesiones de prctica o capacitacin de capitanes de barco, pilotos de avin, operadores de quipo pesado y el personal de control de trfico areo.

Fig. 1.34.Simulador de vuelo para capacitacin de la NASA

Algunos simuladores no tienen pantallas de video, por ejemplo, un simulador de vuelo solo tiene un panel de control como instrumento de vuelo. Sin embargo, la mayor parte de los simuladores cuenta con pantallas grficas para la operacin y proyectores a color despliegan la escena del vuelo en la pantalla. visual. Otro tipo de simulador es en el que se monta una pantalla con paneles mltiples en frente del simulador

Graficacin 27



VisualizacinCientficos, ingenieros, personal mdico, analistas comerciales y otros necesitan con frecuencia analizar grandes cantidades de informacin o estudiar ciertos procesos. Las simulaciones numricas que se de datos. De modo similar, cmaras va satlite y otas fuentes acumulan grandes archivos de datos ms rpido de lo que se puede interpretar. El rastreo de estos grandes conjuntos de nmero para determinar tendencias y relaciones es un proceso tedioso e ineficaz. Pero si se convierten a una forma visual es frecuente que se perciban de inmediato las tendencias y los patrones. el comportamiento de efectan en supercomputadoras a

menudo producen archivos de dartos que contienenen miles e incluso millones de valores

Fig. 1.35.Colonoscopa asistida por medios y grficas electrnica

Existen muchas y clases de conjuntos de datos y los esquemas de

visualizacin

efectivos dependen de las caractersticas de los datos. Una compilacin de datos contiene valores escalares, vectores, tensores de orden superior o cualquier combinacin de estos tipos de datos. Y los conjuntos de datos pueden ser bidimensionales o tridimensionales.

Graficacin 28



La codificacin de colores es solo una manera de visualizar un conjunto de datos. Las tcnicas adicionales incluyen trazos, grficas y diagramas de contorno, presentaciones de superficie y visualizaciones de interiores de volumen.

Procesamiento de imgenesA pesar de que los mtodos empleados en las grficas por computadora y procesamiento de imgenes se traslapan, las dos reas realizan, en forma operaciones distintas. En las grficas por computadora, se utiliza una computadora para crear una imagen. Por otro lado, en el procesamiento de imgenes se aplican tcnicas interpretar imgenes existentes, como fotografas y rastreos de aplicaciones principales del procesamiento de imgenes son: El mejoramiento de la calidad de la imagen y la percepcin de la mquina de informacin visual, como se utiliza en la robtica. primero digitalizamos se pueden aplicar para modificar o televisin. Las dos en el fundamental,

Para aplicar los mtodos de procesamiento de imgenes,

una fotografa u otra imagen en un archivo de imagen. Entonces, o para aumentar la calidad del sombreado.

mtodos digitales para reordenar partes de imgenes, para mejorar separaciones de colores

Estas tcnicas se utilizan en gran medida en aplicaciones de arte comercial implican el retoque y el reorden de secciones de fotografas y otras obras de de galaxias.

que

arte. Se

emplean mtodos similares para analizar fotografas de la Tierra por satlite y fotografas

Graficacin 29



Fig. 1.36.Imagen va satlite usada para predicciones del clima

Las aplicaciones mdicas tambin hacen uso importante de tcnicas de miento de imgenes para de vistas mejorar fotografas, en tomografas de sistemas fisiolgicos. y operaciones. La tomografa es una tcnica de fotografa por rayos despliegue transversales

procesa-

simulacros de la tomografa

X la cual permite el Tanto

computarizada (CT; computed tomography) por rayos X, como la tomografa de emisin de posicin (PET; position emission tomography) reconstruir secciones transversa-les a partir empleadas para supervisar funciones una ciruga. utilizan mtodos de proyeccin para de datos digitales. Estas tcnicas son

internas y mostrar secciones transversales durante

Fig. 1.37.Tomografa computarizada

Otras tcnicas de proyeccin de imgenes mdicas incluyen rastreadores ultrasnicosGraficacin 30



y nucleares. Con el ultrasonido, se utilizan ondas sonoras de alta rayos X, para generar datos digitales. Los rastreadores codificacin de colores.

frecuencia, en vez de

para medicina nuclear recopilan

datos digitales de la radiacin que emiten radionclidos ingeridos y trazan imgenes con

Por lo general, el procesamiento de imgenes y las grficas por

computadora se

combinan en muchas aplicaciones. Por ejemplo, en medicina se utilizan estas tcnicas para modelar y estudiar funciones fsicas, para disear miembros artificiales, as como planear y practicar cirugas. Esta ltima aplicacin se conoce, por lo general, ciruga asistida por computadora. Se obtienen secciones transversales bidimensionales del cuerpo a travs de la utilizacin de tcnicas de proyeccin de imgenes. Luego se ven y mtodos grficos para simular procedimientos diversas incisiones quirrgicas. manipulan los cortes utilizando quirrgicos reales y experimentar con

Fig. 1.38.Ciruga asistida por computadora

Interfaces grficas de usuarioEs comn que los paquetes de software ofrezcan una interfaz grfica. Un componente importante de una interfaz grfica es un administrador de ventanas que hace posible que un usuario despliegue reas con ventanas mltiples. Cada ventana puede contener un proceso distinto que a su vez puede contener despliegues grficos y no grficos.

Graficacin 31



Fig. 1.39.Interfaz tipo ventana de un programa

Para activar una ventana en particular, slo hacemos clic en esa ventana utilizando un dispositivo de pulsar interactivo. Las interfaces tambin despliegan mens e iconos para permitir una seleccin rpida de las opciones de procesamiento o de valores de parmetros. Un icono es un smbolo grfico diseado para semejarse a la opcin de procesamiento que representa. La ventaja de los iconos es que ocupan menos espacio en la pantalla que las descripciones textuales correspondientes y que se pueden entender con mayor rapidez si estn bien diseados. Los mens contienen listas de descripciones textuales e iconos. Existen varios estilos de ventanas: los de Microsoft Windows, el estilo caracterstico del Mac y los personalizables estilos de Linux. aqua,

Fig. 1.40.El estilo aqua de Mac OSGraficacin 32



Otras interfaces que se estn popularizando cada vez mas, son las interfaces web, estas tienen la singular caracterstica de modificarse en minutos, lo cual es una gran ventaja contra las aplicaciones de escritorio. Muchos desarrolladores de software prefieren desarrollar aplicaciones web no solo por su facilidad en la programacin sino porque son mas intuitivas que las interfaces de escritorio.

Fig. 1.41.Interface web

1.3.Formatos grficos de almacenamientoEl almacenamiento de los datos que componen una imagen digital en un binario puede realizarse utilizando diferentes formatos grficos, cada ofrece diferentes posibilidades con respecto a la resolucin de colores, la compatibilidad, la rapidez de carga, etc. La finalidad ltima de un formato grfico es almacenar una imagen Para ello, cada formato se basa en una o ms codificacin especial, mtodos de compresin, etc. Generalmente, todo fichero grfico comienza con una cabecera (header) de estructura variable, que indica al programa que lo solicite las caractersticas de la imagenGraficacin 33

archivo

uno de los cuales

la imagen, la gama de

buscando un

equilibrio adecuado entre calidad, peso final del fichero y compatibilidad entre plataformas. tcnicas diferentes, que pueden incluir



que almacena (tipo, tamao, resolucin, modo de color, profundidad de color, nmero de colores de la paleta si la hay, etc).

Fig. 1.42.Cdigo de un archivo grfico

A continuacin se encuentran los datos propios de la imagen, generalmente comprimidos con un algoritmo especfico de ese formato, que contienen informacin sobre el color de cada pxel de la imagen (mapas de bits) o una tabla con las caractersticas propias de cada objeto (grficos vectoriales). En caso de usarse una paleta de colores, la informacin sobre dicha paleta tambin deber estar contenida en el fichero. La imagen puede estar formada por un nmero diferente de pxeles, dependiendo de su tamao y resolucin, y tener ms o menos colores. En funcin del nmero de pxeles y del nmero de colores la imagen tendr ms o menos tenga, ms ocupar el fichero necesario para vectoriales no se definen pxeles formato concreto en que se almacenen. Los ficheros grficos de mapas de bits contienen pues una cabecera, los datos de los pxeles (generalmente comprimidos) y la paleta de colores (salvo si se usan 24 bits por pxel, caso en el que no es necesaria ninguna paleta). Los ficheros vectoriales, una cabecera y una tabla con las caractersticas de cada vector componente del grfico. Cada formato es independiente. Las posibilidades que ofrece cada formato explicada para determinar cul de ellos es el ms adecuado para realizando. Existen dos tipos de formatos: los vectoriales y los de mapa de bits tambin conocidos como rasterizados. con calidad, pero cuanto ms calidad almacenarla. En el caso de los grficos

individuales, dependiendo la calidad y el peso final del

respecto a la gama de colores, a la compatibilidad, a la rapidez de carga, etc., merece ser la tarea que estamos

Graficacin 34



Una imagen rasterizada es una estructura o fichero de datos que representan generalmente una rejilla rectangular de pixeles o puntos de color en ordenador, papel u otro dispositivo de representacin. El color de cada pixel est definido individualmente; Por ejemplo, una imagen en un espacio de color RGB, almacenara el valor de color de cada pixel en tres bytes: un para el verde, para el azul, y para el rojo. un monitor de

Fig. 1.43.Detalle de una imagen de mapa de bits

Los grficos rasterizados se distinguen de los grficos vectoriales en que polgonos, no del simple almacenamiento del color de cada pixel. Los formatos de mapa de bits ms utilizados son los siguientes: Graficacin

estos

ltimos representan una imagen a travs del uso de objetos geomtricos como curvas y

ART BMP, Windows Bitmap CIN, Cineon CPT, Corel Photo Paint DPX, Digital Picture eXchange DRW, Draw35



EXR, Extended Dynamic Range Image File Format FPX, Flashpix GIF, Graphics Interchange Format JPG / JPEG, Joint Photographic Experts Group MNG, Multiple-image Network Graphics PBM, Portable Bitmap Format PCX, Picture eXchange PGM, Portable Graymap Format PIC, Pictue PNG, Portable Network Graphics PPM, Portable Pixmap Format PSD, PhotoShop Document PSP, PaintShop Pro Document TGA, Truevision TGA TIFF, Tagged Image File Format WBMP, Wireless Application Protocol Bitmap Format XBM, X BitMap XCF, eXperimental Computing Facility XPM, X-Pixmap

Los grficos vectoriales son los que se representan en los grficos por ordenador por medio de "trazos", es decir, por primitivas geomtricas como como los bitmap. En los grficos vectoriales la imagen se genera como descripcin de trazos. Por puntos, lneas, curvas o polgonos. En contraste, se encuentran los grficos formados por una retcula de pixeles

ejemplo, para crear una lnea recta se indica: su posicin inicial (x1,y1), su posicin final (x2,y2), su grosor, color, etc. En cambio, en una imagen bitmap, esa misma lnea estara formada por un nmero determinado de puntos (pixeles) de color contiguos. Al contrario que un bitmap, una imagen vectorial puede ser escalada, rotada o

deformada, sin que ello perjudique en su calidad. Normalmente un conjunto de trazos se puede agrupar, formando objetos, y crear formas ms complejas que permiten el uso deGraficacin 36



curvas bezier, degradados de color, etc. En algunos formatos, como el SWF, las imgenes vectoriales pueden animarse muy facilmente sin que ello suponga un aumento excesivo en el tamao del fichero, al contrario de los bitmaps

Fig. 1.44.Imagen de un tren vectorizada

Fig. 1.45.Imagen de un tren en mapa de bits.

Los formatos vectoriales ms utilizados son los siguientes: Graficacin 37

AI, Adobe Illustrator Document CDR, CorelDRAW CGM, Computer Graphics Metafile DXF, ASCII Drawing Interchange DWG, AutoCAD Drawing Database EMF, Enhanced MetaFileEPS, Encapsulated PostScript FHX, Macromedia Freehand Document



FLA, Fichero fuente de Macromedia Flash PDF, Portable Document Format PS, PostScript SVG / SVGZ, Scalable Vector Graphics SWF, ShockWave Flash WMF, Windows MetaFile

Existen tambin los metaficheros o metaformatos. Un metaformato es un fichero o archivo de intercambio que sirve para transportar datos entre varios sistemas o programas. Es comn que las compaas de software creen sus facilitar el manejo de los datos de las imgenes creadas en metaformato puede ser vectorial o de mapa de bits. propios archivos para sus aplicaciones. Un

AI, Adobe IlustratorEl metaformato AI es el utilizado por el programa Adobe Ilustrator para guardar sus ficheros grficos nativos.

Fig. 1.46.Logotipo en formato AI

Los ficheros AI admiten cabecera de previsualizacin (thumbnail) y pueden trabajar con vectores y mapas de bits. Permiten texturas, degradados, fotos y mscaras. Suele producir ficheros de peso medio, dependiendo del contenido, pero se rebajar ya que admite algoritmos de compresin sin prdidas. puede integradas o vinculadas a ficheros externos, textos trazados o con fuentes incluidas y manejo de capas

Graficacin 38



Es un formato muy popular, vlido para PC y MAC, apto para intercambiar grficos entre diferentes aplicaciones, pero teniendo siempre en cuenta la versin de Ilustrator que cre el archivo original, ya que deben de ser versiones compatibles.

BMP, BitMaPLos archivos con extesin .BMP, en los sistemas operativos Windows, representan la sigla BitMaP, o sea mapa de bits. Los archivos de mapas de bits se componen de direcciones asociadas a cdigos de color, uno para cada cuadro en una matrz de pixeles tal como se esquematizara un dibujo de "colorea los cuadros" para nios pequeos. Normalmente, se caracterizan por ser muy poco eficientes en su uso de espacio en disco, pero pueden mostrar un buen nivel de calidad. A diferencia de los grficos vectoriales, al ser reescalados a un tamao mayor, pierden calidad. Otra desventaja de los archivos BMP es que no son utilizables en pginas web debido a su gran tamao en relacin a su resolucin.

Fig. 1.47.Detalle de imagen en formato BMP

Dependiendo de la profundidad de color que tenga la imagen cada pixel puede ocupar 1 o varios bytes. Generalmente se suelen transformar en otros (fotografas), GIF o PNG (dibujos y esquemas), los cuales conseguir una mayor comprensin (menor tamao del archivo). Los archivos comienzan (cabecera o header) con las letras 'BM' (0x42 0x4D), que lo identifica con el programa de visualizacin o edicin. En la cabecera tambin se indica el tamao de la imagen y con cuntos bytes se representa el color de cada pixel. Despus seGraficacin 39

formatos, como JPEG

utilizan otros algoritmos para



guarda la informacin pxel por pxel. informacin: comienza desde

Tiene una curiosa forma de almacenar esta

la ltima lnea inferior. Es por eso que los programas

encargados de mostrar los BMP en pantalla trazan la imagen de abajo hacia arriba. En imgenes de 4 y 8 bits, tambin puede escoger compresin Run-LengthEncoding (RLE); este esquema de compresin no produce prdidas, es decir, no detalle de la imagen. elimina ningn

CDR, Corel DrawCDR es el formato nativo del programa de grficos vectoriales Corel Draw, siendo vlido para PC y MAC.

Fig. 1.48.Diseo en formato CDR

Es un formato vectorial, pero admite la inclusin de elementos de mapa de (integrados o vinculados a ficheros externos), pudiendo llevar adems

bits

cabecera de

previsualizacin (thumbnail). Junto a AI es uno de los formatos con ms posibilidades con respecto al color, a la calidad de los diseos y al manejo de fuentes, pudiendo contener los textos trazados o con fuentes incluidas. Una de las principales desventajas de este formato es su falta de compatibilidad con el resto de aplicaciones grficas, al ser stas incapaces de almacenar imgenes bajo este formato.

CIN, CineonEl formato Cineon fue diseado especficamente para representar imgenes escaneadas de pelculas. Tiene algunas diferencias interesantes con otros formatos tales como el tiff y jpeg:Graficacin 40



Los

datos

son

almacenados

en

un

formato

grande

que

corresponden

directamente a la densidad del negativo. densidad = log(exposicin) Cada canal (RGB) se almacena en 10 bits empacado en palabras de 32 bits con 2 bits libres El formato tiene una nocin del humbral negro y el humbral blanco,

convencionalmente 95 y 685 en la escala de 0 - 1024. Los pixeles cerca de 685 son definidos como ms brillantes que el blanco tales como el soles, luces cromadas, etc. Este es el concepto de HDRI, de hecho este concepto se uso en la industria de las pelculas muchos aos antes de que se denominara HDRI en los 1990s debido al trabajo de Debevec. El formato Cineon fue definido en un documento de Kodak por Glenn Kennel. El formato se reemplaz tiempo despus por el formato DPX que es muy similar y est basado en el Cineon.

CPT, Corel PhotoPaintFormato propietario usado por defecto en los documentos de Corel PhotoPaint. Dispone de importantes caractersticas extra, como la composicin por capas. Compatible con muy pocos programas aparte de los de la misma casa. Su tamao suele ser menor que el de los documentos creados por Adobe Photoshop.

DPX, Digital Picture eXchangeDPX es un formato comn para pelculas digitales y es un estndar ANSI/SMPTE (268M - 2003). El formato representa la densidad de cada canal de color de un negativo escaneado en un formato de 10 bits de longitud donde la gama del negativo original es preservado tal como se tomo del escaner. DPX ofrece gran flexibilidad en el almacenamiento del color y otra informacin de intercambio para detalles de produccin. Posee mltiples formas de empaquetado y alineacin. El formato DPX es un derivado de de el formato de salida del escner Kodak Cineon y fue publicado por SMPTE como un estndar.Graficacin 41



DRW, DrawFormato grfico vectorial usado por diferentes programas que funcionan bajo DOS y Windows, como Micrografx Designer o Windows Draw. Los grficos .drw pueden ser incluidos en presentaciones creadas con PowerPoint, en documentos de Microsoft Word. diagramas de Microsoft Visio 2000 o en

DXF, Drawing Interchange FormatEl formato DXF es un formato vectorial que la empresa Autodesk lanz para permitir el intercambio de archivos de dibujo entre los diferentes programas de CAD. Soporta hasta 256 colores (8 bits).

Fig. 1.49.Plano almacenado en formato DXF

Existen dos versiones de DXF (ASCII y binario), que no utilizan ningn algoritmo de compresin. Los ficheros de la versin ASCII contienen nmeros y de texto, como el Notepad de Windows. Esta sistema, ms lento que funcionar correctamente. Los ficheros en formato DXF son reconocidos por la mayora de sistemas CAD y por algunos programas de diseo grfico vectorial, como Corel Draw y Adobe Ilustrator, que pueden manejarlo sin mayores dificultades. rdenes a realizar escritos en codificacin ASCII, por lo que pueden ser abiertos y ledos con cualquier editor informacin indica la ubicacin de puntos flotantes matemticos o floating points, utilizados para exhibir la imagen en pantalla. Este el de otros formatos, requiere hardware avanzado para poder

Graficacin 42



EMF, Enhanced MetaFileEMF es un metaformato grfico vectorial de 32 bits, reconocido por casi todas las aplicaciones de diseo grfico y compatible con los sistemas operativos Windows, pudiendo ser usado en las aplicaciones del paquete Office. Junto a las caractersticas propias de los formatos vectoriales presenta la ventaja

adicional de que sus ficheros pueden ser creados rpidamente, ya que lo que se encola en la impresora son comandos de dibujo, con lo que se puede evitar la sobrecarga en el caso de impresin remota de ficheros grficos. Adems, este formato es ms eficiente porque genera un archivo pequeo y genrico, que es compatible con todas las impresoras. Como desventaja, los archivos de formato EMF no contienen la misma cantidad de detalles que los de otros tipos de formatos grficos vectoriales, como los archivos DWF. Por lo que respecta a la web, es soportado por Internet Explorer, aunque hay algunos grficos que no son interpretados correctamente. relativamente

EPS, Encapsulated PostScriptPostScript encapsulado, o EPS, es un formato de archivo grfico. Un archivo EPS es un archivo PostScript que satisface algunas restricciones adicionales. Estas restricciones intentan hacer ms fcil a programas de software el incluir un archivo EPS dentro de otro documento PostScript. Como mnimo, un archivo EPS contiene un comentario BoundingBox (bordes de la caja), describiendo el rectngulo que contiene a la imagen. Las aplicaciones pueden utilizar esta informacin para distribuir elementos en una pgina, incluso si son incapaces de interpretar el PostScript contenido en el archivo.

Graficacin 43



Es ps y eps lo mismo?PostScript/ (PS) es un lenguaje de programacin para describir pginas. Como lenguaje estructurado permite la programacin (tiene estructuras de control y bucles), y recuerda el lenguaje de programacin FORTH. Originalmente fue desarrollado por Adobe. Existen varios intrpretes de PostScript que permiten la visualizacin de este formato. El ms extendido es Ghostscript/ (GS), de Aladdin. El formato PS se basa en describir cada pgina desde un origen de coordenadas que se sita en la esquina inferior izquierda de la pgina. PS permite, sin embargo, redefinir el origen, de forma que se puede recomenzar la descripcin de un bloque de una pgina desde un origen arbitrario. PS encapsulado (EPS) es el formato estndar para importar y exportar archivos PS en cualquier tipo de entornos. Usualmente es un archivo que contiene una sola pgina que describe una figura. El archivo EPS est especialmente pensado para incluirlo en otros archivos PS, y es como cualquier otro archivo PS con algunas restricciones.

EXR, Extended Dynamic Range Image File FormatOpenEXR es el formato de cdigo libre para imgenes de alto rango dinmico (High dynamic-range o HDR) desarrollado por la industria Light & imgenes en las producciones de cine. La principal pxels en coma flotante de ms de 32 bits y Magic para la generacin de ventaja del formato es que soporta

mltiples algoritmos de compresin sin

prdidas, con un ratio superior al 2:1 en imgenes con grano.

FLA, Macromedia Flash DocumentFla es el formato utilizado por Macromedia Flash para la creacin y edicin de sus populares animaciones. Un archivo fla guarda todos los datos de una pelcula: los grficos y textos en forma vectorial, las imgenes incluidas en la pelcula, los sonidos o algn otro elemento tal como un vdeo, as como la informacin de la animacin en s y los actionscripts.Graficacin 44



El formato fla al ser compilado da lugar a un archivo en formato swf, el cual puede ejecutarse en cualquier ordenador que cuente con el plug-in necesario. Cabe mencionar que un archivo en formato fla no puede reproducir la animacin que contiene a menos que se est trabajando con el archivo en Macromedia Flash.

FHx, Macromedia FreeHand FileFormato nativo del programa de grficos vectoriales FreeHand x, x representa la versin de la aplicacin mencionada. Puede llevar cabecera de previsualizacin (thumbnail) y se puede comprimir, dependiendo el tamao final del contenido. Puede llevar las fotos integradas o vinculadas a ficheros externos y textos trazados o con fuentes incluidas. Es posible importarlo a diferentes programas grficos, como Macromedia Ilustrator, pero no es soportado por ningn navegador web. Flash o Adobe

GIF, Graphics Interchange FormatGIF es un formato grfico utilizado ampliamente en la World Wide Web, para imgenes como para animaciones. El formato fue creado por CompuServe en 1987 para dotar de un formato de imagen a color para sus reas de descarga de ficheros, sustituyendo su temprano formato RLE en blanco y negro. GIF lleg a ser muy popular porque poda usar el algoritmo de compresin LZW (Lempel Ziv Welch) para realizar la compresin de la imagen, que era ms eficiente que el algoritmo Run-Lenght Encoding (RLE) que usaban formatos como PCX y MacPaint. Por lo tanto, imgenes de gran tamao podan ser descargadas en un razonable periodo de tiempo, incluso con modems muy lentos. GIF es un formato sin prdida de calidad, siempre que partamos de imgenes de 256 colores o menos. Una imagen de alta calidad, como una imagen (profundidad de color de 24 bits o superior) debera reducir calidad. Sus principales caractersticas son:Graficacin 45

tanto

de color verdadero

literalmente el nmero de

colores mostrados para adaptarla a este formato, y por lo tanto existira una prdida de



Uso de color indexado, a travs de una paleta de colores que puede ser de distintos tamaos, dependiendo del valor del Size of Local Color Table, que tiene un tamao de 3 bits. El nmero de colores se puede calcular mediante la frmula: 2(Size of Local Color Table+1) Esto permite a GIF usar una paleta de 2,4,8,16,32,64,128 256 colores. Aunque con mediante el uso de varias capas transparentes (con un mximo de 256 colores en cada una) separadas por 0 milisegundos (simultneas) ellas, si pueden mostrarse imgenes con ms de 24 colores permitiendo mostrar un color real. Pese a esto, esta ltima estas imgenes no aparcenen simultneamente sino entre diferentes,

tcnica es poco

eficiente, y rara vez se usa, sobretodo para demostrar esta posibilidad, a veces, que va apareciendo cada una de las capas sucesivamente. En este caso, cada capa sera un cuadrado de 16 por 16, en el que como mucho se podran mostrar 256 colores, la imgen se divide en dichos recuadros, y se van superponiendo uno sobre otro. Permite transparencia de 1 bit, de tal forma que cada pixel de la imagen puede ser o no transparente. Esto lo diferencia de formatos como el PNG, que tambin dispone transparencia variable. Sus ltimas versiones permiten hacer animaciones simples, aunque la compresin es muy deficiente. Permite utilizar entrelazado en imgenes, de tal forma que las imgenes se visualicen al completo nada ms empezar su descarga, pero con una baja definicin que va progresando hasta cargarse por completo en los navegadores. Profundidad de color: 8 bits mximo (256 colores simultneos)

Ventajas e inconvenientesLas principales ventajas del formato GIF son las siguientes: Es uno de los dos formatos histricos de Internet, junto con el JPEG, por lo que es compatible con la prctica totalidad de los navegadores. Permite la creacin de animaciones, por lo que ha sido utilizado ampliamente en banners publicitarios.Graficacin 46



Se ha empleado mucho para logotipos y grficas, por su transparencia binaria y el menor tamao de archivo que se alcanza en imgenes con frente al JPEG. pocos colores

Sus principales inconvenientes son: Las paletas de un mximo de 256 colores lo hacen inapropiado para fotografas y otros tipos de imgenes con gran variedad cromtica para los que se prefiere el JPEG (con prdidas de clidad) o PNG (sin perdidas). No soporta canal alfa, por lo que no permite transparencias suaves de 8 bits. El propietario de la patente del algoritmo LZW que se utiliza en el formato GIF reclama el pago de royalties por su uso. As, cualquier programa capaz de abrir o guardar archivos GIF comprimidos con LZW debe cumplir con Esto hace que su uso sea desaconsejado por el W3C, y sus exigencias. perjudicial para el

software libre y proyectos libres como Wikipedia. Es necesario recalcar que el formato GIF puede utilizar otros mtodos de patentes, como el mtodo Run-length encoding. Actualmente se tiende a sustituirlo por los formatos libres PNG (imgenes estticas) y MNG (imgenes animadas). PNG soporta mltiples formatos: imgenes RGB de color verdadero con canal alfa e incluso imgenes de 8 bits con transparencia como el GIF. Para estas ltimas, consigue un tamao de fichero sensiblemente menor al GIF. Adems ha sido elegido como estndar grfico para la Web por el W3C. compresin no cubiertos por

JPEG, Joint Photographic Experts GroupJPEG es un algoritmo diseado para comprimir imgenes con 24 bits de profundidad o en escala de grises. JPEG es tambin el formato de fichero que utiliza este algoritmo para comprimir imgenes. JPEG slo trata imgenes fijas, pero existe un estndar relacionado llamado MPEG para videos. El formato de archivos JPEG se abrevia frecuentemente JPG debido a que algunos sistemas operativos slo aceptan tres letras de extensin.

Graficacin 47



JPEG es un algoritmo de compresin con prdida. Esto significa que al descomprimir la imagen no obtenemos exactamente la misma imagen que tenamos antes de la compresin. Una de las caractersticas que hacen muy flexible el JPEG es el poder ajustar el grado de compresin. Si especificamos una compresin muy alta se significativa de calidad, pero obtendremos ficheros compresin baja obtenemos una calidad muy extremadamente grande . Esta prdida de calidad se acumula. Esto significa que si comprime una imagen y la descomprime obtendr una calidad de imagen, pero si vuelve a descomprimirla otra vez obtendr una perdida mayor. Cada vez descomprima la imagen esta perder algo de calidad. El formato de ficheros JPEG o JPG fue creado por un grupo independiente, llamado JFIF (JPEG File Interchange Format), quienes se encargan solo de la utilizacin del algoritmo JPEG para almacenar imgenes. Existen otros formatos de fichero que tambin utilizan el algoritmo JPEG, el ms conocido de ellos es JNG. JPEG/JFIF es el formato ms utilizado para almacenar y transmitir archivos de fotos en la Web. Pero la compresin con prdida del formato no conviene a incluyen textos y lneas. diagramas que comprimirla y que comprima y perder una cantidad pequeos. Con una cantidad de

parecida a la del original, y un fichero

CodificacinMuchas de las opciones del estndar JPEG se usan poco. Esto es una descripcin breve de uno de los muchos mtodos comnmente usados para comprimir cuando se aplican a una imagen de entrada con 24 bits por pixel (ocho verde, y azul). Esta opcin particular es un mtodo de compresin con prdida. imgenes por cada rojo,

Transformacin del espacio de colorLo primero que se realiza es convertir la imagen desde su modelo de color RGB a otro llamado YUV. Este espacio de color es similar al que usan los sistemas de color para televisin PAL y NTSC, pero es mucho ms parecido al sistema de televisin MAC.Graficacin 48



Este espacio de color (YUV) tiene tres componentes: La componente Y representa el brillo de cada pixel, es decir blanco y negro. Las componentes U y V representan juntas el color (saturacin y hue)

El resultado es una imagen en la que el brillo est separado de la crominancia.

SubmuestreoUna opcin que se puede aplicar al guardar la imagen, es reducir la informacin del color respecto a la de brillo. Hay varios mtodos: si este paso no se aplica, la imagen sigue en su espacio de color YUV, (este submuestreo se entiende como 4:4:4), con lo que la imagen no sufre prdidas. Puede reducirse la informacin cromtica a la mitad, 4:2:2 (reducir en un factor de 2 en direccin horizontal), con lo que el color tiene la mitad de resolucin (en horizontal), y el brillo sigue intacto. Otro mtodo, muy usado, es reducir el color a la cuarta parte, 4:2:0, en el que el color se reduce en un factor de 2 en ambas direcciones, horizontal y vertical. Si la imagen de partida estaba en escala de grises (blanco y negro), puede eliminarse por completo la informacin de color, quedando como 4:0:0. Algunos programas que permiten el guardado de imgenes en JPEG (como el que usa GIMP) se refieren a estos mtodos con 11,11,11 para YUV 4:4:4 (no perder color), 21,12,11 para YUV 4:2:2 y 22,11,11 para el ltimo mtodo, YUV 4:2:0.

Transformacin discreta de coseno o DCTEntonces, cada componente de la imagen se divide en pequeos bloques de 88 pxeles, que se procesan de forma casi independiente, de esto resulta la formacin de los bloques, que se hace notable en imgenes guardadas con altas compresiones. Si la imagen sufri un submuestreo del color, los colores quedaran en la imagen final en bloques de 816 y 1616 pixeles, segn fuese 4:2:2 o 4:2:0.

Graficacin 49



Fig. 1.50.Uso del algoritmo JPEG en una imagen

El algoritmo JPEG, transforma la imagen en cuadrados de 88 y luego almacena estos como una combinacin lineal de estos 64 recuadros, permitiendo eliminar detalles de forma selectiva Despus cada pequeo bloque se convierte al dominio de la frecuencia a travs de la transformacin discreta de coseno bidimensional, abreviadamente llamada DCT. Un ejemplo de uno de esos pequeos bloques de 88 inicial es este:

52 63 62 63 67 79 85 87 Graficacin

55 61

66

70

61

64

59 55 90 109 85 69 59 68 113 144 104 66 58 71 122 154 106 70 61 68 104 126 88 68 65 60 70 77 68 58 71 64 79 69 59 68 55 65 61 65 76 78

73 72 73 69 70 75 83 94 50



El siguiente proceso es restarles 128 para que queden nmeros entorno al 0, entre -128 y 127.

Se procede a la transformacin por DCT de la matriz, y el redondeo de cada elemento al nmero entero ms cercano.

76 65 66 65 61 49 43 41

73 69 69 70 67 63 57 49

67 73 60 57 60 68 64 59

62 58 67 64 55 38 19 43 59 56 15 16 24 63 55 6 26 22 58 59 24 2 40 60 58 58 51 60 70 53 69 73 67 63 45 60 63 52 50 34

La transformacin DCT utiliza las siguientes frmulas:

415 30 4 22 47 7 49 12 12 7 3 8 1 0 0 0

61 27 56 20 61 10 13 7 77 25 29 10 34 15 10 6 13 4 2 2 2 6 2 1 0 2 1 3 1 4 1 0

2 0 9 5 5 6 2 2 3 3 4 2 4 1 1 2

Graficacin 51



CuantizacinEl ojo humano es muy bueno detectando pequeos cambios de brillo en reas relativamente grandes, pero no cuando el brillo cambia rpidamente en pequeas reas (variacin de alta frecuencia), esto permite eliminar las altas frecuencias, sin perder excesiva calidad visual. Esto se realiza dividiendo cada componente en el dominio de la frecuencia por una constante para ese componente, y redondendolo a su nmero entero ms cercano. Este es el proceso en el que se pierde la mayor parte de la informacin (y calidad) cuando una imagen es procesada por este algoritmo. El resultado de esto es que los componentes de las altas frecuencias, tienden a igualarse a cero, mientras que muchos de los dems, se convierten en nmeros positivos y negativos pequeos. Una matriz de cuantizacin tpica es esta:

16 12 14 14 18 24 49 72

11 10 16 12 14 19 13 17 22 35 64 16 22 37 55 24 29 56 64

24 26 40 51 68 81

40 58

51 60

57 69 87 80 109 103 104 113

78 87

103 121 120 112 100 103

92 95 98

61 55 56 62 77 92 101 99

Dividiendo cada coecifiente de la matriz de la imagen transformada entre cada coecifiente de la matriz de cuantizacin, se obtiene esta matriz, ya cuantizada:

Graficacin 52



2 0 3 4 1 0 0 0

3 6 2 3 4 1 1 5 1 1 2 1 1 1 1 0 0 0 0 0 0 0 0 0

2 1 0 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Por ejemplo, cuantizando el primer elemento, el coecifiente DC, sera as:

Codificacin entrpicaLa codificacin entrpica es una forma especial de la compresin sin prdida de datos. Para ello se cogen los elementos de la matriz siguiendo una forma de zig-zag, poniendo grupos con frecuencias similares juntos, e insertando ceros de codificacin, y usando la Codificacin Huffman para lo que queda. Tambin se puede usar la codificacin aritmtica, superior a la de Huffman, pero que rara vez se usa, ya que est cubierta por patentes, esta compresin produce archivos un 5% menores, pero a costa de un mayor tiempo de codificacin y decodificacin, esta pequea ganancia, puede emplearse tambin en aplicar un menor grado de compresin a la imagen, y obtener ms calidad para un tamao parecido. En la matriz anterior, la secuencia en zig-zag, es esta: 26, 3, 0, 3, 3, 6, 2, 4, 1 4, 1, 1, 5, 1, 2, 1, 1, 1, 2, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0

Graficacin 53



JPEG tiene un cdigo Huffman para cortar la cadena anterior en el punto en el que el resto de coecifientes sean ceros, y as, ahorrar espacio: 26, 3, 0, 3, 3, 6, 2, 4, 1 4, 1, 1, 5, 1, 2, 1, 1, 1, 2, 0, 0, 0, 0, 0, 1, 1, EOB

Ruido producido por la compresinEl resultado tras la compresin, puede variar, en funcin de la agresividad de los divisores de la matriz de cuantizacin, a mayor valor de esos divisores, ms coecifientes se convierten en ceros, y ms se comprime la imagen. Pero mayores compresiones producen mayor ruido en la imagen, empeorando su calidad. Una imagen con una fuerte compresin (1%-15%) puede tener un tamao de archivo mucho menor, pero tendr tantas imperfecciones que no ser interesante, una compresin muy baja (98%-100%) producir una imagen de muy alta calidad, pero, tendr un tamao tan grande que quizs interese ms un formato sin prdida como PNG. La mayora de personas que naveguen por Internet estarn familiarizadas con estas imperfecciones, son el resultado de lograr una buena compresin; para evitarlos, se tendr que reducir el nivel de compresin o aplicar compresin sin prdida, produciendo mayores ficheros despus.

DecodificacinEl proceso es similar al seguido hasta ahora, slo que de forma inversa. En este caso, al haber perdido informacin, los valores no coincidirn. Se toma la informacin de la matriz, se descodifica, y se pone cada valor en su casilla correspondiente. Despus se multiplica cada uno de estos valores por el valor correspondiente de la matriz de cuantizacin usada, como muchos valores son ceros, slo se recuperan ( y de forma aproximada) los valores de la esquina superior izquierda.

Graficacin 54



Despus se deshace la transformacin DCT:

416 33 60 32 0 24 56 19 42 13 80 24 44 29 56 17 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

48 40 0 0 26 0 0 0 40 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Y finalmente se suma 128 a cada entrada:

68 70 68 62 59 60 54 45

65 73 70 58 67 70 48 72 72 45 20 40 65 57 76 66 15 22 12 58 61 72 60 6 28 12 59 56 66 63 28 8 42 69 52 60 67 60 50 68 75 50 46 61 74 65 64 63 45 32 51 72 58 45 45 39 63 56 52 56 62 68 82 96 55 58 70 61 58 80 56 83 108 88 63 71 62 113 150 116 70 67 68 122 156 116 69 72 65 100 120 86 59 76 61 68 78 80 53 78 67 54 63 64 65 83 77 56 70 83 83 89

60 58 60 66 69 68 74 83

Graficacin 55



Para comparar las diferencias entre el bloque original y el comprimido, se halla la diferencia entre ambas matrices, la media de sus valores absolutos, da una lige

Graficacion

Documents

Transcript of Graficacion