Conceptos Fundamentales Graficaci ó n IA7200-T

Graficación2 Conceptos Fundamentals Perspectiva Hist ó rica Modelo de una Computadora - Memoria y Dispositivos Gr á ficos Modelo de Raster y Bitmaps Coordenadas Espacios de Dibujo Colores Bibliotecas Gr á ficas

Graficación3 Historia Teletipos (pre 1950s), CRTs (50s a 2000), Monitores Planos (era moderna) Tamaño y Calidad (resoluci ó n) - depende de la econom í a (640x320…1024x768…) Modelos Vectoriales (circa WW2) y Raster/Bitmap Dispositivos e interacci ó n m á quina/humano Limitaciones de memoria y velocidad de procesamiento

Graficación4 Modelo de Memoria de una Computadora Memoria principal Memoria de gr á ficos –V.g. graphics card –Idea reciente: Particional la memoria principal din á micamente (sistema operativo) Independiente del hardware del display CPU + memoria Cache + memoria principal Cache es r á pida, pero cara (512 kBytes) Memoria principal masiva (GBytes), pero lenta

Graficación5 Memoria y Gr á ficas Idea: Los programas interact ú an con el dispositivo gr á fico mediante escritura en determinada á rea de memoria Conocida como Bitmap graphics Los bits se mapean a pixeles Software flexible y port á til Independiente del hardware y sistema operativo

Graficación6 Dispositivos Gr á ficos Dispositivos: mouse, lentes stereo, track ball, light pen, touch screen, 3d-wand, guantes sensores, trackers de cabeza e iris, … A ú n los ratones varian en forma y funcionalidad Mouse - mejor conocido Butones y movimientos T é rminos coloquiales: –Drag –Click –Double-Click –Left -Click –Gestures Ideas: especificar un punto en un espacio (v.g. Coordenadas o ) o un comando

Graficación7 Modelos Raster - Pixeles Pixel o “pel” - Picture Element Cada pixel debe ser expresado (rendered) como un punto o rect á ngulo en la pantalla Pixeles = cuadros Pequeña á rea que contiene f ó sforo en un monitor monocrom á tico O tres areas (rojo, verde y azul) en monitores de color

Graficación8 Sistemas de Coordenadas Pixeles (renglones y columnas) –Rectil í neo –Origen en la esquina superior izquierda –Corre hacia la derecha y contin ú a por renglones –Misma secuencia que el Raster Arreglo [rengl ó n][columna] –Alacenamiento por rengl ó n ( ú ltimo í ndice se mueve m á s r á pido) –No es igual en todos los lenguajes. Fortran usa por columna

Graficación9 Coordenadas Cartesianas Se usan coordenadas x,y (or x,y,z in 3D) y se mapean al display Columnas = x Renglones = y Necesitamos los valores max y min T í picamente: (640 x 320), (1024 x 768) o mejor Relaci ó n de aspecto (raz ó n entre estas medidas). V.g. 4:3 - escogida para corresponder al monitor x y

Graficación10 Espacio de Dibujo o Canvas Sistema de coordenadas Primitivas de dibujo (bibliotecas) –drawDot( int x, int y); –drawLine( x1, y1, x2, y2 ); No hay que escribir programas a nivel de abstracci ó n de pixeles

Graficación11 Colores RGB (Red, Green, Blue) no es el ú nico modelo, pero s í el m á s com ú n Especificar valores RGB para cada pixel RGB -> intensidades Todos los colores pueden ser expresados como una combinacion de é stos Algunas veces se usa un valor “alpha” de transparencia Estos tres valores se compactan en una palabra de 4 bytes 1 Byte = 256 valores

Graficación12 Bibliotecas Gr á ficas y Paquetes Sistema gr á fico Paquete o biblioteca que nos permite escribir programas independientes de los dispositivos gr á ficos Java Development Kit, Java 2D y Java 3D GL y OpenGL (Graphics Library) X11, DirectX, PHIGS,… y muchos otros

Graficación13 Programas en Java MyProg01 dibuja un rect á ngulo negro dentro de otro blanco En el curso veremos varios ejemplos de programas en Java que ilustran los diferentes conceptos Use un editor de texto (emacs, vi, notepad, etc.) –Compilar con javac MyProg01.java –Ejecutar conjava Myprog01 O cualquier ambiente de desarrollo de Java (Jbuilder, Eclipse, Xcode, etc.)

Graficación14 Fragmento de Código // g es el bojeto gr á fico proporcionado por el sistema… g.setBackground( Color.white ); g.clearRect( 0, 0, getWidth(), getHeight() ); g.setColor( Color.black ); g.fillRect( 10, 10, 20, 20 ); g.drawRect( 0, 0, getWidth()-1, getHeight()-1 ); Se ver á mas de Java y los m é todos gr á ficos a lo largo del curso…

Graficación15 Resumen Breve historia Desarrollo basado en la tecnolog í a Avances significativos recientes debido a capacidad de memoria y procesamiento Nivel de abstracci ó n proporcionado por bibliotecas Dispositivos y modelos de memoria Modelos de color Espacios de dibujo Usaremos JDK y sus bibliotecas