HCI Gráficos asistidos por ordenador Miguel Ángel Pino Vázquez

HCI Gráficos asistidos por ordenador 3.1 MODELOS DE IMÁGENES 3.2 COORDENADAS DEL SISTEMA 3.3 PROPIEDADES VISUALES HUMANAS 3.4 HARDWARE GRÁFICO 3.5 CLASE ABSTRACTA “CANVAS” 3.6 PINTADO 3.7 TEXTO 3.8 MONTAJE 3.9 COLOR

HCI 3.1 MODELOS DE IMÁGENES Modelado de trazos Modelo pixelado Modelo de regiones

HCI 3.1 MODELOS DE IMÁGENES Modelado de trazos -En que consiste ? Modelo en que se declaran unas figuras básicas mediante funciones a las que se le dará valores de entrada a unas funciones... Ejemplo: Línea ((4,5)(9,7) grosor 1) Línea ((4,10)(4,17) grosor 2) Circulo((19,8) radio 3 grosor 3) Inconvenientes: Número limitado de figuras...

HCI 3.1 MODELOS DE IMÁGENES Modelo pixelado -Imágenes divididas en conjunto de pixeles -Tres aspectos importantes para la resolución Número de líneas de píxeles El número de píxeles por línea Número de bits necesarios para representar cada uno de los píxeles Ejemplo:

HCI 3.1 MODELOS DE IMÁGENES Modelo pixelado Ejemplo de aliasing y solución: Representación de una línea en píxeles Desventajas: -Aliasing

HCI 3.1 MODELOS DE IMÁGENES Modelo de regiones Las imágenes se dividen en dos partes: -Perfil -Relleno Ventajas Ahorro de memoria necesaria. El texto se representa como regiones. Desventajas Regiones se convierten en bitmaps al ser tratados por la impresora. Ejemplo:

HCI 3.2 COORDENADAS DE LOS SISTEMAS Coordenadas por defecto Coordenadas físicas Modelos de coordenadas Coordenadas interactivas

HCI 3.2 COORDENADAS DE LOS SISTEMAS Coordenadas por defecto -Son las que se le otorgan a los dispositivos por defecto. -Ponen el centro u origen abajo a la izquierda. Ejemplo: Origen Y la que se usa habitualmente: y x Origen parte superior izquierda x y

HCI 3.2 COORDENADAS DE LOS SISTEMAS Coordenadas físicas -Aparecen problemas en cuanto a la visualización dependiendo de las distintas resoluciones de los dispositivos. -La solución es el paso de pixeles a unidades físicas. -Por ejemplo de pixeles a centímetros o puntos.

HCI 3.2 COORDENADAS DE LOS SISTEMAS Modelos de coordenadas -Los procesadores de texto y de dibujo usan coordenadas, declaradas con unidades físicas estándar. -Si embargo en uno de arquitectura las coordenadas se medirán en metros, pies etc... Por lo tanto hay que escalarlo, estableciendo unos valores para cada unidad. Ejemplo: 22 pies * 10 pixeles = 220 pixeles 1 pie

HCI 3.2 COORDENADAS DE LOS SISTEMAS Coordenadas interactivas -Diferente forma de tratar los puntos entrada o salida. -Por eso usaremos una fórmula para tratar los puntos de entrada, pasándolos a una ventana dentro de una posición particular en la ventana. Modelodepuntos * Escala de pintado *Paso a unidades físicas + origen de la ventana = Puntos de salida

HCI 3.3 PROPIEDADES VISUALES HUMANAS Ratios de diferentes soportes

HCI 3.3 PROPIEDADES VISUALES HUMANAS Ratios de diferentes soportes -Al principio las películas eran toscas. -El movimiento no existía realmente. -Para producirlo hay que presentar las imágenes entre frames por segundo (fps). -Esto implica entorno a los 30 MIPS. Y de ellos 1 millón son para el dispositivo de visualización. -Haciendo cuentas: 1 pixel provoca 3,25 instrucciones. Con un monitor con 640X480 de resolución provocara pixeles y 300 MIPS. Y esto limita a 32,5 instrucciones por pixel. -No son suficientes para tratar video. SOLUCIÓN No siempre tengo que cambiar todos los pixeles del frame, con respecto al anterior. Solo trato los que cambio.

HCI 3.4 HARDWARE GRÁFICO Arquitectura de memoria de frames Tuvo de rayos catódicos Monitor de cristal liquido Dispositivos de copia

HCI 3.4 HARDWARE GRÁFICO Arquitectura de memoria de frames -La CPU genera los puntos que son guardados en la memoria de frames. -Esta actúa como almacén de imágenes que se son usadas en pantalla.

HCI 3.4 HARDWARE GRÁFICO Tubo de rayos catódicos -Conocido por CRT. Examina los puntos de arriba abajo y de izquierda a derecha de la memoria de frames. -Esto lo representa en pantalla mediante 3 brillos diferentes. Rojo, verde y azul. -Hay que refrescar la imagen para evitar para evitar su deterioro. Entorno a Hz (60-75 veces por segundo).

