Gráficos asistidos por ordenador

HCI

Gráficos asistidos

por ordenador

Miguel Ángel Pino Vázquez

HCIGrá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

HCI3.1 MODELOS DE IMÁGENES

-3.1.1 Modelado de trazos-3.1.2 Modelo pixelado-3.1.3 Modelo de regiones

HCI

3.1 MODELOS DE IMÁGENES-3.1.1 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...


-3.1.2 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:


-3.1.2 Modelo pixelado

Ejemplo de aliasing y solución:

Representación de una línea en píxeles

Desventajas:

-Aliasing


-3.1.3 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:

HCI3.2 COORDENADAS DE LOS SISTEMAS

-3.2.1 Coordenadas por defecto-3.2.2 Coordenadas físicas-3.2.3 Modelos de coordenadas-3.2.4 Coordenadas interactivas


-3.2.1 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-3.2.2 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.


-3.2.3 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


-3.2.4 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

HCI3.3 PROPIEDADES VISUALES HUMANAS

-3.3.1 Ratios de diferentes soportes

HCI3.3 PROPIEDADES VISUALES HUMANAS -3.3.1 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 20-30 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 307200 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.

HCI3.4 HARDWARE GRÁFICO

-3.4.1 Arquitectura de memoria de frames

-3.4.2 Tuvo de rayos catódicos -3.4.3 Monitor de cristal liquido-3.4.4 Dispositivos de copia

HCI3.4 HARDWARE GRÁFICO -3.4.1 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.


-3.4.2 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 60-75 Hz (60-75 veces por segundo).


-3.4.3 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.


-3.4.4 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”-3.5.1 Métodos y propiedades

HCI3.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

HCI3.5 CLASES ABSTRACTAS “CANVAS”

-3.5.1 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-3.6.1 Paths-3.6.2 Figuras cerradas

HCI3.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).

HCI3.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.

HCI3.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);

HCI3.6 PINTADO

-3.6.1 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)

HCI3.6 PINTADO

-3.6.1 PathsARCOS

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

HCI3.6 PINTADO

-3.6.1 PathsUnió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:

HCI3.6 PINTADO

-3.6.2 Figuras cerradas

Definidas por un borde.

El relleno esta definido por los puntos interiores de la figura.

Ejemplo:

HCI3.7 TEXTO -3.7.1 Elección de fuente -3.7.2 Información de una fuente -3.7.3 Pintado de texto -3.7.4 Líneas frente a mapa de bits de texto -3.7.5 Caracteres seleccionados -3.7.6 Cadenas complejas

HCI3.7 TEXTO

-3.7.1 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.

HCI3.7 TEXTO


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..

HCI3.7 TEXTO


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

HCI3.7 TEXTO


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

HCI3.7 TEXTO

-3.7.2 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.

HCI3.7 TEXTO

-3.7.3 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.

HCI3.7 TEXTO

-3.7.4 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 A

HCI3.7 TEXTO

-3.7.5 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

This is some text to be edited thatcovers multlipe lines. Ejemplo de varias

líneas:

HCI3.7 TEXTO

-3.7.6 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 --- DerechaadreiuqzI --- ahcereD

HCI

3.8 MONTADO -3.8.1 Regiones

HCI3.8 MONTADO

-3.8.1 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 regionesEl 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

HCI3.8 MONTADO

-3.8.1 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.

HCI3.9 COLOR -3.9.1 Modelos de representación del color -3.9.2 Sensibilidad humana al color

HCI3.9 COLOR -3.9.1 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.

HCI3.9 COLOR

-3.9.2 Sensibilidad humana al color

La retina humana tiene aproximadamente 7000000 conos y entre 75000000 y 150000000 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

Gráficos asistidos por ordenador

Documents

Transcript of Gráficos asistidos por ordenador