Gr

1

• Gráficos asistidos por
  ordenador

Miguel Ángel Pino Vázquez
2
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

3
3.1 MODELOS DE IMÁGENES -3.1.1 Modelado de
trazos -3.1.2 Modelo pixelado -3.1.3 Modelo
de regiones
4
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...
5
3.1 MODELOS DE IMÁGENES -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
6
3.1 MODELOS DE IMÁGENES -3.1.2 Modelo pixelado
Desventajas -Aliasing
Ejemplo de aliasing y solución
Representación de una línea en píxeles
7
3.1 MODELOS DE IMÁGENES -3.1.3 Modelo de
regiones
Las imágenes se dividen en dos partes -Perfil -
Relleno
Ejemplo
Ventajas Ahorro de memoria necesaria. El texto
se representa como regiones.
Desventajas Regiones se convierten en bitmaps
al ser tratados por la impresora.
8
3.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
9
3.2 COORDENADAS DE LOS SISTEMAS -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
Y la que se usa habitualmente
y
Origen parte superior izquierda
x
Origen
x
y
10
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.
11
3.2 COORDENADAS DE LOS SISTEMAS -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
12
3.2 COORDENADAS DE LOS SISTEMAS -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
13
3.3 PROPIEDADES VISUALES HUMANAS -3.3.1
Ratios de diferentes soportes
14
3.3 PROPIEDADES VISUALES HUMANAS -3.3.1 Ratios
de diferentes soportes
-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.
-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.
SOLUCIÓN No siempre tengo que cambiar todos los
pixeles del frame, con respecto al anterior. Solo
trato los que cambio.
15
3.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
16
3.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.

17
3.4 HARDWARE GRÁFICO -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).

18
3.4 HARDWARE GRÁFICO -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.
19
3.4 HARDWARE GRÁFICO -3.4.4 Dispositivos 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.
-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.
20
3.5 CLASES ABSTRACTAS CANVAS -3.5.1 Métodos
y propiedades
21
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
22
3.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.

23
3.6 PINTADO -3.6.1 Paths -3.6.2 Figuras
cerradas
24
3.6 PINTADO
Todas las figuras graficas tienen en común unas
pocas propiedades. Línea, anchura de borde,
rellenado y textura.
 
Ejemplo
  (X1,Y1)        

(X2,Y2)
Usando la clase canvas seria Rectángulo
(X1,Y1,X2,Y2,ancho línea, color línea, color
fondo).
25
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
Canvasrectángulo (X1,Y1,X2,Y2) Void
Canvasanchodelinea(LW) long CanvasGet Line
Width () Void CanvasColor de línea(LC) Color
CanvasGet Line Color () Void CanvasColorear
fondo(FC) Color CanvasGet 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.
26
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)
27
3.6 PINTADO -3.6.1 Paths
(X1,Y1)
LINEAS Son las mas simples de todas las
figuras. Basta con 2 puntos de control para
definir esa línea.

• 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

(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)
28
3.6 PINTADO -3.6.1 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
29
3.6 PINTADO -3.6.1 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
30
3.6 PINTADO -3.6.2 Figuras cerradas
Definidas por un borde. El relleno esta definido
por los puntos interiores de la figura.
Ejemplo
31
3.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
32
3.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.
33
3.7 TEXTO -3.7.1 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..
34
3.7 TEXTO -3.7.1 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
35
3.7 TEXTO -3.7.1 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
36
3.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.
37
3.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.
38
3.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.
A A
Ejemplo
39
3.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.
This is some text to be edited that covers
multlipe lines.
This is some text
Ejemplo de una línea
Ejemplo de varias líneas
40
3.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
adreiuqzI --- ahcereD
Izquierda --- Derecha
41
3.8 MONTADO -3.8.1 Regiones
42
3.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 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
43
3.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.
44
3.9 COLOR -3.9.1 Modelos de
representación del color -3.9.2
Sensibilidad humana al color
45
3.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.
46
3.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.
47

• Gráficos asistidos por
  ordenador

Miguel Ángel Pino Vázquez