HCI 3.4 HARDWARE GRÁFICO Monitor de cristal líquido -Conocidos por LCD. -Usado en portátiles. -Tiene unos cristales que son traspasados por la luz, cambiando su polarización. -Estos cristales pueden ser transparentes u opacos, y esto es lo que provoca las imágenes.

HCI 3.4 HARDWARE GRÁFICO Dispositivos de copia -Se manejan tan solo a través de la interface de usuario. -Un buen software designa el mismo código para la salida por monitor al de un dispositivo cualquiera de copia. -La diferencia es que la CPU no tiene acceso directo a la memoria en el buffer de frames en el dispositivo de copia. -El primer dispositivo importante fue el ploter, trabajaba con imágenes modelas a trazos. -Las impresoras láser actuales usan el paso de imágenes modeladas mediante regiones y sobre todo imágenes pixeladas.

HCI 3.5 CLASES ABSTRACTAS “CANVAS” Métodos y propiedades

HCI 3.5 CLASES ABSTRACTAS “CANVAS” -“Canvas” es una clase que define los métodos que nosotros usaremos para pintar. En estas clases se define un modelo uniforme para el pintado en 2D y podrá ser usada en cualquiera aplicación. -Una función “Canvas” esta definida de una forma estándar y las diferentes consideraciones, las hacemos en subclases, no es lo mismo imprimir que ver un objeto por pantalla. Cada subclase esta implementada de forma diferente pero la clase de que dependen será idéntica. Tres aspectos a saber de la canvas son: Limitaciones de resolución de los diferentes dispositivos Si es en color o solo escala de grises ese dispositivo Posibilidad de cambio dinámico de la canvas en función de la ventana. La clase VIEW tiene una subclase TSTdPrintHander que pintara sobre la impresora usando la abstracción de VIEW

HCI 3.5 CLASES ABSTRACTAS “CANVAS” Métodos y propiedades -Los métodos pueden ser agrupados dentro del tipo de pintado como de líneas y figuras, dibujando texto, recortado de nuestras figuras y la textura. Las propiedades que son propias de las clases son a las que pueden acceder directamente mediante los métodos definidos en ella, la razón de esta forma de acceso es debido a que cada impresora tendrá unas transformaciones particulares y unos datos necesarios para la impresión.

HCI 3.6 PINTADO Paths Figuras cerradas

HCI 3.6 PINTADO Todas las figuras graficas tienen en común unas pocas propiedades. Línea, anchura de borde, rellenado y textura. (X1,Y1) (X2,Y2) Ejemplo: Usando la clase canvas seria: Rectángulo (X1,Y1,X2,Y2,ancho línea, color línea, color fondo).

HCI 3.6 PINTADO Trabajar con los métodos puede ser muy lioso, por eso se limita el numero de métodos a los siguientes en la clase canvas: Void Canvas::rectángulo (X1,Y1,X2,Y2) Void Canvas::anchodelinea(LW) long Canvas::Get Line Width () Void Canvas::Color de línea(LC) Color Canvas::Get Line Color () Void Canvas::Colorear fondo(FC) Color Canvas::Get Fill Color () Cuando un rectángulo o alguna otra figura, es pintada, los datos de las propiedades comunes son usadas para no tener que repetir información.

HCI 3.6 PINTADO Ejemplo: Si usamos las sentencias siguientes, el resultado sera: Canvas Cnv: Cnv.SetLineWidth (1); Cnv.SetLineColor (Black); Cnv.SetFillColor (White); Cnv.Rectangle (50,50,150,100); Cnv.Rectangle (200,120,250,140); Cnv.SetFillColor (Gray); Cnv.Rectangle (180,20,220,40);

HCI 3.6 PINTADO Paths -Son objetos 1D que se ven el espacio 2D -Las definidas son: *Líneas *Círculos *Arcos *Elipses *Curvas *Unión de diversos objetos de los anteriores LINEAS Son las mas simples de todas las figuras. Basta con 2 puntos de control para definir esa línea. (X1,Y1) (X2,Y2) CIRCULOS El modelo mas simple es el que esta definido por un centro y un radio. También se puede definir por el centro y algún punto dela circunferencia. (Xr,Yr) (Xc,Yc)

HCI 3.6 PINTADO Paths ARCOS Son fragmentos de círculos. Usan las mismas ecuaciones pero se le añaden algunas restricciones, en los valores que se le dan a sus ecuaciones paramétricas. ELIPSES Dos opciones según sean sus ejes paralelos o no a los ejes de coordenadas. En el caso de que sean paralelos se trataran con las ecuaciones de los círculos. Este es el tipo que se ve como ejemplo. A B

HCI 3.6 PINTADO Paths Unión de diversos objetos de los anteriores -Las figuras hasta ahora no cubren todas las necesidades de pintado. Uniendo varias de las anteriores tenemos objetos mas complejos. El inconveniente es que generamos figuras puntiagudas y mas difíciles de tratar. Ejemplo:

HCI 3.6 PINTADO Figuras cerradas Definidas por un borde. El relleno esta definido por los puntos interiores de la figura. Ejemplo:

HCI 3.7 TEXTO Elección de fuente Información de una fuente Pintado de texto Líneas frente a mapa de bits de texto Caracteres seleccionados Cadenas complejas

HCI 3.7 TEXTO Elección de fuente Los tipos de fuentes, en general se encuadran en tres argumentos generales: * La familia de la fuente, define la forma general de la fuente. * El estilo del tipo de letra, Courier o monoespacio. * El tercer control primario de una fuente es el tamaño.

HCI 3.7 TEXTO Elección de fuente Ejemplo de familias de fuentes: Courier (fixer-space font) Avant Garde (Sans serif) Helvetica (Sans serif) Times Roman (serif) Unas llevan serif en las letras que es mas fácil de leer. Otras son monoespacio, etc..

HCI 3.7 TEXTO Elección de fuente Dentro de la familia además tenemos diversos estilos, tal y como se ve a continuación: Times Helvetica Times Bold Helvetica Bold Times italic Helvetica italic Times bold italic Helvetica bold italic

HCI 3.7 TEXTO Elección de fuente El tercer aspecto es el tamaño, y suele estar expresado en puntos. Un punto es 1/72 de una pulgada. Por ejemplo: 9 puntos 10 puntos 12 puntos 14 puntos 18 puntos 24 puntos 36 puntos

HCI 3.7 TEXTO Información de una fuente Hay una información variada que nosotros necesitamos conocer acerca de las fuentes, en el sentido en que el dispositivo de texto aproxima las posiciones sobre la pantalla. Ejemplo: El interlineado que es el espacio que quedará entre las múltiples líneas de un texto.

HCI 3.7 TEXTO Pintado de texto Pasos a seguir: Hay que partir de un punto de comienzo de pintado. Decidir si ese punto es la parte de más a la izquierda de la línea base, u otra posición. Si las palabras de una línea son de tipos diferentes y por lo tanto tamaño las trataremos por tramos separadas por tipos.

HCI 3.7 TEXTO Líneas frente a mapa de bits de fuentes. -El texto se puede tratar como un conjunto de bits. -Inconveniente *Con letras de gran tamaño. *Los espacios también se guardan como bits en blanco. *Mucho espacio de memoria necesario. Ejemplo: A

HCI 3.7 TEXTO Caracteres seleccionados La selección de texto ira en función del numero de líneas. Como se selecciona una línea ya es conocido, y cada carácter es guardado en una posición de una matriz. Para varias líneas, se selecciona la primera, luego se desciende hasta la última y luego se hace una selección para esa última línea como si estuviese sola. Ejemplo de una línea: This is some text to be edited that covers multlipe lines. Ejemplo de varias líneas:

HCI 3.7 TEXTO Cadenas complejas Problemas con la internacionalización de los caracteres, para poder representarlos. Cada idioma tiene símbolos diferentes Ruso -- Alfabeto cirílico Chino – Ideografía. Orientación al escribir Izquierda --- Derecha adreiuqzI --- ahcereD

HCI 3.8 MONTADO Regiones

HCI 3.8 MONTADO Regiones La región mas simple de unión son los rectángulos. La mas común de las definidas en los sistemas de ventanas es la rectilínea. Operaciones sobre regiones El conjunto de operaciones que nosotros estamos interesados unión intersección y diferencia. Clausura o cierre La clausura significa que dado un conjunto,el resultado de alguna combinación de operaciones sobre ese conjunto será miembro de ese mismo conjunto

HCI 3.8 MONTADO Regiones Ejemplo,las regiones rectangulares AyB.Se nota que la unión AUB no es un rectángulo y que la diferencia A- B no es tan poco un rectángulo mientras que la intersección si es un rectángulo. Este ejemplo ilustra que las regiones rectangulares son cerradas con respecto a la intersección pero no lo son respecto a la unión y diferencia.

HCI 3.9 COLOR Modelos de representación del color Sensibilidad humana al color

HCI 3.9 COLOR Modelos de representación del color El modelo de color RGB La mezcla de diferentes longitudes de onda de luz produce una sensación visual de algunos colores intermedios para todos los dispositivos de color. El modelo de color HSV Quizás el modelo HSV representa que dispositivo de salida debemos de usar para producir sensaciones en el ojo humano y por esto no es un buen modelo El modelo de color CMY Se define en términos de mezcla de luz, más bien mezcla de pigmentos. En un conjunto de pigmentos,su color de luz es lo que resulta absorbido. Por ejemplo,una pieza verde de plástico aparece verde no por que este generando luz verde sino por que tiene absorbido la luz roja y azul y tan solo refleja la verde.

HCI 3.9 COLOR Sensibilidad humana al color La retina humana tiene aproximadamente conos y entre y bastoncillos.Estos números significan que los humanos son diez veces mas sensibles a las variaciones en la intensidad que a las variaciones de color de la luz.Esto quiere decir que nuestra habilidad para diferenciar detalles entre dos áreas que tienen tintados diferentes pero con una intensidad similar es mucho peor que la habilidad de distinguir detalles que varían la intensidad en vez del tintado.

HCI Gráficos asistidos por ordenador Miguel Ángel Pino Vázquez